@vaadin/multi-select-combo-box 25.3.0 → 25.4.0-dev.55bb86e155
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 +151 -9
- package/package.json +15 -15
- package/src/styles/vaadin-multi-select-combo-box-base-styles.js +11 -0
- package/src/styles/vaadin-multi-select-combo-box-select-all-button-base-styles.js +44 -0
- package/src/vaadin-multi-select-combo-box-highlight-mixin.d.ts +19 -0
- package/src/vaadin-multi-select-combo-box-highlight-mixin.js +126 -0
- package/src/vaadin-multi-select-combo-box-mixin.d.ts +22 -2
- package/src/vaadin-multi-select-combo-box-mixin.js +93 -101
- package/src/vaadin-multi-select-combo-box-select-all-button.js +76 -0
- package/src/vaadin-multi-select-combo-box-select-all-mixin.d.ts +26 -0
- package/src/vaadin-multi-select-combo-box-select-all-mixin.js +231 -0
- package/src/vaadin-multi-select-combo-box.d.ts +7 -0
- package/src/vaadin-multi-select-combo-box.js +8 -0
- package/web-types.json +23 -4
- package/web-types.lit.json +10 -3
|
@@ -25,6 +25,7 @@ import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.j
|
|
|
25
25
|
import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
26
26
|
import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
27
27
|
import type { MultiSelectComboBoxMixinClass } from './vaadin-multi-select-combo-box-mixin.js';
|
|
28
|
+
import type { MultiSelectComboBoxSelectAllMixinClass } from './vaadin-multi-select-combo-box-select-all-mixin.js';
|
|
28
29
|
|
|
29
30
|
export { MultiSelectComboBoxI18n, MultiSelectComboBoxRenderer } from './vaadin-multi-select-combo-box-mixin.js';
|
|
30
31
|
|
|
@@ -123,6 +124,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
123
124
|
* `has-label` | Set when the element has a label
|
|
124
125
|
* `has-helper` | Set when the element has helper text or slot
|
|
125
126
|
* `has-error-message` | Set when the element has an error message
|
|
127
|
+
* `has-select-all` | Set when the select all button is shown in the dropdown
|
|
126
128
|
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
127
129
|
* `invalid` | Set when the element is invalid
|
|
128
130
|
* `focused` | Set when the element is focused
|
|
@@ -166,6 +168,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
166
168
|
* | `--vaadin-input-field-helper-font-size` |
|
|
167
169
|
* | `--vaadin-input-field-helper-font-weight` |
|
|
168
170
|
* | `--vaadin-input-field-helper-line-height` |
|
|
171
|
+
* | `--vaadin-input-field-label-aside-gap` |
|
|
172
|
+
* | `--vaadin-input-field-label-aside-text-align` |
|
|
173
|
+
* | `--vaadin-input-field-label-aside-width` |
|
|
169
174
|
* | `--vaadin-input-field-label-color` |
|
|
170
175
|
* | `--vaadin-input-field-label-font-size` |
|
|
171
176
|
* | `--vaadin-input-field-label-font-weight` |
|
|
@@ -194,6 +199,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
194
199
|
*
|
|
195
200
|
* - `<vaadin-multi-select-combo-box-chip>`
|
|
196
201
|
* - `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.
|
|
202
|
+
* - `<vaadin-multi-select-combo-box-select-all-button>`
|
|
197
203
|
*
|
|
198
204
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
199
205
|
*
|
|
@@ -238,6 +244,7 @@ interface MultiSelectComboBox<TItem = ComboBoxDefaultItem>
|
|
|
238
244
|
DelegateStateMixinClass,
|
|
239
245
|
DelegateFocusMixinClass,
|
|
240
246
|
MultiSelectComboBoxMixinClass<TItem>,
|
|
247
|
+
MultiSelectComboBoxSelectAllMixinClass,
|
|
241
248
|
ResizeMixinClass,
|
|
242
249
|
ThemableMixinClass,
|
|
243
250
|
ThemePropertyMixinClass,
|
|
@@ -8,6 +8,7 @@ import './vaadin-multi-select-combo-box-container.js';
|
|
|
8
8
|
import './vaadin-multi-select-combo-box-item.js';
|
|
9
9
|
import './vaadin-multi-select-combo-box-overlay.js';
|
|
10
10
|
import './vaadin-multi-select-combo-box-scroller.js';
|
|
11
|
+
import './vaadin-multi-select-combo-box-select-all-button.js';
|
|
11
12
|
import { html, LitElement } from 'lit';
|
|
12
13
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
13
14
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
@@ -61,6 +62,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
|
|
|
61
62
|
* `has-label` | Set when the element has a label
|
|
62
63
|
* `has-helper` | Set when the element has helper text or slot
|
|
63
64
|
* `has-error-message` | Set when the element has an error message
|
|
65
|
+
* `has-select-all` | Set when the select all button is shown in the dropdown
|
|
64
66
|
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
65
67
|
* `invalid` | Set when the element is invalid
|
|
66
68
|
* `focused` | Set when the element is focused
|
|
@@ -104,6 +106,9 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
|
|
|
104
106
|
* | `--vaadin-input-field-helper-font-size` |
|
|
105
107
|
* | `--vaadin-input-field-helper-font-weight` |
|
|
106
108
|
* | `--vaadin-input-field-helper-line-height` |
|
|
109
|
+
* | `--vaadin-input-field-label-aside-gap` |
|
|
110
|
+
* | `--vaadin-input-field-label-aside-text-align` |
|
|
111
|
+
* | `--vaadin-input-field-label-aside-width` |
|
|
107
112
|
* | `--vaadin-input-field-label-color` |
|
|
108
113
|
* | `--vaadin-input-field-label-font-size` |
|
|
109
114
|
* | `--vaadin-input-field-label-font-weight` |
|
|
@@ -132,6 +137,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
|
|
|
132
137
|
*
|
|
133
138
|
* - `<vaadin-multi-select-combo-box-chip>`
|
|
134
139
|
* - `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.
|
|
140
|
+
* - `<vaadin-multi-select-combo-box-select-all-button>`
|
|
135
141
|
*
|
|
136
142
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
137
143
|
*
|
|
@@ -197,6 +203,7 @@ class MultiSelectComboBox extends MultiSelectComboBoxMixin(
|
|
|
197
203
|
|
|
198
204
|
<vaadin-multi-select-combo-box-overlay
|
|
199
205
|
id="overlay"
|
|
206
|
+
role="application"
|
|
200
207
|
exportparts="overlay, content, loader"
|
|
201
208
|
.owner="${this}"
|
|
202
209
|
.dir="${this.dir}"
|
|
@@ -206,6 +213,7 @@ class MultiSelectComboBox extends MultiSelectComboBoxMixin(
|
|
|
206
213
|
.positionTarget="${this._inputField}"
|
|
207
214
|
no-vertical-overlap
|
|
208
215
|
>
|
|
216
|
+
<slot name="select-all"></slot>
|
|
209
217
|
<slot name="overlay"></slot>
|
|
210
218
|
</vaadin-multi-select-combo-box-overlay>
|
|
211
219
|
`;
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.4.0-dev.55bb86e155",
|
|
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 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.",
|
|
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-select-all` | Set when the select all button is shown in the dropdown\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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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- `<vaadin-multi-select-combo-box-select-all-button>`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-description-ref",
|
|
@@ -289,6 +289,15 @@
|
|
|
289
289
|
]
|
|
290
290
|
}
|
|
291
291
|
},
|
|
292
|
+
{
|
|
293
|
+
"name": "select-all-button-visible",
|
|
294
|
+
"description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
|
|
295
|
+
"value": {
|
|
296
|
+
"type": [
|
|
297
|
+
"boolean"
|
|
298
|
+
]
|
|
299
|
+
}
|
|
300
|
+
},
|
|
292
301
|
{
|
|
293
302
|
"name": "selected-items-on-top",
|
|
294
303
|
"description": "Set to true to group selected items at the top of the overlay.",
|
|
@@ -495,10 +504,11 @@
|
|
|
495
504
|
},
|
|
496
505
|
{
|
|
497
506
|
"name": "i18n",
|
|
498
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
507
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n // Screen reader announcement on clear button click.\n cleared: 'Selection cleared',\n // Screen reader announcement when a chip is focused.\n focused: ' focused. Press Backspace to remove',\n // Screen reader announcement when item is selected.\n selected: 'added to selection',\n // Screen reader announcement when item is deselected.\n deselected: 'removed from selection',\n // Screen reader announcement of the selected items count.\n // {count} is replaced with the actual count of items.\n total: '{count} items selected',\n // Text of the select all button when no filter is set.\n selectAll: 'Select All',\n // Text of the select all button when no filter is set\n // and all items are selected.\n deselectAll: 'Deselect All',\n // Text of the select all button when a filter is set.\n selectFiltered: 'Select Filtered',\n // Text of the select all button when a filter is set\n // and all items matching the filter are selected.\n deselectFiltered: 'Deselect Filtered',\n}\n```",
|
|
499
508
|
"value": {
|
|
500
509
|
"type": [
|
|
501
|
-
"Object"
|
|
510
|
+
"Object",
|
|
511
|
+
"undefined"
|
|
502
512
|
]
|
|
503
513
|
}
|
|
504
514
|
},
|
|
@@ -675,6 +685,15 @@
|
|
|
675
685
|
]
|
|
676
686
|
}
|
|
677
687
|
},
|
|
688
|
+
{
|
|
689
|
+
"name": "selectAllButtonVisible",
|
|
690
|
+
"description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
|
|
691
|
+
"value": {
|
|
692
|
+
"type": [
|
|
693
|
+
"boolean"
|
|
694
|
+
]
|
|
695
|
+
}
|
|
696
|
+
},
|
|
678
697
|
{
|
|
679
698
|
"name": "selectedItems",
|
|
680
699
|
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.4.0-dev.55bb86e155",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-multi-select-combo-box",
|
|
19
|
-
"description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|----------------\n`chips` | The element that wraps 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.",
|
|
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-select-all` | Set when the select all button is shown in the dropdown\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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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- `<vaadin-multi-select-combo-box-select-all-button>`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
"name": ".i18n",
|
|
150
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
150
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n // Screen reader announcement on clear button click.\n cleared: 'Selection cleared',\n // Screen reader announcement when a chip is focused.\n focused: ' focused. Press Backspace to remove',\n // Screen reader announcement when item is selected.\n selected: 'added to selection',\n // Screen reader announcement when item is deselected.\n deselected: 'removed from selection',\n // Screen reader announcement of the selected items count.\n // {count} is replaced with the actual count of items.\n total: '{count} items selected',\n // Text of the select all button when no filter is set.\n selectAll: 'Select All',\n // Text of the select all button when no filter is set\n // and all items are selected.\n deselectAll: 'Deselect All',\n // Text of the select all button when a filter is set.\n selectFiltered: 'Select Filtered',\n // Text of the select all button when a filter is set\n // and all items matching the filter are selected.\n deselectFiltered: 'Deselect Filtered',\n}\n```",
|
|
151
151
|
"value": {
|
|
152
152
|
"kind": "expression"
|
|
153
153
|
}
|
|
@@ -285,6 +285,13 @@
|
|
|
285
285
|
"kind": "expression"
|
|
286
286
|
}
|
|
287
287
|
},
|
|
288
|
+
{
|
|
289
|
+
"name": "?selectAllButtonVisible",
|
|
290
|
+
"description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
|
|
291
|
+
"value": {
|
|
292
|
+
"kind": "expression"
|
|
293
|
+
}
|
|
294
|
+
},
|
|
288
295
|
{
|
|
289
296
|
"name": ".selectedItems",
|
|
290
297
|
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|