@nectary/components 0.26.0 → 0.28.0

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/button/index.js

@@ -8,7 +8,7 @@ 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, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-s);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer;--sinch-size-icon:24px}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}:host([text]:not([text=""])) #text{display:initial}:host([text]:not([text=""])) button{padding:12px 24px}:host([small]:not([small=false]))>button{height:32px;padding:8px;line-height:16px;font-size:14px;gap:8px;--sinch-size-icon:16px}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="icon"></slot><span id="text"></span></button>';
+const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-s);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer;--sinch-size-icon:24px}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}:host([text]:not([text=""])) #text{display:initial}:host([text]:not([text=""])) button{padding:12px 24px}:host([small]:not([small=false]))>button{height:32px;padding:8px;line-height:16px;font-size:14px;gap:8px;--sinch-size-icon:16px}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="left-icon"></slot><span id="text"></span><slot name="right-icon"></slot></button>';
 const buttonTypes = ['primary', 'secondary', 'cta-primary', 'cta-secondary', 'destructive'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

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.d.ts

@@ -1,4 +1,4 @@
-import type { TSinchChatBubbleType } from '../chat-bubble';
+import type { TSinchChatBubbleType } from '../chat-bubble/types';
 import type { TSinchElementReact } from '../types';
 export declare type TSinchChatBlockElement = HTMLElement & {
     type: TSinchChatBubbleType | null;

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,13 +1,8 @@
-import type { TSinchElementReact } from '../types';
-export declare const typeValues: readonly ["customer", "agent", "agent-prev"];
-export declare type TSinchChatBubbleType = typeof typeValues[number];
-export declare type TSinchChatBubbleElement = HTMLElement & {
-    readonly type: TSinchChatBubbleType | null;
-    text: string;
-};
-export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
-    text: string;
-};
+import '../icons/query-builder';
+import '../icons/check';
+import '../icons/done-all';
+import '../icons/error-outline';
+import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/chat-bubble/index.js

@@ -7,9 +7,13 @@ 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 { statusValues, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-bubble', (_$text = new WeakMap(), class extends NectaryElement {
@@ -53,4 +57,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/types.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+import type { statusValues, typeValues } from './utils';
+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;
+};

package/chat-bubble/types.js

@@ -0,0 +1 @@
+export {};

package/chat-bubble/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const typeValues: readonly ["customer", "agent", "agent-prev"];
+export declare const statusValues: readonly ["sending", "sent", "received", "seen", "error"];

package/chat-bubble/utils.js

@@ -0,0 +1,2 @@
+export const typeValues = ['customer', 'agent', 'agent-prev'];
+export const statusValues = ['sending', 'sent', 'received', 'seen', 'error'];

package/dropdown/index.d.ts

@@ -1,27 +1,5 @@
-import type { TRect, TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
-export declare type TSinchDropdownOrientation = typeof orientationValues[number];
-export declare type TSinchDropdownElement = HTMLElement & {
-    open: boolean;
-    orientation: TSinchDropdownOrientation;
-    value: string;
-    maxVisibleItems: number | null;
-    readonly dropdownRect: TRect;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
-    open: boolean;
-    orientation?: TSinchDropdownOrientation;
-    value: string;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    onClose: (event: SyntheticEvent<TSinchDropdownElement, CustomEvent<void>>) => void;
-    onChange: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
-    onFocus?: (e: FocusEvent<TSinchDropdownElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchDropdownElement>) => void;
-};
+import '../popover';
+import type { TSinchDropdownElement, TSinchDropdownReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -32,4 +10,3 @@ declare global {
         'sinch-dropdown': TSinchDropdownElement;
     }
 }
-export {};