@nectary/components 0.26.0 → 0.27.0

package/accordion/index.js

@@ -1,21 +1,26 @@
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 
-var _$slot, _onSlotChange, _onOptionChange;
+var _$slot, _onSlotChange, _onOptionChange, _onValueChange;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { isAccordionItemElement } from '../accordion-item';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCSVSet, getFirstCSValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCSV } from '../utils';
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), class extends NectaryElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _onValueChange);
+
     _classPrivateFieldInitSpec(this, _$slot, {
       writable: true,
       value: void 0
@@ -24,7 +29,7 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     _classPrivateFieldInitSpec(this, _onSlotChange, {
       writable: true,
       value: () => {
-        this.onValueChange(this.value);
+        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
@@ -32,18 +37,11 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
       writable: true,
       value: e => {
         e.stopPropagation();
-
-        if (!isAccordionItemElement(e.target)) {
-          return;
-        }
-
-        const {
-          value,
-          isChecked
-        } = e.detail;
-        const csv = updateCSV(this.multiple ? this.value : value, value, isChecked);
+        const $elem = e.target;
+        const value = e.detail;
+        const result = this.multiple ? updateCsv(this.value, value, !$elem.checked) : $elem.checked ? '' : value;
         this.dispatchEvent(new CustomEvent('change', {
-          detail: csv,
+          detail: result,
           bubbles: true
         }));
       }
@@ -90,30 +88,29 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     switch (name) {
       case 'value':
         {
-          this.onValueChange(newVal ?? '');
+          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
+
           break;
         }
     }
   }
 
-  onValueChange(csv) {
-    if (this.multiple) {
-      const values = getCSVSet(csv);
+}));
 
-      for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-        if (isAccordionItemElement($option)) {
-          $option.checked = $option.disabled !== true && values.has($option.value);
-        }
-      }
-    } else {
-      const value = getFirstCSValue(csv);
+function _onValueChange2(csv) {
+  if (this.multiple) {
+    const values = getCsvSet(csv);
 
-      for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-        if (isAccordionItemElement($option)) {
-          $option.checked = $option.disabled !== true && $option.value === value;
-        }
-      }
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+      updateBooleanAttribute($option, 'checked', isChecked);
     }
-  }
+  } else {
+    const value = getFirstCsvValue(csv);
 
-}));
+    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'checked', isChecked);
+    }
+  }
+}

package/accordion-item/index.d.ts

@@ -1,7 +1,6 @@
 import '../icons/keyboard-arrow-down';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent } from 'react';
-export declare const isAccordionItemElement: (element: EventTarget | Element | null) => element is TSinchAccordionItemElement;
 declare const statusValues: readonly ["info", "success", "warn", "error"];
 export declare type TSinchAccordionStatusType = typeof statusValues[number];
 export declare type TSinchAccordionItemElement = HTMLElement & {

package/accordion-item/index.js

@@ -10,9 +10,6 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span> <span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
-export const isAccordionItemElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
-};
 const statusValues = ['info', 'success', 'warn', 'error'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -41,10 +38,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
         e.stopPropagation();
         this.dispatchEvent(new CustomEvent('change', {
           bubbles: true,
-          detail: {
-            value: this.value,
-            isChecked: !this.checked
-          }
+          detail: this.value
         }));
       }
     });

package/avatar/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 declare const backgroundValues: readonly ["grey", "yellow", "blue"];
 declare const sizeValues: readonly ["l", "m", "s"];

package/avatar/index.js

@@ -7,7 +7,6 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import '../icons/cancel';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;font:var(--sinch-font-title-s);line-height:38px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;text-transform:uppercase;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;font:var(--sinch-font-title-m);line-height:54px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0;border-radius:50%}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-2px;left:calc(100% - 15px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 19px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 9px)}::slotted(sinch-avatar-status){position:absolute;bottom:-2px;right:-2px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:2px;right:2px}</style><div id="wrapper"><span id="text"></span> <img id="image" alt=""/><slot name="badge"></slot><slot name="status"></slot></div>';
 const backgroundValues = ['grey', 'yellow', 'blue'];

package/avatar-badge/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 export declare type TSinchAvatarBadgeElement = HTMLElement & {
     text: string;

package/avatar-badge/index.js

@@ -7,7 +7,6 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import '../icons/cancel';
 import { defineCustomElement, getAttribute, NectaryElement, setClass, updateAttribute } from '../utils';
 const templateHTML = '<style>#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
 const template = document.createElement('template');

package/avatar-status/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import type { TSinchElementReact } from '../types';
 declare const colorValues: readonly ["red", "yellow", "green", "grey"];
 export declare type TSinchAvatarStatusColor = typeof colorValues[number];

package/avatar-status/index.js

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
 const colorValues = ['red', 'yellow', 'green', 'grey'];

package/card/index.js

@@ -7,8 +7,6 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { isSinchCardButtonElement } from '../card-button';
-import { isSinchCardLinkElement } from '../card-link';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#title{font:var(--sinch-font-title-m);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
 const template = document.createElement('template');
@@ -57,11 +55,9 @@ defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap
     _classPrivateFieldInitSpec(this, _updateDisabledAttributeInChildren, {
       writable: true,
       value: () => {
-        _classPrivateFieldGet(this, _$actionSlot).assignedElements().forEach(el => {
-          if (isSinchCardButtonElement(el) || isSinchCardLinkElement(el)) {
-            updateAttribute(el, 'disabled', this.getAttribute('disabled'));
-          }
-        });
+        for (const $el of _classPrivateFieldGet(this, _$actionSlot).assignedElements()) {
+          updateAttribute($el, 'disabled', this.getAttribute('disabled'));
+        }
       }
     });
 

package/card-button/index.d.ts

@@ -1,6 +1,5 @@
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
-export declare const isSinchCardButtonElement: (el: Element) => el is TSinchCardButtonElement;
 export declare type TSinchCardButtonElement = HTMLElement & {
     text: string;
     disabled: boolean;

package/card-button/index.js

@@ -9,9 +9,6 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;outline:0}sinch-button{display:block}</style><sinch-button type="primary" small></sinch-button>';
-export const isSinchCardButtonElement = el => {
-  return el.tagName === 'SINCH-CARD-BUTTON';
-};
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card-button', (_$button = new WeakMap(), class extends NectaryElement {

package/card-button/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchCardButtonElement } from '.';
+export declare const isSinchCardButtonElement: (el: Element) => el is TSinchCardButtonElement;

package/card-button/utils.js

@@ -0,0 +1,3 @@
+export const isSinchCardButtonElement = el => {
+  return el.tagName === 'SINCH-CARD-BUTTON';
+};

package/card-link/index.d.ts

@@ -1,7 +1,6 @@
 import '../icons/arrow-forward';
 import type { TSinchElementReact } from '../types';
 import type { FocusEvent, MouseEvent } from 'react';
-export declare const isSinchCardLinkElement: (el: Element) => el is TSinchCardLinkElement;
 export declare type TSinchCardLinkElement = HTMLElement & {
     text: string;
     href: string;

package/card-link/index.js

@@ -10,9 +10,6 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline;outline:0}a{display:flex;flex-direction:row;gap:8px;font:var(--sinch-font-emphasized-body);color:var(--sinch-color-tropical-500);text-decoration:none;outline:0;--sinch-color-icon:var(--sinch-color-tropical-500);--sinch-size-icon:24px}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-300);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-300)}span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}</style><a><span></span><sinch-icon-arrow-forward></sinch-icon-arrow-forward></a>';
-export const isSinchCardLinkElement = el => {
-  return el.tagName === 'SINCH-CARD-LINK';
-};
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {

package/card-link/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchCardLinkElement } from '.';
+export declare const isSinchCardLinkElement: (el: Element) => el is TSinchCardLinkElement;

package/card-link/utils.js

@@ -0,0 +1,3 @@
+export const isSinchCardLinkElement = el => {
+  return el.tagName === 'SINCH-CARD-LINK';
+};

package/chat-block/index.js

@@ -11,7 +11,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
-import { typeValues } from '../chat-bubble';
+import { typeValues } from '../chat-bubble/utils';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>&bull;<span id="time"></span></p><slot name="bubble"></slot></div>';
 const template = document.createElement('template');

package/chat-bubble/index.d.ts

@@ -1,12 +1,20 @@
+import '../icons/query-builder';
+import '../icons/check';
+import '../icons/done-all';
+import '../icons/error-outline';
+import { typeValues } from './utils';
 import type { TSinchElementReact } from '../types';
-export declare const typeValues: readonly ["customer", "agent", "agent-prev"];
+declare const statusValues: readonly ["sending", "sent", "received", "seen", "error"];
 export declare type TSinchChatBubbleType = typeof typeValues[number];
+export declare type TSinchChatBubbleStatus = typeof statusValues[number];
 export declare type TSinchChatBubbleElement = HTMLElement & {
     readonly type: TSinchChatBubbleType | null;
     text: string;
+    status: TSinchChatBubbleStatus | null;
 };
 export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
     text: string;
+    status?: TSinchChatBubbleStatus;
 };
 declare global {
     namespace JSX {
@@ -18,3 +26,4 @@ declare global {
         'sinch-chat-bubble': TSinchChatBubbleElement;
     }
 }
+export {};

package/chat-bubble/index.js

@@ -7,9 +7,14 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
-import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#text{padding:12px 16px;border-radius:16px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);margin:0;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#text{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#text{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#text{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}</style><p id="text"></p>';
-export const typeValues = ['customer', 'agent', 'agent-prev'];
+import '../icons/query-builder';
+import '../icons/check';
+import '../icons/done-all';
+import '../icons/error-outline';
+import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;padding:12px 16px;border-radius:16px;max-width:595px;box-sizing:border-box}:host([data-type=customer])>#wrapper{background-color:var(--sinch-color-snow-500);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-color-snow-700);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-color-honey-200);border-top-right-radius:0}#text{font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}sinch-icon-check,sinch-icon-done-all,sinch-icon-error-outline,sinch-icon-query-builder{display:none;position:absolute;right:16px;bottom:12px;--sinch-size-icon:16px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([status=sending]) sinch-icon-query-builder{display:block}:host([status=sent]) sinch-icon-check{display:block}:host([status=received]) sinch-icon-done-all{display:block}:host([status=seen]) sinch-icon-done-all{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([status=error]) sinch-icon-error-outline{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><span id="text"></span><sinch-icon-query-builder></sinch-icon-query-builder><sinch-icon-check></sinch-icon-check><sinch-icon-done-all></sinch-icon-done-all><sinch-icon-error-outline></sinch-icon-error-outline></div>';
+import { typeValues } from './utils';
+const statusValues = ['sending', 'sent', 'received', 'seen', 'error'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends NectaryElement {
@@ -53,4 +58,12 @@ defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends
     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/utils.d.ts

@@ -0,0 +1 @@
+export declare const typeValues: readonly ["customer", "agent", "agent-prev"];

package/chat-bubble/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['customer', 'agent', 'agent-prev'];

package/dropdown/index.d.ts

@@ -4,6 +4,7 @@ declare const orientationValues: readonly ["top-left", "top-right", "bottom-left
 export declare type TSinchDropdownOrientation = typeof orientationValues[number];
 export declare type TSinchDropdownElement = HTMLElement & {
     open: boolean;
+    multiple: boolean;
     orientation: TSinchDropdownOrientation;
     value: string;
     maxVisibleItems: number | null;
@@ -13,6 +14,7 @@ export declare type TSinchDropdownElement = HTMLElement & {
 };
 export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
     open: boolean;
+    multiple?: boolean;
     orientation?: TSinchDropdownOrientation;
     value: string;
     maxVisibleItems?: number;