@nectary/components 2.4.0

package/button/types.js

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

package/button/utils.d.ts

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

package/button/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['primary', 'secondary', 'tertiary', 'cta-primary', 'cta-secondary', 'destructive'];

package/card/index.d.ts

@@ -0,0 +1,13 @@
+import '../title';
+import '../text';
+import type { TSinchCardElement, TSinchCardReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card': TSinchCardReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card': TSinchCardElement;
+    }
+}

package/card/index.js

@@ -0,0 +1,133 @@
+import '../title';
+import '../text';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateAttribute, setClass, NectaryElement, isAttrTrue, getRect, isAttrEqual, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial);background-color:var(--sinch-comp-card-color-white-default-background-initial);box-shadow:var(--sinch-comp-card-shadow-initial);overflow:hidden}:host(:hover) #wrapper{box-shadow:var(--sinch-comp-card-shadow-hover)}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}#illustration-wrapper{display:none;overflow:hidden;height:240px}#illustration-wrapper.active{display:block}#label{--sinch-comp-text-font:var(--sinch-comp-card-font-label);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-title-initial)}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-global-size-icon:var(--sinch-comp-card-size-icon)}#caption{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-card-font-title);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-title-initial)}#description{flex:1;min-height:0;max-height:120px;overflow-y:auto;--sinch-comp-text-font:var(--sinch-comp-card-font-description);--sinch-global-color-text:var(--sinch-comp-card-color-white-default-description-initial)}#description:empty{display:none}slot[name=action]::slotted(*){margin-top:20px;align-self:flex-start;max-width:100%}:host([draggable=true]) #header{cursor:grab}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><sinch-text id="label" type="s" emphasized ellipsis></sinch-text><div id="header"><slot name="icon"></slot><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title></div><sinch-text id="description" type="m"></sinch-text><slot name="action"></slot></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card', class extends NectaryElement {
+  #$text;
+  #$label;
+  #$caption;
+  #$header;
+  #$cardBody;
+  #$iconSlot;
+  #$illustrationSlot;
+  #$illustrationSlotWrapper;
+  #isDraggingCorrectHandle = false;
+  #isDraggingSubscribed = false;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#description');
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$header = shadowRoot.querySelector('#header');
+    this.#$cardBody = shadowRoot.querySelector('#wrapper');
+    this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
+    this.#$illustrationSlot = shadowRoot.querySelector('slot[name="illustration"]');
+    this.#$illustrationSlotWrapper = shadowRoot.querySelector('#illustration-wrapper');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$illustrationSlot.addEventListener('slotchange', this.#onIllustrationSlotChange, options);
+    this.#onIllustrationSlotChange();
+    if (getBooleanAttribute(this, 'draggable')) {
+      this.#enableDraggable();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#disableDragging();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['text', 'label', 'caption', 'draggable'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'label':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'caption':
+        {
+          updateAttribute(this.#$caption, 'text', newVal);
+          break;
+        }
+      case 'draggable':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          const isDraggingEnabled = isAttrTrue(newVal);
+          if (isDraggingEnabled) {
+            this.#enableDraggable();
+          } else {
+            this.#disableDragging();
+          }
+          updateBooleanAttribute(this, name, isDraggingEnabled);
+          break;
+        }
+    }
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set caption(value) {
+    updateAttribute(this, 'caption', value);
+  }
+  get caption() {
+    return getAttribute(this, 'caption', '');
+  }
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+  get dragRect() {
+    return this.#isDraggingSubscribed ? getRect(this.#$header) : null;
+  }
+  #onIllustrationSlotChange = () => {
+    setClass(this.#$illustrationSlotWrapper, 'active', this.#$illustrationSlot.assignedElements().length > 0);
+  };
+  #enableDraggable() {
+    if (this.isDomConnected && !this.#isDraggingSubscribed) {
+      this.addEventListener('dragstart', this.#onDragStart);
+      this.#$cardBody.addEventListener('mousedown', this.#onDraggableMouseDown);
+      this.#isDraggingSubscribed = true;
+    }
+  }
+  #disableDragging() {
+    if (this.#isDraggingSubscribed) {
+      this.removeEventListener('dragstart', this.#onDragStart);
+      this.#$cardBody.removeEventListener('mousedown', this.#onDraggableMouseDown);
+      this.#isDraggingSubscribed = false;
+    }
+  }
+  #onDraggableMouseDown = e => {
+    this.#isDraggingCorrectHandle = this.#$header.contains(e.target) || this.#$iconSlot.assignedElements().includes(e.target);
+  };
+  #onDragStart = e => {
+    if (!this.#isDraggingCorrectHandle) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+});

package/card/types.d.ts

@@ -0,0 +1,28 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchCardElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Caption */
+    caption: string;
+    /** Label */
+    label: string | null;
+    readonly dragRect: TRect | null;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Caption */
+    setAttribute(name: 'caption', value: string): void;
+    /** Label */
+    setAttribute(name: 'label', value: string): void;
+    /** Draggable */
+    setAttribute(name: 'draggable', value: ''): void;
+};
+export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
+    /** Text */
+    text: string;
+    /** Caption */
+    caption: string;
+    /** Label */
+    label?: string;
+    /** Draggable */
+    draggable?: boolean;
+};

package/card/types.js

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

package/card-container/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchCardContainerElement, TSinchCardContainerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-container': TSinchCardContainerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-container': TSinchCardContainerElement;
+    }
+}

package/card-container/index.js

@@ -0,0 +1,11 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-white-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-white-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-card-container', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+});

package/card-container/types.d.ts

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

package/card-container/types.js

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

package/chat/index.d.ts

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

package/chat/index.js

@@ -0,0 +1,11 @@
+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/chat/types.d.ts

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

package/chat/types.js

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

package/chat-block/index.d.ts

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

package/chat-block/index.js

@@ -0,0 +1,86 @@
+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/chat-block/types.d.ts

@@ -0,0 +1,30 @@
+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/chat-block/types.js

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

package/chat-bubble/index.d.ts

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

package/chat-bubble/index.js

@@ -0,0 +1,41 @@
+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/chat-bubble/types.d.ts

@@ -0,0 +1,20 @@
+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/chat-bubble/types.js

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

package/chat-bubble/utils.d.ts

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

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/checkbox/index.d.ts

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

package/checkbox/index.js

@@ -0,0 +1,126 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-checkbox-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-default-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-default-text-initial)}:host([invalid])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-invalid-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-invalid-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-invalid-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-checkbox-color-invalid-text-initial)}:host([checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-checkbox-color-checked-background-hover);--sinch-local-color-background-active:var(--sinch-comp-checkbox-color-checked-background-active);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-checkbox-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-checkbox-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-checkbox-color-disabled-text-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-background:var(--sinch-comp-checkbox-color-checked-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-checkbox-color-checked-disabled-border-initial)}#checkbox{width:18px;height:18px;cursor:pointer}:host([disabled]) #checkbox{cursor:initial}#icon-container{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#checkbox::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-checkbox-color-default-outline-focus);border-radius:calc(var(--sinch-comp-checkbox-shape-radius) + 3px);transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #checkbox::before{opacity:1}#checkbox::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-comp-checkbox-shape-radius);transition:background-color .1s linear;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #checkbox::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#icon-checkmark,#icon-indeterminate{position:absolute;left:1px;top:1px;width:16px;height:16px;transition:opacity .1s linear;opacity:0;pointer-events:none;fill:var(--sinch-sys-color-container-main-default)}:host(:not([indeterminate])[checked]) #icon-checkmark{opacity:1}:host([indeterminate][checked]) #icon-indeterminate{opacity:1}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-checkbox-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="icon-container"><div id="checkbox"></div><svg id="icon-checkmark" viewBox="0 0 24 24" aria-hidden="true"><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-indeterminate" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1Z"/></svg></div><span id="label"></span></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-checkbox', class extends NectaryElement {
+  #$label;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$label = shadowRoot.querySelector('#label');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.role = 'checkbox';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onClick, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'text', 'invalid', 'indeterminate'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, 'checked', isChecked);
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
+          updateBooleanAttribute(this, 'disabled', isDisabled);
+          break;
+        }
+      case 'invalid':
+      case 'indeterminate':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+  set indeterminate(isIndeterminate) {
+    updateBooleanAttribute(this, 'indeterminate', isIndeterminate);
+  }
+  get indeterminate() {
+    return getBooleanAttribute(this, 'indeterminate');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text');
+  }
+  get focusable() {
+    return true;
+  }
+  #onClick = () => {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: !this.checked
+    }));
+  };
+  #onFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = e => {
+    getReactEventHandler(this, 'on-focus')?.(e);
+  };
+  #onBlurReactHandler = e => {
+    getReactEventHandler(this, 'on-blur')?.(e);
+  };
+});