kr-elements 0.0.1-alpha.21 → 0.0.1-alpha.22

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 (5) hide show
  1. package/dist/cjs/combobox/Combobox.markup.js +36 -31
  2. package/dist/esm/combobox/Combobox.markup.js +36 -31
  3. package/dist/types/combobox/Combobox.markup.d.ts +1 -1
  4. package/dist/types/combobox/Combobox.markup.d.ts.map +1 -1
  5. package/package.json +1 -1
package/dist/cjs/combobox/Combobox.markup.js CHANGED
@@ -11,6 +11,7 @@ class ComboboxMarkup {
11
11
  dropdown = null;
12
12
  placeholder = null;
13
13
  searchInput = null;
14
+ tagTemplate = null;
14
15
  connected = false;
15
16
  constructor(shadowRoot, internals) {
16
17
  this.#shadowRoot = shadowRoot;
@@ -24,14 +25,17 @@ class ComboboxMarkup {
24
25
  connect() {
25
26
  const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || '';
26
27
  this.tagsContainer = this.#shadowRoot.querySelector('#tags');
27
- this.optionsContainer = this.#shadowRoot.querySelector('[part="options"]');
28
- this.clearAllButton = this.#shadowRoot.querySelector('[part="clear-all-button"]');
28
+ this.optionsContainer = this.#shadowRoot.querySelector('[part*="options"]');
29
+ this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all-button"]');
29
30
  this.dropdown = this.#shadowRoot.querySelector('#dropdown');
30
31
  this.placeholder = this.#shadowRoot.querySelector('#placeholder');
31
32
  this.placeholder.innerText = placeholder;
32
- this.searchInput = this.#shadowRoot.querySelector('[part="search-input"]');
33
+ this.searchInput = this.#shadowRoot.querySelector('[part*="search-input"]');
33
34
  this.searchInput.value = this.#shadowRoot.host.getAttribute('query');
34
35
  this.searchInput.placeholder = placeholder;
36
+ const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
37
+ const doc = document.importNode(innerTemplate.content, true);
38
+ this.tagTemplate = doc.querySelector('box-tag');
35
39
  this.connected = true;
36
40
  }
37
41
  sort(query) {
@@ -110,6 +114,23 @@ class ComboboxMarkup {
110
114
  }
111
115
  };
112
116
  createAndAppendTag(option) {
117
+ const userTagTemplate = this.#shadowRoot.host.firstElementChild;
118
+ if (userTagTemplate && userTagTemplate instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement) {
119
+ const tag = userTagTemplate.cloneNode(true);
120
+ option.querySelectorAll('[part]')
121
+ .forEach(node => {
122
+ const relatedPart = tag.querySelector(`[part*=${node.getAttribute('part')}]`);
123
+ if (relatedPart) {
124
+ tag.replaceChild(node.cloneNode(true), relatedPart);
125
+ }
126
+ });
127
+ const clearButton = tag.querySelector('[part*="tag-clear-button"]');
128
+ if (!clearButton && this.#shadowRoot.host.hasAttribute('multiple')) {
129
+ throw new Error(`A button with part "tag-clear-button"`);
130
+ }
131
+ this.tagsContainer.appendChild(tag);
132
+ return clearButton;
133
+ }
113
134
  const template = this.tagTemplate;
114
135
  const tag = template.cloneNode(true);
115
136
  const label = tag.querySelector('[part="tag-label"]');
@@ -117,13 +138,6 @@ class ComboboxMarkup {
117
138
  const clearButton = tag.querySelector('[part="tag-clear-button"]');
118
139
  clearButton.setAttribute('value', option.value);
119
140
  tag.setAttribute('value', option.value);
120
- option.querySelectorAll('[part]')
121
- .forEach(node => {
122
- const relatedPart = tag.querySelector(`[part=${node.getAttribute('part')}]`);
123
- if (relatedPart) {
124
- tag.replaceChild(node.cloneNode(true), relatedPart);
125
- }
126
- });
127
141
  this.tagsContainer.appendChild(tag);
128
142
  return clearButton;
129
143
  }
@@ -133,15 +147,6 @@ class ComboboxMarkup {
133
147
  getOptionByValue(value) {
134
148
  return this.optionsContainer.querySelector(`box-option[value="${value}"]`);
135
149
  }
136
- get tagTemplate() {
137
- let template = this.#shadowRoot.host.firstElementChild;
138
- if (!template || !(template instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement)) {
139
- const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
140
- const doc = document.importNode(innerTemplate.content, true);
141
- template = doc.querySelector('box-tag');
142
- }
143
- return template;
144
- }
145
150
  get selectedOptions() {
146
151
  return this.optionsContainer
147
152
  .querySelectorAll('box-option[selected]');
@@ -251,7 +256,7 @@ class ComboboxMarkup {
251
256
  max-width: 100%;
252
257
  }
253
258
 
254
- [part="tag-label"] {
259
+ [part*="tag-label"] {
255
260
  white-space: nowrap;
256
261
  text-overflow: ellipsis;
257
262
  overflow: hidden;
@@ -260,11 +265,11 @@ class ComboboxMarkup {
260
265
  flex-grow: 1;
261
266
  }
262
267
 
263
- :host([multiple]) [part="tag-label"] {
268
+ :host([multiple]) [part*="tag-label"] {
264
269
  flex-grow: unset;
265
270
  }
266
271
 
267
- [part="tag-clear-button"], [part="clear-all-button"] {
272
+ [part*="tag-clear-button"], [part*="clear-all-button"] {
268
273
  border-radius: 100%;
269
274
  border: none;
270
275
  aspect-ratio: 1;
@@ -274,39 +279,39 @@ class ComboboxMarkup {
274
279
  background-color: transparent;
275
280
  }
276
281
 
277
- [part="tag-clear-button"] {
282
+ [part*="tag-clear-button"] {
278
283
  inline-size: 1em;
279
284
  block-size: 1em;
280
285
  font-size: 80%;
281
286
  display: none;
282
287
  }
283
288
 
284
- :host([multiple]) [part="tag-clear-button"],
285
- :host([clearable]) [part="tag-clear-button"] {
289
+ :host([multiple]) [part*="tag-clear-button"],
290
+ :host([clearable]) [part*="tag-clear-button"] {
286
291
  display: block;
287
292
  }
288
293
 
289
- [part="clear-all-button"] {
294
+ [part*="clear-all-button"] {
290
295
  font-size: inherit;
291
296
  inline-size: 1.2em;
292
297
  block-size: 1.2em;
293
298
  display: none;
294
299
  }
295
300
 
296
- :host([multiple]) [part="clear-all-button"] {
301
+ :host([multiple]) [part*="clear-all-button"] {
297
302
  display: block;
298
303
  }
299
304
 
300
- [part="clear-all-button"]:hover,
301
- [part="tag-clear-button"]:hover {
305
+ [part*="clear-all-button"]:hover,
306
+ [part*="tag-clear-button"]:hover {
302
307
  color: ActiveText;
303
308
  }
304
309
 
305
- [part="clear-all-button"]:hover {
310
+ [part*="clear-all-button"]:hover {
306
311
  background-color: ButtonFace;
307
312
  }
308
313
 
309
- :host:has(#tags:empty) [part="clear-all-button"] {
314
+ :host:has(#tags:empty) [part*="clear-all-button"] {
310
315
  pointer-events: none;
311
316
  color: darkgrey;
312
317
  }
package/dist/esm/combobox/Combobox.markup.js CHANGED
@@ -8,6 +8,7 @@ export class ComboboxMarkup {
8
8
  dropdown = null;
9
9
  placeholder = null;
10
10
  searchInput = null;
11
+ tagTemplate = null;
11
12
  connected = false;
12
13
  constructor(shadowRoot, internals) {
13
14
  this.#shadowRoot = shadowRoot;
@@ -21,14 +22,17 @@ export class ComboboxMarkup {
21
22
  connect() {
22
23
  const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || '';
23
24
  this.tagsContainer = this.#shadowRoot.querySelector('#tags');
24
- this.optionsContainer = this.#shadowRoot.querySelector('[part="options"]');
25
- this.clearAllButton = this.#shadowRoot.querySelector('[part="clear-all-button"]');
25
+ this.optionsContainer = this.#shadowRoot.querySelector('[part*="options"]');
26
+ this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all-button"]');
26
27
  this.dropdown = this.#shadowRoot.querySelector('#dropdown');
27
28
  this.placeholder = this.#shadowRoot.querySelector('#placeholder');
28
29
  this.placeholder.innerText = placeholder;
29
- this.searchInput = this.#shadowRoot.querySelector('[part="search-input"]');
30
+ this.searchInput = this.#shadowRoot.querySelector('[part*="search-input"]');
30
31
  this.searchInput.value = this.#shadowRoot.host.getAttribute('query');
31
32
  this.searchInput.placeholder = placeholder;
33
+ const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
34
+ const doc = document.importNode(innerTemplate.content, true);
35
+ this.tagTemplate = doc.querySelector('box-tag');
32
36
  this.connected = true;
33
37
  }
34
38
  sort(query) {
@@ -107,6 +111,23 @@ export class ComboboxMarkup {
107
111
  }
108
112
  };
109
113
  createAndAppendTag(option) {
114
+ const userTagTemplate = this.#shadowRoot.host.firstElementChild;
115
+ if (userTagTemplate && userTagTemplate instanceof HTMLComboboxTagElement) {
116
+ const tag = userTagTemplate.cloneNode(true);
117
+ option.querySelectorAll('[part]')
118
+ .forEach(node => {
119
+ const relatedPart = tag.querySelector(`[part*=${node.getAttribute('part')}]`);
120
+ if (relatedPart) {
121
+ tag.replaceChild(node.cloneNode(true), relatedPart);
122
+ }
123
+ });
124
+ const clearButton = tag.querySelector('[part*="tag-clear-button"]');
125
+ if (!clearButton && this.#shadowRoot.host.hasAttribute('multiple')) {
126
+ throw new Error(`A button with part "tag-clear-button"`);
127
+ }
128
+ this.tagsContainer.appendChild(tag);
129
+ return clearButton;
130
+ }
110
131
  const template = this.tagTemplate;
111
132
  const tag = template.cloneNode(true);
112
133
  const label = tag.querySelector('[part="tag-label"]');
@@ -114,13 +135,6 @@ export class ComboboxMarkup {
114
135
  const clearButton = tag.querySelector('[part="tag-clear-button"]');
115
136
  clearButton.setAttribute('value', option.value);
116
137
  tag.setAttribute('value', option.value);
117
- option.querySelectorAll('[part]')
118
- .forEach(node => {
119
- const relatedPart = tag.querySelector(`[part=${node.getAttribute('part')}]`);
120
- if (relatedPart) {
121
- tag.replaceChild(node.cloneNode(true), relatedPart);
122
- }
123
- });
124
138
  this.tagsContainer.appendChild(tag);
125
139
  return clearButton;
126
140
  }
@@ -130,15 +144,6 @@ export class ComboboxMarkup {
130
144
  getOptionByValue(value) {
131
145
  return this.optionsContainer.querySelector(`box-option[value="${value}"]`);
132
146
  }
133
- get tagTemplate() {
134
- let template = this.#shadowRoot.host.firstElementChild;
135
- if (!template || !(template instanceof HTMLComboboxTagElement)) {
136
- const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
137
- const doc = document.importNode(innerTemplate.content, true);
138
- template = doc.querySelector('box-tag');
139
- }
140
- return template;
141
- }
142
147
  get selectedOptions() {
143
148
  return this.optionsContainer
144
149
  .querySelectorAll('box-option[selected]');
@@ -248,7 +253,7 @@ export class ComboboxMarkup {
248
253
  max-width: 100%;
249
254
  }
250
255
 
251
- [part="tag-label"] {
256
+ [part*="tag-label"] {
252
257
  white-space: nowrap;
253
258
  text-overflow: ellipsis;
254
259
  overflow: hidden;
@@ -257,11 +262,11 @@ export class ComboboxMarkup {
257
262
  flex-grow: 1;
258
263
  }
259
264
 
260
- :host([multiple]) [part="tag-label"] {
265
+ :host([multiple]) [part*="tag-label"] {
261
266
  flex-grow: unset;
262
267
  }
263
268
 
264
- [part="tag-clear-button"], [part="clear-all-button"] {
269
+ [part*="tag-clear-button"], [part*="clear-all-button"] {
265
270
  border-radius: 100%;
266
271
  border: none;
267
272
  aspect-ratio: 1;
@@ -271,39 +276,39 @@ export class ComboboxMarkup {
271
276
  background-color: transparent;
272
277
  }
273
278
 
274
- [part="tag-clear-button"] {
279
+ [part*="tag-clear-button"] {
275
280
  inline-size: 1em;
276
281
  block-size: 1em;
277
282
  font-size: 80%;
278
283
  display: none;
279
284
  }
280
285
 
281
- :host([multiple]) [part="tag-clear-button"],
282
- :host([clearable]) [part="tag-clear-button"] {
286
+ :host([multiple]) [part*="tag-clear-button"],
287
+ :host([clearable]) [part*="tag-clear-button"] {
283
288
  display: block;
284
289
  }
285
290
 
286
- [part="clear-all-button"] {
291
+ [part*="clear-all-button"] {
287
292
  font-size: inherit;
288
293
  inline-size: 1.2em;
289
294
  block-size: 1.2em;
290
295
  display: none;
291
296
  }
292
297
 
293
- :host([multiple]) [part="clear-all-button"] {
298
+ :host([multiple]) [part*="clear-all-button"] {
294
299
  display: block;
295
300
  }
296
301
 
297
- [part="clear-all-button"]:hover,
298
- [part="tag-clear-button"]:hover {
302
+ [part*="clear-all-button"]:hover,
303
+ [part*="tag-clear-button"]:hover {
299
304
  color: ActiveText;
300
305
  }
301
306
 
302
- [part="clear-all-button"]:hover {
307
+ [part*="clear-all-button"]:hover {
303
308
  background-color: ButtonFace;
304
309
  }
305
310
 
306
- :host:has(#tags:empty) [part="clear-all-button"] {
311
+ :host:has(#tags:empty) [part*="clear-all-button"] {
307
312
  pointer-events: none;
308
313
  color: darkgrey;
309
314
  }
package/dist/types/combobox/Combobox.markup.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class ComboboxMarkup {
8
8
  dropdown: HTMLDivElement | null;
9
9
  placeholder: HTMLDivElement | null;
10
10
  searchInput: HTMLInputElement | null;
11
+ tagTemplate: HTMLComboboxTagElement | null;
11
12
  connected: boolean;
12
13
  constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
13
14
  connect(): void;
@@ -20,7 +21,6 @@ export declare class ComboboxMarkup {
20
21
  createAndAppendTag(option: HTMLComboboxOptionElement): HTMLButtonElement;
21
22
  getTagByValue(value: string): HTMLComboboxTagElement;
22
23
  getOptionByValue(value: string): HTMLComboboxOptionElement;
23
- get tagTemplate(): HTMLComboboxTagElement;
24
24
  get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
25
25
  static get template(): string;
26
26
  }
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;IAE5C,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAcP,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;IAqBpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,WAAW,2BAQd;IAGD,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;IA6BpD,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.21",
3
+ "version": "0.0.1-alpha.22",
4
4
  "description": "Custom elements",
5
5
  "type": "module",
6
6
  "scripts": {