@nectary/components 0.48.1 → 0.49.0

package/accordion/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchAccordionElement = HTMLElement & {
+export type TSinchAccordionElement = HTMLElement & {
     /** Value */
     value: string;
     /** Allows to expand multiple items simultanously */
@@ -12,7 +12,7 @@ export declare type TSinchAccordionElement = HTMLElement & {
     /** Allows to expand multiple items simultanously */
     setAttribute(name: 'multiple', value: ''): void;
 };
-export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
+export type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
     /** Value */
     value: string;
     multiple?: boolean;

package/accordion-item/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAccordionStatusType = 'info' | 'success' | 'warn' | 'error';
-export declare type TSinchAccordionItemElement = HTMLElement & {
+export type TSinchAccordionStatusType = 'info' | 'success' | 'warn' | 'error';
+export type TSinchAccordionItemElement = HTMLElement & {
     /** Value */
     value: string;
     /** Label */
@@ -22,7 +22,7 @@ export declare type TSinchAccordionItemElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
+export type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
     /** Value */
     value: string;
     /** Label */

package/action-menu/index.js

@@ -159,7 +159,6 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-
       updateBooleanAttribute($op, 'data-selected', isSelected);
       if (isSelected && hasRows) {
         $op.scrollIntoView?.({

package/action-menu/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchActionMenuElement = HTMLElement & {
+export type TSinchActionMenuElement = HTMLElement & {
     /** How many rows to show and scroll the rest */
     rows: number | null;
     /** How many rows to show and scroll the rest */
     setAttribute(name: 'rows', value: string): void;
 };
-export declare type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
+export type TSinchActionMenuReact = TSinchElementReact<TSinchActionMenuElement> & {
     /** How many rows to show and scroll the rest */
     rows?: number;
     /** Label that is used for a11y */

package/action-menu-option/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;color:var(--sinch-color-text-disabled);--sinch-color-icon:var(--sinch-color-stormy-100)}:host(:hover:not([disabled]))>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-400)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends NectaryElement {

package/action-menu-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchActionMenuOptionElement = HTMLElement & {
+export type TSinchActionMenuOptionElement = HTMLElement & {
     /** Display text */
     text: string;
     /** Disabled state */
@@ -11,7 +11,7 @@ export declare type TSinchActionMenuOptionElement = HTMLElement & {
     /** Disabled state */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
+export type TSinchActionMenuOptionReact = TSinchElementReact<TSinchActionMenuOptionElement> & {
     /** Display text */
     text: string;
     /** Disabled state */

package/alert/index.d.ts

@@ -1,6 +1,7 @@
+import '../icons/info';
 import '../icons/report-problem';
 import '../icons/report';
-import '../icons/info';
+import '../rich-text';
 import '../text';
 import type { TSinchAlertElement, TSinchAlertReact } from './types';
 declare global {

package/alert/index.js

@@ -1,9 +1,10 @@
+import '../icons/info';
 import '../icons/report-problem';
 import '../icons/report';
-import '../icons/info';
+import '../rich-text';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-feedback-info-icon)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{display:flex;flex-direction:column;gap:8px;color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-feedback-warning-bg)}:host([type=error]) #wrapper{background-color:var(--sinch-color-feedback-invalid-bg)}:host([type=info]) #wrapper{background-color:var(--sinch-color-feedback-info-bg)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-feedback-warning-icon)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-feedback-invalid-icon)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-feedback-info-icon)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -44,7 +45,7 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
         }
       case 'text':
         {
-          this.#$text.textContent = newVal;
+          updateAttribute(this.#$text, 'text', newVal);
           break;
         }
     }

package/alert/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchAlertType = 'info' | 'warn' | 'error';
-export declare type TSinchAlertElement = HTMLElement & {
+export type TSinchAlertType = 'info' | 'warn' | 'error';
+export type TSinchAlertElement = HTMLElement & {
     /** Type */
     type: TSinchAlertType;
     /** Text */
@@ -10,7 +10,7 @@ export declare type TSinchAlertElement = HTMLElement & {
     /** Text */
     setAttribute(name: 'text', value: string): void;
 };
-export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
+export type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
     /** Type */
     type: TSinchAlertType;
     /** Text */

package/alert/utils.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchAlertType } from './types';
 export declare const typeValues: readonly TSinchAlertType[];
-declare type TAssertType = (value: string | null) => asserts value is TSinchAlertType;
+type TAssertType = (value: string | null) => asserts value is TSinchAlertType;
 export declare const assertType: TAssertType;
 export {};

package/avatar/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-export declare type TSinchAvatarElement = HTMLElement & {
+export type TSinchAvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+export type TSinchAvatarElement = HTMLElement & {
     /** Image source */
     src: string | null;
     /** Alt text */
@@ -23,7 +23,7 @@ export declare type TSinchAvatarElement = HTMLElement & {
     /** Status */
     setAttribute(name: 'status', value: TSinchAvatarStatus): void;
 };
-export declare type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
+export type TSinchAvatarReact = TSinchElementReact<TSinchAvatarElement> & {
     /** Image source */
     src?: string;
     /** Alt text */

package/avatar/utils.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchAvatarStatus } from './types';
 export declare const statusValues: readonly TSinchAvatarStatus[];
-declare type TAssertStatus = (value: string | null) => asserts value is TSinchAvatarStatus;
+type TAssertStatus = (value: string | null) => asserts value is TSinchAvatarStatus;
 export declare const assertStatus: TAssertStatus;
 export declare const getAvatarColorBg: (id: string) => string;
 export declare const getAvatarColorFg: (id: string) => string;

package/badge/types.d.ts

@@ -1,7 +1,7 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchBadgeMode = 'square' | 'circle';
-export declare type TSinchBadgeElement = HTMLElement & {
+export type TSinchBadgeMode = 'square' | 'circle';
+export type TSinchBadgeElement = HTMLElement & {
     /** Text */
     text: string;
     /** Size */
@@ -24,7 +24,7 @@ export declare type TSinchBadgeElement = HTMLElement & {
     /** Hidden */
     setAttribute(name: 'hidden', value: ''): void;
 };
-export declare type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
+export type TSinchBadgeReact = TSinchElementReact<TSinchBadgeElement> & {
     /** Text */
     text: string;
     /** Size */

package/badge/utils.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchBadgeMode } from './types';
 export declare const modeValues: readonly TSinchBadgeMode[];
-declare type TAssertMode = (value: string | null) => asserts value is TSinchBadgeMode;
+type TAssertMode = (value: string | null) => asserts value is TSinchBadgeMode;
 export declare const assertMode: TAssertMode;
 export declare const getBadgeColorBg: (id: string) => string;
 export declare const getBadgeColorFg: (id: string) => string;

package/button/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
 import type { TSinchSize } from '../utils/size';
-export declare type TSinchButtonType = 'primary' | 'secondary' | 'tertiary' | 'cta-primary' | 'cta-secondary' | 'destructive';
-export declare type TSinchButtonElement = HTMLElement & {
+export type TSinchButtonType = 'primary' | 'secondary' | 'tertiary' | 'cta-primary' | 'cta-secondary' | 'destructive';
+export type TSinchButtonElement = HTMLElement & {
     /** Type, `primary` by default */
     type: TSinchButtonType;
     /** Size, `m` by default */
@@ -25,7 +25,7 @@ export declare type TSinchButtonElement = HTMLElement & {
     /** Disabled */
     setAttribute(attr: 'disabled', value: ''): void;
 };
-export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
+export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
     /** Type, `primary` by default */
     type?: TSinchButtonType;
     /** Size, `m` by default */

package/button/utils.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchButtonType } from './types';
 export declare const typeValues: readonly TSinchButtonType[];
-declare type TAssertType = (value: string | null) => asserts value is TSinchButtonType;
+type TAssertType = (value: string | null) => asserts value is TSinchButtonType;
 export declare const assertType: TAssertType;
 export {};

package/card/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchCardElement = HTMLElement & {
+export type TSinchCardElement = HTMLElement & {
     /** Text */
     text: string;
     /** Caption */
@@ -17,7 +17,7 @@ export declare type TSinchCardElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
+export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
     /** Text */
     text: string;
     /** Caption */

package/card-container/types.d.ts

@@ -1,3 +1,3 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchCardContainerElement = HTMLElement;
-export declare type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;
+export type TSinchCardContainerElement = HTMLElement;
+export type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;

package/chat/types.d.ts

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

package/chat-block/types.d.ts

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

package/chat-bubble/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchChatBubbleType = 'customer' | 'agent' | 'agent-prev';
-export declare type TSinchChatBubbleStatus = 'sending' | 'sent' | 'received' | 'seen' | 'error';
-export declare type TSinchChatBubbleElement = HTMLElement & {
+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;
@@ -12,7 +12,7 @@ export declare type TSinchChatBubbleElement = HTMLElement & {
     /** Status */
     setAttribute(name: 'status', value: TSinchChatBubbleStatus): void;
 };
-export declare type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
+export type TSinchChatBubbleReact = TSinchElementReact<TSinchChatBubbleElement> & {
     /** Text */
     text: string;
     /** Status */

package/checkbox/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchCheckboxElement = HTMLElement & {
+export type TSinchCheckboxElement = HTMLElement & {
     checked: boolean;
     indeterminate: boolean;
     disabled: boolean;
@@ -15,7 +15,7 @@ export declare type TSinchCheckboxElement = HTMLElement & {
     setAttribute(name: 'invalid', value: ''): void;
     setAttribute(name: 'text', value: string): void;
 };
-export declare type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
+export type TSinchCheckboxReact = TSinchElementReact<TSinchCheckboxElement> & {
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;

package/chip/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchChipElement = HTMLElement & {
+export type TSinchChipElement = HTMLElement & {
     /** Text */
     text: string;
     /** Color, gray by default */
@@ -19,7 +19,7 @@ export declare type TSinchChipElement = HTMLElement & {
     /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
-export declare type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
+export type TSinchChipReact = TSinchElementReact<TSinchChipElement> & {
     /** Text */
     text: string;
     /** Color, gray by default */

package/code-tag/index.d.ts

@@ -0,0 +1,13 @@
+import '../icons/open-in-new';
+import '../icons/arrow-forward';
+import type { TSinchCodeTagElement, TSinchCodeTagReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-code-tag': TSinchCodeTagReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-code-tag': TSinchCodeTagElement;
+    }
+}

package/code-tag/index.js

@@ -0,0 +1,36 @@
+import '../icons/open-in-new';
+import '../icons/arrow-forward';
+import { defineCustomElement, getAttribute, updateAttribute, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-font-mono-text-s);font-size:inherit;line-height:inherit;text-decoration:inherit;border:1px solid var(--sinch-color-border-light);background-color:var(--sinch-color-bg-primary-contrast);padding:0 .25em;border-radius:var(--sinch-shape-radius-xs)}</style><span id="content"></span>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-code-tag', class extends NectaryElement {
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#content');
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  static get observedAttributes() {
+    return ['text'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+    }
+  }
+});

package/code-tag/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchCodeTagElement = HTMLElement & {
+    /** Text content of hyperlink */
+    text: string;
+    /** Text content of hyperlink */
+    setAttribute(name: 'text', value: string): void;
+};
+export type TSinchCodeTagReact = TSinchElementReact<TSinchCodeTagElement> & {
+    /** Text content of hyperlink */
+    text: string;
+};

package/code-tag/types.js

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

package/color-menu/index.js

@@ -146,9 +146,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       fragment.appendChild(optFrag);
     }
     this.#$listbox.replaceChildren(fragment);
-
     this.#updateColumns();
-
     this.#onValueChange();
   }
   #updateRows() {
@@ -305,7 +303,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     const hasRows = this.hasAttribute('rows');
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-
       updateBooleanAttribute($op, 'data-selected', isSelected);
       if (isSelected && hasRows) {
         $op.scrollIntoView?.({

package/color-menu/types.d.ts

@@ -1,5 +1,5 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchColorMenuElement = HTMLElement & {
+export type TSinchColorMenuElement = HTMLElement & {
     /** Value */
     value: string;
     /** How many rows to show and scroll the rest */
@@ -20,7 +20,7 @@ export declare type TSinchColorMenuElement = HTMLElement & {
     /** How many cols to show and scroll the rest */
     setAttribute(name: 'cols', value: string): void;
 };
-export declare type TSinchColorMenuReact = TSinchElementReact<TSinchColorMenuElement> & {
+export type TSinchColorMenuReact = TSinchElementReact<TSinchColorMenuElement> & {
     /** Value */
     value: string;
     /** How many rows to show and scroll the rest */

package/color-swatch/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchColorSwatchElement = HTMLElement & {
+export type TSinchColorSwatchElement = HTMLElement & {
     /** Color name */
     name: string | null;
     /** Color name */
     setAttribute(name: 'name', value: string): void;
 };
-export declare type TSinchColorSwatchReact = TSinchElementReact<TSinchColorSwatchElement> & {
+export type TSinchColorSwatchReact = TSinchElementReact<TSinchColorSwatchElement> & {
     /** Color name */
     name?: string;
 };

package/date-picker/index.js

@@ -92,7 +92,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           if ('production' !== 'production') {
             assertDate(this.#minDate, name, newVal);
           }
-
           if (this.#uiDate !== null) {
             clampMinDate(this.#uiDate, this.#minDate);
           }
@@ -108,7 +107,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
           if ('production' !== 'production') {
             assertDate(this.#maxDate, name, newVal);
           }
-
           if (this.#uiDate !== null) {
             clampMaxDate(this.#uiDate, this.#maxDate);
           }
@@ -305,7 +303,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       this.#render();
       return;
     }
-
     this.dispatchEvent(new CustomEvent('change', {
       detail: dateIso,
       bubbles: true
@@ -326,7 +323,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         if (isValidDate(date1) && isValidDate(date2)) {
           this.#date1 = date1;
           this.#date2 = date2;
-
           if (this.#uiDate === null) {
             this.#uiDate = cloneDate(this.#date2);
           }
@@ -347,11 +343,9 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     if (this.#uiDate === null) {
       this.#uiDate = today();
     }
-
     if (this.#minDate !== null) {
       clampMinDate(this.#uiDate, this.#minDate);
     }
-
     if (this.#maxDate !== null) {
       clampMaxDate(this.#uiDate, this.#maxDate);
     }

package/date-picker/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchDatePickerElement = HTMLElement & {
+export type TSinchDatePickerElement = HTMLElement & {
     /** Date value in ISO 8601 format */
     value: string;
     /** Date min limit in ISO 8601 format */
@@ -45,7 +45,7 @@ export declare type TSinchDatePickerElement = HTMLElement & {
     /** Label that is used for a11y */
     setAttribute(name: 'next-month-aria-label', value: string): void;
 };
-export declare type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
+export type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement> & {
     /** Date value in ISO 8601 format */
     value: string;
     /** Date min limit in ISO 8601 format */

package/date-picker/utils.d.ts

@@ -1,20 +1,20 @@
-declare type TCalendarOptions = {
+type TCalendarOptions = {
     firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
-declare type TMaybeDate = Date | null;
+type TMaybeDate = Date | null;
 export declare const getCalendarMonth: (date: Date, options?: TCalendarOptions) => TMaybeDate[][];
 export declare const dateToIso: (date: Date) => string;
 export declare const isoToDate: (value: string) => Date;
 export declare const today: () => Date;
 export declare const getDayNames: (locale: string) => string[];
 export declare const getMonthNames: (locale: string) => string[];
-declare type TAssertMinMax = (value: string | null, attrName: string) => asserts value is string;
+type TAssertMinMax = (value: string | null, attrName: string) => asserts value is string;
 export declare const assertMinMax: TAssertMinMax;
-declare type TAssertValue = (value: string | null) => asserts value is string;
+type TAssertValue = (value: string | null) => asserts value is string;
 export declare const assertValue: TAssertValue;
-declare type TAssertLocale = (value: string | null) => asserts value is string;
+type TAssertLocale = (value: string | null) => asserts value is string;
 export declare const assertLocale: TAssertLocale;
-declare type TAssertDate = (value: any, attrName: string, attrValue: string) => asserts value is Date;
+type TAssertDate = (value: any, attrName: string, attrValue: string) => asserts value is Date;
 export declare const isValidDate: (value: any) => value is Date;
 export declare const assertDate: TAssertDate;
 export declare const compareDates: (a: Date, b: Date) => number;

package/dialog/index.js

@@ -26,7 +26,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$dialog.addEventListener('mousedown', this.#onBackdropClick);
     this.#$dialog.addEventListener('cancel', this.#onCancel);
     this.addEventListener('-close', this.#onCloseReactHandler);
-
     this.#setOpen(getBooleanAttribute(this, 'open'));
   }
   disconnectedCallback() {

package/dialog/types.d.ts

@@ -1,5 +1,5 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchDialogElement = HTMLElement & {
+export type TSinchDialogElement = HTMLElement & {
     caption: string;
     readonly dialogRect: TRect;
     readonly closeButtonRect: TRect;
@@ -7,7 +7,7 @@ export declare type TSinchDialogElement = HTMLElement & {
     setAttribute(name: 'caption', value: string): void;
     setAttribute(name: 'close-aria-label', value: string): void;
 };
-export declare type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
+export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
     open: boolean;
     caption: string;
     'aria-label': string;

package/emoji/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchEmojiElement = HTMLElement & {
+export type TSinchEmojiElement = HTMLElement & {
     /** Emoji character */
     char: string;
     /** Emoji character */
     setAttribute(name: 'char', value: string): void;
 };
-export declare type TSinchEmojiReact = TSinchElementReact<TSinchEmojiElement> & {
+export type TSinchEmojiReact = TSinchElementReact<TSinchEmojiElement> & {
     /** Emoji character */
     char: string;
 };

package/emoji/utils.js

@@ -20,13 +20,11 @@ function toCodePoints(unicodeSurrogates) {
   }
   return points;
 }
-
 let emojiUrl = null;
 export const getEmojiUrl = (root, char) => {
   if (char === null || char.length === 0) {
     return '';
   }
-
   if (emojiUrl === null) {
     emojiUrl = getCssVar(root, '--sinch-emoji-src-url');
     if (emojiUrl !== null) {
@@ -37,10 +35,8 @@ export const getEmojiUrl = (root, char) => {
     return '';
   }
   let codepoints = toCodePoints(removeVS16s(char)).join('-');
-
   if (codepoints === '1f441-fe0f-200d-1f5e8-fe0f') {
     codepoints = '1f441-200d-1f5e8';
   }
-
   return emojiUrl.replace('%s', codepoints);
 };

package/emoji-picker/index.js

@@ -125,9 +125,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#handleKeydown(e.detail);
   };
   #onContextVisibility = e => {
-    if (e.detail) {
-    } else {
-    }
+    if (e.detail) {} else {}
   };
   #onListboxKeyDown = e => {
     this.#handleKeydown(e);