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.
@@ -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-button"]');
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('[part]')
133
+ tag.querySelectorAll('slot')
134
134
  .forEach(node => {
135
- const tokens = Array.from(node.part.values());
136
- for (const token of tokens) {
137
- const relatedPart = option.querySelector(`[part*="${token}"]`);
138
- if (relatedPart) {
139
- const newNode = relatedPart.cloneNode(true);
140
- newNode.part.add(...tokens);
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
- button = tag.querySelector('[part*="tag-clear-button"]');
151
- if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
152
- throw new Error(`A button with part "tag-clear-button"`);
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="tag-clear-button"]');
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*="box-tag"] {
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*="box-tag"] {
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*="tag-clear-button"], [part*="clear-all-button"] {
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*="tag-clear-button"] {
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*="tag-clear-button"],
325
- :host([clearable]) [part*="tag-clear-button"] {
318
+ :host([multiple]) [part*="clear-tag"],
319
+ :host([clearable]) [part*="clear-all"] {
326
320
  display: block;
327
321
  }
328
322
 
329
- [part*="clear-all-button"] {
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-button"] {
330
+ :host([multiple]) [part*="clear-all"] {
337
331
  display: block;
338
332
  }
339
333
 
340
- [part*="clear-all-button"]:hover,
341
- [part*="tag-clear-button"]:hover {
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-button"]:hover {
340
+ [part*="clear-all"]:hover {
347
341
  background-color: ButtonFace;
348
342
  }
349
343
 
350
- :host:has(#tags:empty) [part*="clear-all-button"] {
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">&nbsp;</div>
359
- <button part="clear-all-button">✕</button>
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="tag-clear-button">✕</button>
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 stringAttributes = new Set(['value', 'placeholder', 'query']);
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.removeAttribute('selected'));
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.booleanAttributes.has(name)) {
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
- super.setAttribute(name, value);
172
+ else {
173
+ super.setAttribute(name, value);
174
+ }
173
175
  }
174
176
  removeAttribute(name) {
175
- if (_a.booleanAttributes.has(name)) {
177
+ if (_a.OWN_IDL.has(name)) {
176
178
  Reflect.set(this, name, false);
177
- return;
178
179
  }
179
- if (_a.stringAttributes.has(name)) {
180
- return;
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.addEventListener('click', this.#onClickTagClearButton);
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('tag-clear-button');
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.booleanAttributes) {
304
- const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
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
- if (document.activeElement.shadowRoot.activeElement instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
340
- document.activeElement.shadowRoot.activeElement.click();
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 booleanAttributes = new Set(['selected']);
8
- static stringAttributes = new Set(['value', 'label']);
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.booleanAttributes) {
64
- const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
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.booleanAttributes.has(name)) {
75
- Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
76
- return;
70
+ if (_a.OWN_IDL.has(name)) {
71
+ this[name] = value;
77
72
  }
78
- if (_a.stringAttributes.has(name)) {
79
- Reflect.set(this, name, value);
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.stringAttributes.has(name)) {
86
- Reflect.set(this, name, false);
87
- return;
78
+ if (_a.OWN_IDL.has(name)) {
79
+ this[name] = null;
88
80
  }
89
- if (_a.stringAttributes.has(name)) {
90
- return;
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="tag-clear-button"]')) {
10
- throw new Error(`A <button> with part="tag-clear-button" is required for <combo-box> with multiple attribute`);
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-button"]');
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('[part]')
130
+ tag.querySelectorAll('slot')
131
131
  .forEach(node => {
132
- const tokens = Array.from(node.part.values());
133
- for (const token of tokens) {
134
- const relatedPart = option.querySelector(`[part*="${token}"]`);
135
- if (relatedPart) {
136
- const newNode = relatedPart.cloneNode(true);
137
- newNode.part.add(...tokens);
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
- button = tag.querySelector('[part*="tag-clear-button"]');
148
- if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
149
- throw new Error(`A button with part "tag-clear-button"`);
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="tag-clear-button"]');
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*="box-tag"] {
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*="box-tag"] {
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*="tag-clear-button"], [part*="clear-all-button"] {
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*="tag-clear-button"] {
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*="tag-clear-button"],
322
- :host([clearable]) [part*="tag-clear-button"] {
315
+ :host([multiple]) [part*="clear-tag"],
316
+ :host([clearable]) [part*="clear-all"] {
323
317
  display: block;
324
318
  }
325
319
 
326
- [part*="clear-all-button"] {
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-button"] {
327
+ :host([multiple]) [part*="clear-all"] {
334
328
  display: block;
335
329
  }
336
330
 
337
- [part*="clear-all-button"]:hover,
338
- [part*="tag-clear-button"]:hover {
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-button"]:hover {
337
+ [part*="clear-all"]:hover {
344
338
  background-color: ButtonFace;
345
339
  }
346
340
 
347
- :host:has(#tags:empty) [part*="clear-all-button"] {
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">&nbsp;</div>
356
- <button part="clear-all-button">✕</button>
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="tag-clear-button">✕</button>
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 stringAttributes = new Set(['value', 'placeholder', 'query']);
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.removeAttribute('selected'));
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.booleanAttributes.has(name)) {
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
- super.setAttribute(name, value);
168
+ else {
169
+ super.setAttribute(name, value);
170
+ }
169
171
  }
170
172
  removeAttribute(name) {
171
- if (HTMLComboboxElement.booleanAttributes.has(name)) {
173
+ if (HTMLComboboxElement.OWN_IDL.has(name)) {
172
174
  Reflect.set(this, name, false);
173
- return;
174
175
  }
175
- if (HTMLComboboxElement.stringAttributes.has(name)) {
176
- return;
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.addEventListener('click', this.#onClickTagClearButton);
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('tag-clear-button');
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.booleanAttributes) {
300
- const value = toBoolean(this.getAttribute(key));
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
- if (document.activeElement.shadowRoot.activeElement instanceof HTMLComboboxOptionElement) {
334
- document.activeElement.shadowRoot.activeElement.click();
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 booleanAttributes = new Set(['selected']);
4
- static stringAttributes = new Set(['value', 'label']);
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.booleanAttributes) {
60
- const value = toBoolean(this.getAttribute(key));
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.booleanAttributes.has(name)) {
71
- Reflect.set(this, name, toBoolean(value));
72
- return;
66
+ if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
67
+ this[name] = value;
73
68
  }
74
- if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
75
- Reflect.set(this, name, value);
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.stringAttributes.has(name)) {
82
- Reflect.set(this, name, false);
83
- return;
74
+ if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
75
+ this[name] = null;
84
76
  }
85
- if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
86
- return;
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="tag-clear-button"]')) {
7
- throw new Error(`A <button> with part="tag-clear-button" is required for <combo-box> with multiple attribute`);
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;IA2CpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAkMlB;CACF"}
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 stringAttributes: Set<string>;
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,gBAAgB,cAAgD;IACvE,MAAM,CAAC,iBAAiB,cAA4F;IACpH,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,EAMtB;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;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAMpB;IAID,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAYrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAW5B,cAAc;IAId,aAAa;IAIb,iBAAiB,CAAC,OAAO,EAAE,MAAM;IA+HjC,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,MAAM,CAAC,8BAA8B;CAoBtC"}
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 booleanAttributes: Set<string>;
4
- static stringAttributes: Set<string>;
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,iBAAiB,cAAyB;IACjD,MAAM,CAAC,gBAAgB,cAA+B;IAEtD,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;IAcD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAYxC,eAAe,CAAC,IAAI,EAAE,MAAM;CAU7B"}
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,4 +1,5 @@
1
1
  export declare class HTMLComboboxTagElement extends HTMLElement {
2
+ constructor();
2
3
  connectedCallback(): void;
3
4
  }
4
5
  //# sourceMappingURL=HTML.combobox.tag.element.d.ts.map
@@ -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;IACrD,iBAAiB;CAUlB"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kr-elements",
3
- "version": "0.0.1-alpha.31",
3
+ "version": "0.0.1-alpha.33",
4
4
  "description": "Custom elements",
5
5
  "type": "module",
6
6
  "scripts": {