kr-elements 0.0.1-alpha.32 → 0.0.1-alpha.34
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 +26 -34
- package/dist/cjs/combobox/HTML.combobox.element.js +3 -3
- 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 +26 -34
- package/dist/esm/combobox/HTML.combobox.element.js +3 -3
- 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.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);
|
|
@@ -272,7 +264,7 @@ class ComboboxMarkup {
|
|
|
272
264
|
border-radius: inherit;
|
|
273
265
|
}
|
|
274
266
|
|
|
275
|
-
[part*="
|
|
267
|
+
[part*="tag"] {
|
|
276
268
|
width: 100%;
|
|
277
269
|
justify-self: start;
|
|
278
270
|
box-sizing: border-box;
|
|
@@ -287,7 +279,7 @@ class ComboboxMarkup {
|
|
|
287
279
|
text-transform: uppercase;
|
|
288
280
|
}
|
|
289
281
|
|
|
290
|
-
:host([multiple]) [part*="
|
|
282
|
+
:host([multiple]) [part*="tag"] {
|
|
291
283
|
background-color: Highlight;
|
|
292
284
|
width: fit-content;
|
|
293
285
|
max-width: 100%;
|
|
@@ -306,7 +298,7 @@ class ComboboxMarkup {
|
|
|
306
298
|
flex-grow: unset;
|
|
307
299
|
}
|
|
308
300
|
|
|
309
|
-
[part*="
|
|
301
|
+
[part*="clear-tag"], [part*="clear-all"] {
|
|
310
302
|
border-radius: 100%;
|
|
311
303
|
border: none;
|
|
312
304
|
aspect-ratio: 1;
|
|
@@ -316,40 +308,40 @@ class ComboboxMarkup {
|
|
|
316
308
|
background-color: transparent;
|
|
317
309
|
}
|
|
318
310
|
|
|
319
|
-
[part*="
|
|
311
|
+
[part*="clear-tag"] {
|
|
320
312
|
inline-size: 1em;
|
|
321
313
|
block-size: 1em;
|
|
322
314
|
font-size: 80%;
|
|
323
315
|
display: none;
|
|
324
316
|
}
|
|
325
317
|
|
|
326
|
-
:host([multiple]) [part*="
|
|
327
|
-
:host([clearable]) [part*="
|
|
318
|
+
:host([multiple]) [part*="clear-tag"],
|
|
319
|
+
:host([clearable]) [part*="clear-all"] {
|
|
328
320
|
display: block;
|
|
329
321
|
}
|
|
330
322
|
|
|
331
|
-
[part*="clear-all
|
|
323
|
+
[part*="clear-all"] {
|
|
332
324
|
font-size: inherit;
|
|
333
325
|
inline-size: 1.2em;
|
|
334
326
|
block-size: 1.2em;
|
|
335
327
|
display: none;
|
|
336
328
|
}
|
|
337
329
|
|
|
338
|
-
:host([multiple]) [part*="clear-all
|
|
330
|
+
:host([multiple]) [part*="clear-all"] {
|
|
339
331
|
display: block;
|
|
340
332
|
}
|
|
341
333
|
|
|
342
|
-
[part*="clear-all
|
|
343
|
-
[part*="
|
|
334
|
+
[part*="clear-all"]:hover,
|
|
335
|
+
[part*="clear-tag"]:hover {
|
|
344
336
|
color: ActiveText;
|
|
345
337
|
cursor: pointer;
|
|
346
338
|
}
|
|
347
339
|
|
|
348
|
-
[part*="clear-all
|
|
340
|
+
[part*="clear-all"]:hover {
|
|
349
341
|
background-color: ButtonFace;
|
|
350
342
|
}
|
|
351
343
|
|
|
352
|
-
:host:has(#tags:empty) [part*="clear-all
|
|
344
|
+
:host:has(#tags:empty) [part*="clear-all"] {
|
|
353
345
|
pointer-events: none;
|
|
354
346
|
color: darkgrey;
|
|
355
347
|
}
|
|
@@ -358,7 +350,7 @@ class ComboboxMarkup {
|
|
|
358
350
|
|
|
359
351
|
<div id="tags"></div>
|
|
360
352
|
<div id="placeholder"> </div>
|
|
361
|
-
<button part="clear-all
|
|
353
|
+
<button part="clear-all">✕</button>
|
|
362
354
|
<div id="dropdown" popover="manual">
|
|
363
355
|
<input name="search-input" part="search-input" />
|
|
364
356
|
<div part="options"></div>
|
|
@@ -366,7 +358,7 @@ class ComboboxMarkup {
|
|
|
366
358
|
<template id='tag-template'>
|
|
367
359
|
<box-tag>
|
|
368
360
|
<span part="tag-label"></span>
|
|
369
|
-
<button part="
|
|
361
|
+
<button part="clear-tag">✕</button>
|
|
370
362
|
</box-tag>
|
|
371
363
|
</template>
|
|
372
364
|
`;
|
|
@@ -40,7 +40,7 @@ class HTMLComboboxElement extends HTMLElement {
|
|
|
40
40
|
}
|
|
41
41
|
formResetCallback() {
|
|
42
42
|
this.#values = new Set;
|
|
43
|
-
this.selectedOptions.forEach(option => option.
|
|
43
|
+
this.selectedOptions.forEach(option => option.selected = false);
|
|
44
44
|
this.#markup.tagsContainer.replaceChildren();
|
|
45
45
|
this.#setValidityAndFormValue();
|
|
46
46
|
this.dispatchEvent(new Event('change'));
|
|
@@ -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) {
|
|
@@ -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
|
+
}
|
|
9
11
|
connectedCallback() {
|
|
10
12
|
this.#initialAttributesSynchronization();
|
|
11
|
-
|
|
13
|
+
this.part.add('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
|
+
}
|
|
5
8
|
connectedCallback() {
|
|
6
|
-
this.part.add('
|
|
9
|
+
this.part.add('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);
|
|
@@ -269,7 +261,7 @@ export class ComboboxMarkup {
|
|
|
269
261
|
border-radius: inherit;
|
|
270
262
|
}
|
|
271
263
|
|
|
272
|
-
[part*="
|
|
264
|
+
[part*="tag"] {
|
|
273
265
|
width: 100%;
|
|
274
266
|
justify-self: start;
|
|
275
267
|
box-sizing: border-box;
|
|
@@ -284,7 +276,7 @@ export class ComboboxMarkup {
|
|
|
284
276
|
text-transform: uppercase;
|
|
285
277
|
}
|
|
286
278
|
|
|
287
|
-
:host([multiple]) [part*="
|
|
279
|
+
:host([multiple]) [part*="tag"] {
|
|
288
280
|
background-color: Highlight;
|
|
289
281
|
width: fit-content;
|
|
290
282
|
max-width: 100%;
|
|
@@ -303,7 +295,7 @@ export class ComboboxMarkup {
|
|
|
303
295
|
flex-grow: unset;
|
|
304
296
|
}
|
|
305
297
|
|
|
306
|
-
[part*="
|
|
298
|
+
[part*="clear-tag"], [part*="clear-all"] {
|
|
307
299
|
border-radius: 100%;
|
|
308
300
|
border: none;
|
|
309
301
|
aspect-ratio: 1;
|
|
@@ -313,40 +305,40 @@ export class ComboboxMarkup {
|
|
|
313
305
|
background-color: transparent;
|
|
314
306
|
}
|
|
315
307
|
|
|
316
|
-
[part*="
|
|
308
|
+
[part*="clear-tag"] {
|
|
317
309
|
inline-size: 1em;
|
|
318
310
|
block-size: 1em;
|
|
319
311
|
font-size: 80%;
|
|
320
312
|
display: none;
|
|
321
313
|
}
|
|
322
314
|
|
|
323
|
-
:host([multiple]) [part*="
|
|
324
|
-
:host([clearable]) [part*="
|
|
315
|
+
:host([multiple]) [part*="clear-tag"],
|
|
316
|
+
:host([clearable]) [part*="clear-all"] {
|
|
325
317
|
display: block;
|
|
326
318
|
}
|
|
327
319
|
|
|
328
|
-
[part*="clear-all
|
|
320
|
+
[part*="clear-all"] {
|
|
329
321
|
font-size: inherit;
|
|
330
322
|
inline-size: 1.2em;
|
|
331
323
|
block-size: 1.2em;
|
|
332
324
|
display: none;
|
|
333
325
|
}
|
|
334
326
|
|
|
335
|
-
:host([multiple]) [part*="clear-all
|
|
327
|
+
:host([multiple]) [part*="clear-all"] {
|
|
336
328
|
display: block;
|
|
337
329
|
}
|
|
338
330
|
|
|
339
|
-
[part*="clear-all
|
|
340
|
-
[part*="
|
|
331
|
+
[part*="clear-all"]:hover,
|
|
332
|
+
[part*="clear-tag"]:hover {
|
|
341
333
|
color: ActiveText;
|
|
342
334
|
cursor: pointer;
|
|
343
335
|
}
|
|
344
336
|
|
|
345
|
-
[part*="clear-all
|
|
337
|
+
[part*="clear-all"]:hover {
|
|
346
338
|
background-color: ButtonFace;
|
|
347
339
|
}
|
|
348
340
|
|
|
349
|
-
:host:has(#tags:empty) [part*="clear-all
|
|
341
|
+
:host:has(#tags:empty) [part*="clear-all"] {
|
|
350
342
|
pointer-events: none;
|
|
351
343
|
color: darkgrey;
|
|
352
344
|
}
|
|
@@ -355,7 +347,7 @@ export class ComboboxMarkup {
|
|
|
355
347
|
|
|
356
348
|
<div id="tags"></div>
|
|
357
349
|
<div id="placeholder"> </div>
|
|
358
|
-
<button part="clear-all
|
|
350
|
+
<button part="clear-all">✕</button>
|
|
359
351
|
<div id="dropdown" popover="manual">
|
|
360
352
|
<input name="search-input" part="search-input" />
|
|
361
353
|
<div part="options"></div>
|
|
@@ -363,7 +355,7 @@ export class ComboboxMarkup {
|
|
|
363
355
|
<template id='tag-template'>
|
|
364
356
|
<box-tag>
|
|
365
357
|
<span part="tag-label"></span>
|
|
366
|
-
<button part="
|
|
358
|
+
<button part="clear-tag">✕</button>
|
|
367
359
|
</box-tag>
|
|
368
360
|
</template>
|
|
369
361
|
`;
|
|
@@ -36,7 +36,7 @@ export class HTMLComboboxElement extends HTMLElement {
|
|
|
36
36
|
}
|
|
37
37
|
formResetCallback() {
|
|
38
38
|
this.#values = new Set;
|
|
39
|
-
this.selectedOptions.forEach(option => option.
|
|
39
|
+
this.selectedOptions.forEach(option => option.selected = false);
|
|
40
40
|
this.#markup.tagsContainer.replaceChildren();
|
|
41
41
|
this.#setValidityAndFormValue();
|
|
42
42
|
this.dispatchEvent(new Event('change'));
|
|
@@ -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) {
|
|
@@ -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
|
+
}
|
|
5
7
|
connectedCallback() {
|
|
6
8
|
this.#initialAttributesSynchronization();
|
|
7
|
-
|
|
9
|
+
this.part.add('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
|
+
}
|
|
2
5
|
connectedCallback() {
|
|
3
|
-
this.part.add('
|
|
6
|
+
this.part.add('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,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;;IAMzD,iBAAiB;IA0CjB,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;;IAKrD,iBAAiB;CAUlB"}
|