@nectary/components 2.12.4 → 3.0.0

package/lib/cjs/icon-button/index.js

@@ -1,177 +0,0 @@
-"use strict";
-
-require('../tooltip');
-var _utils = require('../utils');
-var _size = require('../utils/size');
-var _utils2 = require('./utils');
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;user-select:none;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-icon-button', class extends _utils.NectaryElement {
-  #$button;
-  #$tooltip;
-  #controller = null;
-  #sizeContext;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector('#button');
-    this.#$tooltip = shadowRoot.querySelector('#tooltip');
-    this.#sizeContext = new _utils.Context(this.#$button, 'size');
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#controller = new AbortController();
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.role = 'button';
-    this.tabIndex = 0;
-    this.addEventListener('click', this.#onButtonClick, options);
-    this.addEventListener('focus', this.#onButtonFocus, options);
-    this.addEventListener('blur', this.#onButtonBlur, options);
-    this.addEventListener('keydown', this.#onButtonKeydown, options);
-    this.addEventListener('-click', this.#onClickReactHandler, options);
-    this.addEventListener('-focus', this.#onFocusReactHandler, options);
-    this.addEventListener('-blur', this.#onBlurReactHandler, options);
-    this.#$tooltip.addEventListener('-show', this.#onTooltipShow, options);
-    this.#$tooltip.addEventListener('-hide', this.#onTooltipHide, options);
-    this.addEventListener('-tooltip-show', this.#onTooltipShowReactHandler, options);
-    this.addEventListener('-tooltip-hide', this.#onTooltipHideReactHandler, options);
-    (0, _utils.subscribeContext)(this, 'size', this.#onContextSize, this.#controller.signal);
-    this.#sizeContext.listen(this.#controller.signal);
-    this.#onSizeUpdate();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['size', 'disabled', 'aria-label', 'data-size'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'disabled':
-        {
-          if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
-            return;
-          }
-          const isDisabled = (0, _utils.isAttrTrue)(newVal);
-          this.ariaDisabled = isDisabled.toString();
-          (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
-          break;
-        }
-      case 'aria-label':
-        {
-          (0, _utils.updateAttribute)(this.#$tooltip, 'text', newVal);
-          break;
-        }
-      case 'size':
-        {
-          (0, _utils.updateAttribute)(this, 'data-size', newVal);
-          break;
-        }
-      case 'data-size':
-        {
-          this.#onSizeUpdate();
-          break;
-        }
-    }
-  }
-  set type(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.typeValues, 'type', value);
-  }
-  get type() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.typeValues, 'type', 'tertiary');
-  }
-  set disabled(isDisabled) {
-    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return (0, _utils.getBooleanAttribute)(this, 'disabled');
-  }
-  set size(size) {
-    (0, _utils.updateLiteralAttribute)(this, _size.sizeExValues, 'size', size);
-  }
-  get size() {
-    return (0, _utils.getLiteralAttribute)(this, _size.sizeExValues, 'size', _size.DEFAULT_SIZE);
-  }
-  get tooltipRect() {
-    return this.#$tooltip.tooltipRect;
-  }
-  get focusable() {
-    return true;
-  }
-  #onSizeUpdate() {
-    if (!this.isDomConnected) {
-      return;
-    }
-    const size = (0, _utils.getAttribute)(this, 'data-size', _size.DEFAULT_SIZE);
-    this.#sizeContext.dispatch(size);
-  }
-  #onContextSize = e => {
-    if (this.hasAttribute('size')) {
-      return;
-    }
-    switch (e.detail) {
-      case 'l':
-        {
-          this.setAttribute('data-size', 'm');
-          break;
-        }
-      case 'm':
-        {
-          this.setAttribute('data-size', 's');
-          break;
-        }
-      default:
-        {
-          this.setAttribute('data-size', 'xs');
-        }
-    }
-  };
-  #onButtonClick = () => {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('-click'));
-    }
-  };
-  #onButtonFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
-  };
-  #onButtonBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
-  };
-  #onButtonKeydown = e => {
-    switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          e.preventDefault();
-          this.click();
-        }
-    }
-  };
-  #onTooltipShow = () => {
-    this.dispatchEvent(new CustomEvent('-tooltip-show'));
-  };
-  #onTooltipHide = () => {
-    this.dispatchEvent(new CustomEvent('-tooltip-hide'));
-  };
-  #onFocusReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-focus')?.();
-  };
-  #onBlurReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-blur')?.();
-  };
-  #onClickReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-click')?.(e);
-  };
-  #onTooltipShowReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-tooltip-show')?.();
-  };
-  #onTooltipHideReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-tooltip-hide')?.();
-  };
-});

package/lib/cjs/icon-button/types.d.ts

@@ -1,44 +0,0 @@
-import type { TRect, TSinchElementReact } from '../types';
-import type { TSinchSizeEx } from '../utils/size';
-export type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
-export type TSinchIconButtonElement = HTMLElement & {
-    /** Type, `tertiary` by default */
-    type: TSinchIconButtonType;
-    /** Size, `m` by default */
-    size: TSinchSizeEx;
-    /** Disabled */
-    disabled: boolean;
-    readonly tooltipRect: TRect;
-    /** Click event */
-    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
-    /** Focus event */
-    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
-    /** Blur event */
-    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
-    /** Type, `tertiary` by default */
-    setAttribute(name: 'type', value: string): void;
-    /** Size, `m` by default */
-    setAttribute(name: 'size', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
-    /** Type, `tertiary` by default */
-    type?: TSinchIconButtonType;
-    /** Size, `m` by default */
-    size?: TSinchSizeEx;
-    /** Disabled */
-    disabled?: boolean;
-    /** Label that is used for a11y */
-    'aria-label': string;
-    /** Click event handler */
-    'on-click'?: (e: CustomEvent<void>) => void;
-    /** Focus event handler */
-    'on-focus'?: (e: CustomEvent<void>) => void;
-    /** Blur event handler */
-    'on-blur'?: (e: CustomEvent<void>) => void;
-    /** Tooltip Show Event */
-    'on-tooltip-show'?: (e: CustomEvent<void>) => void;
-    /** Tooltip Hide Event */
-    'on-tooltip-hide'?: (e: CustomEvent<void>) => void;
-};

package/lib/cjs/icon-button/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/icon-button/utils.d.ts

@@ -1,2 +0,0 @@
-import type { TSinchIconButtonType } from './types';
-export declare const typeValues: readonly TSinchIconButtonType[];

package/lib/cjs/icon-button/utils.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.typeValues = void 0;
-const typeValues = exports.typeValues = ['primary', 'secondary', 'tertiary'];

package/lib/esm/chat/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchChatElement, TSinchChatReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat': TSinchChatReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat': TSinchChatElement;
-    }
-}

package/lib/esm/chat/index.js

@@ -1,11 +0,0 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;gap:32px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat', class extends NectaryElement {
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-});

package/lib/esm/chat/types.d.ts

@@ -1,3 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchChatElement = HTMLElement;
-export type TSinchChatReact = TSinchElementReact<TSinchChatElement>;

package/lib/esm/chat/types.js

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

package/lib/esm/chat-block/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchChatBlockElement, TSinchChatBlockReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat-block': TSinchChatBlockReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat-block': TSinchChatBlockElement;
-    }
-}

package/lib/esm/chat-block/index.js

@@ -1,86 +0,0 @@
-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-sys-font-body-xs);color:var(--sinch-sys-color-text-default)}#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');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-chat-block', class extends NectaryElement {
-  #$firstName;
-  #$lastName;
-  #$timeStamp;
-  #$bubbleSlot;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$firstName = shadowRoot.querySelector('#firstname');
-    this.#$lastName = shadowRoot.querySelector('#lastname');
-    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':
-        {
-          this.#$firstName.textContent = newVal;
-          break;
-        }
-      case 'lastname':
-        {
-          this.#$lastName.textContent = newVal;
-          break;
-        }
-      case 'timestamp':
-        {
-          this.#$timeStamp.textContent = newVal;
-          break;
-        }
-      case 'type':
-        {
-          this.#updateBubbleTypes();
-          break;
-        }
-    }
-  }
-  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/lib/esm/chat-block/types.d.ts

@@ -1,30 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchChatBlockType = 'customer' | 'agent' | 'agent-prev';
-export type TSinchChatBlockElement = HTMLElement & {
-    /** Type */
-    type: TSinchChatBlockType | null;
-    /** First name */
-    firstName: string | null;
-    /** Last name */
-    lastName: string | null;
-    /** Timestamp */
-    timestamp: string | null;
-    /** 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 type TSinchChatBlockReact = TSinchElementReact<TSinchChatBlockElement> & {
-    /** Type */
-    type: TSinchChatBlockType;
-    /** First name */
-    firstName?: string;
-    /** Last name */
-    lastName?: string;
-    /** Timestamp */
-    timestamp?: string;
-};

package/lib/esm/chat-block/types.js

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

package/lib/esm/chat-bubble/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchChatBubbleElement, TSinchChatBubbleReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-chat-bubble': TSinchChatBubbleReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-chat-bubble': TSinchChatBubbleElement;
-    }
-}

package/lib/esm/chat-bubble/index.js

@@ -1,41 +0,0 @@
-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-sys-color-container-contrast-primary-default);border-top-left-radius:0}:host([data-type=agent-prev])>#wrapper{background-color:var(--sinch-sys-color-container-contrast-primary-active);border-top-right-radius:0}:host([data-type=agent])>#wrapper{background-color:var(--sinch-sys-color-container-complement-primary-hover);border-top-right-radius:0}#text{--sinch-global-color-text:var(--sinch-sys-color-text-default)}#icon-error,#icon-received,#icon-seen,#icon-sending,#icon-sent{display:none;position:absolute;right:16px;bottom:12px;height:16px}#icon-sending{fill:var(--sinch-sys-color-text-default)}#icon-sent{fill:var(--sinch-sys-color-text-default)}#icon-received{fill:var(--sinch-sys-color-text-default)}#icon-seen{fill:var(--sinch-sys-color-feedback-success-contrast)}#icon-error{fill:var(--sinch-sys-color-feedback-invalid-contrast)}:host([status=error]) #icon-error,:host([status=received]) #icon-received,:host([status=seen]) #icon-seen,:host([status=sending]) #icon-sending,:host([status=sent]) #icon-sent{display:block}:host([status]:not([status=""])) #wrapper{padding-right:42px}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><svg id="icon-sending" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72Z"/></svg><svg id="icon-sent" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17Z"/></svg><svg id="icon-received" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.3 6.3a.996.996 0 0 0-1.41 0l-5.64 5.64 1.41 1.41L17.3 7.7c.38-.38.38-1.02 0-1.4Zm4.24-.01-9.88 9.88-3.48-3.47a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L22.95 7.71a.996.996 0 0 0 0-1.41h-.01a.975.975 0 0 0-1.4-.01ZM1.12 14.12 5.3 18.3c.39.39 1.02.39 1.41 0l.7-.7-4.88-4.9a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42Z"/></svg><svg id="icon-seen" id="icon-received" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.3 6.3a.996.996 0 0 0-1.41 0l-5.64 5.64 1.41 1.41L17.3 7.7c.38-.38.38-1.02 0-1.4Zm4.24-.01-9.88 9.88-3.48-3.47a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L22.95 7.71a.996.996 0 0 0 0-1.41h-.01a.975.975 0 0 0-1.4-.01ZM1.12 14.12 5.3 18.3c.39.39 1.02.39 1.41 0l.7-.7-4.88-4.9a.996.996 0 0 0-1.41 0c-.39.39-.39 1.03 0 1.42Z"/></svg><svg id="icon-error" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1Zm-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm1-3h-2v-2h2v2Z"/></svg></div>';
-import { statusValues, typeValues } from './utils';
-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':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-    }
-  }
-  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/lib/esm/chat-bubble/types.d.ts

@@ -1,20 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchChatBubbleType = 'customer' | 'agent' | 'agent-prev';
-export type TSinchChatBubbleStatus = 'sending' | 'sent' | 'received' | 'seen' | 'error';
-export 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 type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
-    /** Text */
-    text: string;
-    /** Status */
-    status?: TSinchChatBubbleStatus;
-};

package/lib/esm/chat-bubble/types.js

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

package/lib/esm/chat-bubble/utils.d.ts

@@ -1,3 +0,0 @@
-import type { TSinchChatBubbleStatus, TSinchChatBubbleType } from './types';
-export declare const typeValues: readonly TSinchChatBubbleType[];
-export declare const statusValues: readonly TSinchChatBubbleStatus[];

package/lib/esm/chat-bubble/utils.js

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

package/lib/esm/icon-button/index.d.ts

@@ -1,12 +0,0 @@
-import '../tooltip';
-import type { TSinchIconButtonElement, TSinchIconButtonReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-icon-button': TSinchIconButtonReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-icon-button': TSinchIconButtonElement;
-    }
-}