@vaadin/multi-select-combo-box 23.2.0-alpha3 → 23.2.0-alpha6
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
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-alpha6",
|
|
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-alpha6",
|
|
41
|
+
"@vaadin/component-base": "23.2.0-alpha6",
|
|
42
|
+
"@vaadin/field-base": "23.2.0-alpha6",
|
|
43
|
+
"@vaadin/input-container": "23.2.0-alpha6",
|
|
44
|
+
"@vaadin/lit-renderer": "23.2.0-alpha6",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-alpha6",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "23.2.0-alpha6",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-alpha6"
|
|
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": "61f1fb56953434e97d34a8819640064301dd3d8a"
|
|
53
59
|
}
|
|
@@ -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]]"
|
|
@@ -23,6 +23,7 @@ import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
|
23
23
|
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
24
24
|
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
|
|
25
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,
|
|
@@ -303,6 +304,11 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
|
|
|
303
304
|
*/
|
|
304
305
|
clearCache(): void;
|
|
305
306
|
|
|
307
|
+
/**
|
|
308
|
+
* Clears the selected items.
|
|
309
|
+
*/
|
|
310
|
+
clear(): void;
|
|
311
|
+
|
|
306
312
|
/**
|
|
307
313
|
* Requests an update for the content of items.
|
|
308
314
|
* While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
|
|
@@ -314,13 +320,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
|
|
|
314
320
|
addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
|
|
315
321
|
type: K,
|
|
316
322
|
listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
|
|
317
|
-
options?:
|
|
323
|
+
options?: AddEventListenerOptions | boolean,
|
|
318
324
|
): void;
|
|
319
325
|
|
|
320
326
|
removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
|
|
321
327
|
type: K,
|
|
322
328
|
listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
|
|
323
|
-
options?:
|
|
329
|
+
options?: EventListenerOptions | boolean,
|
|
324
330
|
): void;
|
|
325
331
|
}
|
|
326
332
|
|
|
@@ -328,7 +334,7 @@ interface MultiSelectComboBox
|
|
|
328
334
|
extends ValidateMixinClass,
|
|
329
335
|
LabelMixinClass,
|
|
330
336
|
KeyboardMixinClass,
|
|
331
|
-
InputMixinClass,
|
|
337
|
+
Omit<InputMixinClass, 'value'>,
|
|
332
338
|
InputControlMixinClass,
|
|
333
339
|
InputConstraintsMixinClass,
|
|
334
340
|
FocusMixinClass,
|
|
@@ -338,6 +344,7 @@ interface MultiSelectComboBox
|
|
|
338
344
|
DelegateFocusMixinClass,
|
|
339
345
|
ResizeMixinClass,
|
|
340
346
|
ThemableMixinClass,
|
|
347
|
+
ThemePropertyMixinClass,
|
|
341
348
|
ElementMixinClass,
|
|
342
349
|
ControllerMixinClass {}
|
|
343
350
|
|
|
@@ -198,7 +198,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
198
198
|
></vaadin-multi-select-combo-box-chip>
|
|
199
199
|
<div id="chips" part="chips" slot="prefix"></div>
|
|
200
200
|
<slot name="input"></slot>
|
|
201
|
-
<div
|
|
201
|
+
<div
|
|
202
|
+
id="clearButton"
|
|
203
|
+
part="clear-button"
|
|
204
|
+
slot="suffix"
|
|
205
|
+
on-touchend="_onClearButtonTouchend"
|
|
206
|
+
aria-hidden="true"
|
|
207
|
+
></div>
|
|
202
208
|
<div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
|
|
203
209
|
</vaadin-multi-select-combo-box-container>
|
|
204
210
|
</vaadin-multi-select-combo-box-internal>
|
|
@@ -426,6 +432,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
426
432
|
*/
|
|
427
433
|
filteredItems: Array,
|
|
428
434
|
|
|
435
|
+
/** @private */
|
|
436
|
+
value: {
|
|
437
|
+
type: String,
|
|
438
|
+
},
|
|
439
|
+
|
|
429
440
|
/** @private */
|
|
430
441
|
__effectiveItems: {
|
|
431
442
|
type: Array,
|
|
@@ -510,6 +521,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
510
521
|
return this.required && !this.readonly ? this._hasValue : true;
|
|
511
522
|
}
|
|
512
523
|
|
|
524
|
+
/**
|
|
525
|
+
* Clears the selected items.
|
|
526
|
+
*/
|
|
527
|
+
clear() {
|
|
528
|
+
this.__updateSelection([]);
|
|
529
|
+
|
|
530
|
+
announce(this.i18n.cleared);
|
|
531
|
+
}
|
|
532
|
+
|
|
513
533
|
/**
|
|
514
534
|
* Clears the cached pages and reloads data from data provider when needed.
|
|
515
535
|
*/
|
|
@@ -569,11 +589,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
569
589
|
this._focusedChipIndex = -1;
|
|
570
590
|
this.validate();
|
|
571
591
|
}
|
|
572
|
-
|
|
573
|
-
// Propagate focused attribute to internal combo box
|
|
574
|
-
if (this.$ && this.$.comboBox) {
|
|
575
|
-
this.$.comboBox.toggleAttribute('focused', focused);
|
|
576
|
-
}
|
|
577
592
|
}
|
|
578
593
|
|
|
579
594
|
/**
|
|
@@ -887,6 +902,14 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
887
902
|
this._overflowItems = items;
|
|
888
903
|
}
|
|
889
904
|
|
|
905
|
+
/** @private */
|
|
906
|
+
_onClearButtonTouchend(event) {
|
|
907
|
+
// Cancel the following click and focus events
|
|
908
|
+
event.preventDefault();
|
|
909
|
+
|
|
910
|
+
this.clear();
|
|
911
|
+
}
|
|
912
|
+
|
|
890
913
|
/**
|
|
891
914
|
* Override method inherited from `InputControlMixin` and clear items.
|
|
892
915
|
* @protected
|
|
@@ -895,9 +918,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
895
918
|
_onClearButtonClick(event) {
|
|
896
919
|
event.stopPropagation();
|
|
897
920
|
|
|
898
|
-
this.
|
|
899
|
-
|
|
900
|
-
announce(this.i18n.cleared);
|
|
921
|
+
this.clear();
|
|
901
922
|
}
|
|
902
923
|
|
|
903
924
|
/**
|
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-alpha6",
|
|
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-alpha6",
|
|
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
|
+
}
|