kr-elements 0.0.1-alpha.31 → 0.0.1-alpha.33
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/dist/cjs/combobox/Combobox.markup.js +28 -34
- package/dist/cjs/combobox/HTML.combobox.element.js +33 -38
- package/dist/cjs/combobox/HTML.combobox.option.element.js +15 -24
- package/dist/cjs/combobox/HTML.combobox.tag.element.js +6 -3
- package/dist/esm/combobox/Combobox.markup.js +28 -34
- package/dist/esm/combobox/HTML.combobox.element.js +33 -38
- package/dist/esm/combobox/HTML.combobox.option.element.js +15 -24
- package/dist/esm/combobox/HTML.combobox.tag.element.js +6 -3
- package/dist/types/combobox/Combobox.markup.d.ts.map +1 -1
- package/dist/types/combobox/HTML.combobox.element.d.ts +3 -4
- package/dist/types/combobox/HTML.combobox.element.d.ts.map +1 -1
- package/dist/types/combobox/HTML.combobox.option.element.d.ts +2 -2
- package/dist/types/combobox/HTML.combobox.option.element.d.ts.map +1 -1
- package/dist/types/combobox/HTML.combobox.tag.element.d.ts +1 -0
- package/dist/types/combobox/HTML.combobox.tag.element.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ class ComboboxMarkup {
|
|
|
27
27
|
const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || '';
|
|
28
28
|
this.tagsContainer = this.#shadowRoot.querySelector('#tags');
|
|
29
29
|
this.optionsContainer = this.#shadowRoot.querySelector('[part*="options"]');
|
|
30
|
-
this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all
|
|
30
|
+
this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all"]');
|
|
31
31
|
this.dropdown = this.#shadowRoot.querySelector('#dropdown');
|
|
32
32
|
this.placeholder = this.#shadowRoot.querySelector('#placeholder');
|
|
33
33
|
this.placeholder.innerText = placeholder;
|
|
@@ -130,34 +130,26 @@ class ComboboxMarkup {
|
|
|
130
130
|
let button;
|
|
131
131
|
if (userTagTemplate && userTagTemplate instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement) {
|
|
132
132
|
tag = userTagTemplate.cloneNode(true);
|
|
133
|
-
tag.querySelectorAll('
|
|
133
|
+
tag.querySelectorAll('slot')
|
|
134
134
|
.forEach(node => {
|
|
135
|
-
const
|
|
136
|
-
|
|
137
|
-
const
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
const exportedParts = option.getAttribute('exportparts');
|
|
142
|
-
if (exportedParts) {
|
|
143
|
-
tag.part.add(exportedParts);
|
|
144
|
-
}
|
|
145
|
-
tag.replaceChild(newNode, node);
|
|
146
|
-
break;
|
|
147
|
-
}
|
|
135
|
+
const relatedNode = option.querySelector(`[slot="${node.name}"]`);
|
|
136
|
+
if (relatedNode) {
|
|
137
|
+
const clone = relatedNode.cloneNode(true);
|
|
138
|
+
clone.part.remove(...clone.part.values());
|
|
139
|
+
clone.part.add(...node.part.values());
|
|
140
|
+
tag.replaceChild(clone, node);
|
|
148
141
|
}
|
|
149
142
|
});
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}
|
|
143
|
+
tag.part.add(...option.part.values());
|
|
144
|
+
tag.part.remove('option');
|
|
145
|
+
button = tag.querySelector('[part*="clear-tag"]');
|
|
154
146
|
}
|
|
155
147
|
else {
|
|
156
148
|
const template = this.tagTemplate;
|
|
157
149
|
tag = template.cloneNode(true);
|
|
158
150
|
const label = tag.querySelector('[part="tag-label"]');
|
|
159
151
|
label.textContent = option.label;
|
|
160
|
-
button = tag.querySelector('[part="
|
|
152
|
+
button = tag.querySelector('[part="clear-tag"]');
|
|
161
153
|
}
|
|
162
154
|
button.setAttribute('value', value);
|
|
163
155
|
tag.setAttribute('value', value);
|
|
@@ -216,6 +208,8 @@ class ComboboxMarkup {
|
|
|
216
208
|
border-radius: inherit;
|
|
217
209
|
content-visibility: auto;
|
|
218
210
|
cursor: pointer;
|
|
211
|
+
padding-inline: 2px;
|
|
212
|
+
padding-block: 1px;
|
|
219
213
|
}
|
|
220
214
|
|
|
221
215
|
box-option:hover {
|
|
@@ -270,7 +264,7 @@ class ComboboxMarkup {
|
|
|
270
264
|
border-radius: inherit;
|
|
271
265
|
}
|
|
272
266
|
|
|
273
|
-
[part*="
|
|
267
|
+
[part*="tag"] {
|
|
274
268
|
width: 100%;
|
|
275
269
|
justify-self: start;
|
|
276
270
|
box-sizing: border-box;
|
|
@@ -285,7 +279,7 @@ class ComboboxMarkup {
|
|
|
285
279
|
text-transform: uppercase;
|
|
286
280
|
}
|
|
287
281
|
|
|
288
|
-
:host([multiple]) [part*="
|
|
282
|
+
:host([multiple]) [part*="tag"] {
|
|
289
283
|
background-color: Highlight;
|
|
290
284
|
width: fit-content;
|
|
291
285
|
max-width: 100%;
|
|
@@ -304,7 +298,7 @@ class ComboboxMarkup {
|
|
|
304
298
|
flex-grow: unset;
|
|
305
299
|
}
|
|
306
300
|
|
|
307
|
-
[part*="
|
|
301
|
+
[part*="clear-tag"], [part*="clear-all"] {
|
|
308
302
|
border-radius: 100%;
|
|
309
303
|
border: none;
|
|
310
304
|
aspect-ratio: 1;
|
|
@@ -314,40 +308,40 @@ class ComboboxMarkup {
|
|
|
314
308
|
background-color: transparent;
|
|
315
309
|
}
|
|
316
310
|
|
|
317
|
-
[part*="
|
|
311
|
+
[part*="clear-tag"] {
|
|
318
312
|
inline-size: 1em;
|
|
319
313
|
block-size: 1em;
|
|
320
314
|
font-size: 80%;
|
|
321
315
|
display: none;
|
|
322
316
|
}
|
|
323
317
|
|
|
324
|
-
:host([multiple]) [part*="
|
|
325
|
-
:host([clearable]) [part*="
|
|
318
|
+
:host([multiple]) [part*="clear-tag"],
|
|
319
|
+
:host([clearable]) [part*="clear-all"] {
|
|
326
320
|
display: block;
|
|
327
321
|
}
|
|
328
322
|
|
|
329
|
-
[part*="clear-all
|
|
323
|
+
[part*="clear-all"] {
|
|
330
324
|
font-size: inherit;
|
|
331
325
|
inline-size: 1.2em;
|
|
332
326
|
block-size: 1.2em;
|
|
333
327
|
display: none;
|
|
334
328
|
}
|
|
335
329
|
|
|
336
|
-
:host([multiple]) [part*="clear-all
|
|
330
|
+
:host([multiple]) [part*="clear-all"] {
|
|
337
331
|
display: block;
|
|
338
332
|
}
|
|
339
333
|
|
|
340
|
-
[part*="clear-all
|
|
341
|
-
[part*="
|
|
334
|
+
[part*="clear-all"]:hover,
|
|
335
|
+
[part*="clear-tag"]:hover {
|
|
342
336
|
color: ActiveText;
|
|
343
337
|
cursor: pointer;
|
|
344
338
|
}
|
|
345
339
|
|
|
346
|
-
[part*="clear-all
|
|
340
|
+
[part*="clear-all"]:hover {
|
|
347
341
|
background-color: ButtonFace;
|
|
348
342
|
}
|
|
349
343
|
|
|
350
|
-
:host:has(#tags:empty) [part*="clear-all
|
|
344
|
+
:host:has(#tags:empty) [part*="clear-all"] {
|
|
351
345
|
pointer-events: none;
|
|
352
346
|
color: darkgrey;
|
|
353
347
|
}
|
|
@@ -356,7 +350,7 @@ class ComboboxMarkup {
|
|
|
356
350
|
|
|
357
351
|
<div id="tags"></div>
|
|
358
352
|
<div id="placeholder"> </div>
|
|
359
|
-
<button part="clear-all
|
|
353
|
+
<button part="clear-all">✕</button>
|
|
360
354
|
<div id="dropdown" popover="manual">
|
|
361
355
|
<input name="search-input" part="search-input" />
|
|
362
356
|
<div part="options"></div>
|
|
@@ -364,7 +358,7 @@ class ComboboxMarkup {
|
|
|
364
358
|
<template id='tag-template'>
|
|
365
359
|
<box-tag>
|
|
366
360
|
<span part="tag-label"></span>
|
|
367
|
-
<button part="
|
|
361
|
+
<button part="clear-tag">✕</button>
|
|
368
362
|
</box-tag>
|
|
369
363
|
</template>
|
|
370
364
|
`;
|
|
@@ -6,8 +6,7 @@ const Combobox_markup_js_1 = require("./Combobox.markup.js");
|
|
|
6
6
|
const HTML_combobox_option_element_js_1 = require("./HTML.combobox.option.element.js");
|
|
7
7
|
const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
|
|
8
8
|
class HTMLComboboxElement extends HTMLElement {
|
|
9
|
-
static
|
|
10
|
-
static booleanAttributes = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
|
|
9
|
+
static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
|
|
11
10
|
static observerOptions = { childList: true, attributes: false, subtree: false };
|
|
12
11
|
static styleSheet = [new CSSStyleSheet];
|
|
13
12
|
static formAssociated = true;
|
|
@@ -41,7 +40,7 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
41
40
|
}
|
|
42
41
|
formResetCallback() {
|
|
43
42
|
this.#values = new Set;
|
|
44
|
-
this.selectedOptions.forEach(option => option.
|
|
43
|
+
this.selectedOptions.forEach(option => option.selected = false);
|
|
45
44
|
this.#markup.tagsContainer.replaceChildren();
|
|
46
45
|
this.#setValidityAndFormValue();
|
|
47
46
|
this.dispatchEvent(new Event('change'));
|
|
@@ -106,11 +105,27 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
106
105
|
set query(value) {
|
|
107
106
|
if (value === this.query)
|
|
108
107
|
return;
|
|
108
|
+
if (value == null)
|
|
109
|
+
value = '';
|
|
110
|
+
value = String(value);
|
|
109
111
|
super.setAttribute('query', value);
|
|
110
112
|
if (this.#markup.connected) {
|
|
111
113
|
this.#markup.searchInput.value = value;
|
|
112
114
|
}
|
|
113
115
|
}
|
|
116
|
+
get placeholder() {
|
|
117
|
+
return this.getAttribute('placeholder');
|
|
118
|
+
}
|
|
119
|
+
set placeholder(value) {
|
|
120
|
+
if (value == null)
|
|
121
|
+
value = '';
|
|
122
|
+
value = String(value);
|
|
123
|
+
super.setAttribute('placeholder', value);
|
|
124
|
+
if (this.#markup.connected) {
|
|
125
|
+
this.#markup.placeholder.innerText = value;
|
|
126
|
+
this.#markup.searchInput.placeholder = value;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
114
129
|
get clearable() {
|
|
115
130
|
return this.hasAttribute('clearable');
|
|
116
131
|
}
|
|
@@ -149,37 +164,22 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
149
164
|
this.internals.ariaRequired = String(value);
|
|
150
165
|
super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
|
|
151
166
|
}
|
|
152
|
-
get placeholder() {
|
|
153
|
-
return this.getAttribute('placeholder');
|
|
154
|
-
}
|
|
155
|
-
set placeholder(value) {
|
|
156
|
-
super.setAttribute('placeholder', value);
|
|
157
|
-
if (this.#markup.connected) {
|
|
158
|
-
this.#markup.placeholder.innerText = value;
|
|
159
|
-
this.#markup.searchInput.placeholder = value;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
167
|
// Instance methods
|
|
163
168
|
setAttribute(name, value) {
|
|
164
|
-
if (_a.
|
|
165
|
-
Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
if (_a.stringAttributes.has(name)) {
|
|
169
|
+
if (_a.OWN_IDL.has(name)) {
|
|
169
170
|
Reflect.set(this, name, value);
|
|
170
|
-
return;
|
|
171
171
|
}
|
|
172
|
-
|
|
172
|
+
else {
|
|
173
|
+
super.setAttribute(name, value);
|
|
174
|
+
}
|
|
173
175
|
}
|
|
174
176
|
removeAttribute(name) {
|
|
175
|
-
if (_a.
|
|
177
|
+
if (_a.OWN_IDL.has(name)) {
|
|
176
178
|
Reflect.set(this, name, false);
|
|
177
|
-
return;
|
|
178
179
|
}
|
|
179
|
-
|
|
180
|
-
|
|
180
|
+
else {
|
|
181
|
+
super.removeAttribute(name);
|
|
181
182
|
}
|
|
182
|
-
super.removeAttribute(name);
|
|
183
183
|
}
|
|
184
184
|
reportValidity() {
|
|
185
185
|
this.internals.reportValidity();
|
|
@@ -197,7 +197,7 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
197
197
|
}
|
|
198
198
|
// Internal
|
|
199
199
|
#onInput = (event) => {
|
|
200
|
-
if (this.filterable) {
|
|
200
|
+
if (!this.searchable && this.filterable) {
|
|
201
201
|
if (event.target && event.target instanceof HTMLInputElement) {
|
|
202
202
|
this.#markup.sort(event.target.value);
|
|
203
203
|
}
|
|
@@ -232,7 +232,7 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
232
232
|
this.#values.add(value);
|
|
233
233
|
option.toggleAttribute('selected', true);
|
|
234
234
|
const control = this.#markup.createAndAppendTag(option);
|
|
235
|
-
control
|
|
235
|
+
control?.addEventListener('click', this.#onClickTagClearButton);
|
|
236
236
|
if (!this.multiple) {
|
|
237
237
|
this.#markup.closeDropdown();
|
|
238
238
|
}
|
|
@@ -273,7 +273,7 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
273
273
|
else {
|
|
274
274
|
button = event.composedPath()
|
|
275
275
|
.find(el => {
|
|
276
|
-
return el instanceof HTMLElement && el.part.contains('
|
|
276
|
+
return el instanceof HTMLElement && el.part.contains('clear-tag');
|
|
277
277
|
});
|
|
278
278
|
}
|
|
279
279
|
if (button) {
|
|
@@ -300,14 +300,8 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
300
300
|
}
|
|
301
301
|
}
|
|
302
302
|
#initialAttributesSynchronization() {
|
|
303
|
-
for (const key of _a.
|
|
304
|
-
|
|
305
|
-
Reflect.set(this, key, value);
|
|
306
|
-
}
|
|
307
|
-
for (const key of _a.stringAttributes) {
|
|
308
|
-
if (this.hasAttribute(key)) {
|
|
309
|
-
Reflect.set(this, key, this.getAttribute(key));
|
|
310
|
-
}
|
|
303
|
+
for (const key of _a.OWN_IDL) {
|
|
304
|
+
Reflect.set(this, key, this.getAttribute(key));
|
|
311
305
|
}
|
|
312
306
|
}
|
|
313
307
|
static staticLoadCssByUrls(urls) {
|
|
@@ -336,8 +330,9 @@ exports.HTMLComboboxElement = HTMLComboboxElement;
|
|
|
336
330
|
_a = HTMLComboboxElement;
|
|
337
331
|
document.addEventListener('keypress', (event) => {
|
|
338
332
|
if (document.activeElement instanceof HTMLComboboxElement) {
|
|
339
|
-
|
|
340
|
-
|
|
333
|
+
const maybeHost = document.activeElement.shadowRoot.activeElement;
|
|
334
|
+
if (maybeHost instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
|
|
335
|
+
maybeHost.click();
|
|
341
336
|
}
|
|
342
337
|
}
|
|
343
338
|
});
|
|
@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
exports.HTMLComboboxOptionElement = void 0;
|
|
5
5
|
const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
|
|
6
6
|
class HTMLComboboxOptionElement extends HTMLElement {
|
|
7
|
-
static
|
|
8
|
-
|
|
7
|
+
static OWN_IDL = new Set(['value', 'label', 'selected']);
|
|
8
|
+
constructor() {
|
|
9
|
+
super();
|
|
10
|
+
this.part.add('option');
|
|
11
|
+
}
|
|
9
12
|
connectedCallback() {
|
|
10
13
|
this.#initialAttributesSynchronization();
|
|
11
|
-
super.setAttribute('part', 'box-option');
|
|
12
14
|
super.setAttribute('tabindex', "0");
|
|
13
15
|
super.setAttribute('role', "option");
|
|
14
16
|
const value = this.value;
|
|
@@ -60,36 +62,25 @@ class HTMLComboboxOptionElement extends HTMLElement {
|
|
|
60
62
|
super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
|
|
61
63
|
}
|
|
62
64
|
#initialAttributesSynchronization() {
|
|
63
|
-
for (const key of _a.
|
|
64
|
-
|
|
65
|
-
Reflect.set(this, key, value);
|
|
66
|
-
}
|
|
67
|
-
for (const key of _a.stringAttributes) {
|
|
68
|
-
if (this.hasAttribute(key)) {
|
|
69
|
-
Reflect.set(this, key, this.getAttribute(key));
|
|
70
|
-
}
|
|
65
|
+
for (const key of _a.OWN_IDL) {
|
|
66
|
+
this[key] = this.getAttribute(key);
|
|
71
67
|
}
|
|
72
68
|
}
|
|
73
69
|
setAttribute(name, value) {
|
|
74
|
-
if (_a.
|
|
75
|
-
|
|
76
|
-
return;
|
|
70
|
+
if (_a.OWN_IDL.has(name)) {
|
|
71
|
+
this[name] = value;
|
|
77
72
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return;
|
|
73
|
+
else {
|
|
74
|
+
super.setAttribute(name, value);
|
|
81
75
|
}
|
|
82
|
-
super.setAttribute(name, value);
|
|
83
76
|
}
|
|
84
77
|
removeAttribute(name) {
|
|
85
|
-
if (_a.
|
|
86
|
-
|
|
87
|
-
return;
|
|
78
|
+
if (_a.OWN_IDL.has(name)) {
|
|
79
|
+
this[name] = null;
|
|
88
80
|
}
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
else {
|
|
82
|
+
super.removeAttribute(name);
|
|
91
83
|
}
|
|
92
|
-
super.removeAttribute(name);
|
|
93
84
|
}
|
|
94
85
|
}
|
|
95
86
|
exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
|
|
@@ -2,12 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.HTMLComboboxTagElement = void 0;
|
|
4
4
|
class HTMLComboboxTagElement extends HTMLElement {
|
|
5
|
+
constructor() {
|
|
6
|
+
super();
|
|
7
|
+
this.part.add('tag');
|
|
8
|
+
}
|
|
5
9
|
connectedCallback() {
|
|
6
|
-
this.part.add('box-tag');
|
|
7
10
|
if (this.parentElement) {
|
|
8
11
|
if (this.parentElement.hasAttribute('multiple')) {
|
|
9
|
-
if (!this.querySelector('[part
|
|
10
|
-
throw new Error(`A <button> with part="
|
|
12
|
+
if (!this.querySelector('[part*="clear-tag"]')) {
|
|
13
|
+
throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
16
|
}
|
|
@@ -24,7 +24,7 @@ export class ComboboxMarkup {
|
|
|
24
24
|
const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || '';
|
|
25
25
|
this.tagsContainer = this.#shadowRoot.querySelector('#tags');
|
|
26
26
|
this.optionsContainer = this.#shadowRoot.querySelector('[part*="options"]');
|
|
27
|
-
this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all
|
|
27
|
+
this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all"]');
|
|
28
28
|
this.dropdown = this.#shadowRoot.querySelector('#dropdown');
|
|
29
29
|
this.placeholder = this.#shadowRoot.querySelector('#placeholder');
|
|
30
30
|
this.placeholder.innerText = placeholder;
|
|
@@ -127,34 +127,26 @@ export class ComboboxMarkup {
|
|
|
127
127
|
let button;
|
|
128
128
|
if (userTagTemplate && userTagTemplate instanceof HTMLComboboxTagElement) {
|
|
129
129
|
tag = userTagTemplate.cloneNode(true);
|
|
130
|
-
tag.querySelectorAll('
|
|
130
|
+
tag.querySelectorAll('slot')
|
|
131
131
|
.forEach(node => {
|
|
132
|
-
const
|
|
133
|
-
|
|
134
|
-
const
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
const exportedParts = option.getAttribute('exportparts');
|
|
139
|
-
if (exportedParts) {
|
|
140
|
-
tag.part.add(exportedParts);
|
|
141
|
-
}
|
|
142
|
-
tag.replaceChild(newNode, node);
|
|
143
|
-
break;
|
|
144
|
-
}
|
|
132
|
+
const relatedNode = option.querySelector(`[slot="${node.name}"]`);
|
|
133
|
+
if (relatedNode) {
|
|
134
|
+
const clone = relatedNode.cloneNode(true);
|
|
135
|
+
clone.part.remove(...clone.part.values());
|
|
136
|
+
clone.part.add(...node.part.values());
|
|
137
|
+
tag.replaceChild(clone, node);
|
|
145
138
|
}
|
|
146
139
|
});
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
140
|
+
tag.part.add(...option.part.values());
|
|
141
|
+
tag.part.remove('option');
|
|
142
|
+
button = tag.querySelector('[part*="clear-tag"]');
|
|
151
143
|
}
|
|
152
144
|
else {
|
|
153
145
|
const template = this.tagTemplate;
|
|
154
146
|
tag = template.cloneNode(true);
|
|
155
147
|
const label = tag.querySelector('[part="tag-label"]');
|
|
156
148
|
label.textContent = option.label;
|
|
157
|
-
button = tag.querySelector('[part="
|
|
149
|
+
button = tag.querySelector('[part="clear-tag"]');
|
|
158
150
|
}
|
|
159
151
|
button.setAttribute('value', value);
|
|
160
152
|
tag.setAttribute('value', value);
|
|
@@ -213,6 +205,8 @@ export class ComboboxMarkup {
|
|
|
213
205
|
border-radius: inherit;
|
|
214
206
|
content-visibility: auto;
|
|
215
207
|
cursor: pointer;
|
|
208
|
+
padding-inline: 2px;
|
|
209
|
+
padding-block: 1px;
|
|
216
210
|
}
|
|
217
211
|
|
|
218
212
|
box-option:hover {
|
|
@@ -267,7 +261,7 @@ export class ComboboxMarkup {
|
|
|
267
261
|
border-radius: inherit;
|
|
268
262
|
}
|
|
269
263
|
|
|
270
|
-
[part*="
|
|
264
|
+
[part*="tag"] {
|
|
271
265
|
width: 100%;
|
|
272
266
|
justify-self: start;
|
|
273
267
|
box-sizing: border-box;
|
|
@@ -282,7 +276,7 @@ export class ComboboxMarkup {
|
|
|
282
276
|
text-transform: uppercase;
|
|
283
277
|
}
|
|
284
278
|
|
|
285
|
-
:host([multiple]) [part*="
|
|
279
|
+
:host([multiple]) [part*="tag"] {
|
|
286
280
|
background-color: Highlight;
|
|
287
281
|
width: fit-content;
|
|
288
282
|
max-width: 100%;
|
|
@@ -301,7 +295,7 @@ export class ComboboxMarkup {
|
|
|
301
295
|
flex-grow: unset;
|
|
302
296
|
}
|
|
303
297
|
|
|
304
|
-
[part*="
|
|
298
|
+
[part*="clear-tag"], [part*="clear-all"] {
|
|
305
299
|
border-radius: 100%;
|
|
306
300
|
border: none;
|
|
307
301
|
aspect-ratio: 1;
|
|
@@ -311,40 +305,40 @@ export class ComboboxMarkup {
|
|
|
311
305
|
background-color: transparent;
|
|
312
306
|
}
|
|
313
307
|
|
|
314
|
-
[part*="
|
|
308
|
+
[part*="clear-tag"] {
|
|
315
309
|
inline-size: 1em;
|
|
316
310
|
block-size: 1em;
|
|
317
311
|
font-size: 80%;
|
|
318
312
|
display: none;
|
|
319
313
|
}
|
|
320
314
|
|
|
321
|
-
:host([multiple]) [part*="
|
|
322
|
-
:host([clearable]) [part*="
|
|
315
|
+
:host([multiple]) [part*="clear-tag"],
|
|
316
|
+
:host([clearable]) [part*="clear-all"] {
|
|
323
317
|
display: block;
|
|
324
318
|
}
|
|
325
319
|
|
|
326
|
-
[part*="clear-all
|
|
320
|
+
[part*="clear-all"] {
|
|
327
321
|
font-size: inherit;
|
|
328
322
|
inline-size: 1.2em;
|
|
329
323
|
block-size: 1.2em;
|
|
330
324
|
display: none;
|
|
331
325
|
}
|
|
332
326
|
|
|
333
|
-
:host([multiple]) [part*="clear-all
|
|
327
|
+
:host([multiple]) [part*="clear-all"] {
|
|
334
328
|
display: block;
|
|
335
329
|
}
|
|
336
330
|
|
|
337
|
-
[part*="clear-all
|
|
338
|
-
[part*="
|
|
331
|
+
[part*="clear-all"]:hover,
|
|
332
|
+
[part*="clear-tag"]:hover {
|
|
339
333
|
color: ActiveText;
|
|
340
334
|
cursor: pointer;
|
|
341
335
|
}
|
|
342
336
|
|
|
343
|
-
[part*="clear-all
|
|
337
|
+
[part*="clear-all"]:hover {
|
|
344
338
|
background-color: ButtonFace;
|
|
345
339
|
}
|
|
346
340
|
|
|
347
|
-
:host:has(#tags:empty) [part*="clear-all
|
|
341
|
+
:host:has(#tags:empty) [part*="clear-all"] {
|
|
348
342
|
pointer-events: none;
|
|
349
343
|
color: darkgrey;
|
|
350
344
|
}
|
|
@@ -353,7 +347,7 @@ export class ComboboxMarkup {
|
|
|
353
347
|
|
|
354
348
|
<div id="tags"></div>
|
|
355
349
|
<div id="placeholder"> </div>
|
|
356
|
-
<button part="clear-all
|
|
350
|
+
<button part="clear-all">✕</button>
|
|
357
351
|
<div id="dropdown" popover="manual">
|
|
358
352
|
<input name="search-input" part="search-input" />
|
|
359
353
|
<div part="options"></div>
|
|
@@ -361,7 +355,7 @@ export class ComboboxMarkup {
|
|
|
361
355
|
<template id='tag-template'>
|
|
362
356
|
<box-tag>
|
|
363
357
|
<span part="tag-label"></span>
|
|
364
|
-
<button part="
|
|
358
|
+
<button part="clear-tag">✕</button>
|
|
365
359
|
</box-tag>
|
|
366
360
|
</template>
|
|
367
361
|
`;
|
|
@@ -2,8 +2,7 @@ import { ComboboxMarkup } from './Combobox.markup.js';
|
|
|
2
2
|
import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
|
|
3
3
|
import { toBoolean } from './Boolean.attribute.value.normalizer.js';
|
|
4
4
|
export class HTMLComboboxElement extends HTMLElement {
|
|
5
|
-
static
|
|
6
|
-
static booleanAttributes = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
|
|
5
|
+
static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
|
|
7
6
|
static observerOptions = { childList: true, attributes: false, subtree: false };
|
|
8
7
|
static styleSheet = [new CSSStyleSheet];
|
|
9
8
|
static formAssociated = true;
|
|
@@ -37,7 +36,7 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
37
36
|
}
|
|
38
37
|
formResetCallback() {
|
|
39
38
|
this.#values = new Set;
|
|
40
|
-
this.selectedOptions.forEach(option => option.
|
|
39
|
+
this.selectedOptions.forEach(option => option.selected = false);
|
|
41
40
|
this.#markup.tagsContainer.replaceChildren();
|
|
42
41
|
this.#setValidityAndFormValue();
|
|
43
42
|
this.dispatchEvent(new Event('change'));
|
|
@@ -102,11 +101,27 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
102
101
|
set query(value) {
|
|
103
102
|
if (value === this.query)
|
|
104
103
|
return;
|
|
104
|
+
if (value == null)
|
|
105
|
+
value = '';
|
|
106
|
+
value = String(value);
|
|
105
107
|
super.setAttribute('query', value);
|
|
106
108
|
if (this.#markup.connected) {
|
|
107
109
|
this.#markup.searchInput.value = value;
|
|
108
110
|
}
|
|
109
111
|
}
|
|
112
|
+
get placeholder() {
|
|
113
|
+
return this.getAttribute('placeholder');
|
|
114
|
+
}
|
|
115
|
+
set placeholder(value) {
|
|
116
|
+
if (value == null)
|
|
117
|
+
value = '';
|
|
118
|
+
value = String(value);
|
|
119
|
+
super.setAttribute('placeholder', value);
|
|
120
|
+
if (this.#markup.connected) {
|
|
121
|
+
this.#markup.placeholder.innerText = value;
|
|
122
|
+
this.#markup.searchInput.placeholder = value;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
110
125
|
get clearable() {
|
|
111
126
|
return this.hasAttribute('clearable');
|
|
112
127
|
}
|
|
@@ -145,37 +160,22 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
145
160
|
this.internals.ariaRequired = String(value);
|
|
146
161
|
super.toggleAttribute('required', toBoolean(value));
|
|
147
162
|
}
|
|
148
|
-
get placeholder() {
|
|
149
|
-
return this.getAttribute('placeholder');
|
|
150
|
-
}
|
|
151
|
-
set placeholder(value) {
|
|
152
|
-
super.setAttribute('placeholder', value);
|
|
153
|
-
if (this.#markup.connected) {
|
|
154
|
-
this.#markup.placeholder.innerText = value;
|
|
155
|
-
this.#markup.searchInput.placeholder = value;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
163
|
// Instance methods
|
|
159
164
|
setAttribute(name, value) {
|
|
160
|
-
if (HTMLComboboxElement.
|
|
161
|
-
Reflect.set(this, name, toBoolean(value));
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
if (HTMLComboboxElement.stringAttributes.has(name)) {
|
|
165
|
+
if (HTMLComboboxElement.OWN_IDL.has(name)) {
|
|
165
166
|
Reflect.set(this, name, value);
|
|
166
|
-
return;
|
|
167
167
|
}
|
|
168
|
-
|
|
168
|
+
else {
|
|
169
|
+
super.setAttribute(name, value);
|
|
170
|
+
}
|
|
169
171
|
}
|
|
170
172
|
removeAttribute(name) {
|
|
171
|
-
if (HTMLComboboxElement.
|
|
173
|
+
if (HTMLComboboxElement.OWN_IDL.has(name)) {
|
|
172
174
|
Reflect.set(this, name, false);
|
|
173
|
-
return;
|
|
174
175
|
}
|
|
175
|
-
|
|
176
|
-
|
|
176
|
+
else {
|
|
177
|
+
super.removeAttribute(name);
|
|
177
178
|
}
|
|
178
|
-
super.removeAttribute(name);
|
|
179
179
|
}
|
|
180
180
|
reportValidity() {
|
|
181
181
|
this.internals.reportValidity();
|
|
@@ -193,7 +193,7 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
193
193
|
}
|
|
194
194
|
// Internal
|
|
195
195
|
#onInput = (event) => {
|
|
196
|
-
if (this.filterable) {
|
|
196
|
+
if (!this.searchable && this.filterable) {
|
|
197
197
|
if (event.target && event.target instanceof HTMLInputElement) {
|
|
198
198
|
this.#markup.sort(event.target.value);
|
|
199
199
|
}
|
|
@@ -228,7 +228,7 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
228
228
|
this.#values.add(value);
|
|
229
229
|
option.toggleAttribute('selected', true);
|
|
230
230
|
const control = this.#markup.createAndAppendTag(option);
|
|
231
|
-
control
|
|
231
|
+
control?.addEventListener('click', this.#onClickTagClearButton);
|
|
232
232
|
if (!this.multiple) {
|
|
233
233
|
this.#markup.closeDropdown();
|
|
234
234
|
}
|
|
@@ -269,7 +269,7 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
269
269
|
else {
|
|
270
270
|
button = event.composedPath()
|
|
271
271
|
.find(el => {
|
|
272
|
-
return el instanceof HTMLElement && el.part.contains('
|
|
272
|
+
return el instanceof HTMLElement && el.part.contains('clear-tag');
|
|
273
273
|
});
|
|
274
274
|
}
|
|
275
275
|
if (button) {
|
|
@@ -296,14 +296,8 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
296
296
|
}
|
|
297
297
|
}
|
|
298
298
|
#initialAttributesSynchronization() {
|
|
299
|
-
for (const key of HTMLComboboxElement.
|
|
300
|
-
|
|
301
|
-
Reflect.set(this, key, value);
|
|
302
|
-
}
|
|
303
|
-
for (const key of HTMLComboboxElement.stringAttributes) {
|
|
304
|
-
if (this.hasAttribute(key)) {
|
|
305
|
-
Reflect.set(this, key, this.getAttribute(key));
|
|
306
|
-
}
|
|
299
|
+
for (const key of HTMLComboboxElement.OWN_IDL) {
|
|
300
|
+
Reflect.set(this, key, this.getAttribute(key));
|
|
307
301
|
}
|
|
308
302
|
}
|
|
309
303
|
static staticLoadCssByUrls(urls) {
|
|
@@ -330,8 +324,9 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
330
324
|
}
|
|
331
325
|
document.addEventListener('keypress', (event) => {
|
|
332
326
|
if (document.activeElement instanceof HTMLComboboxElement) {
|
|
333
|
-
|
|
334
|
-
|
|
327
|
+
const maybeHost = document.activeElement.shadowRoot.activeElement;
|
|
328
|
+
if (maybeHost instanceof HTMLComboboxOptionElement) {
|
|
329
|
+
maybeHost.click();
|
|
335
330
|
}
|
|
336
331
|
}
|
|
337
332
|
});
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { toBoolean } from './Boolean.attribute.value.normalizer.js';
|
|
2
2
|
export class HTMLComboboxOptionElement extends HTMLElement {
|
|
3
|
-
static
|
|
4
|
-
|
|
3
|
+
static OWN_IDL = new Set(['value', 'label', 'selected']);
|
|
4
|
+
constructor() {
|
|
5
|
+
super();
|
|
6
|
+
this.part.add('option');
|
|
7
|
+
}
|
|
5
8
|
connectedCallback() {
|
|
6
9
|
this.#initialAttributesSynchronization();
|
|
7
|
-
super.setAttribute('part', 'box-option');
|
|
8
10
|
super.setAttribute('tabindex', "0");
|
|
9
11
|
super.setAttribute('role', "option");
|
|
10
12
|
const value = this.value;
|
|
@@ -56,36 +58,25 @@ export class HTMLComboboxOptionElement extends HTMLElement {
|
|
|
56
58
|
super.toggleAttribute('selected', toBoolean(value));
|
|
57
59
|
}
|
|
58
60
|
#initialAttributesSynchronization() {
|
|
59
|
-
for (const key of HTMLComboboxOptionElement.
|
|
60
|
-
|
|
61
|
-
Reflect.set(this, key, value);
|
|
62
|
-
}
|
|
63
|
-
for (const key of HTMLComboboxOptionElement.stringAttributes) {
|
|
64
|
-
if (this.hasAttribute(key)) {
|
|
65
|
-
Reflect.set(this, key, this.getAttribute(key));
|
|
66
|
-
}
|
|
61
|
+
for (const key of HTMLComboboxOptionElement.OWN_IDL) {
|
|
62
|
+
this[key] = this.getAttribute(key);
|
|
67
63
|
}
|
|
68
64
|
}
|
|
69
65
|
setAttribute(name, value) {
|
|
70
|
-
if (HTMLComboboxOptionElement.
|
|
71
|
-
|
|
72
|
-
return;
|
|
66
|
+
if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
|
|
67
|
+
this[name] = value;
|
|
73
68
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return;
|
|
69
|
+
else {
|
|
70
|
+
super.setAttribute(name, value);
|
|
77
71
|
}
|
|
78
|
-
super.setAttribute(name, value);
|
|
79
72
|
}
|
|
80
73
|
removeAttribute(name) {
|
|
81
|
-
if (HTMLComboboxOptionElement.
|
|
82
|
-
|
|
83
|
-
return;
|
|
74
|
+
if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
|
|
75
|
+
this[name] = null;
|
|
84
76
|
}
|
|
85
|
-
|
|
86
|
-
|
|
77
|
+
else {
|
|
78
|
+
super.removeAttribute(name);
|
|
87
79
|
}
|
|
88
|
-
super.removeAttribute(name);
|
|
89
80
|
}
|
|
90
81
|
}
|
|
91
82
|
if (!window.customElements.get('box-option')) {
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export class HTMLComboboxTagElement extends HTMLElement {
|
|
2
|
+
constructor() {
|
|
3
|
+
super();
|
|
4
|
+
this.part.add('tag');
|
|
5
|
+
}
|
|
2
6
|
connectedCallback() {
|
|
3
|
-
this.part.add('box-tag');
|
|
4
7
|
if (this.parentElement) {
|
|
5
8
|
if (this.parentElement.hasAttribute('multiple')) {
|
|
6
|
-
if (!this.querySelector('[part
|
|
7
|
-
throw new Error(`A <button> with part="
|
|
9
|
+
if (!this.querySelector('[part*="clear-tag"]')) {
|
|
10
|
+
throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
|
|
8
11
|
}
|
|
9
12
|
}
|
|
10
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAClD,OAAO,EAAE,UAAU,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACtD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,sBAAsB;IAMtB,IAAI,CAAC,KAAK,EAAE,MAAM;IAelB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAcX;IAED,aAAa;IAYb,YAAY,GAAI,OAAO,KAAK,UAG3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;
|
|
1
|
+
{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAClD,OAAO,EAAE,UAAU,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACtD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,sBAAsB;IAMtB,IAAI,CAAC,KAAK,EAAE,MAAM;IAelB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAcX;IAED,aAAa;IAYb,YAAY,GAAI,OAAO,KAAK,UAG3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAqCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAoMlB;CACF"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
|
|
2
2
|
export declare class HTMLComboboxElement extends HTMLElement {
|
|
3
3
|
#private;
|
|
4
|
-
static
|
|
5
|
-
static booleanAttributes: Set<string>;
|
|
4
|
+
static OWN_IDL: Set<string>;
|
|
6
5
|
static observerOptions: {
|
|
7
6
|
childList: boolean;
|
|
8
7
|
attributes: boolean;
|
|
@@ -25,6 +24,8 @@ export declare class HTMLComboboxElement extends HTMLElement {
|
|
|
25
24
|
set value(value: string);
|
|
26
25
|
get query(): string;
|
|
27
26
|
set query(value: string);
|
|
27
|
+
get placeholder(): string;
|
|
28
|
+
set placeholder(value: string);
|
|
28
29
|
get clearable(): boolean;
|
|
29
30
|
set clearable(value: boolean);
|
|
30
31
|
get multiple(): boolean;
|
|
@@ -37,8 +38,6 @@ export declare class HTMLComboboxElement extends HTMLElement {
|
|
|
37
38
|
set disabled(value: boolean);
|
|
38
39
|
get required(): boolean;
|
|
39
40
|
set required(value: boolean);
|
|
40
|
-
get placeholder(): string;
|
|
41
|
-
set placeholder(value: string);
|
|
42
41
|
setAttribute(name: string, value: any): void;
|
|
43
42
|
removeAttribute(name: string): void;
|
|
44
43
|
reportValidity(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,OAAO,cAA0H;IACxI,MAAM,CAAC,eAAe;;;;MAA0D;IAChF,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;;IAkBvB,iBAAiB;IASjB,oBAAoB;IAKpB,iBAAiB;IAQjB,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAMxC,IAAI,YAAY,aAEf;IACD,IAAI,eAAe,0CAElB;IACD,IAAI,QAAQ,kBAEX;IACD,IAAI,YAAY,YAEf;IAGD,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAgCtB;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAQpB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAGD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,cAAc;IAId,aAAa;IAIb,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAwHjC,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,MAAM,CAAC,8BAA8B;CAoBtC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare class HTMLComboboxOptionElement extends HTMLElement {
|
|
2
2
|
#private;
|
|
3
|
-
static
|
|
4
|
-
|
|
3
|
+
static OWN_IDL: Set<string>;
|
|
4
|
+
constructor();
|
|
5
5
|
connectedCallback(): void;
|
|
6
6
|
get value(): string;
|
|
7
7
|
set value(value: string);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,OAAO,cAA2C;;IAOzD,iBAAiB;IAyCjB,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAEd;IAED,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAEd;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAQD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAQxC,eAAe,CAAC,IAAI,EAAE,MAAM;CAO7B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HTML.combobox.tag.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.tag.element.ts"],"names":[],"mappings":"AAAA,qBAAa,sBAAuB,SAAQ,WAAW
|
|
1
|
+
{"version":3,"file":"HTML.combobox.tag.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.tag.element.ts"],"names":[],"mappings":"AAAA,qBAAa,sBAAuB,SAAQ,WAAW;;IAMrD,iBAAiB;CASlB"}
|