@nectary/components 0.41.0 → 0.42.0

package/chat-block/index.js

@@ -8,7 +8,6 @@ defineCustomElement('sinch-chat-block', class extends NectaryElement {
   #$lastName;
   #$timeStamp;
   #$bubbleSlot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,19 +17,15 @@ defineCustomElement('sinch-chat-block', class extends NectaryElement {
     this.#$timeStamp = shadowRoot.querySelector('#time');
     this.#$bubbleSlot = shadowRoot.querySelector('slot[name="bubble"]');
   }
-
   connectedCallback() {
     this.#$bubbleSlot.addEventListener('slotchange', this.#onBubbleSlotChange);
   }
-
   disconnectedCallback() {
     this.#$bubbleSlot.removeEventListener('slotchange', this.#onBubbleSlotChange);
   }
-
   static get observedAttributes() {
     return ['firstname', 'lastname', 'timestamp', 'type'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'firstname':
@@ -38,19 +33,16 @@ defineCustomElement('sinch-chat-block', class extends NectaryElement {
           this.#$firstName.textContent = newVal;
           break;
         }
-
       case 'lastname':
         {
           this.#$lastName.textContent = newVal;
           break;
         }
-
       case 'timestamp':
         {
           this.#$timeStamp.textContent = newVal;
           break;
         }
-
       case 'type':
         {
           this.#updateBubbleTypes();
@@ -58,48 +50,37 @@ defineCustomElement('sinch-chat-block', class extends NectaryElement {
         }
     }
   }
-
   set type(value) {
     updateLiteralAttribute(this, typeValues, 'type', value);
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'type', null);
   }
-
   set firstName(value) {
     updateAttribute(this, 'firstname', value);
   }
-
   get firstName() {
     return getAttribute(this, 'firstname');
   }
-
   set lastName(value) {
     updateAttribute(this, 'lastname', value);
   }
-
   get lastName() {
     return getAttribute(this, 'lastname');
   }
-
   set timestamp(value) {
     updateAttribute(this, 'timestamp', value);
   }
-
   get timestamp() {
     return getAttribute(this, 'timestamp');
   }
-
   #onBubbleSlotChange = () => {
     this.#updateBubbleTypes();
   };
-
   #updateBubbleTypes() {
     const typeValue = getAttribute(this, 'type');
     this.#$bubbleSlot.assignedElements().forEach(el => {
       updateAttribute(el, 'data-type', typeValue);
     });
   }
-
 });

package/chat-block/types.d.ts

@@ -1,18 +1,30 @@
-import type { TSinchChatBubbleType } from '../chat-bubble/types';
 import type { TSinchElementReact } from '../types';
+export declare type TSinchChatBlockType = 'customer' | 'agent' | 'agent-prev';
 export declare type TSinchChatBlockElement = HTMLElement & {
-    type: TSinchChatBubbleType | null;
+    /** Type */
+    type: TSinchChatBlockType | null;
+    /** First name */
     firstName: string | null;
+    /** Last name */
     lastName: string | null;
+    /** Timestamp */
     timestamp: string | null;
-    setAttribute(name: 'type', value: TSinchChatBubbleType): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchChatBlockType): void;
+    /** First name */
     setAttribute(name: 'firstName', value: string): void;
+    /** Last name */
     setAttribute(name: 'lastName', value: string): void;
+    /** Timestamp */
     setAttribute(name: 'timestamp', value: string): void;
 };
 export declare type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
-    type: TSinchChatBubbleType;
+    /** Type */
+    type: TSinchChatBlockType;
+    /** First name */
     firstName?: string;
+    /** Last name */
     lastName?: string;
+    /** Timestamp */
     timestamp?: string;
 };

package/chat-bubble/index.js

@@ -9,18 +9,15 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   static get observedAttributes() {
     return ['text'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -30,25 +27,19 @@ defineCustomElement('sinch-chat-bubble', class extends NectaryElement {
         }
     }
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'data-type', null);
   }
-
   set status(value) {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
-
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
-
 });

package/chat-bubble/types.d.ts

@@ -3,12 +3,18 @@ export declare type TSinchChatBubbleType = 'customer' | 'agent' | 'agent-prev';
 export declare type TSinchChatBubbleStatus = 'sending' | 'sent' | 'received' | 'seen' | 'error';
 export declare type TSinchChatBubbleElement = HTMLElement & {
     readonly type: TSinchChatBubbleType | null;
+    /** Text */
     text: string;
+    /** Status */
     status: TSinchChatBubbleStatus | null;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
+    /** Status */
     setAttribute(name: 'status', value: TSinchChatBubbleStatus): void;
 };
 export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
+    /** Text */
     text: string;
+    /** Status */
     status?: TSinchChatBubbleStatus;
 };

package/checkbox/index.js

@@ -5,7 +5,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-checkbox', class extends NectaryElement {
   #$input;
   #$label;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,7 +12,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     this.#$input = shadowRoot.querySelector('input');
     this.#$label = shadowRoot.querySelector('label');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
     this.#$input.addEventListener('input', this.#onCheckboxInput);
@@ -23,7 +21,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$input.removeEventListener('input', this.#onCheckboxInput);
     this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
@@ -32,59 +29,45 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['checked', 'disabled', 'text'];
   }
-
   get type() {
     return 'text';
   }
-
   get nodeName() {
     return 'input';
   }
-
   set checked(isChecked) {
     updateBooleanAttribute(this, 'checked', isChecked);
   }
-
   get checked() {
     return getBooleanAttribute(this, 'checked');
   }
-
   set indeterminate(isIndeterminate) {
     updateBooleanAttribute(this, 'indeterminate', isIndeterminate);
   }
-
   get indeterminate() {
     return getBooleanAttribute(this, 'indeterminate');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set invalid(isInvalid) {
     updateBooleanAttribute(this, 'invalid', isInvalid);
   }
-
   get invalid() {
     return getBooleanAttribute(this, 'invalid');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text');
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -92,7 +75,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
@@ -100,7 +82,6 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -110,19 +91,15 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$input.focus();
   }
-
   blur() {
     this.#$input.blur();
   }
-
   #onCheckboxInput = e => {
     e.stopPropagation();
     const isChecked = this.#$input.checked;

package/chip/index.js

@@ -1,15 +1,15 @@
 import '../text';
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
-import { NO_COLOR } from '../utils/colors';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-color-snow-500);color:var(--sinch-color-text-default);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}:host([small]:not([small=false])) #button:focus::after{border-radius:14px}}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}@supports not selector(:focus-visible){#button:focus::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}:host([small]:not([small=false])) #button:focus::after{border-radius:14px}}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
+import { assertChipColor, getChipColorBg, getChipColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chip', class extends NectaryElement {
   #$text;
   #$button;
+  #isConnected = false;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,7 +17,6 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -42,41 +41,34 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     this.addEventListener('-blur', this.#onBlurReactHandler, {
       signal
     });
+    this.#isConnected = true;
     this.#updateColor();
   }
-
   disconnectedCallback() {
     this.#controller.abort();
+    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':
@@ -84,7 +76,6 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
           this.#updateColor();
           break;
         }
-
       case 'text':
         {
           this.#$text.textContent = newVal;
@@ -92,33 +83,33 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
         }
     }
   }
-
   #updateColor() {
-    const colorName = this.color ?? NO_COLOR;
-
-    if (colorName !== NO_COLOR) {
-      this.#$button.style.setProperty('background-color', `var(--sinch-color-map-${colorName}-bg)`);
-      this.#$button.style.setProperty('color', `var(--sinch-color-map-${colorName}-fg)`);
-      this.#$button.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) {
+      assertChipColor(this, colorName);
+      const bg = getChipColorBg(colorName);
+      const fg = getChipColorFg(colorName);
+      this.#$button.style.setProperty('background-color', bg);
+      this.#$button.style.setProperty('color', fg);
+      this.#$button.style.setProperty('--sinch-color-icon', fg);
     } else {
       this.#$button.style.removeProperty('background-color');
       this.#$button.style.removeProperty('color');
       this.#$button.style.removeProperty('--sinch-color-icon');
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonClick = () => {
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/chip/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const getChipColorBg: (id: string) => string;
+export declare const getChipColorFg: (id: string) => string;
+export declare const assertChipColor: (root: Element, id: string | null) => void;

package/chip/utils.js

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