@nectary/components 0.41.0 → 0.42.0

package/table-body/index.js

@@ -8,9 +8,7 @@ defineCustomElement('sinch-table-body', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', 'rowgroup');
   }
-
 });

package/table-cell/index.js

@@ -9,17 +9,13 @@ defineCustomElement('sinch-table-cell', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', 'cell');
   }
-
   set align(value) {
     updateLiteralAttribute(this, alignValues, 'align', value);
   }
-
   get align() {
     return getLiteralAttribute(this, alignValues, 'align', 'start');
   }
-
 });

package/table-head/index.js

@@ -8,9 +8,7 @@ defineCustomElement('sinch-table-head', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', 'rowgroup');
   }
-
 });

package/table-head-cell/index.js

@@ -5,23 +5,19 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'columnheader');
     this.setAttribute('scope', 'col');
   }
-
   static get observedAttributes() {
     return ['text'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'text':
@@ -31,29 +27,22 @@ defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
         }
     }
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text');
   }
-
   set align(value) {
     updateLiteralAttribute(this, alignValues, 'align', value);
   }
-
   get align() {
     return getLiteralAttribute(this, alignValues, 'align', 'start');
   }
-
   set fit(isFit) {
     updateBooleanAttribute(this, 'fit', isFit);
   }
-
   get fit() {
     return getBooleanAttribute(this, 'fit');
   }
-
 });

package/table-row/index.js

@@ -8,25 +8,19 @@ defineCustomElement('sinch-table-row', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', 'row');
   }
-
   set sticky(isSticky) {
     updateBooleanAttribute(this, 'sticky', isSticky);
   }
-
   get sticky() {
     return getBooleanAttribute(this, 'sticky');
   }
-
   set selected(isSelected) {
     updateBooleanAttribute(this, 'selected', isSelected);
   }
-
   get selected() {
     return getBooleanAttribute(this, 'selected');
   }
-
 });

package/tabs/index.js

@@ -1,22 +1,18 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:44px;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
-
 const findSelectedOption = elements => {
   return elements.find(el => el.checked) ?? null;
 };
-
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs', class extends NectaryElement {
   #$slot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector('slot');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tablist');
     this.#$slot.addEventListener('keydown', this.#onOptionKeyDown);
@@ -24,30 +20,24 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$slot.removeEventListener('keydown', this.#onOptionKeyDown);
     this.#$slot.removeEventListener('option-change', this.#onOptionChange);
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     return ['value'];
   }
-
   get nodeName() {
     return 'select';
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'value':
@@ -57,7 +47,6 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
         }
     }
   }
-
   #onOptionKeyDown = e => {
     switch (e.code) {
       case 'ArrowUp':
@@ -65,26 +54,21 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
         {
           e.preventDefault();
           const $option = this.#getPrevOption();
-
           if ($option !== null) {
             $option.focus();
             this.#dispatchChangeEvent($option.value);
           }
-
           break;
         }
-
       case 'ArrowDown':
       case 'ArrowRight':
         {
           e.preventDefault();
           const $option = this.#getNextOption();
-
           if ($option !== null) {
             $option.focus();
             this.#dispatchChangeEvent($option.value);
           }
-
           break;
         }
     }
@@ -96,14 +80,12 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
     e.stopPropagation();
     this.#dispatchChangeEvent(e.detail);
   };
-
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
       updateBooleanAttribute($option, 'checked', isChecked);
     }
   }
-
   #dispatchChangeEvent(value) {
     this.dispatchEvent(new CustomEvent('change', {
       detail: value,
@@ -113,55 +95,43 @@ defineCustomElement('sinch-tabs', class extends NectaryElement {
       detail: value
     }));
   }
-
   #getFirstOption() {
     for (const $option of this.#$slot.assignedElements()) {
       if ($option.disabled !== true) {
         return $option;
       }
     }
-
     return null;
   }
-
   #getLastOption() {
     for (const $option of this.#$slot.assignedElements().reverse()) {
       if ($option.disabled !== true) {
         return $option;
       }
     }
-
     return null;
   }
-
   #getNextOption() {
     const $options = this.#getEnabledRadioElements();
     const $selectedOption = findSelectedOption($options);
     const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
     if (currentIndex < 0) {
       return this.#getFirstOption();
     }
-
     return $options[(currentIndex + 1) % $options.length];
   }
-
   #getPrevOption() {
     const $options = this.#getEnabledRadioElements();
     const $selectedOption = findSelectedOption($options);
     const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
     if (currentIndex < 0) {
       return this.#getLastOption();
     }
-
     return $options[(currentIndex - 1 + $options.length) % $options.length];
   }
-
   #getEnabledRadioElements() {
     return this.#$slot.assignedElements().filter(opt => opt.disabled !== true);
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/tabs-option/index.js

@@ -5,7 +5,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {
   #$button;
   #$label;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,52 +12,40 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     this.#$button = shadowRoot.querySelector('#button');
     this.#$label = shadowRoot.querySelector('#content');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tab');
     this.#$button.addEventListener('click', this.#onClick);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onClick);
   }
-
   static get observedAttributes() {
     return ['checked', 'disabled', 'text', 'value'];
   }
-
   set checked(isChecked) {
     updateBooleanAttribute(this, 'checked', isChecked);
   }
-
   get checked() {
     return getBooleanAttribute(this, 'checked');
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -66,13 +53,11 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -82,19 +67,15 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onClick = e => {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('option-change', {

package/tag/index.js

@@ -1,13 +1,13 @@
 import '../text';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement } from '../utils';
-import { NO_COLOR } from '../utils/colors';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 9px;border-radius:12px;background-color:var(--sinch-color-snow-500);color:var(--sinch-color-text-default);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#text{flex:1}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 9px;border-radius:12px;background-color:var(--sinch-tag-color-default-bg);color:var(--sinch-tag-color-default-fg);box-sizing:border-box;--sinch-color-icon:var(--sinch-tag-color-default-fg);--sinch-size-icon:16px}#text{flex:1}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text></div>';
+import { assertTagColor, getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
   #$text;
   #$wrapper;
-
+  #isConnected = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -15,39 +15,34 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
+    this.#isConnected = true;
     this.#updateColor();
   }
-
+  disconnectedCallback() {
+    this.#isConnected = false;
+  }
   get color() {
     return getAttribute(this, 'color');
   }
-
   set color(value) {
     updateAttribute(this, 'color', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get small() {
     return getBooleanAttribute(this, 'small');
   }
-
   set small(isSmall) {
     updateBooleanAttribute(this, 'small', isSmall);
   }
-
   static get observedAttributes() {
     return ['text', 'color'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'color':
@@ -55,7 +50,6 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
           this.#updateColor();
           break;
         }
-
       case 'text':
         {
           this.#$text.textContent = newVal;
@@ -63,19 +57,22 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
         }
     }
   }
-
   #updateColor() {
-    const colorName = this.color ?? NO_COLOR;
-
-    if (colorName !== NO_COLOR) {
-      this.#$wrapper.style.setProperty('background-color', `var(--sinch-color-map-${colorName}-bg)`);
-      this.#$wrapper.style.setProperty('color', `var(--sinch-color-map-${colorName}-fg)`);
-      this.#$wrapper.style.setProperty('--sinch-color-icon', `var(--sinch-color-map-${colorName}-fg)`);
+    if (!this.#isConnected) {
+      return;
+    }
+    const colorName = this.color;
+    if (colorName !== null && colorName.length > 0) {
+      assertTagColor(this, colorName);
+      const bg = getTagColorBg(colorName);
+      const fg = getTagColorFg(colorName);
+      this.#$wrapper.style.setProperty('background-color', bg);
+      this.#$wrapper.style.setProperty('color', fg);
+      this.#$wrapper.style.setProperty('--sinch-color-icon', fg);
     } else {
       this.#$wrapper.style.removeProperty('background-color');
       this.#$wrapper.style.removeProperty('color');
       this.#$wrapper.style.removeProperty('--sinch-color-icon');
     }
   }
-
 });

package/tag/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const getTagColorBg: (id: string) => string;
+export declare const getTagColorFg: (id: string) => string;
+export declare const assertTagColor: (root: Element, id: string | null) => void;

package/tag/utils.js

@@ -0,0 +1,11 @@
+export const getTagColorBg = id => {
+  return `var(--sinch-tag-color-${id}-bg)`;
+};
+export const getTagColorFg = id => {
+  return `var(--sinch-tag-color-${id}-fg)`;
+};
+export const assertTagColor = (root, id) => {
+  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-tag-color-${id}-bg`).length === 0) {
+    throw new Error(`Invalid sinch-tag color name: ${id}`);
+  }
+};

package/text/index.js

@@ -10,47 +10,38 @@ defineCustomElement('sinch-text', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
+
   }
 
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }
-
   set type(value) {
     updateLiteralAttribute(this, typeValues, 'type', value);
   }
-
   set inline(isInline) {
     updateBooleanAttribute(this, 'inline', isInline);
   }
-
   get inline() {
     return getBooleanAttribute(this, 'inline');
   }
-
   set ellipsis(isEllipsis) {
     updateBooleanAttribute(this, 'ellipsis', isEllipsis);
   }
-
   get ellipsis() {
     return getBooleanAttribute(this, 'ellipsis');
   }
-
   set emphasized(isEmphasized) {
     updateBooleanAttribute(this, 'emphasized', isEmphasized);
   }
-
   get emphasized() {
     return getBooleanAttribute(this, 'emphasized');
   }
-
   static get observedAttributes() {
     return ['type', 'inline'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
@@ -58,7 +49,6 @@ defineCustomElement('sinch-text', class extends NectaryElement {
           assertType(newVal);
           break;
         }
-
       case 'inline':
         {
           this.setAttribute('role', isAttrTrue(newVal) ? 'text' : 'paragraph');
@@ -66,5 +56,4 @@ defineCustomElement('sinch-text', class extends NectaryElement {
         }
     }
   }
-
 });