@nectary/components 4.3.0 → 4.4.0

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 (3) hide show
  1. package/package.json +1 -1
  2. package/progress/index.js +5 -4
  3. package/select-menu-option/index.js +9 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "4.3.0",
3
+ "version": "4.4.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
package/progress/index.js CHANGED
@@ -26,10 +26,11 @@ defineCustomElement('sinch-progress', class extends NectaryElement {
26
26
  const int = attrValueToInteger(newVal, {
27
27
  min: 0,
28
28
  max: 100
29
- });
30
- const intCss = int === null ? '0%' : `${int}%`;
31
- this.#$bar.style.width = intCss;
32
- this.#$text.textContent = intCss;
29
+ }) ?? 0;
30
+ this.#$bar.style.width = `${int}%`;
31
+ this.#$text.textContent = Intl.NumberFormat(navigator.language, {
32
+ style: 'percent'
33
+ }).format(int / 100);
33
34
  this.setAttribute('valuenow', int !== null ? String(int) : '0');
34
35
  break;
35
36
  }
package/select-menu-option/index.js CHANGED
@@ -1,19 +1,23 @@
1
1
  import '../icon';
2
2
  import '../text';
3
3
  import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
4
- const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
4
+ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
5
5
  const template = document.createElement('template');
6
6
  template.innerHTML = templateHTML;
7
7
  export class SelectMenuOption extends NectaryElement {
8
+ #$contentSlot;
8
9
  #$content;
9
10
  constructor() {
10
11
  super();
11
12
  const shadowRoot = this.attachShadow();
12
13
  shadowRoot.appendChild(template.content.cloneNode(true));
14
+ this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
13
15
  this.#$content = shadowRoot.querySelector('#content');
14
16
  }
15
17
  connectedCallback() {
16
18
  this.setAttribute('role', 'option');
19
+ this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
20
+ this.#onContentSlotChange();
17
21
  }
18
22
  static get observedAttributes() {
19
23
  return ['text', 'data-checked', 'disabled'];
@@ -61,5 +65,9 @@ export class SelectMenuOption extends NectaryElement {
61
65
  matchesSearch(searchValue) {
62
66
  return this.text.toLowerCase().includes(searchValue.toLowerCase());
63
67
  }
68
+ #onContentSlotChange = () => {
69
+ const elements = this.#$contentSlot.assignedElements();
70
+ this.#$content.style.display = elements.length > 0 ? 'none' : '';
71
+ };
64
72
  }
65
73
  defineCustomElement('sinch-select-menu-option', SelectMenuOption);