kr-elements 0.0.1-alpha.27 → 0.0.1-alpha.29

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.
@@ -114,33 +114,41 @@ 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
+ const tokens = Array.from(node.part.values());
126
+ for (const token of tokens) {
127
+ const relatedPart = option.querySelector(`[part*="${token}"]`);
128
+ if (relatedPart) {
129
+ const newNode = relatedPart.cloneNode(true);
130
+ newNode.part.add(...tokens);
131
+ tag.replaceChild(newNode, node);
132
+ break;
133
+ }
125
134
  }
126
135
  });
127
- const clearButton = tag.querySelector('[part*="tag-clear-button"]');
128
- if (!clearButton && this.#shadowRoot.host.hasAttribute('multiple')) {
136
+ button = tag.querySelector('[part*="tag-clear-button"]');
137
+ if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
129
138
  throw new Error(`A button with part "tag-clear-button"`);
130
139
  }
131
- clearButton.setAttribute('value', option.value);
132
- this.tagsContainer.appendChild(tag);
133
- return clearButton;
134
140
  }
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);
141
+ else {
142
+ const template = this.tagTemplate;
143
+ tag = template.cloneNode(true);
144
+ const label = tag.querySelector('[part="tag-label"]');
145
+ label.textContent = option.label;
146
+ button = tag.querySelector('[part="tag-clear-button"]');
147
+ }
148
+ button.setAttribute('value', value);
149
+ tag.setAttribute('value', value);
142
150
  this.tagsContainer.appendChild(tag);
143
- return clearButton;
151
+ return button;
144
152
  }
145
153
  getTagByValue(value) {
146
154
  return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
@@ -111,33 +111,41 @@ 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
+ const tokens = Array.from(node.part.values());
123
+ for (const token of tokens) {
124
+ const relatedPart = option.querySelector(`[part*="${token}"]`);
125
+ if (relatedPart) {
126
+ const newNode = relatedPart.cloneNode(true);
127
+ newNode.part.add(...tokens);
128
+ tag.replaceChild(newNode, node);
129
+ break;
130
+ }
122
131
  }
123
132
  });
124
- const clearButton = tag.querySelector('[part*="tag-clear-button"]');
125
- if (!clearButton && this.#shadowRoot.host.hasAttribute('multiple')) {
133
+ button = tag.querySelector('[part*="tag-clear-button"]');
134
+ if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
126
135
  throw new Error(`A button with part "tag-clear-button"`);
127
136
  }
128
- clearButton.setAttribute('value', option.value);
129
- this.tagsContainer.appendChild(tag);
130
- return clearButton;
131
137
  }
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);
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);
139
147
  this.tagsContainer.appendChild(tag);
140
- return clearButton;
148
+ return button;
141
149
  }
142
150
  getTagByValue(value) {
143
151
  return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
@@ -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;IAuCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAqLlB;CACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kr-elements",
3
- "version": "0.0.1-alpha.27",
3
+ "version": "0.0.1-alpha.29",
4
4
  "description": "Custom elements",
5
5
  "type": "module",
6
6
  "scripts": {