@vaadin/multi-select-combo-box 23.2.0-alpha2 → 23.2.0-alpha5
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 +21 -1
- package/src/vaadin-multi-select-combo-box.d.ts +35 -19
- package/src/vaadin-multi-select-combo-box.js +42 -11
- 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-alpha5",
|
|
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-alpha5",
|
|
41
|
+
"@vaadin/component-base": "23.2.0-alpha5",
|
|
42
|
+
"@vaadin/field-base": "23.2.0-alpha5",
|
|
43
|
+
"@vaadin/input-container": "23.2.0-alpha5",
|
|
44
|
+
"@vaadin/lit-renderer": "23.2.0-alpha5",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-alpha5",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "23.2.0-alpha5",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-alpha5"
|
|
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": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
|
|
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]]"
|
|
@@ -87,6 +86,15 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
|
|
|
87
86
|
value: () => [],
|
|
88
87
|
},
|
|
89
88
|
|
|
89
|
+
/**
|
|
90
|
+
* Last input value entered by the user before value is updated.
|
|
91
|
+
* Used to store `filter` property value before clearing it.
|
|
92
|
+
*/
|
|
93
|
+
lastFilter: {
|
|
94
|
+
type: String,
|
|
95
|
+
notify: true,
|
|
96
|
+
},
|
|
97
|
+
|
|
90
98
|
_target: {
|
|
91
99
|
type: Object,
|
|
92
100
|
},
|
|
@@ -195,6 +203,18 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
|
|
|
195
203
|
super._closeOrCommit();
|
|
196
204
|
}
|
|
197
205
|
|
|
206
|
+
/**
|
|
207
|
+
* @protected
|
|
208
|
+
* @override
|
|
209
|
+
*/
|
|
210
|
+
_commitValue() {
|
|
211
|
+
// Store filter value for checking if user input is matching
|
|
212
|
+
// an item which is already selected, to not un-select it.
|
|
213
|
+
this.lastFilter = this.filter;
|
|
214
|
+
|
|
215
|
+
super._commitValue();
|
|
216
|
+
}
|
|
217
|
+
|
|
198
218
|
/**
|
|
199
219
|
* Override method inherited from the combo-box
|
|
200
220
|
* to not update focused item when readonly.
|
|
@@ -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
|
/**
|
|
@@ -131,6 +139,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
131
139
|
* Custom property | Description | Default
|
|
132
140
|
* -----------------------------------------------------|----------------------------|--------
|
|
133
141
|
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
142
|
+
* `--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`
|
|
134
143
|
* `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
|
|
135
144
|
* `--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`
|
|
136
145
|
*
|
|
@@ -153,6 +162,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
153
162
|
* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
|
|
154
163
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
155
164
|
* @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
|
|
165
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
156
166
|
*/
|
|
157
167
|
declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
|
|
158
168
|
/**
|
|
@@ -294,6 +304,11 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
|
|
|
294
304
|
*/
|
|
295
305
|
clearCache(): void;
|
|
296
306
|
|
|
307
|
+
/**
|
|
308
|
+
* Clears the selected items.
|
|
309
|
+
*/
|
|
310
|
+
clear(): void;
|
|
311
|
+
|
|
297
312
|
/**
|
|
298
313
|
* Requests an update for the content of items.
|
|
299
314
|
* While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
|
|
@@ -305,13 +320,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
|
|
|
305
320
|
addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
|
|
306
321
|
type: K,
|
|
307
322
|
listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
|
|
308
|
-
options?:
|
|
323
|
+
options?: AddEventListenerOptions | boolean,
|
|
309
324
|
): void;
|
|
310
325
|
|
|
311
326
|
removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
|
|
312
327
|
type: K,
|
|
313
328
|
listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
|
|
314
|
-
options?:
|
|
329
|
+
options?: EventListenerOptions | boolean,
|
|
315
330
|
): void;
|
|
316
331
|
}
|
|
317
332
|
|
|
@@ -319,7 +334,7 @@ interface MultiSelectComboBox
|
|
|
319
334
|
extends ValidateMixinClass,
|
|
320
335
|
LabelMixinClass,
|
|
321
336
|
KeyboardMixinClass,
|
|
322
|
-
InputMixinClass,
|
|
337
|
+
Omit<InputMixinClass, 'value'>,
|
|
323
338
|
InputControlMixinClass,
|
|
324
339
|
InputConstraintsMixinClass,
|
|
325
340
|
FocusMixinClass,
|
|
@@ -329,6 +344,7 @@ interface MultiSelectComboBox
|
|
|
329
344
|
DelegateFocusMixinClass,
|
|
330
345
|
ResizeMixinClass,
|
|
331
346
|
ThemableMixinClass,
|
|
347
|
+
ThemePropertyMixinClass,
|
|
332
348
|
ElementMixinClass,
|
|
333
349
|
ControllerMixinClass {}
|
|
334
350
|
|
|
@@ -109,6 +109,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
|
|
|
109
109
|
* Custom property | Description | Default
|
|
110
110
|
* -----------------------------------------------------|----------------------------|--------
|
|
111
111
|
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
112
|
+
* `--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`
|
|
112
113
|
* `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
|
|
113
114
|
* `--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`
|
|
114
115
|
*
|
|
@@ -131,6 +132,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
|
|
|
131
132
|
* @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
|
|
132
133
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
133
134
|
* @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
|
|
135
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
134
136
|
*
|
|
135
137
|
* @extends HTMLElement
|
|
136
138
|
* @mixes ElementMixin
|
|
@@ -163,6 +165,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
163
165
|
allow-custom-value="[[allowCustomValue]]"
|
|
164
166
|
data-provider="[[dataProvider]]"
|
|
165
167
|
filter="{{filter}}"
|
|
168
|
+
last-filter="{{_lastFilter}}"
|
|
166
169
|
loading="{{loading}}"
|
|
167
170
|
size="{{size}}"
|
|
168
171
|
filtered-items="[[__effectiveFilteredItems]]"
|
|
@@ -195,7 +198,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
195
198
|
></vaadin-multi-select-combo-box-chip>
|
|
196
199
|
<div id="chips" part="chips" slot="prefix"></div>
|
|
197
200
|
<slot name="input"></slot>
|
|
198
|
-
<div
|
|
201
|
+
<div
|
|
202
|
+
id="clearButton"
|
|
203
|
+
part="clear-button"
|
|
204
|
+
slot="suffix"
|
|
205
|
+
on-touchend="_onClearButtonTouchend"
|
|
206
|
+
aria-hidden="true"
|
|
207
|
+
></div>
|
|
199
208
|
<div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
|
|
200
209
|
</vaadin-multi-select-combo-box-container>
|
|
201
210
|
</vaadin-multi-select-combo-box-internal>
|
|
@@ -423,6 +432,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
423
432
|
*/
|
|
424
433
|
filteredItems: Array,
|
|
425
434
|
|
|
435
|
+
/** @private */
|
|
436
|
+
value: {
|
|
437
|
+
type: String,
|
|
438
|
+
},
|
|
439
|
+
|
|
426
440
|
/** @private */
|
|
427
441
|
__effectiveItems: {
|
|
428
442
|
type: Array,
|
|
@@ -453,6 +467,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
453
467
|
value: -1,
|
|
454
468
|
observer: '_focusedChipIndexChanged',
|
|
455
469
|
},
|
|
470
|
+
|
|
471
|
+
/** @private */
|
|
472
|
+
_lastFilter: {
|
|
473
|
+
type: String,
|
|
474
|
+
},
|
|
456
475
|
};
|
|
457
476
|
}
|
|
458
477
|
|
|
@@ -502,6 +521,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
502
521
|
return this.required && !this.readonly ? this._hasValue : true;
|
|
503
522
|
}
|
|
504
523
|
|
|
524
|
+
/**
|
|
525
|
+
* Clears the selected items.
|
|
526
|
+
*/
|
|
527
|
+
clear() {
|
|
528
|
+
this.__updateSelection([]);
|
|
529
|
+
|
|
530
|
+
announce(this.i18n.cleared);
|
|
531
|
+
}
|
|
532
|
+
|
|
505
533
|
/**
|
|
506
534
|
* Clears the cached pages and reloads data from data provider when needed.
|
|
507
535
|
*/
|
|
@@ -561,11 +589,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
561
589
|
this._focusedChipIndex = -1;
|
|
562
590
|
this.validate();
|
|
563
591
|
}
|
|
564
|
-
|
|
565
|
-
// Propagate focused attribute to internal combo box
|
|
566
|
-
if (this.$ && this.$.comboBox) {
|
|
567
|
-
this.$.comboBox.toggleAttribute('focused', focused);
|
|
568
|
-
}
|
|
569
592
|
}
|
|
570
593
|
|
|
571
594
|
/**
|
|
@@ -755,7 +778,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
755
778
|
const itemsCopy = [...this.selectedItems];
|
|
756
779
|
itemsCopy.splice(itemsCopy.indexOf(item), 1);
|
|
757
780
|
this.__updateSelection(itemsCopy);
|
|
758
|
-
this.
|
|
781
|
+
const itemLabel = this._getItemLabel(item);
|
|
782
|
+
this.__announceItem(itemLabel, false, itemsCopy.length);
|
|
759
783
|
}
|
|
760
784
|
|
|
761
785
|
/** @private */
|
|
@@ -768,8 +792,9 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
768
792
|
let isSelected = false;
|
|
769
793
|
|
|
770
794
|
if (index !== -1) {
|
|
795
|
+
const lastFilter = this._lastFilter;
|
|
771
796
|
// Do not unselect when manually typing and committing an already selected item.
|
|
772
|
-
if (
|
|
797
|
+
if (lastFilter && lastFilter.toLowerCase() === itemLabel.toLowerCase()) {
|
|
773
798
|
this.__clearFilter();
|
|
774
799
|
return;
|
|
775
800
|
}
|
|
@@ -877,6 +902,14 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
877
902
|
this._overflowItems = items;
|
|
878
903
|
}
|
|
879
904
|
|
|
905
|
+
/** @private */
|
|
906
|
+
_onClearButtonTouchend(event) {
|
|
907
|
+
// Cancel the following click and focus events
|
|
908
|
+
event.preventDefault();
|
|
909
|
+
|
|
910
|
+
this.clear();
|
|
911
|
+
}
|
|
912
|
+
|
|
880
913
|
/**
|
|
881
914
|
* Override method inherited from `InputControlMixin` and clear items.
|
|
882
915
|
* @protected
|
|
@@ -885,9 +918,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
|
|
|
885
918
|
_onClearButtonClick(event) {
|
|
886
919
|
event.stopPropagation();
|
|
887
920
|
|
|
888
|
-
this.
|
|
889
|
-
|
|
890
|
-
announce(this.i18n.cleared);
|
|
921
|
+
this.clear();
|
|
891
922
|
}
|
|
892
923
|
|
|
893
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-alpha5",
|
|
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-alpha5",
|
|
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
|
+
}
|