@nectary/components 4.12.0 → 4.12.1

package/button-group-item/index.js

@@ -1,20 +1,18 @@
-import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n  }\n\n  #wrapper {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  /* divider */\n  :host(:is(:not(:first-of-type))) #wrapper::before {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: var(--sinch-local-divider-color);\n    opacity: 0.3;\n    pointer-events: none;\n    z-index: 2;\n    top: 10%;\n    bottom: 10%;\n    left: -0.5px;\n    width: 1px;\n  }\n\n  :host([type="primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-primary-default-text-initial\n      );\n  }\n\n  :host([type="secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n  }\n\n  :host([type="subtle-primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-text-initial\n      );\n  }\n\n  :host([type="subtle-secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-text-initial\n      );\n  }\n\n  :host([type="cta-primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-cta-primary-default-text-initial\n      );\n  }\n\n  :host([type="cta-secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-text-initial\n      );\n  }\n\n  :host([type="destructive"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-danger-default-text-initial\n      );\n  }\n\n  /* fix border */\n  #sinch-button-element {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n\n    --sinch-button-shape-radius-base: 0;\n    --sinch-button-shape-radius-top-right: 0;\n    --sinch-button-shape-radius-top-left: 0;\n    --sinch-button-shape-radius-bottom-right: 0;\n    --sinch-button-shape-radius-bottom-left: 0;\n  }\n\n  :host(:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host(:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="l"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n  }\n\n  :host([size="l"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n  }\n\n  :host([size="m"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="m"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="s"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n  }\n\n  :host([size="s"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n  }\n\n  :host([size="xs"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n  }\n\n  :host([size="xs"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n  }\n\n  :host(:is(:not(:first-of-type, :last-of-type))) #sinch-button-element:not(:active) {\n    --sinch-button-border-left: none;\n    --sinch-button-border-right: none;\n  }\n\n  :host(:is(:first-of-type)) #sinch-button-element:not(:active) {\n    --sinch-button-border-right: none;\n  }\n\n  :host(:is(:last-of-type)) #sinch-button-element:not(:active) {\n    --sinch-button-border-left: none;\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-button id="sinch-button-element">\n    <slot id="left-icon" name="left-icon" slot="left-icon"></slot>\n    <slot id="icon" name="icon" slot="icon"></slot>\n    <slot id="right-icon" name="right-icon" slot="right-icon"></slot>\n  </sinch-button>\n</div>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class ButtonGroupItem extends NectaryElement {
+export class ButtonGroupItem extends NectaryElement {
   #$sinchButton;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$sinchButton = shadowRoot.querySelector("#sinch-button-element");
+    this.#$sinchButton = shadowRoot.querySelector('#sinch-button-element');
   }
   static get observedAttributes() {
-    return ["type", "size", "text", "disabled", "toggled"];
+    return ['type', 'size', 'text', 'disabled', 'toggled'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     updateAttribute(this.#$sinchButton, name, newVal);
@@ -22,48 +20,61 @@ class ButtonGroupItem extends NectaryElement {
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.setAttribute("role", "button");
-    const forwardEvent = (e) => this.dispatchEvent(new CustomEvent(e.type, { ...e }));
-    this.addEventListener("-click", (e) => this.#onClickReactHandler(e), { signal });
-    this.addEventListener("-focus", () => this.#onFocusReactHandler(), { signal });
-    this.addEventListener("-blur", () => this.#onBlurReactHandler(), { signal });
-    this.#$sinchButton.addEventListener("-click", (e) => forwardEvent(e), { signal });
-    this.#$sinchButton.addEventListener("-focus", (e) => forwardEvent(e), { signal });
-    this.#$sinchButton.addEventListener("-blur", (e) => forwardEvent(e), { signal });
+    const {
+      signal
+    } = this.#controller;
+    this.setAttribute('role', 'button');
+    const forwardEvent = e => this.dispatchEvent(new CustomEvent(e.type, {
+      ...e
+    }));
+    this.addEventListener('-click', e => this.#onClickReactHandler(e), {
+      signal
+    });
+    this.addEventListener('-focus', () => this.#onFocusReactHandler(), {
+      signal
+    });
+    this.addEventListener('-blur', () => this.#onBlurReactHandler(), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-click', e => forwardEvent(e), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-focus', e => forwardEvent(e), {
+      signal
+    });
+    this.#$sinchButton.addEventListener('-blur', e => forwardEvent(e), {
+      signal
+    });
   }
   set text(value) {
-    updateAttribute(this, "text", value);
+    updateAttribute(this, 'text', value);
   }
   get text() {
-    return getAttribute(this, "text", "");
+    return getAttribute(this, 'text', '');
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, "disabled", isDisabled);
+    updateBooleanAttribute(this, 'disabled', isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, "disabled");
+    return getBooleanAttribute(this, 'disabled');
   }
   set toggled(isToggled) {
-    updateBooleanAttribute(this, "toggled", isToggled);
+    updateBooleanAttribute(this, 'toggled', isToggled);
   }
   get toggled() {
-    return getBooleanAttribute(this, "toggled");
+    return getBooleanAttribute(this, 'toggled');
   }
   get focusable() {
     return true;
   }
-  #onClickReactHandler = (e) => {
-    getReactEventHandler(this, "on-click")?.(e);
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, "on-focus")?.();
+    getReactEventHandler(this, 'on-focus')?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, "on-blur")?.();
+    getReactEventHandler(this, 'on-blur')?.();
   };
 }
-defineCustomElement("sinch-button-group-item", ButtonGroupItem);
-export {
-  ButtonGroupItem
-};
+defineCustomElement('sinch-button-group-item', ButtonGroupItem);

package/button-group-item/types.d.ts

@@ -1,5 +1,6 @@
-import type { TSinchButtonEvents, TSinchButtonProps } from '../button/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchButtonEvents, TSinchButtonProps, TSinchButtonReact } from '../button/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type { TSinchButtonReact };
 export type TSinchButtonGroupItemProps = {
     text?: TSinchButtonProps['text'];
     disabled?: TSinchButtonProps['disabled'];
@@ -42,23 +43,3 @@ export type TSinchButtonGroupItem = {
 };
 export type TSinchButtonGroupItemElement = NectaryComponentVanillaByType<TSinchButtonGroupItem>;
 export type TSinchButtonGroupItemReact = NectaryComponentReactByType<TSinchButtonGroupItem>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-button-group-item': TSinchButtonGroupItem;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-button-group-item': NectaryComponentVanilla<'sinch-button-group-item'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
-        }
-    }
-}

package/button-group-item/types.js

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

package/card/index.d.ts

@@ -0,0 +1,40 @@
+import '../title';
+import '../text';
+import { NectaryElement } from '../utils';
+import type { TSinchCard } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export declare class Card extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set text(value: string);
+    get text(): string;
+    set caption(value: string);
+    get caption(): string;
+    set label(value: string);
+    get label(): string;
+    get dragRect(): TRect | null;
+}
+declare global {
+    interface NectaryComponentMap {
+        'sinch-card': TSinchCard;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card': NectaryComponentVanilla<'sinch-card'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card': NectaryComponentReact<'sinch-card'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-card': NectaryComponentReact<'sinch-card'>;
+        }
+    }
+}

package/card/index.js

@@ -0,0 +1,134 @@
+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-default-border-initial);background-color:var(--sinch-comp-card-color-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-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-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-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;
+export class Card 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();
+    }
+  };
+}
+defineCustomElement('sinch-card', Card);

package/card/types.d.ts

@@ -0,0 +1,17 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchCardProps = {
+    /** Text */
+    text: string;
+    /** Caption */
+    caption: string;
+    /** Label */
+    label?: string;
+    /** Draggable */
+    draggable?: boolean;
+    readonly dragRect?: TRect | null;
+};
+export type TSinchCard = {
+    props: TSinchCardProps;
+};
+export type TSinchCardElement = NectaryComponentVanillaByType<TSinchCard>;
+export type TSinchCardReact = NectaryComponentReactByType<TSinchCard>;

package/card/types.js

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

package/card-container/index.d.ts

@@ -1,5 +1,25 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class CardContainer extends NectaryElement {
     constructor();
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-card-container': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-container': NectaryComponentVanilla<'sinch-card-container'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
+        }
+    }
+}

package/card-container/index.js

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

package/card-container/types.d.ts

@@ -1,23 +1,3 @@
-import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType } from '../types';
 export type TSinchCardContainerElement = HTMLElement;
 export type TSinchCardContainerReact = NectaryComponentReactByType<TSinchCardContainerElement>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-card-container': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-container': NectaryComponentVanilla<'sinch-card-container'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
-        }
-    }
-}

package/card-container/types.js

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

package/card-v2/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchCardV2 } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class CardV2 extends NectaryElement {
     #private;
     constructor();
@@ -14,3 +15,23 @@ export declare class CardV2 extends NectaryElement {
     get selected(): boolean;
     set selected(value: boolean);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-card-v2': TSinchCardV2;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-v2': NectaryComponentVanilla<'sinch-card-v2'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
+        }
+    }
+}