kr-elements 0.0.1-alpha.26 → 0.0.1-alpha.28

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.
Files changed (7) hide show
  1. package/dist/cjs/combobox/Combobox.markup.js +22 -17
  2. package/dist/cjs/combobox/HTML.combobox.element.js +13 -3
  3. package/dist/esm/combobox/Combobox.markup.js +22 -17
  4. package/dist/esm/combobox/HTML.combobox.element.js +13 -3
  5. package/dist/types/combobox/Combobox.markup.d.ts.map +1 -1
  6. package/dist/types/combobox/HTML.combobox.element.d.ts.map +1 -1
  7. package/package.json +1 -1
package/dist/cjs/combobox/Combobox.markup.js CHANGED
@@ -114,33 +114,38 @@ class ComboboxMarkup {
114
114
  }
115
115
  };
116
116
  createAndAppendTag(option) {
117
+ const value = option.value;
117
118
  const userTagTemplate = this.#shadowRoot.host.firstElementChild;
119
+ let tag;
120
+ let button;
118
121
  if (userTagTemplate && userTagTemplate instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement) {
119
- const tag = userTagTemplate.cloneNode(true);
122
+ tag = userTagTemplate.cloneNode(true);
120
123
  tag.querySelectorAll('[part]')
121
124
  .forEach(node => {
122
- const relatedPart = option.querySelector(`[part*="${node.getAttribute('part')}"]`);
123
- if (relatedPart) {
124
- tag.replaceChild(relatedPart.cloneNode(true), node);
125
+ for (const token of node.part.values()) {
126
+ const relatedPart = option.querySelector(`[part*="${token}"]`);
127
+ if (relatedPart) {
128
+ tag.replaceChild(relatedPart.cloneNode(true), node);
129
+ break;
130
+ }
125
131
  }
126
132
  });
127
- const clearButton = tag.querySelector('[part*="tag-clear-button"]');
128
- if (!clearButton && this.#shadowRoot.host.hasAttribute('multiple')) {
133
+ button = tag.querySelector('[part*="tag-clear-button"]');
134
+ if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
129
135
  throw new Error(`A button with part "tag-clear-button"`);
130
136
  }
131
- clearButton.setAttribute('value', option.value);
132
- this.tagsContainer.appendChild(tag);
133
- return clearButton;
134
137
  }
135
- const template = this.tagTemplate;
136
- const tag = template.cloneNode(true);
137
- const label = tag.querySelector('[part="tag-label"]');
138
- label.textContent = option.label;
139
- const clearButton = tag.querySelector('[part="tag-clear-button"]');
140
- clearButton.setAttribute('value', option.value);
141
- tag.setAttribute('value', option.value);
138
+ else {
139
+ const template = this.tagTemplate;
140
+ tag = template.cloneNode(true);
141
+ const label = tag.querySelector('[part="tag-label"]');
142
+ label.textContent = option.label;
143
+ button = tag.querySelector('[part="tag-clear-button"]');
144
+ }
145
+ button.setAttribute('value', value);
146
+ tag.setAttribute('value', value);
142
147
  this.tagsContainer.appendChild(tag);
143
- return clearButton;
148
+ return button;
144
149
  }
145
150
  getTagByValue(value) {
146
151
  return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
package/dist/cjs/combobox/HTML.combobox.element.js CHANGED
@@ -259,12 +259,22 @@ class HTMLComboboxElement extends HTMLElement {
259
259
  }
260
260
  };
261
261
  #onClickTagClearButton = (event) => {
262
- if (event.target && event.target instanceof HTMLButtonElement) {
263
- const value = event.target.value;
262
+ let button;
263
+ if (event.target instanceof HTMLButtonElement) {
264
+ button = event.target;
265
+ }
266
+ else {
267
+ button = event.composedPath()
268
+ .find(el => {
269
+ return el instanceof HTMLElement && el.part.contains('tag-clear-button');
270
+ });
271
+ }
272
+ if (button) {
273
+ const value = button.value;
264
274
  const option = this.#markup.getOptionByValue(value);
265
275
  const tag = this.#markup.getTagByValue(value);
266
276
  option.removeAttribute('selected');
267
- this.#values.delete(event.target.value);
277
+ this.#values.delete(value);
268
278
  tag.remove();
269
279
  this.#setValidityAndFormValue();
270
280
  this.dispatchEvent(new Event('change'));
package/dist/esm/combobox/Combobox.markup.js CHANGED
@@ -111,33 +111,38 @@ export class ComboboxMarkup {
111
111
  }
112
112
  };
113
113
  createAndAppendTag(option) {
114
+ const value = option.value;
114
115
  const userTagTemplate = this.#shadowRoot.host.firstElementChild;
116
+ let tag;
117
+ let button;
115
118
  if (userTagTemplate && userTagTemplate instanceof HTMLComboboxTagElement) {
116
- const tag = userTagTemplate.cloneNode(true);
119
+ tag = userTagTemplate.cloneNode(true);
117
120
  tag.querySelectorAll('[part]')
118
121
  .forEach(node => {
119
- const relatedPart = option.querySelector(`[part*="${node.getAttribute('part')}"]`);
120
- if (relatedPart) {
121
- tag.replaceChild(relatedPart.cloneNode(true), node);
122
+ for (const token of node.part.values()) {
123
+ const relatedPart = option.querySelector(`[part*="${token}"]`);
124
+ if (relatedPart) {
125
+ tag.replaceChild(relatedPart.cloneNode(true), node);
126
+ break;
127
+ }
122
128
  }
123
129
  });
124
- const clearButton = tag.querySelector('[part*="tag-clear-button"]');
125
- if (!clearButton && this.#shadowRoot.host.hasAttribute('multiple')) {
130
+ button = tag.querySelector('[part*="tag-clear-button"]');
131
+ if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
126
132
  throw new Error(`A button with part "tag-clear-button"`);
127
133
  }
128
- clearButton.setAttribute('value', option.value);
129
- this.tagsContainer.appendChild(tag);
130
- return clearButton;
131
134
  }
132
- const template = this.tagTemplate;
133
- const tag = template.cloneNode(true);
134
- const label = tag.querySelector('[part="tag-label"]');
135
- label.textContent = option.label;
136
- const clearButton = tag.querySelector('[part="tag-clear-button"]');
137
- clearButton.setAttribute('value', option.value);
138
- tag.setAttribute('value', option.value);
135
+ else {
136
+ const template = this.tagTemplate;
137
+ tag = template.cloneNode(true);
138
+ const label = tag.querySelector('[part="tag-label"]');
139
+ label.textContent = option.label;
140
+ button = tag.querySelector('[part="tag-clear-button"]');
141
+ }
142
+ button.setAttribute('value', value);
143
+ tag.setAttribute('value', value);
139
144
  this.tagsContainer.appendChild(tag);
140
- return clearButton;
145
+ return button;
141
146
  }
142
147
  getTagByValue(value) {
143
148
  return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
package/dist/esm/combobox/HTML.combobox.element.js CHANGED
@@ -255,12 +255,22 @@ export class HTMLComboboxElement extends HTMLElement {
255
255
  }
256
256
  };
257
257
  #onClickTagClearButton = (event) => {
258
- if (event.target && event.target instanceof HTMLButtonElement) {
259
- const value = event.target.value;
258
+ let button;
259
+ if (event.target instanceof HTMLButtonElement) {
260
+ button = event.target;
261
+ }
262
+ else {
263
+ button = event.composedPath()
264
+ .find(el => {
265
+ return el instanceof HTMLElement && el.part.contains('tag-clear-button');
266
+ });
267
+ }
268
+ if (button) {
269
+ const value = button.value;
260
270
  const option = this.#markup.getOptionByValue(value);
261
271
  const tag = this.#markup.getTagByValue(value);
262
272
  option.removeAttribute('selected');
263
- this.#values.delete(event.target.value);
273
+ this.#values.delete(value);
264
274
  tag.remove();
265
275
  this.#setValidityAndFormValue();
266
276
  this.dispatchEvent(new Event('change'));
package/dist/types/combobox/Combobox.markup.d.ts.map CHANGED
@@ -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;IAElD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,IAAI,CAAC,KAAK,EAAE,MAAM;IAiBlB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAUX;IAED,YAAY,GAAI,OAAO,KAAK,UAU3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IA8BpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAqLlB;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;IAElD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,IAAI,CAAC,KAAK,EAAE,MAAM;IAiBlB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAUX;IAED,YAAY,GAAI,OAAO,KAAK,UAU3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAoCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAqLlB;CACF"}
package/dist/types/combobox/HTML.combobox.element.d.ts.map CHANGED
@@ -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;IAgHjC,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,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;IA0HjC,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,MAAM,CAAC,8BAA8B;CAoBtC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kr-elements",
3
- "version": "0.0.1-alpha.26",
3
+ "version": "0.0.1-alpha.28",
4
4
  "description": "Custom elements",
5
5
  "type": "module",
6
6
  "scripts": {