kr-elements 0.0.1-alpha.18 → 0.0.1-alpha.19

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 +3 -1
  2. package/dist/cjs/combobox/HTML.combobox.option.element.js +22 -30
  3. package/dist/esm/combobox/Combobox.markup.js +3 -1
  4. package/dist/esm/combobox/HTML.combobox.option.element.js +22 -30
  5. package/dist/types/combobox/Combobox.markup.d.ts.map +1 -1
  6. package/dist/types/combobox/HTML.combobox.option.element.d.ts.map +1 -1
  7. package/package.json +1 -1
package/dist/cjs/combobox/Combobox.markup.js CHANGED
@@ -170,6 +170,8 @@ class ComboboxMarkup {
170
170
  overflow-y: scroll;
171
171
  flex-direction: column;
172
172
  border-radius: inherit;
173
+ border-color: ButtonFace;
174
+ border-width: inherit;
173
175
  }
174
176
 
175
177
  [part="options"] {
@@ -312,7 +314,7 @@ class ComboboxMarkup {
312
314
  </style>
313
315
 
314
316
  <div id="tags"></div>
315
- <div id="placeholder" ></div>
317
+ <div id="placeholder">&nbsp;</div>
316
318
  <button part="clear-all-button">✕</button>
317
319
  <div id="dropdown" popover="manual">
318
320
  <input name="search-input" part="search-input" />
package/dist/cjs/combobox/HTML.combobox.option.element.js CHANGED
@@ -11,23 +11,39 @@ class HTMLComboboxOptionElement extends HTMLElement {
11
11
  super.setAttribute('part', 'box-option');
12
12
  super.setAttribute('tabindex', "0");
13
13
  super.setAttribute('role', "option");
14
- if (this.children.length === 0) {
15
- this.textContent = this.label;
14
+ const value = this.value;
15
+ const label = this.label;
16
+ const hasNoMarkup = this.children.length === 0;
17
+ const text = this.textContent.trim();
18
+ const hasText = text.length > 0;
19
+ if (!value && !label) {
20
+ if (hasNoMarkup && hasText) {
21
+ this.value = text;
22
+ this.label = text;
23
+ }
24
+ else {
25
+ throw new Error('box-option must have value and label attributes');
26
+ }
27
+ }
28
+ else {
29
+ this.value = value || label;
30
+ this.label = label || value;
31
+ if (hasNoMarkup && !hasText) {
32
+ this.textContent = this.label;
33
+ }
16
34
  }
17
35
  }
18
36
  get value() {
19
37
  return this.getAttribute('value');
20
38
  }
21
39
  set value(value) {
22
- value = this.#getOrExtractValue(value, 'value');
23
- super.setAttribute('value', value);
40
+ super.setAttribute('value', String(value));
24
41
  }
25
42
  get label() {
26
43
  return this.getAttribute('value');
27
44
  }
28
45
  set label(value) {
29
- value = this.#getOrExtractValue(value, 'label');
30
- super.setAttribute('label', value);
46
+ super.setAttribute('label', String(value));
31
47
  }
32
48
  get selected() {
33
49
  return this.hasAttribute('selected');
@@ -44,30 +60,6 @@ class HTMLComboboxOptionElement extends HTMLElement {
44
60
  Reflect.set(this, key, this.getAttribute(key));
45
61
  }
46
62
  }
47
- get #optionHasOnlyTextNode() {
48
- return this.children.length === 0 && this.textContent.length > 0;
49
- }
50
- #getOrExtractValue(value, name) {
51
- if (typeof value === 'string')
52
- return value;
53
- if (value == null) {
54
- const opposite = name === 'label' ? 'value' : 'label';
55
- const oppositeValue = this.getAttribute(opposite);
56
- if (oppositeValue) {
57
- value = oppositeValue;
58
- }
59
- else {
60
- if (this.#optionHasOnlyTextNode) {
61
- value = this.textContent;
62
- }
63
- else {
64
- throw new TypeError('No value, or label or textContent found');
65
- }
66
- }
67
- return value;
68
- }
69
- throw new TypeError('Invalid value');
70
- }
71
63
  setAttribute(name, value) {
72
64
  if (_a.booleanAttributes.has(name)) {
73
65
  Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
package/dist/esm/combobox/Combobox.markup.js CHANGED
@@ -167,6 +167,8 @@ export class ComboboxMarkup {
167
167
  overflow-y: scroll;
168
168
  flex-direction: column;
169
169
  border-radius: inherit;
170
+ border-color: ButtonFace;
171
+ border-width: inherit;
170
172
  }
171
173
 
172
174
  [part="options"] {
@@ -309,7 +311,7 @@ export class ComboboxMarkup {
309
311
  </style>
310
312
 
311
313
  <div id="tags"></div>
312
- <div id="placeholder" ></div>
314
+ <div id="placeholder">&nbsp;</div>
313
315
  <button part="clear-all-button">✕</button>
314
316
  <div id="dropdown" popover="manual">
315
317
  <input name="search-input" part="search-input" />
package/dist/esm/combobox/HTML.combobox.option.element.js CHANGED
@@ -7,23 +7,39 @@ export class HTMLComboboxOptionElement extends HTMLElement {
7
7
  super.setAttribute('part', 'box-option');
8
8
  super.setAttribute('tabindex', "0");
9
9
  super.setAttribute('role', "option");
10
- if (this.children.length === 0) {
11
- this.textContent = this.label;
10
+ const value = this.value;
11
+ const label = this.label;
12
+ const hasNoMarkup = this.children.length === 0;
13
+ const text = this.textContent.trim();
14
+ const hasText = text.length > 0;
15
+ if (!value && !label) {
16
+ if (hasNoMarkup && hasText) {
17
+ this.value = text;
18
+ this.label = text;
19
+ }
20
+ else {
21
+ throw new Error('box-option must have value and label attributes');
22
+ }
23
+ }
24
+ else {
25
+ this.value = value || label;
26
+ this.label = label || value;
27
+ if (hasNoMarkup && !hasText) {
28
+ this.textContent = this.label;
29
+ }
12
30
  }
13
31
  }
14
32
  get value() {
15
33
  return this.getAttribute('value');
16
34
  }
17
35
  set value(value) {
18
- value = this.#getOrExtractValue(value, 'value');
19
- super.setAttribute('value', value);
36
+ super.setAttribute('value', String(value));
20
37
  }
21
38
  get label() {
22
39
  return this.getAttribute('value');
23
40
  }
24
41
  set label(value) {
25
- value = this.#getOrExtractValue(value, 'label');
26
- super.setAttribute('label', value);
42
+ super.setAttribute('label', String(value));
27
43
  }
28
44
  get selected() {
29
45
  return this.hasAttribute('selected');
@@ -40,30 +56,6 @@ export class HTMLComboboxOptionElement extends HTMLElement {
40
56
  Reflect.set(this, key, this.getAttribute(key));
41
57
  }
42
58
  }
43
- get #optionHasOnlyTextNode() {
44
- return this.children.length === 0 && this.textContent.length > 0;
45
- }
46
- #getOrExtractValue(value, name) {
47
- if (typeof value === 'string')
48
- return value;
49
- if (value == null) {
50
- const opposite = name === 'label' ? 'value' : 'label';
51
- const oppositeValue = this.getAttribute(opposite);
52
- if (oppositeValue) {
53
- value = oppositeValue;
54
- }
55
- else {
56
- if (this.#optionHasOnlyTextNode) {
57
- value = this.textContent;
58
- }
59
- else {
60
- throw new TypeError('No value, or label or textContent found');
61
- }
62
- }
63
- return value;
64
- }
65
- throw new TypeError('Invalid value');
66
- }
67
59
  setAttribute(name, value) {
68
60
  if (HTMLComboboxOptionElement.booleanAttributes.has(name)) {
69
61
  Reflect.set(this, name, toBoolean(value));
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,WAmLlB;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;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"}
package/dist/types/combobox/HTML.combobox.option.element.d.ts.map CHANGED
@@ -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;IAUjB,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAoCD,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,iBAAiB,cAAyB;IACjD,MAAM,CAAC,gBAAgB,cAA+B;IAEtD,iBAAiB;IA6BjB,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;IAYD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAYxC,eAAe,CAAC,IAAI,EAAE,MAAM;CAU7B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kr-elements",
3
- "version": "0.0.1-alpha.18",
3
+ "version": "0.0.1-alpha.19",
4
4
  "description": "Custom elements",
5
5
  "type": "module",
6
6
  "scripts": {