@vscode-elements/elements 1.14.1-pre.0 → 1.14.1-pre.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1422 -1113
- package/dist/bundled.js +253 -244
- package/dist/includes/VscElement.js +1 -1
- package/dist/includes/VscElement.js.map +1 -1
- package/dist/includes/vscode-select/styles.d.ts.map +1 -1
- package/dist/includes/vscode-select/styles.js +46 -10
- package/dist/includes/vscode-select/styles.js.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.d.ts +11 -2
- package/dist/includes/vscode-select/vscode-select-base.d.ts.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.js +241 -65
- package/dist/includes/vscode-select/vscode-select-base.js.map +1 -1
- package/dist/vscode-multi-select/vscode-multi-select.d.ts +8 -3
- package/dist/vscode-multi-select/vscode-multi-select.d.ts.map +1 -1
- package/dist/vscode-multi-select/vscode-multi-select.js +86 -124
- package/dist/vscode-multi-select/vscode-multi-select.js.map +1 -1
- package/dist/vscode-single-select/vscode-single-select.d.ts +9 -4
- package/dist/vscode-single-select/vscode-single-select.d.ts.map +1 -1
- package/dist/vscode-single-select/vscode-single-select.js +27 -69
- package/dist/vscode-single-select/vscode-single-select.js.map +1 -1
- package/package.json +2 -1
- package/vscode.css-custom-data.json +7 -7
- package/vscode.html-custom-data.json +15 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-multi-select.d.ts","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"vscode-multi-select.d.ts","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAE3E,MAAM,MAAM,+BAA+B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,iBACX,SAAQ,gBACR,YAAW,qBAAqB;IAEhC,OAAgB,MAAM,4BAAU;IAEhC,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,MAAM,CAAC,cAAc,UAAQ;IAG7B,YAAY,EAAE,MAAM,EAAE,CAAM;IAG5B,QAAQ,UAAS;IAGjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,IACI,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,EAahC;IACD,IAAI,eAAe,IAAI,MAAM,EAAE,CAE9B;IAED,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,EA4B/B;IACD,IAAI,KAAK,IAAI,MAAM,EAAE,CAEpB;IAED,IAAI,IAAI,2BAEP;IAED,gBAAgB;IAChB,IAAI,IAAI,WAEP;IAED,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,OAAO,CAAC,UAAU,CAAmB;;IAS5B,iBAAiB,IAAI,IAAI;IASlC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAMzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IASP,OAAO,CAAC,YAAY,CAAkB;IAEtC,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,yBAAyB,CAAgB;cAExB,+BAA+B;cAiBrC,aAAa,IAAI,IAAI;IAgBxC,UAAmB,cAAc,GAAI,IAAI,UAAU,UA8CjD;IAEF,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,sBAAsB;IAc9B,OAAO,CAAC,YAAY;cAeD,iBAAiB,IAAI,cAAc;cAYnC,uBAAuB,IAAI,cAAc;CA+B7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;IAED,UAAU,2BAA2B;QACnC,gCAAgC,EAAE,+BAA+B,CAAC;KACnE;CACF"}
|
|
@@ -4,15 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { html, LitElement } from 'lit';
|
|
7
|
+
import { html, LitElement, nothing } from 'lit';
|
|
8
8
|
import { property, query } from 'lit/decorators.js';
|
|
9
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
-
import { repeat } from 'lit/directives/repeat.js';
|
|
11
9
|
import { customElement } from '../includes/VscElement.js';
|
|
12
10
|
import { chevronDownIcon } from '../includes/vscode-select/template-elements.js';
|
|
13
11
|
import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
|
|
14
12
|
import styles from './vscode-multi-select.styles.js';
|
|
15
|
-
import { highlightRanges } from '../includes/vscode-select/helpers.js';
|
|
16
13
|
/**
|
|
17
14
|
* Allows to select multiple items from a list of options.
|
|
18
15
|
*
|
|
@@ -50,7 +47,16 @@ import { highlightRanges } from '../includes/vscode-select/helpers.js';
|
|
|
50
47
|
*/
|
|
51
48
|
let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
|
|
52
49
|
set selectedIndexes(val) {
|
|
53
|
-
|
|
50
|
+
const newIndexes = [];
|
|
51
|
+
val.forEach((v) => {
|
|
52
|
+
if (typeof this._options[v] !== 'undefined') {
|
|
53
|
+
if (!newIndexes.includes(v)) {
|
|
54
|
+
this._options[v].selected = true;
|
|
55
|
+
newIndexes.push(v);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
this._selectedIndexes = newIndexes;
|
|
54
60
|
}
|
|
55
61
|
get selectedIndexes() {
|
|
56
62
|
return this._selectedIndexes;
|
|
@@ -111,6 +117,41 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
|
|
|
111
117
|
this.required = false;
|
|
112
118
|
this.name = undefined;
|
|
113
119
|
this._requestedValueToSetLater = [];
|
|
120
|
+
this._onOptionClick = (ev) => {
|
|
121
|
+
const composedPath = ev.composedPath();
|
|
122
|
+
const optEl = composedPath.find((et) => {
|
|
123
|
+
if ('matches' in et) {
|
|
124
|
+
return et.matches('li.option');
|
|
125
|
+
}
|
|
126
|
+
return false;
|
|
127
|
+
});
|
|
128
|
+
if (!optEl) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
const isPlaceholderOption = optEl.classList.contains('placeholder');
|
|
132
|
+
if (isPlaceholderOption) {
|
|
133
|
+
this._createAndSelectSuggestedOption();
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
const index = Number(optEl.dataset.index);
|
|
137
|
+
if (this._options[index]) {
|
|
138
|
+
if (this._options[index].disabled) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
this._options[index].selected = !this._options[index].selected;
|
|
142
|
+
}
|
|
143
|
+
this._selectedIndexes = [];
|
|
144
|
+
this._values = [];
|
|
145
|
+
this._options.forEach((op) => {
|
|
146
|
+
if (op.selected) {
|
|
147
|
+
this._selectedIndexes.push(op.index);
|
|
148
|
+
this._values.push(op.value);
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
this._setFormValue();
|
|
152
|
+
this._manageRequired();
|
|
153
|
+
this._dispatchChangeEvent();
|
|
154
|
+
};
|
|
114
155
|
/** @internal */
|
|
115
156
|
this._multiple = true;
|
|
116
157
|
this._internals = this.attachInternals();
|
|
@@ -159,6 +200,17 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
|
|
|
159
200
|
});
|
|
160
201
|
this._internals.setFormValue(fd);
|
|
161
202
|
}
|
|
203
|
+
async _createAndSelectSuggestedOption() {
|
|
204
|
+
super._createAndSelectSuggestedOption();
|
|
205
|
+
const nextIndex = this._createSuggestedOption();
|
|
206
|
+
await this.updateComplete;
|
|
207
|
+
this.selectedIndexes = [...this.selectedIndexes, nextIndex];
|
|
208
|
+
this._dispatchChangeEvent();
|
|
209
|
+
const opCreateEvent = new CustomEvent('vsc-multi-select-create-option', { detail: { value: this._options[nextIndex]?.value ?? '' } });
|
|
210
|
+
this.dispatchEvent(opCreateEvent);
|
|
211
|
+
this._toggleDropdown(false);
|
|
212
|
+
this._isPlaceholderOptionActive = false;
|
|
213
|
+
}
|
|
162
214
|
_onSlotChange() {
|
|
163
215
|
super._onSlotChange();
|
|
164
216
|
if (this._requestedValueToSetLater.length > 0) {
|
|
@@ -173,36 +225,6 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
|
|
|
173
225
|
});
|
|
174
226
|
}
|
|
175
227
|
}
|
|
176
|
-
_onOptionClick(ev) {
|
|
177
|
-
const composedPath = ev.composedPath();
|
|
178
|
-
const optEl = composedPath.find((et) => {
|
|
179
|
-
if ('matches' in et) {
|
|
180
|
-
return et.matches('li.option');
|
|
181
|
-
}
|
|
182
|
-
return false;
|
|
183
|
-
});
|
|
184
|
-
if (!optEl) {
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
const index = Number(optEl.dataset.index);
|
|
188
|
-
if (this._options[index]) {
|
|
189
|
-
if (this._options[index].disabled) {
|
|
190
|
-
return;
|
|
191
|
-
}
|
|
192
|
-
this._options[index].selected = !this._options[index].selected;
|
|
193
|
-
}
|
|
194
|
-
this._selectedIndexes = [];
|
|
195
|
-
this._values = [];
|
|
196
|
-
this._options.forEach((op) => {
|
|
197
|
-
if (op.selected) {
|
|
198
|
-
this._selectedIndexes.push(op.index);
|
|
199
|
-
this._values.push(op.value);
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
this._setFormValue();
|
|
203
|
-
this._manageRequired();
|
|
204
|
-
this._dispatchChangeEvent();
|
|
205
|
-
}
|
|
206
228
|
_onMultiAcceptClick() {
|
|
207
229
|
this._toggleDropdown(false);
|
|
208
230
|
}
|
|
@@ -250,96 +272,36 @@ let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
|
|
|
250
272
|
</div>
|
|
251
273
|
`;
|
|
252
274
|
}
|
|
253
|
-
_renderComboboxFace() {
|
|
254
|
-
const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';
|
|
255
|
-
return html `
|
|
256
|
-
<div class="combobox-face face">
|
|
257
|
-
${this._renderLabel()}
|
|
258
|
-
<input
|
|
259
|
-
class="combobox-input"
|
|
260
|
-
spellcheck="false"
|
|
261
|
-
type="text"
|
|
262
|
-
autocomplete="off"
|
|
263
|
-
.value=${inputVal}
|
|
264
|
-
@focus=${this._onComboboxInputFocus}
|
|
265
|
-
@input=${this._onComboboxInputInput}
|
|
266
|
-
@click=${this._onComboboxInputClick}
|
|
267
|
-
>
|
|
268
|
-
<button
|
|
269
|
-
class="combobox-button"
|
|
270
|
-
type="button"
|
|
271
|
-
@click=${this._onComboboxButtonClick}
|
|
272
|
-
@keydown=${this._onComboboxButtonKeyDown}
|
|
273
|
-
>
|
|
274
|
-
${chevronDownIcon}
|
|
275
|
-
</button>
|
|
276
|
-
</div>
|
|
277
|
-
`;
|
|
278
|
-
}
|
|
279
|
-
_renderOptions() {
|
|
280
|
-
const list = this.combobox ? this._filteredOptions : this._options;
|
|
281
|
-
return html `
|
|
282
|
-
<ul
|
|
283
|
-
class="options"
|
|
284
|
-
@click=${this._onOptionClick}
|
|
285
|
-
@mouseover=${this._onOptionMouseOver}
|
|
286
|
-
>
|
|
287
|
-
${repeat(list, (op) => op.index, (op, index) => {
|
|
288
|
-
const selected = this._selectedIndexes.includes(op.index);
|
|
289
|
-
const optionClasses = classMap({
|
|
290
|
-
active: index === this._activeIndex && !op.disabled,
|
|
291
|
-
option: true,
|
|
292
|
-
selected,
|
|
293
|
-
disabled: op.disabled,
|
|
294
|
-
});
|
|
295
|
-
const checkboxClasses = classMap({
|
|
296
|
-
'checkbox-icon': true,
|
|
297
|
-
checked: selected,
|
|
298
|
-
});
|
|
299
|
-
return html `
|
|
300
|
-
<li
|
|
301
|
-
class=${optionClasses}
|
|
302
|
-
data-index=${op.index}
|
|
303
|
-
data-filtered-index=${index}
|
|
304
|
-
>
|
|
305
|
-
<span class=${checkboxClasses}></span>
|
|
306
|
-
<span class="option-label"
|
|
307
|
-
>${(op.ranges?.length ?? 0 > 0)
|
|
308
|
-
? highlightRanges(op.label, op.ranges ?? [])
|
|
309
|
-
: op.label}</span
|
|
310
|
-
>
|
|
311
|
-
</li>
|
|
312
|
-
`;
|
|
313
|
-
})}
|
|
314
|
-
</ul>
|
|
315
|
-
`;
|
|
316
|
-
}
|
|
317
275
|
_renderDropdownControls() {
|
|
318
|
-
return
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
276
|
+
return this._filteredOptions.length > 0
|
|
277
|
+
? html `
|
|
278
|
+
<div class="dropdown-controls">
|
|
279
|
+
<button
|
|
280
|
+
type="button"
|
|
281
|
+
@click=${this._onMultiSelectAllClick}
|
|
282
|
+
title="Select all"
|
|
283
|
+
class="action-icon"
|
|
284
|
+
id="select-all"
|
|
285
|
+
>
|
|
286
|
+
<vscode-icon name="checklist"></vscode-icon>
|
|
287
|
+
</button>
|
|
288
|
+
<button
|
|
289
|
+
type="button"
|
|
290
|
+
@click=${this._onMultiDeselectAllClick}
|
|
291
|
+
title="Deselect all"
|
|
292
|
+
class="action-icon"
|
|
293
|
+
id="select-none"
|
|
294
|
+
>
|
|
295
|
+
<vscode-icon name="clear-all"></vscode-icon>
|
|
296
|
+
</button>
|
|
297
|
+
<vscode-button
|
|
298
|
+
class="button-accept"
|
|
299
|
+
@click=${this._onMultiAcceptClick}
|
|
300
|
+
>OK</vscode-button
|
|
301
|
+
>
|
|
302
|
+
</div>
|
|
303
|
+
`
|
|
304
|
+
: html `${nothing}`;
|
|
343
305
|
}
|
|
344
306
|
};
|
|
345
307
|
VscodeMultiSelect.styles = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-multi-select.js","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-multi-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\nimport {highlightRanges} from '../includes/vscode-select/helpers.js';\n\n/**\n * Allows to select multiple items from a list of options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-multi-select\n *\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-multi-select')\nexport class VscodeMultiSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static formAssociated = true;\n\n @property({type: Array, attribute: 'default-value'})\n defaultValue: string[] = [];\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n @property({type: Array, attribute: false})\n set selectedIndexes(val: number[]) {\n this._selectedIndexes = val;\n }\n get selectedIndexes(): number[] {\n return this._selectedIndexes;\n }\n\n @property({type: Array})\n set value(val: string[] | string) {\n const sanitizedVal = Array.isArray(val)\n ? val.map((v) => String(v))\n : [String(val)];\n this._values = [];\n\n this._selectedIndexes.forEach((i) => {\n this._options[i].selected = false;\n });\n\n this._selectedIndexes = [];\n\n sanitizedVal.forEach((v) => {\n if (typeof this._valueOptionIndexMap[v] === 'number') {\n this._selectedIndexes.push(this._valueOptionIndexMap[v]);\n this._options[this._valueOptionIndexMap[v]].selected = true;\n this._values.push(v);\n }\n });\n\n if (this._selectedIndexes.length > 0) {\n this._requestedValueToSetLater = [];\n } else {\n this._requestedValueToSetLater = Array.isArray(val) ? val : [val];\n }\n\n this._setFormValue();\n this._manageRequired();\n }\n get value(): string[] {\n return this._values;\n }\n\n get form() {\n return this._internals.form;\n }\n\n /** @internal */\n get type() {\n return 'select-multiple';\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._multiple = true;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._setDefaultValue();\n this._manageRequired();\n });\n }\n\n /** @internal */\n formResetCallback(): void {\n this.updateComplete.then(() => {\n this.value = this.defaultValue;\n });\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: FormData,\n _mode: 'restore' | 'autocomplete'\n ): void {\n const entries = Array.from(state.entries()).map((e) => String(e[1]));\n\n this.updateComplete.then(() => {\n this.value = entries;\n });\n }\n\n @query('.face')\n private _faceElement!: HTMLDivElement;\n\n private _setDefaultValue() {\n if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {\n const val = this.defaultValue.map((v) => String(v));\n this.value = val;\n }\n }\n\n private _manageRequired() {\n const {value} = this;\n if (value.length === 0 && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._faceElement\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setFormValue() {\n const fd = new FormData();\n\n this._values.forEach((v) => {\n fd.append(this.name ?? '', v);\n });\n\n this._internals.setFormValue(fd);\n }\n\n private _requestedValueToSetLater: string[] = [];\n\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater.length > 0) {\n this.options.forEach((o, i) => {\n if (this._requestedValueToSetLater.includes(o.value)) {\n this._selectedIndexes.push(i);\n this._values.push(o.value);\n this._options[i].selected = true;\n this._requestedValueToSetLater =\n this._requestedValueToSetLater.filter((v) => v !== o.value);\n }\n });\n }\n }\n\n private _onOptionClick(ev: MouseEvent) {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) => {\n if ('matches' in et) {\n return (et as HTMLElement).matches('li.option');\n }\n\n return false;\n });\n\n if (!optEl) {\n return;\n }\n\n const index = Number((optEl as HTMLElement).dataset.index);\n\n if (this._options[index]) {\n if (this._options[index].disabled) {\n return;\n }\n\n this._options[index].selected = !this._options[index].selected;\n }\n\n this._selectedIndexes = [];\n this._values = [];\n\n this._options.forEach((op) => {\n if (op.selected) {\n this._selectedIndexes.push(op.index);\n this._values.push(op.value);\n }\n });\n\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiAcceptClick(): void {\n this._toggleDropdown(false);\n }\n\n private _onMultiDeselectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: false}));\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiSelectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: true}));\n this._options.forEach((op, index) => {\n this._selectedIndexes.push(index);\n this._values.push(op.value);\n this._dispatchChangeEvent();\n });\n\n this._setFormValue();\n this._manageRequired();\n }\n\n private _renderLabel() {\n switch (this._selectedIndexes.length) {\n case 0:\n return html`<span class=\"select-face-badge no-item\"\n >No items selected</span\n >`;\n case 1:\n return html`<span class=\"select-face-badge\">1 item selected</span>`;\n default:\n return html`<span class=\"select-face-badge\"\n >${this._selectedIndexes.length} items selected</span\n >`;\n }\n }\n\n protected override _renderSelectFace(): TemplateResult {\n return html`\n <div\n class=\"select-face face multiselect\"\n @click=${this._onFaceClick}\n tabindex=${this.tabIndex > -1 ? 0 : -1}\n >\n ${this._renderLabel()} ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderComboboxFace(): TemplateResult {\n const inputVal =\n this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';\n\n return html`\n <div class=\"combobox-face face\">\n ${this._renderLabel()}\n <input\n class=\"combobox-input\"\n spellcheck=\"false\"\n type=\"text\"\n autocomplete=\"off\"\n .value=${inputVal}\n @focus=${this._onComboboxInputFocus}\n @input=${this._onComboboxInputInput}\n @click=${this._onComboboxInputClick}\n >\n <button\n class=\"combobox-button\"\n type=\"button\"\n @click=${this._onComboboxButtonClick}\n @keydown=${this._onComboboxButtonKeyDown}\n >\n ${chevronDownIcon}\n </button>\n </div>\n `;\n }\n\n protected override _renderOptions(): TemplateResult {\n const list = this.combobox ? this._filteredOptions : this._options;\n\n return html`\n <ul\n class=\"options\"\n @click=${this._onOptionClick}\n @mouseover=${this._onOptionMouseOver}\n >\n ${repeat(\n list,\n (op) => op.index,\n (op, index) => {\n const selected = this._selectedIndexes.includes(op.index);\n const optionClasses = classMap({\n active: index === this._activeIndex && !op.disabled,\n option: true,\n selected,\n disabled: op.disabled,\n });\n const checkboxClasses = classMap({\n 'checkbox-icon': true,\n checked: selected,\n });\n\n return html`\n <li\n class=${optionClasses}\n data-index=${op.index}\n data-filtered-index=${index}\n >\n <span class=${checkboxClasses}></span>\n <span class=\"option-label\"\n >${(op.ranges?.length ?? 0 > 0)\n ? highlightRanges(op.label, op.ranges ?? [])\n : op.label}</span\n >\n </li>\n `;\n }\n )}\n </ul>\n `;\n }\n\n protected override _renderDropdownControls(): TemplateResult {\n return html`\n <div class=\"dropdown-controls\">\n <button\n type=\"button\"\n @click=${this._onMultiSelectAllClick}\n title=\"Select all\"\n class=\"action-icon\"\n id=\"select-all\"\n >\n <vscode-icon name=\"checklist\"></vscode-icon>\n </button>\n <button\n type=\"button\"\n @click=${this._onMultiDeselectAllClick}\n title=\"Deselect all\"\n class=\"action-icon\"\n id=\"select-none\"\n >\n <vscode-icon name=\"clear-all\"></vscode-icon>\n </button>\n <vscode-button class=\"button-accept\" @click=${this._onMultiAcceptClick}\n >OK</vscode-button\n >\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-multi-select': VscodeMultiSelect;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"vscode-multi-select.js","sourceRoot":"","sources":["../../src/vscode-multi-select/vscode-multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-multi-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\nexport type VscMultiSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/**\n * Allows to select multiple items from a list of options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-multi-select\n *\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-multi-select')\nexport class VscodeMultiSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static formAssociated = true;\n\n @property({type: Array, attribute: 'default-value'})\n defaultValue: string[] = [];\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n @property({type: Array, attribute: false})\n set selectedIndexes(val: number[]) {\n const newIndexes: number[] = [];\n\n val.forEach((v) => {\n if (typeof this._options[v] !== 'undefined') {\n if (!newIndexes.includes(v)) {\n this._options[v].selected = true;\n newIndexes.push(v);\n }\n }\n });\n\n this._selectedIndexes = newIndexes;\n }\n get selectedIndexes(): number[] {\n return this._selectedIndexes;\n }\n\n @property({type: Array})\n set value(val: string[] | string) {\n const sanitizedVal = Array.isArray(val)\n ? val.map((v) => String(v))\n : [String(val)];\n this._values = [];\n\n this._selectedIndexes.forEach((i) => {\n this._options[i].selected = false;\n });\n\n this._selectedIndexes = [];\n\n sanitizedVal.forEach((v) => {\n if (typeof this._valueOptionIndexMap[v] === 'number') {\n this._selectedIndexes.push(this._valueOptionIndexMap[v]);\n this._options[this._valueOptionIndexMap[v]].selected = true;\n this._values.push(v);\n }\n });\n\n if (this._selectedIndexes.length > 0) {\n this._requestedValueToSetLater = [];\n } else {\n this._requestedValueToSetLater = Array.isArray(val) ? val : [val];\n }\n\n this._setFormValue();\n this._manageRequired();\n }\n get value(): string[] {\n return this._values;\n }\n\n get form() {\n return this._internals.form;\n }\n\n /** @internal */\n get type() {\n return 'select-multiple';\n }\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._multiple = true;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._setDefaultValue();\n this._manageRequired();\n });\n }\n\n /** @internal */\n formResetCallback(): void {\n this.updateComplete.then(() => {\n this.value = this.defaultValue;\n });\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: FormData,\n _mode: 'restore' | 'autocomplete'\n ): void {\n const entries = Array.from(state.entries()).map((e) => String(e[1]));\n\n this.updateComplete.then(() => {\n this.value = entries;\n });\n }\n\n @query('.face')\n private _faceElement!: HTMLDivElement;\n\n private _setDefaultValue() {\n if (Array.isArray(this.defaultValue) && this.defaultValue.length > 0) {\n const val = this.defaultValue.map((v) => String(v));\n this.value = val;\n }\n }\n\n private _manageRequired() {\n const {value} = this;\n if (value.length === 0 && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._faceElement\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setFormValue() {\n const fd = new FormData();\n\n this._values.forEach((v) => {\n fd.append(this.name ?? '', v);\n });\n\n this._internals.setFormValue(fd);\n }\n\n private _requestedValueToSetLater: string[] = [];\n\n protected override async _createAndSelectSuggestedOption() {\n super._createAndSelectSuggestedOption();\n const nextIndex = this._createSuggestedOption();\n\n await this.updateComplete;\n\n this.selectedIndexes = [...this.selectedIndexes, nextIndex];\n this._dispatchChangeEvent();\n const opCreateEvent: VscMultiSelectCreateOptionEvent = new CustomEvent(\n 'vsc-multi-select-create-option',\n {detail: {value: this._options[nextIndex]?.value ?? ''}}\n );\n this.dispatchEvent(opCreateEvent);\n this._toggleDropdown(false);\n this._isPlaceholderOptionActive = false;\n }\n\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater.length > 0) {\n this.options.forEach((o, i) => {\n if (this._requestedValueToSetLater.includes(o.value)) {\n this._selectedIndexes.push(i);\n this._values.push(o.value);\n this._options[i].selected = true;\n this._requestedValueToSetLater =\n this._requestedValueToSetLater.filter((v) => v !== o.value);\n }\n });\n }\n }\n\n protected override _onOptionClick = (ev: MouseEvent) => {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) => {\n if ('matches' in et) {\n return (et as HTMLElement).matches('li.option');\n }\n\n return false;\n });\n\n if (!optEl) {\n return;\n }\n\n const isPlaceholderOption = (optEl as HTMLElement).classList.contains(\n 'placeholder'\n );\n\n if (isPlaceholderOption) {\n this._createAndSelectSuggestedOption();\n return;\n }\n\n const index = Number((optEl as HTMLElement).dataset.index);\n\n if (this._options[index]) {\n if (this._options[index].disabled) {\n return;\n }\n\n this._options[index].selected = !this._options[index].selected;\n }\n\n this._selectedIndexes = [];\n this._values = [];\n\n this._options.forEach((op) => {\n if (op.selected) {\n this._selectedIndexes.push(op.index);\n this._values.push(op.value);\n }\n });\n\n this._setFormValue();\n this._manageRequired();\n this._dispatchChangeEvent();\n };\n\n private _onMultiAcceptClick(): void {\n this._toggleDropdown(false);\n }\n\n private _onMultiDeselectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: false}));\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _onMultiSelectAllClick(): void {\n this._selectedIndexes = [];\n this._values = [];\n this._options = this._options.map((op) => ({...op, selected: true}));\n this._options.forEach((op, index) => {\n this._selectedIndexes.push(index);\n this._values.push(op.value);\n this._dispatchChangeEvent();\n });\n\n this._setFormValue();\n this._manageRequired();\n }\n\n private _renderLabel() {\n switch (this._selectedIndexes.length) {\n case 0:\n return html`<span class=\"select-face-badge no-item\"\n >No items selected</span\n >`;\n case 1:\n return html`<span class=\"select-face-badge\">1 item selected</span>`;\n default:\n return html`<span class=\"select-face-badge\"\n >${this._selectedIndexes.length} items selected</span\n >`;\n }\n }\n\n protected override _renderSelectFace(): TemplateResult {\n return html`\n <div\n class=\"select-face face multiselect\"\n @click=${this._onFaceClick}\n tabindex=${this.tabIndex > -1 ? 0 : -1}\n >\n ${this._renderLabel()} ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderDropdownControls(): TemplateResult {\n return this._filteredOptions.length > 0\n ? html`\n <div class=\"dropdown-controls\">\n <button\n type=\"button\"\n @click=${this._onMultiSelectAllClick}\n title=\"Select all\"\n class=\"action-icon\"\n id=\"select-all\"\n >\n <vscode-icon name=\"checklist\"></vscode-icon>\n </button>\n <button\n type=\"button\"\n @click=${this._onMultiDeselectAllClick}\n title=\"Deselect all\"\n class=\"action-icon\"\n id=\"select-none\"\n >\n <vscode-icon name=\"clear-all\"></vscode-icon>\n </button>\n <vscode-button\n class=\"button-accept\"\n @click=${this._onMultiAcceptClick}\n >OK</vscode-button\n >\n </div>\n `\n : html`${nothing}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-multi-select': VscodeMultiSelect;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-multi-select-create-option': VscMultiSelectCreateOptionEvent;\n }\n}\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
|
|
3
3
|
import { AssociatedFormControl } from '../includes/AssociatedFormControl.js';
|
|
4
|
+
export type VscSingleSelectCreateOptionEvent = CustomEvent<{
|
|
5
|
+
value: string;
|
|
6
|
+
}>;
|
|
4
7
|
/**
|
|
5
8
|
* Allows to select an item from multiple options.
|
|
6
9
|
*
|
|
@@ -80,19 +83,21 @@ export declare class VscodeSingleSelect extends VscodeSelectBase implements Asso
|
|
|
80
83
|
get type(): 'select-one';
|
|
81
84
|
get form(): HTMLFormElement | null;
|
|
82
85
|
private _requestedValueToSetLater;
|
|
86
|
+
protected _createAndSelectSuggestedOption(): Promise<void>;
|
|
83
87
|
protected _onSlotChange(): void;
|
|
84
88
|
protected _onArrowUpKeyDown(): void;
|
|
85
89
|
protected _onArrowDownKeyDown(): void;
|
|
86
|
-
protected _onEnterKeyDown(): void;
|
|
87
|
-
|
|
90
|
+
protected _onEnterKeyDown(ev: KeyboardEvent): void;
|
|
91
|
+
protected _onOptionClick(ev: MouseEvent): void;
|
|
88
92
|
private _manageRequired;
|
|
89
93
|
protected _renderSelectFace(): TemplateResult;
|
|
90
|
-
protected _renderComboboxFace(): TemplateResult;
|
|
91
|
-
protected _renderOptions(): TemplateResult;
|
|
92
94
|
}
|
|
93
95
|
declare global {
|
|
94
96
|
interface HTMLElementTagNameMap {
|
|
95
97
|
'vscode-single-select': VscodeSingleSelect;
|
|
96
98
|
}
|
|
99
|
+
interface GlobalEventHandlersEventMap {
|
|
100
|
+
'vsc-single-select-create-option': VscSingleSelectCreateOptionEvent;
|
|
101
|
+
}
|
|
97
102
|
}
|
|
98
103
|
//# sourceMappingURL=vscode-single-select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-single-select.d.ts","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"vscode-single-select.d.ts","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAE3E,MAAM,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,kBACX,SAAQ,gBACR,YAAW,qBAAqB;IAEhC,OAAgB,MAAM,4BAAU;IAEhC,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,gBAAgB;IAChB,MAAM,CAAC,cAAc,UAAQ;IAG7B,YAAY,SAAM;IAElB,gBAAgB;IAEP,IAAI,SAAa;IAG1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,IACI,aAAa,CAAC,GAAG,EAAE,MAAM,EAK5B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAepB;IACD,IAAI,KAAK,IAAI,MAAM,CAMlB;IAGD,QAAQ,UAAS;IAEjB,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,gBAAgB;;IAuBf,iBAAiB,IAAI,IAAI;IAQlC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,gBAAgB;IAChB,IAAI,IAAI,IAAI,YAAY,CAEvB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,OAAO,CAAC,yBAAyB,CAAM;cAEd,+BAA+B;cAgBrC,aAAa,IAAI,IAAI;cAsBrB,iBAAiB,IAAI,IAAI;cAgBzB,mBAAmB,IAAI,IAAI;cAgB3B,eAAe,CAAC,EAAE,EAAE,aAAa,GAAG,IAAI;cAQxC,cAAc,CAAC,EAAE,EAAE,UAAU;IA2BhD,OAAO,CAAC,eAAe;cAaJ,iBAAiB,IAAI,cAAc;CAavD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;IAED,UAAU,2BAA2B;QACnC,iCAAiC,EAAE,gCAAgC,CAAC;KACrE;CACF"}
|
|
@@ -6,12 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
8
|
import { property, query } from 'lit/decorators.js';
|
|
9
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
10
9
|
import { customElement } from '../includes/VscElement.js';
|
|
11
10
|
import { chevronDownIcon } from '../includes/vscode-select/template-elements.js';
|
|
12
11
|
import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
|
|
13
12
|
import styles from './vscode-single-select.styles.js';
|
|
14
|
-
import { highlightRanges } from '../includes/vscode-select/helpers.js';
|
|
15
13
|
/**
|
|
16
14
|
* Allows to select an item from multiple options.
|
|
17
15
|
*
|
|
@@ -150,6 +148,16 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
|
|
|
150
148
|
get form() {
|
|
151
149
|
return this._internals.form;
|
|
152
150
|
}
|
|
151
|
+
async _createAndSelectSuggestedOption() {
|
|
152
|
+
const nextIndex = this._createSuggestedOption();
|
|
153
|
+
await this.updateComplete;
|
|
154
|
+
this.selectedIndex = nextIndex;
|
|
155
|
+
this._dispatchChangeEvent();
|
|
156
|
+
const opCreateEvent = new CustomEvent('vsc-single-select-create-option', { detail: { value: this._options[nextIndex]?.value ?? '' } });
|
|
157
|
+
this.dispatchEvent(opCreateEvent);
|
|
158
|
+
this._toggleDropdown(false);
|
|
159
|
+
this._isPlaceholderOptionActive = false;
|
|
160
|
+
}
|
|
153
161
|
_onSlotChange() {
|
|
154
162
|
super._onSlotChange();
|
|
155
163
|
if (this._requestedValueToSetLater) {
|
|
@@ -193,8 +201,8 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
|
|
|
193
201
|
this._manageRequired();
|
|
194
202
|
this._dispatchChangeEvent();
|
|
195
203
|
}
|
|
196
|
-
_onEnterKeyDown() {
|
|
197
|
-
super._onEnterKeyDown();
|
|
204
|
+
_onEnterKeyDown(ev) {
|
|
205
|
+
super._onEnterKeyDown(ev);
|
|
198
206
|
this.updateInputValue();
|
|
199
207
|
this._internals.setFormValue(this._value);
|
|
200
208
|
this._manageRequired();
|
|
@@ -205,19 +213,25 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
|
|
|
205
213
|
if (!optEl || optEl.matches('.disabled')) {
|
|
206
214
|
return;
|
|
207
215
|
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
216
|
+
const isPlaceholderOption = optEl.classList.contains('placeholder');
|
|
217
|
+
if (isPlaceholderOption) {
|
|
218
|
+
if (this.creatable) {
|
|
219
|
+
this._createAndSelectSuggestedOption();
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
else {
|
|
223
|
+
this._selectedIndex = Number(optEl.dataset.index);
|
|
224
|
+
this._value = this._options[this._selectedIndex].value;
|
|
225
|
+
this._toggleDropdown(false);
|
|
226
|
+
this._internals.setFormValue(this._value);
|
|
227
|
+
this._manageRequired();
|
|
228
|
+
this._dispatchChangeEvent();
|
|
229
|
+
}
|
|
214
230
|
}
|
|
215
231
|
_manageRequired() {
|
|
216
232
|
const { value } = this;
|
|
217
233
|
if (value === '' && this.required) {
|
|
218
|
-
this._internals.setValidity({
|
|
219
|
-
valueMissing: true,
|
|
220
|
-
}, 'Please select an item in the list.', this._face);
|
|
234
|
+
this._internals.setValidity({ valueMissing: true }, 'Please select an item in the list.', this._face);
|
|
221
235
|
}
|
|
222
236
|
else {
|
|
223
237
|
this._internals.setValidity({});
|
|
@@ -235,62 +249,6 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
|
|
|
235
249
|
</div>
|
|
236
250
|
`;
|
|
237
251
|
}
|
|
238
|
-
_renderComboboxFace() {
|
|
239
|
-
const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';
|
|
240
|
-
return html `
|
|
241
|
-
<div class="combobox-face face">
|
|
242
|
-
<input
|
|
243
|
-
class="combobox-input"
|
|
244
|
-
spellcheck="false"
|
|
245
|
-
type="text"
|
|
246
|
-
autocomplete="off"
|
|
247
|
-
.value=${inputVal}
|
|
248
|
-
@focus=${this._onComboboxInputFocus}
|
|
249
|
-
@input=${this._onComboboxInputInput}
|
|
250
|
-
@click=${this._onComboboxInputClick}
|
|
251
|
-
>
|
|
252
|
-
<button
|
|
253
|
-
class="combobox-button"
|
|
254
|
-
type="button"
|
|
255
|
-
@click=${this._onComboboxButtonClick}
|
|
256
|
-
@keydown=${this._onComboboxButtonKeyDown}
|
|
257
|
-
>
|
|
258
|
-
${chevronDownIcon}
|
|
259
|
-
</button>
|
|
260
|
-
</div>
|
|
261
|
-
`;
|
|
262
|
-
}
|
|
263
|
-
_renderOptions() {
|
|
264
|
-
const list = this.combobox ? this._filteredOptions : this._options;
|
|
265
|
-
const options = list.map((op, index) => {
|
|
266
|
-
const classes = classMap({
|
|
267
|
-
option: true,
|
|
268
|
-
disabled: op.disabled,
|
|
269
|
-
selected: op.selected,
|
|
270
|
-
active: index === this._activeIndex && !op.disabled,
|
|
271
|
-
});
|
|
272
|
-
return html `
|
|
273
|
-
<li
|
|
274
|
-
class=${classes}
|
|
275
|
-
data-index=${op.index}
|
|
276
|
-
data-filtered-index=${index}
|
|
277
|
-
>
|
|
278
|
-
${(op.ranges?.length ?? 0 > 0)
|
|
279
|
-
? highlightRanges(op.label, op.ranges ?? [])
|
|
280
|
-
: op.label}
|
|
281
|
-
</li>
|
|
282
|
-
`;
|
|
283
|
-
});
|
|
284
|
-
return html `
|
|
285
|
-
<ul
|
|
286
|
-
class="options"
|
|
287
|
-
@mouseover=${this._onOptionMouseOver}
|
|
288
|
-
@click=${this._onOptionClick}
|
|
289
|
-
>
|
|
290
|
-
${options}
|
|
291
|
-
</ul>
|
|
292
|
-
`;
|
|
293
|
-
}
|
|
294
252
|
};
|
|
295
253
|
VscodeSingleSelect.styles = styles;
|
|
296
254
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-single-select.js","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-single-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\nimport {highlightRanges} from '../includes/vscode-select/helpers.js';\n\n/**\n * Allows to select an item from multiple options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-single-select\n *\n * ## Types\n *\n * ```typescript\n *interface Option {\n * label: string;\n * value: string;\n * description: string;\n * selected: boolean;\n * disabled: boolean;\n *}\n * ```\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-single-select')\nexport class VscodeSingleSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @internal */\n static formAssociated = true;\n\n @property({attribute: 'default-value'})\n defaultValue = '';\n\n /** @internal */\n @property({type: String, attribute: true, reflect: true})\n override role = 'listbox';\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n @property({type: Number, attribute: 'selected-index'})\n set selectedIndex(val: number) {\n this._selectedIndex = val;\n this._value = this._options[this._selectedIndex]\n ? this._options[this._selectedIndex].value\n : '';\n }\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @property({type: String})\n set value(val: string) {\n if (this._options[this._selectedIndex]) {\n this._options[this._selectedIndex].selected = false;\n }\n\n this._selectedIndex = this._options.findIndex((op) => op.value === val);\n\n if (this._selectedIndex > -1) {\n this._options[this._selectedIndex].selected = true;\n this._value = val;\n this._requestedValueToSetLater = '';\n } else {\n this._value = '';\n this._requestedValueToSetLater = val;\n }\n }\n get value(): string {\n if (this._options[this._selectedIndex]) {\n return this._options[this._selectedIndex]?.value ?? '';\n }\n\n return '';\n }\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n @query('.face')\n private _face!: HTMLDivElement;\n\n private _internals: ElementInternals;\n\n private updateInputValue() {\n if (!this.combobox) {\n return;\n }\n\n const input = this.renderRoot.querySelector(\n '.combobox-input'\n ) as HTMLInputElement;\n\n if (input) {\n input.value = this._options[this._selectedIndex]\n ? this._options[this._selectedIndex].label\n : '';\n }\n }\n\n constructor() {\n super();\n /** @internal */\n this._multiple = false;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._manageRequired();\n });\n }\n\n /** @internal */\n formResetCallback(): void {\n this.value = this.defaultValue;\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: string,\n _mode: 'restore' | 'autocomplete'\n ): void {\n this.updateComplete.then(() => {\n this.value = state;\n });\n }\n\n /** @internal */\n get type(): 'select-one' {\n return 'select-one';\n }\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n private _requestedValueToSetLater = '';\n\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater) {\n // the value is set before the available options are appended\n const foundIndex = this._options.findIndex(\n (op) => op.value === this._requestedValueToSetLater\n );\n\n if (foundIndex > 0) {\n this._selectedIndex = foundIndex;\n this._requestedValueToSetLater = '';\n }\n }\n\n if (this._selectedIndex > -1 && this._options.length > 0) {\n this._internals.setFormValue(this._options[this._selectedIndex].value);\n } else {\n this._internals.setFormValue(null);\n }\n }\n\n protected override _onArrowUpKeyDown(): void {\n super._onArrowUpKeyDown();\n\n if (this.open || this._selectedIndex <= 0) {\n return;\n }\n\n this._filterPattern = '';\n this._selectedIndex -= 1;\n this._activeIndex = this._selectedIndex;\n this._value = this._options[this._selectedIndex].value;\n this._internals.setFormValue(this._value);\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n protected override _onArrowDownKeyDown(): void {\n super._onArrowDownKeyDown();\n\n if (this.open || this._selectedIndex >= this._options.length - 1) {\n return;\n }\n\n this._filterPattern = '';\n this._selectedIndex += 1;\n this._activeIndex = this._selectedIndex;\n this._value = this._options[this._selectedIndex].value;\n this._internals.setFormValue(this._value);\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n protected override _onEnterKeyDown(): void {\n super._onEnterKeyDown();\n\n this.updateInputValue();\n this._internals.setFormValue(this._value);\n this._manageRequired();\n }\n\n private _onOptionClick(ev: MouseEvent) {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) =>\n (et as HTMLElement)?.matches('li.option')\n ) as HTMLElement | undefined;\n\n if (!optEl || optEl.matches('.disabled')) {\n return;\n }\n\n this._selectedIndex = Number((optEl as HTMLElement).dataset.index);\n this._value = this._options[this._selectedIndex].value;\n\n this._toggleDropdown(false);\n this._internals.setFormValue(this._value);\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n private _manageRequired() {\n const {value} = this;\n if (value === '' && this.required) {\n this._internals.setValidity(\n {\n valueMissing: true,\n },\n 'Please select an item in the list.',\n this._face\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n protected override _renderSelectFace(): TemplateResult {\n const label = this._options[this._selectedIndex]?.label ?? '';\n\n return html`\n <div\n class=\"select-face face\"\n @click=${this._onFaceClick}\n tabindex=${this.tabIndex > -1 ? 0 : -1}\n >\n <span class=\"text\">${label}</span> ${chevronDownIcon}\n </div>\n `;\n }\n\n protected override _renderComboboxFace(): TemplateResult {\n const inputVal =\n this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';\n\n return html`\n <div class=\"combobox-face face\">\n <input\n class=\"combobox-input\"\n spellcheck=\"false\"\n type=\"text\"\n autocomplete=\"off\"\n .value=${inputVal}\n @focus=${this._onComboboxInputFocus}\n @input=${this._onComboboxInputInput}\n @click=${this._onComboboxInputClick}\n >\n <button\n class=\"combobox-button\"\n type=\"button\"\n @click=${this._onComboboxButtonClick}\n @keydown=${this._onComboboxButtonKeyDown}\n >\n ${chevronDownIcon}\n </button>\n </div>\n `;\n }\n\n protected override _renderOptions(): TemplateResult {\n const list = this.combobox ? this._filteredOptions : this._options;\n const options = list.map((op, index) => {\n const classes = classMap({\n option: true,\n disabled: op.disabled,\n selected: op.selected,\n active: index === this._activeIndex && !op.disabled,\n });\n\n return html`\n <li\n class=${classes}\n data-index=${op.index}\n data-filtered-index=${index}\n >\n ${(op.ranges?.length ?? 0 > 0)\n ? highlightRanges(op.label, op.ranges ?? [])\n : op.label}\n </li>\n `;\n });\n\n return html`\n <ul\n class=\"options\"\n @mouseover=${this._onOptionMouseOver}\n @click=${this._onOptionClick}\n >\n ${options}\n </ul>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-single-select': VscodeSingleSelect;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"vscode-single-select.js","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-single-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\nexport type VscSingleSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/**\n * Allows to select an item from multiple options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-single-select\n *\n * ## Types\n *\n * ```typescript\n *interface Option {\n * label: string;\n * value: string;\n * description: string;\n * selected: boolean;\n * disabled: boolean;\n *}\n * ```\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-single-select')\nexport class VscodeSingleSelect\n extends VscodeSelectBase\n implements AssociatedFormControl\n{\n static override styles = styles;\n\n /** @internal */\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** @internal */\n static formAssociated = true;\n\n @property({attribute: 'default-value'})\n defaultValue = '';\n\n /** @internal */\n @property({type: String, attribute: true, reflect: true})\n override role = 'listbox';\n\n @property({reflect: true})\n name: string | undefined = undefined;\n\n @property({type: Number, attribute: 'selected-index'})\n set selectedIndex(val: number) {\n this._selectedIndex = val;\n this._value = this._options[this._selectedIndex]\n ? this._options[this._selectedIndex].value\n : '';\n }\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @property({type: String})\n set value(val: string) {\n if (this._options[this._selectedIndex]) {\n this._options[this._selectedIndex].selected = false;\n }\n\n this._selectedIndex = this._options.findIndex((op) => op.value === val);\n\n if (this._selectedIndex > -1) {\n this._options[this._selectedIndex].selected = true;\n this._value = val;\n this._requestedValueToSetLater = '';\n } else {\n this._value = '';\n this._requestedValueToSetLater = val;\n }\n }\n get value(): string {\n if (this._options[this._selectedIndex]) {\n return this._options[this._selectedIndex]?.value ?? '';\n }\n\n return '';\n }\n\n @property({type: Boolean, reflect: true})\n required = false;\n\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n get willValidate() {\n return this._internals.willValidate;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n @query('.face')\n private _face!: HTMLDivElement;\n\n private _internals: ElementInternals;\n\n private updateInputValue() {\n if (!this.combobox) {\n return;\n }\n\n const input = this.renderRoot.querySelector(\n '.combobox-input'\n ) as HTMLInputElement;\n\n if (input) {\n input.value = this._options[this._selectedIndex]\n ? this._options[this._selectedIndex].label\n : '';\n }\n }\n\n constructor() {\n super();\n /** @internal */\n this._multiple = false;\n this._internals = this.attachInternals();\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n this.updateComplete.then(() => {\n this._manageRequired();\n });\n }\n\n /** @internal */\n formResetCallback(): void {\n this.value = this.defaultValue;\n }\n\n /** @internal */\n formStateRestoreCallback(\n state: string,\n _mode: 'restore' | 'autocomplete'\n ): void {\n this.updateComplete.then(() => {\n this.value = state;\n });\n }\n\n /** @internal */\n get type(): 'select-one' {\n return 'select-one';\n }\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n private _requestedValueToSetLater = '';\n\n protected override async _createAndSelectSuggestedOption() {\n const nextIndex = this._createSuggestedOption();\n\n await this.updateComplete;\n\n this.selectedIndex = nextIndex;\n this._dispatchChangeEvent();\n const opCreateEvent: VscSingleSelectCreateOptionEvent = new CustomEvent(\n 'vsc-single-select-create-option',\n {detail: {value: this._options[nextIndex]?.value ?? ''}}\n );\n this.dispatchEvent(opCreateEvent);\n this._toggleDropdown(false);\n this._isPlaceholderOptionActive = false;\n }\n\n protected override _onSlotChange(): void {\n super._onSlotChange();\n\n if (this._requestedValueToSetLater) {\n // the value is set before the available options are appended\n const foundIndex = this._options.findIndex(\n (op) => op.value === this._requestedValueToSetLater\n );\n\n if (foundIndex > 0) {\n this._selectedIndex = foundIndex;\n this._requestedValueToSetLater = '';\n }\n }\n\n if (this._selectedIndex > -1 && this._options.length > 0) {\n this._internals.setFormValue(this._options[this._selectedIndex].value);\n } else {\n this._internals.setFormValue(null);\n }\n }\n\n protected override _onArrowUpKeyDown(): void {\n super._onArrowUpKeyDown();\n\n if (this.open || this._selectedIndex <= 0) {\n return;\n }\n\n this._filterPattern = '';\n this._selectedIndex -= 1;\n this._activeIndex = this._selectedIndex;\n this._value = this._options[this._selectedIndex].value;\n this._internals.setFormValue(this._value);\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n protected override _onArrowDownKeyDown(): void {\n super._onArrowDownKeyDown();\n\n if (this.open || this._selectedIndex >= this._options.length - 1) {\n return;\n }\n\n this._filterPattern = '';\n this._selectedIndex += 1;\n this._activeIndex = this._selectedIndex;\n this._value = this._options[this._selectedIndex].value;\n this._internals.setFormValue(this._value);\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n\n protected override _onEnterKeyDown(ev: KeyboardEvent): void {\n super._onEnterKeyDown(ev);\n\n this.updateInputValue();\n this._internals.setFormValue(this._value);\n this._manageRequired();\n }\n\n protected override _onOptionClick(ev: MouseEvent) {\n const composedPath = ev.composedPath();\n const optEl = composedPath.find((et) =>\n (et as HTMLElement)?.matches('li.option')\n ) as HTMLElement | undefined;\n\n if (!optEl || optEl.matches('.disabled')) {\n return;\n }\n\n const isPlaceholderOption = optEl.classList.contains('placeholder');\n\n if (isPlaceholderOption) {\n if (this.creatable) {\n this._createAndSelectSuggestedOption();\n }\n } else {\n this._selectedIndex = Number((optEl as HTMLElement).dataset.index);\n this._value = this._options[this._selectedIndex].value;\n\n this._toggleDropdown(false);\n this._internals.setFormValue(this._value);\n this._manageRequired();\n this._dispatchChangeEvent();\n }\n }\n\n private _manageRequired() {\n const {value} = this;\n if (value === '' && this.required) {\n this._internals.setValidity(\n {valueMissing: true},\n 'Please select an item in the list.',\n this._face\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n protected override _renderSelectFace(): TemplateResult {\n const label = this._options[this._selectedIndex]?.label ?? '';\n\n return html`\n <div\n class=\"select-face face\"\n @click=${this._onFaceClick}\n tabindex=${this.tabIndex > -1 ? 0 : -1}\n >\n <span class=\"text\">${label}</span> ${chevronDownIcon}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-single-select': VscodeSingleSelect;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-single-select-create-option': VscSingleSelectCreateOptionEvent;\n }\n}\n"]}
|