@vaadin/multi-select-combo-box 23.2.0-dev.48e5e3967 → 23.2.0-rc1
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/README.md +0 -2
- package/package.json +17 -11
- package/src/lit/renderer-directives.d.ts +4 -4
- package/src/vaadin-multi-select-combo-box-internal.js +0 -1
- package/src/vaadin-multi-select-combo-box.d.ts +34 -19
- package/src/vaadin-multi-select-combo-box.js +45 -29
- package/web-types.json +662 -0
- package/web-types.lit.json +279 -0
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/multi-select-combo-box",
|
|
3
|
-
"version": "23.2.0-
|
|
3
|
+
"version": "23.2.0-rc1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
"src",
|
|
25
25
|
"theme",
|
|
26
26
|
"vaadin-*.d.ts",
|
|
27
|
-
"vaadin-*.js"
|
|
27
|
+
"vaadin-*.js",
|
|
28
|
+
"web-types.json",
|
|
29
|
+
"web-types.lit.json"
|
|
28
30
|
],
|
|
29
31
|
"keywords": [
|
|
30
32
|
"Vaadin",
|
|
@@ -35,19 +37,23 @@
|
|
|
35
37
|
],
|
|
36
38
|
"dependencies": {
|
|
37
39
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/combo-box": "23.2.0-
|
|
39
|
-
"@vaadin/component-base": "23.2.0-
|
|
40
|
-
"@vaadin/field-base": "23.2.0-
|
|
41
|
-
"@vaadin/input-container": "23.2.0-
|
|
42
|
-
"@vaadin/lit-renderer": "23.2.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "23.2.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0-
|
|
40
|
+
"@vaadin/combo-box": "23.2.0-rc1",
|
|
41
|
+
"@vaadin/component-base": "23.2.0-rc1",
|
|
42
|
+
"@vaadin/field-base": "23.2.0-rc1",
|
|
43
|
+
"@vaadin/input-container": "23.2.0-rc1",
|
|
44
|
+
"@vaadin/lit-renderer": "23.2.0-rc1",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-rc1",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "23.2.0-rc1",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-rc1"
|
|
46
48
|
},
|
|
47
49
|
"devDependencies": {
|
|
48
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
51
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
50
52
|
"sinon": "^13.0.2"
|
|
51
53
|
},
|
|
52
|
-
"
|
|
54
|
+
"web-types": [
|
|
55
|
+
"web-types.json",
|
|
56
|
+
"web-types.lit.json"
|
|
57
|
+
],
|
|
58
|
+
"gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
|
|
53
59
|
}
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { TemplateResult } from 'lit';
|
|
7
|
-
import { DirectiveResult } from 'lit/directive.js';
|
|
8
|
-
import { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
|
|
6
|
+
import type { TemplateResult } from 'lit';
|
|
7
|
+
import type { DirectiveResult } from 'lit/directive.js';
|
|
8
|
+
import type { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
|
|
9
9
|
import { LitRendererDirective } from '@vaadin/lit-renderer';
|
|
10
|
-
import { MultiSelectComboBox } from '../vaadin-multi-select-combo-box.js';
|
|
10
|
+
import type { MultiSelectComboBox } from '../vaadin-multi-select-combo-box.js';
|
|
11
11
|
|
|
12
12
|
export type MultiSelectComboBoxLitRenderer<TItem> = (
|
|
13
13
|
item: TItem,
|
|
@@ -38,7 +38,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
|
|
|
38
38
|
|
|
39
39
|
<vaadin-multi-select-combo-box-overlay
|
|
40
40
|
id="overlay"
|
|
41
|
-
hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
|
|
42
41
|
opened="[[_overlayOpened]]"
|
|
43
42
|
loading$="[[loading]]"
|
|
44
43
|
theme$="[[_theme]]"
|
|
@@ -3,26 +3,27 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2022 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import {
|
|
6
|
+
import type {
|
|
7
7
|
ComboBoxDataProvider,
|
|
8
8
|
ComboBoxDefaultItem,
|
|
9
9
|
ComboBoxItemModel,
|
|
10
10
|
} from '@vaadin/combo-box/src/vaadin-combo-box.js';
|
|
11
|
-
import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
|
|
12
|
-
import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
|
|
13
|
-
import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
|
|
14
|
-
import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
|
|
15
|
-
import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
16
|
-
import { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
|
|
17
|
-
import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
|
|
18
|
-
import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
|
|
19
|
-
import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
|
|
20
|
-
import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
21
|
-
import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
|
|
22
|
-
import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
23
|
-
import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
24
|
-
import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
|
|
25
|
-
import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
|
+
import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
|
|
12
|
+
import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
|
|
13
|
+
import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
|
|
14
|
+
import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
|
|
15
|
+
import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
16
|
+
import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
|
|
17
|
+
import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
|
|
18
|
+
import type { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
|
|
19
|
+
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
|
|
20
|
+
import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
21
|
+
import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
|
|
22
|
+
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
23
|
+
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
24
|
+
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
|
|
25
|
+
import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
26
|
+
import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
26
27
|
|
|
27
28
|
export type MultiSelectComboBoxRenderer<TItem> = (
|
|
28
29
|
root: HTMLElement,
|
|
@@ -65,6 +66,11 @@ export type MultiSelectComboBoxInvalidChangedEvent = CustomEvent<{ value: boolea
|
|
|
65
66
|
*/
|
|
66
67
|
export type MultiSelectComboBoxSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
|
|
67
68
|
|
|
69
|
+
/**
|
|
70
|
+
* Fired whenever the field is validated.
|
|
71
|
+
*/
|
|
72
|
+
export type MultiSelectComboBoxValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
73
|
+
|
|
68
74
|
export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap {
|
|
69
75
|
change: MultiSelectComboBoxChangeEvent<TItem>;
|
|
70
76
|
|
|
@@ -75,6 +81,8 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
75
81
|
'invalid-changed': MultiSelectComboBoxInvalidChangedEvent;
|
|
76
82
|
|
|
77
83
|
'selected-items-changed': MultiSelectComboBoxSelectedItemsChangedEvent<TItem>;
|
|
84
|
+
|
|
85
|
+
validated: MultiSelectComboBoxValidatedEvent;
|
|
78
86
|
}
|
|
79
87
|
|
|
80
88
|
/**
|
|
@@ -154,6 +162,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
154
162
|
* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
|
|
155
163
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
156
164
|
* @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
|
|
165
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
157
166
|
*/
|
|
158
167
|
declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
|
|
159
168
|
/**
|
|
@@ -295,6 +304,11 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
|
|
|
295
304
|
*/
|
|
296
305
|
clearCache(): void;
|
|
297
306
|
|
|
307
|
+
/**
|
|
308
|
+
* Clears the selected items.
|
|
309
|
+
*/
|
|
310
|
+
clear(): void;
|
|
311
|
+
|
|
298
312
|
/**
|
|
299
313
|
* Requests an update for the content of items.
|
|
300
314
|
* While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
|
|
@@ -306,13 +320,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
|
|
|
306
320
|
addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
|
|
307
321
|
type: K,
|
|
308
322
|
listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
|
|
309
|
-
options?:
|
|
323
|
+
options?: AddEventListenerOptions | boolean,
|
|
310
324
|
): void;
|
|
311
325
|
|
|
312
326
|
removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
|
|
313
327
|
type: K,
|
|
314
328
|
listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
|
|
315
|
-
options?:
|
|
329
|
+
options?: EventListenerOptions | boolean,
|
|
316
330
|
): void;
|
|
317
331
|
}
|
|
318
332
|
|
|
@@ -320,7 +334,7 @@ interface MultiSelectComboBox
|
|
|
320
334
|
extends ValidateMixinClass,
|
|
321
335
|
LabelMixinClass,
|
|
322
336
|
KeyboardMixinClass,
|
|
323
|
-
InputMixinClass,
|
|
337
|
+
Omit<InputMixinClass, 'value'>,
|
|
324
338
|
InputControlMixinClass,
|
|
325
339
|
InputConstraintsMixinClass,
|
|
326
340
|
FocusMixinClass,
|
|
@@ -330,6 +344,7 @@ interface MultiSelectComboBox
|
|
|
330
344
|
DelegateFocusMixinClass,
|
|
331
345
|
ResizeMixinClass,
|
|
332
346
|
ThemableMixinClass,
|
|
347
|
+
ThemePropertyMixinClass,
|
|
333
348
|
ElementMixinClass,
|
|
334
349
|
ControllerMixinClass {}
|
|
335
350
|
|
|
@@ -132,6 +132,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
|
|
|
132
132
|
* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
|
|
133
133
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
134
134
|
* @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
|
|
135
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
135
136
|
*
|
|
136
137
|
* @extends HTMLElement
|
|
137
138
|
* @mixes ElementMixin
|
|
@@ -197,7 +198,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
197
198
|
></vaadin-multi-select-combo-box-chip>
|
|
198
199
|
<div id="chips" part="chips" slot="prefix"></div>
|
|
199
200
|
<slot name="input"></slot>
|
|
200
|
-
<div
|
|
201
|
+
<div
|
|
202
|
+
id="clearButton"
|
|
203
|
+
part="clear-button"
|
|
204
|
+
slot="suffix"
|
|
205
|
+
on-touchend="_onClearButtonTouchend"
|
|
206
|
+
aria-hidden="true"
|
|
207
|
+
></div>
|
|
201
208
|
<div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
|
|
202
209
|
</vaadin-multi-select-combo-box-container>
|
|
203
210
|
</vaadin-multi-select-combo-box-internal>
|
|
@@ -425,6 +432,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
425
432
|
*/
|
|
426
433
|
filteredItems: Array,
|
|
427
434
|
|
|
435
|
+
/** @private */
|
|
436
|
+
value: {
|
|
437
|
+
type: String,
|
|
438
|
+
},
|
|
439
|
+
|
|
428
440
|
/** @private */
|
|
429
441
|
__effectiveItems: {
|
|
430
442
|
type: Array,
|
|
@@ -437,12 +449,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
437
449
|
computed: '__computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly)',
|
|
438
450
|
},
|
|
439
451
|
|
|
440
|
-
/** @protected */
|
|
441
|
-
_hasValue: {
|
|
442
|
-
type: Boolean,
|
|
443
|
-
value: false,
|
|
444
|
-
},
|
|
445
|
-
|
|
446
452
|
/** @private */
|
|
447
453
|
_overflowItems: {
|
|
448
454
|
type: Array,
|
|
@@ -509,6 +515,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
509
515
|
return this.required && !this.readonly ? this._hasValue : true;
|
|
510
516
|
}
|
|
511
517
|
|
|
518
|
+
/**
|
|
519
|
+
* Clears the selected items.
|
|
520
|
+
*/
|
|
521
|
+
clear() {
|
|
522
|
+
this.__updateSelection([]);
|
|
523
|
+
|
|
524
|
+
announce(this.i18n.cleared);
|
|
525
|
+
}
|
|
526
|
+
|
|
512
527
|
/**
|
|
513
528
|
* Clears the cached pages and reloads data from data provider when needed.
|
|
514
529
|
*/
|
|
@@ -568,21 +583,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
568
583
|
this._focusedChipIndex = -1;
|
|
569
584
|
this.validate();
|
|
570
585
|
}
|
|
571
|
-
|
|
572
|
-
// Propagate focused attribute to internal combo box
|
|
573
|
-
if (this.$ && this.$.comboBox) {
|
|
574
|
-
this.$.comboBox.toggleAttribute('focused', focused);
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
/**
|
|
579
|
-
* Override method inherited from `InputMixin`
|
|
580
|
-
* to keep attribute after clearing the input.
|
|
581
|
-
* @protected
|
|
582
|
-
* @override
|
|
583
|
-
*/
|
|
584
|
-
_toggleHasValue() {
|
|
585
|
-
super._toggleHasValue(this._hasValue);
|
|
586
586
|
}
|
|
587
587
|
|
|
588
588
|
/**
|
|
@@ -671,9 +671,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
671
671
|
|
|
672
672
|
/** @private */
|
|
673
673
|
_selectedItemsChanged(selectedItems) {
|
|
674
|
-
this.
|
|
675
|
-
|
|
676
|
-
this._toggleHasValue();
|
|
674
|
+
this._toggleHasValue(this._hasValue);
|
|
677
675
|
|
|
678
676
|
// Use placeholder for announcing items
|
|
679
677
|
if (this._hasValue) {
|
|
@@ -762,7 +760,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
762
760
|
const itemsCopy = [...this.selectedItems];
|
|
763
761
|
itemsCopy.splice(itemsCopy.indexOf(item), 1);
|
|
764
762
|
this.__updateSelection(itemsCopy);
|
|
765
|
-
this.
|
|
763
|
+
const itemLabel = this._getItemLabel(item);
|
|
764
|
+
this.__announceItem(itemLabel, false, itemsCopy.length);
|
|
766
765
|
}
|
|
767
766
|
|
|
768
767
|
/** @private */
|
|
@@ -885,6 +884,14 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
885
884
|
this._overflowItems = items;
|
|
886
885
|
}
|
|
887
886
|
|
|
887
|
+
/** @private */
|
|
888
|
+
_onClearButtonTouchend(event) {
|
|
889
|
+
// Cancel the following click and focus events
|
|
890
|
+
event.preventDefault();
|
|
891
|
+
|
|
892
|
+
this.clear();
|
|
893
|
+
}
|
|
894
|
+
|
|
888
895
|
/**
|
|
889
896
|
* Override method inherited from `InputControlMixin` and clear items.
|
|
890
897
|
* @protected
|
|
@@ -893,9 +900,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
893
900
|
_onClearButtonClick(event) {
|
|
894
901
|
event.stopPropagation();
|
|
895
902
|
|
|
896
|
-
this.
|
|
897
|
-
|
|
898
|
-
announce(this.i18n.cleared);
|
|
903
|
+
this.clear();
|
|
899
904
|
}
|
|
900
905
|
|
|
901
906
|
/**
|
|
@@ -1100,6 +1105,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
1100
1105
|
__computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly) {
|
|
1101
1106
|
return !items && readonly ? selectedItems : filteredItems;
|
|
1102
1107
|
}
|
|
1108
|
+
|
|
1109
|
+
/**
|
|
1110
|
+
* Override a method from `InputMixin` to
|
|
1111
|
+
* compute the presence of value based on `selectedItems`.
|
|
1112
|
+
*
|
|
1113
|
+
* @protected
|
|
1114
|
+
* @override
|
|
1115
|
+
*/
|
|
1116
|
+
get _hasValue() {
|
|
1117
|
+
return this.selectedItems && this.selectedItems.length > 0;
|
|
1118
|
+
}
|
|
1103
1119
|
}
|
|
1104
1120
|
|
|
1105
1121
|
customElements.define(MultiSelectComboBox.is, MultiSelectComboBox);
|
package/web-types.json
ADDED
|
@@ -0,0 +1,662 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
+
"version": "23.2.0-rc1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
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 chips for selected items\n`chip` | Chip shown for every selected item\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`overflow` | The chip shown when component width is not enough to fit all chips\n`overflow-one` | Set on the overflow chip when only one chip does not fit\n`overflow-two` | Set on the overflow chip when two chips do not fit\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------------|-----------------\n`disabled` | Set to a disabled element\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`loading` | Set when loading items from the data provider\n`opened` | Set when the dropdown is open\n`readonly` | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "autofocus",
|
|
26
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "label",
|
|
37
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"string",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "invalid",
|
|
48
|
+
"description": "Set to true when the field is invalid.",
|
|
49
|
+
"value": {
|
|
50
|
+
"type": [
|
|
51
|
+
"boolean",
|
|
52
|
+
"null",
|
|
53
|
+
"undefined"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "required",
|
|
59
|
+
"description": "Specifies that the user must fill in a value.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"boolean",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "error-message",
|
|
70
|
+
"description": "Error to show when the field is invalid.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"string",
|
|
74
|
+
"null",
|
|
75
|
+
"undefined"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "helper-text",
|
|
81
|
+
"description": "String used for the helper text.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "value",
|
|
92
|
+
"description": "The value of the field.",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"string",
|
|
96
|
+
"null",
|
|
97
|
+
"undefined"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "allowed-char-pattern",
|
|
103
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
104
|
+
"value": {
|
|
105
|
+
"type": [
|
|
106
|
+
"string",
|
|
107
|
+
"null",
|
|
108
|
+
"undefined"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "autoselect",
|
|
114
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": [
|
|
117
|
+
"boolean",
|
|
118
|
+
"null",
|
|
119
|
+
"undefined"
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "clear-button-visible",
|
|
125
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
126
|
+
"value": {
|
|
127
|
+
"type": [
|
|
128
|
+
"boolean",
|
|
129
|
+
"null",
|
|
130
|
+
"undefined"
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": "name",
|
|
136
|
+
"description": "The name of this field.",
|
|
137
|
+
"value": {
|
|
138
|
+
"type": [
|
|
139
|
+
"string",
|
|
140
|
+
"null",
|
|
141
|
+
"undefined"
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"name": "placeholder",
|
|
147
|
+
"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.",
|
|
148
|
+
"value": {
|
|
149
|
+
"type": [
|
|
150
|
+
"string",
|
|
151
|
+
"null",
|
|
152
|
+
"undefined"
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"name": "readonly",
|
|
158
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
159
|
+
"value": {
|
|
160
|
+
"type": [
|
|
161
|
+
"boolean",
|
|
162
|
+
"null",
|
|
163
|
+
"undefined"
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "title",
|
|
169
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
170
|
+
"value": {
|
|
171
|
+
"type": [
|
|
172
|
+
"string",
|
|
173
|
+
"null",
|
|
174
|
+
"undefined"
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "auto-open-disabled",
|
|
180
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
181
|
+
"value": {
|
|
182
|
+
"type": [
|
|
183
|
+
"boolean",
|
|
184
|
+
"null",
|
|
185
|
+
"undefined"
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"name": "item-label-path",
|
|
191
|
+
"description": "The item property used for a visual representation of the item.",
|
|
192
|
+
"value": {
|
|
193
|
+
"type": [
|
|
194
|
+
"string",
|
|
195
|
+
"null",
|
|
196
|
+
"undefined"
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"name": "item-value-path",
|
|
202
|
+
"description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
|
|
203
|
+
"value": {
|
|
204
|
+
"type": [
|
|
205
|
+
"string",
|
|
206
|
+
"null",
|
|
207
|
+
"undefined"
|
|
208
|
+
]
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "item-id-path",
|
|
213
|
+
"description": "Path for the id of the item, used to detect whether the item is selected.",
|
|
214
|
+
"value": {
|
|
215
|
+
"type": [
|
|
216
|
+
"string",
|
|
217
|
+
"null",
|
|
218
|
+
"undefined"
|
|
219
|
+
]
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"name": "loading",
|
|
224
|
+
"description": "True when loading items from the data provider, false otherwise.",
|
|
225
|
+
"value": {
|
|
226
|
+
"type": [
|
|
227
|
+
"boolean",
|
|
228
|
+
"null",
|
|
229
|
+
"undefined"
|
|
230
|
+
]
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
"name": "opened",
|
|
235
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
236
|
+
"value": {
|
|
237
|
+
"type": [
|
|
238
|
+
"boolean",
|
|
239
|
+
"null",
|
|
240
|
+
"undefined"
|
|
241
|
+
]
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"name": "size",
|
|
246
|
+
"description": "Total number of items.",
|
|
247
|
+
"value": {
|
|
248
|
+
"type": [
|
|
249
|
+
"number",
|
|
250
|
+
"null",
|
|
251
|
+
"undefined"
|
|
252
|
+
]
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"name": "page-size",
|
|
257
|
+
"description": "Number of items fetched at a time from the data provider.",
|
|
258
|
+
"value": {
|
|
259
|
+
"type": [
|
|
260
|
+
"number",
|
|
261
|
+
"null",
|
|
262
|
+
"undefined"
|
|
263
|
+
]
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"name": "allow-custom-value",
|
|
268
|
+
"description": "When true, the user can input a value that is not present in the items list.",
|
|
269
|
+
"value": {
|
|
270
|
+
"type": [
|
|
271
|
+
"boolean",
|
|
272
|
+
"null",
|
|
273
|
+
"undefined"
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"name": "filter",
|
|
279
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
280
|
+
"value": {
|
|
281
|
+
"type": [
|
|
282
|
+
"string",
|
|
283
|
+
"null",
|
|
284
|
+
"undefined"
|
|
285
|
+
]
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "theme",
|
|
290
|
+
"description": "The theme variants to apply to the component.",
|
|
291
|
+
"value": {
|
|
292
|
+
"type": [
|
|
293
|
+
"string",
|
|
294
|
+
"null",
|
|
295
|
+
"undefined"
|
|
296
|
+
]
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
],
|
|
300
|
+
"js": {
|
|
301
|
+
"properties": [
|
|
302
|
+
{
|
|
303
|
+
"name": "disabled",
|
|
304
|
+
"description": "If true, the user cannot interact with this element.",
|
|
305
|
+
"value": {
|
|
306
|
+
"type": [
|
|
307
|
+
"boolean",
|
|
308
|
+
"null",
|
|
309
|
+
"undefined"
|
|
310
|
+
]
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"name": "autofocus",
|
|
315
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
316
|
+
"value": {
|
|
317
|
+
"type": [
|
|
318
|
+
"boolean",
|
|
319
|
+
"null",
|
|
320
|
+
"undefined"
|
|
321
|
+
]
|
|
322
|
+
}
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "label",
|
|
326
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
327
|
+
"value": {
|
|
328
|
+
"type": [
|
|
329
|
+
"string",
|
|
330
|
+
"null",
|
|
331
|
+
"undefined"
|
|
332
|
+
]
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"name": "invalid",
|
|
337
|
+
"description": "Set to true when the field is invalid.",
|
|
338
|
+
"value": {
|
|
339
|
+
"type": [
|
|
340
|
+
"boolean",
|
|
341
|
+
"null",
|
|
342
|
+
"undefined"
|
|
343
|
+
]
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "required",
|
|
348
|
+
"description": "Specifies that the user must fill in a value.",
|
|
349
|
+
"value": {
|
|
350
|
+
"type": [
|
|
351
|
+
"boolean",
|
|
352
|
+
"null",
|
|
353
|
+
"undefined"
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"name": "errorMessage",
|
|
359
|
+
"description": "Error to show when the field is invalid.",
|
|
360
|
+
"value": {
|
|
361
|
+
"type": [
|
|
362
|
+
"string",
|
|
363
|
+
"null",
|
|
364
|
+
"undefined"
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "helperText",
|
|
370
|
+
"description": "String used for the helper text.",
|
|
371
|
+
"value": {
|
|
372
|
+
"type": [
|
|
373
|
+
"string",
|
|
374
|
+
"null",
|
|
375
|
+
"undefined"
|
|
376
|
+
]
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"name": "allowedCharPattern",
|
|
381
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
382
|
+
"value": {
|
|
383
|
+
"type": [
|
|
384
|
+
"string",
|
|
385
|
+
"null",
|
|
386
|
+
"undefined"
|
|
387
|
+
]
|
|
388
|
+
}
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "autoselect",
|
|
392
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
393
|
+
"value": {
|
|
394
|
+
"type": [
|
|
395
|
+
"boolean",
|
|
396
|
+
"null",
|
|
397
|
+
"undefined"
|
|
398
|
+
]
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "clearButtonVisible",
|
|
403
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
404
|
+
"value": {
|
|
405
|
+
"type": [
|
|
406
|
+
"boolean",
|
|
407
|
+
"null",
|
|
408
|
+
"undefined"
|
|
409
|
+
]
|
|
410
|
+
}
|
|
411
|
+
},
|
|
412
|
+
{
|
|
413
|
+
"name": "name",
|
|
414
|
+
"description": "The name of this field.",
|
|
415
|
+
"value": {
|
|
416
|
+
"type": [
|
|
417
|
+
"string",
|
|
418
|
+
"null",
|
|
419
|
+
"undefined"
|
|
420
|
+
]
|
|
421
|
+
}
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
"name": "placeholder",
|
|
425
|
+
"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.",
|
|
426
|
+
"value": {
|
|
427
|
+
"type": [
|
|
428
|
+
"string",
|
|
429
|
+
"null",
|
|
430
|
+
"undefined"
|
|
431
|
+
]
|
|
432
|
+
}
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"name": "readonly",
|
|
436
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
437
|
+
"value": {
|
|
438
|
+
"type": [
|
|
439
|
+
"boolean",
|
|
440
|
+
"null",
|
|
441
|
+
"undefined"
|
|
442
|
+
]
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"name": "title",
|
|
447
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
448
|
+
"value": {
|
|
449
|
+
"type": [
|
|
450
|
+
"string",
|
|
451
|
+
"null",
|
|
452
|
+
"undefined"
|
|
453
|
+
]
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
"name": "autoOpenDisabled",
|
|
458
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
459
|
+
"value": {
|
|
460
|
+
"type": [
|
|
461
|
+
"boolean",
|
|
462
|
+
"null",
|
|
463
|
+
"undefined"
|
|
464
|
+
]
|
|
465
|
+
}
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"name": "items",
|
|
469
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
470
|
+
"value": {
|
|
471
|
+
"type": [
|
|
472
|
+
"Array",
|
|
473
|
+
"null",
|
|
474
|
+
"undefined"
|
|
475
|
+
]
|
|
476
|
+
}
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"name": "itemLabelPath",
|
|
480
|
+
"description": "The item property used for a visual representation of the item.",
|
|
481
|
+
"value": {
|
|
482
|
+
"type": [
|
|
483
|
+
"string",
|
|
484
|
+
"null",
|
|
485
|
+
"undefined"
|
|
486
|
+
]
|
|
487
|
+
}
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"name": "itemValuePath",
|
|
491
|
+
"description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
|
|
492
|
+
"value": {
|
|
493
|
+
"type": [
|
|
494
|
+
"string",
|
|
495
|
+
"null",
|
|
496
|
+
"undefined"
|
|
497
|
+
]
|
|
498
|
+
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"name": "itemIdPath",
|
|
502
|
+
"description": "Path for the id of the item, used to detect whether the item is selected.",
|
|
503
|
+
"value": {
|
|
504
|
+
"type": [
|
|
505
|
+
"string",
|
|
506
|
+
"null",
|
|
507
|
+
"undefined"
|
|
508
|
+
]
|
|
509
|
+
}
|
|
510
|
+
},
|
|
511
|
+
{
|
|
512
|
+
"name": "i18n",
|
|
513
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\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}\n```",
|
|
514
|
+
"value": {
|
|
515
|
+
"type": [
|
|
516
|
+
"MultiSelectComboBoxI18n"
|
|
517
|
+
]
|
|
518
|
+
}
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
"name": "loading",
|
|
522
|
+
"description": "True when loading items from the data provider, false otherwise.",
|
|
523
|
+
"value": {
|
|
524
|
+
"type": [
|
|
525
|
+
"boolean",
|
|
526
|
+
"null",
|
|
527
|
+
"undefined"
|
|
528
|
+
]
|
|
529
|
+
}
|
|
530
|
+
},
|
|
531
|
+
{
|
|
532
|
+
"name": "selectedItems",
|
|
533
|
+
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|
|
534
|
+
"value": {
|
|
535
|
+
"type": [
|
|
536
|
+
"Array",
|
|
537
|
+
"null",
|
|
538
|
+
"undefined"
|
|
539
|
+
]
|
|
540
|
+
}
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "opened",
|
|
544
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
545
|
+
"value": {
|
|
546
|
+
"type": [
|
|
547
|
+
"boolean",
|
|
548
|
+
"null",
|
|
549
|
+
"undefined"
|
|
550
|
+
]
|
|
551
|
+
}
|
|
552
|
+
},
|
|
553
|
+
{
|
|
554
|
+
"name": "size",
|
|
555
|
+
"description": "Total number of items.",
|
|
556
|
+
"value": {
|
|
557
|
+
"type": [
|
|
558
|
+
"number",
|
|
559
|
+
"null",
|
|
560
|
+
"undefined"
|
|
561
|
+
]
|
|
562
|
+
}
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"name": "pageSize",
|
|
566
|
+
"description": "Number of items fetched at a time from the data provider.",
|
|
567
|
+
"value": {
|
|
568
|
+
"type": [
|
|
569
|
+
"number",
|
|
570
|
+
"null",
|
|
571
|
+
"undefined"
|
|
572
|
+
]
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"name": "dataProvider",
|
|
577
|
+
"description": "Function that provides items lazily. Receives two arguments:\n\n- `params` - Object with the following properties:\n - `params.page` Requested page index\n - `params.pageSize` Current page size\n - `params.filter` Currently applied filter\n\n- `callback(items, size)` - Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items.",
|
|
578
|
+
"value": {
|
|
579
|
+
"type": [
|
|
580
|
+
"Object",
|
|
581
|
+
"null",
|
|
582
|
+
"undefined"
|
|
583
|
+
]
|
|
584
|
+
}
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
"name": "allowCustomValue",
|
|
588
|
+
"description": "When true, the user can input a value that is not present in the items list.",
|
|
589
|
+
"value": {
|
|
590
|
+
"type": [
|
|
591
|
+
"boolean",
|
|
592
|
+
"null",
|
|
593
|
+
"undefined"
|
|
594
|
+
]
|
|
595
|
+
}
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"name": "renderer",
|
|
599
|
+
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.index` The index of the rendered item.\n - `model.item` The item.",
|
|
600
|
+
"value": {
|
|
601
|
+
"type": [
|
|
602
|
+
"Function",
|
|
603
|
+
"null",
|
|
604
|
+
"undefined"
|
|
605
|
+
]
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
"name": "filter",
|
|
610
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
611
|
+
"value": {
|
|
612
|
+
"type": [
|
|
613
|
+
"string",
|
|
614
|
+
"null",
|
|
615
|
+
"undefined"
|
|
616
|
+
]
|
|
617
|
+
}
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "filteredItems",
|
|
621
|
+
"description": "A subset of items, filtered based on the user input. Filtered items\ncan be assigned directly to omit the internal filtering functionality.\nThe items can be of either `String` or `Object` type.",
|
|
622
|
+
"value": {
|
|
623
|
+
"type": [
|
|
624
|
+
"Array",
|
|
625
|
+
"null",
|
|
626
|
+
"undefined"
|
|
627
|
+
]
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
],
|
|
631
|
+
"events": [
|
|
632
|
+
{
|
|
633
|
+
"name": "validated",
|
|
634
|
+
"description": "Fired whenever the field is validated."
|
|
635
|
+
},
|
|
636
|
+
{
|
|
637
|
+
"name": "change",
|
|
638
|
+
"description": "Fired when the user commits a value change."
|
|
639
|
+
},
|
|
640
|
+
{
|
|
641
|
+
"name": "input",
|
|
642
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
|
|
643
|
+
},
|
|
644
|
+
{
|
|
645
|
+
"name": "selected-items-changed",
|
|
646
|
+
"description": "Fired when the `selectedItems` property changes."
|
|
647
|
+
},
|
|
648
|
+
{
|
|
649
|
+
"name": "opened-changed",
|
|
650
|
+
"description": "Fired when the `opened` property changes."
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"name": "filter-changed",
|
|
654
|
+
"description": "Fired when the `filter` property changes."
|
|
655
|
+
}
|
|
656
|
+
]
|
|
657
|
+
}
|
|
658
|
+
}
|
|
659
|
+
]
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
}
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
+
"version": "23.2.0-rc1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
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 chips for selected items\n`chip` | Chip shown for every selected item\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`overflow` | The chip shown when component width is not enough to fit all chips\n`overflow-one` | Set on the overflow chip when only one chip does not fit\n`overflow-two` | Set on the overflow chip when two chips do not fit\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------------|-----------------\n`disabled` | Set to a disabled element\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`loading` | Set when loading items from the data provider\n`opened` | Set when the dropdown is open\n`readonly` | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?autofocus",
|
|
31
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?invalid",
|
|
38
|
+
"description": "Set to true when the field is invalid.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?required",
|
|
45
|
+
"description": "Specifies that the user must fill in a value.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "?autoselect",
|
|
52
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?clearButtonVisible",
|
|
59
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "?readonly",
|
|
66
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "?autoOpenDisabled",
|
|
73
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "?loading",
|
|
80
|
+
"description": "True when loading items from the data provider, false otherwise.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "?opened",
|
|
87
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "?allowCustomValue",
|
|
94
|
+
"description": "When true, the user can input a value that is not present in the items list.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".label",
|
|
101
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".errorMessage",
|
|
108
|
+
"description": "Error to show when the field is invalid.",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".helperText",
|
|
115
|
+
"description": "String used for the helper text.",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".allowedCharPattern",
|
|
122
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": ".name",
|
|
129
|
+
"description": "The name of this field.",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".placeholder",
|
|
136
|
+
"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.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": ".title",
|
|
143
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": ".items",
|
|
150
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": ".itemLabelPath",
|
|
157
|
+
"description": "The item property used for a visual representation of the item.",
|
|
158
|
+
"value": {
|
|
159
|
+
"kind": "expression"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": ".itemValuePath",
|
|
164
|
+
"description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
|
|
165
|
+
"value": {
|
|
166
|
+
"kind": "expression"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": ".itemIdPath",
|
|
171
|
+
"description": "Path for the id of the item, used to detect whether the item is selected.",
|
|
172
|
+
"value": {
|
|
173
|
+
"kind": "expression"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": ".i18n",
|
|
178
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\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}\n```",
|
|
179
|
+
"value": {
|
|
180
|
+
"kind": "expression"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": ".selectedItems",
|
|
185
|
+
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|
|
186
|
+
"value": {
|
|
187
|
+
"kind": "expression"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": ".size",
|
|
192
|
+
"description": "Total number of items.",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": ".pageSize",
|
|
199
|
+
"description": "Number of items fetched at a time from the data provider.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": ".dataProvider",
|
|
206
|
+
"description": "Function that provides items lazily. Receives two arguments:\n\n- `params` - Object with the following properties:\n - `params.page` Requested page index\n - `params.pageSize` Current page size\n - `params.filter` Currently applied filter\n\n- `callback(items, size)` - Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items.",
|
|
207
|
+
"value": {
|
|
208
|
+
"kind": "expression"
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": ".renderer",
|
|
213
|
+
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.index` The index of the rendered item.\n - `model.item` The item.",
|
|
214
|
+
"value": {
|
|
215
|
+
"kind": "expression"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": ".filter",
|
|
220
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
221
|
+
"value": {
|
|
222
|
+
"kind": "expression"
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": ".filteredItems",
|
|
227
|
+
"description": "A subset of items, filtered based on the user input. Filtered items\ncan be assigned directly to omit the internal filtering functionality.\nThe items can be of either `String` or `Object` type.",
|
|
228
|
+
"value": {
|
|
229
|
+
"kind": "expression"
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "@validated",
|
|
234
|
+
"description": "Fired whenever the field is validated.",
|
|
235
|
+
"value": {
|
|
236
|
+
"kind": "expression"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"name": "@change",
|
|
241
|
+
"description": "Fired when the user commits a value change.",
|
|
242
|
+
"value": {
|
|
243
|
+
"kind": "expression"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "@input",
|
|
248
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button.",
|
|
249
|
+
"value": {
|
|
250
|
+
"kind": "expression"
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "@selected-items-changed",
|
|
255
|
+
"description": "Fired when the `selectedItems` property changes.",
|
|
256
|
+
"value": {
|
|
257
|
+
"kind": "expression"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "@opened-changed",
|
|
262
|
+
"description": "Fired when the `opened` property changes.",
|
|
263
|
+
"value": {
|
|
264
|
+
"kind": "expression"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"name": "@filter-changed",
|
|
269
|
+
"description": "Fired when the `filter` property changes.",
|
|
270
|
+
"value": {
|
|
271
|
+
"kind": "expression"
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
]
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|