@nectary/components 4.12.1 → 5.0.0

package/action-menu/index.js

@@ -1,10 +1,12 @@
-import { isSinchActionMenuOption } from '../action-menu-option/utils';
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, NectaryElement, subscribeContext, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
+import { isSinchActionMenuOption } from "../action-menu-option/utils.js";
+import { subscribeContext } from "../utils/context.js";
+import { attrValueToPixels, updateIntegerAttribute, getIntegerAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  overflow-y: auto;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
 const ITEM_HEIGHT = 40;
-const template = document.createElement('template');
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ActionMenu extends NectaryElement {
+class ActionMenu extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #controller = null;
@@ -12,78 +14,63 @@ export class ActionMenu extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$optionSlot = shadowRoot.querySelector('slot');
-    this.#$listbox = shadowRoot.querySelector('#listbox');
+    this.#$optionSlot = shadowRoot.querySelector("slot");
+    this.#$listbox = shadowRoot.querySelector("#listbox");
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.setAttribute('role', 'listbox');
-    this.setAttribute('tabindex', '0');
-    this.addEventListener('keydown', this.#onListboxKeyDown, {
-      signal
-    });
-    this.addEventListener('blur', this.#onListboxBlur, {
-      signal
-    });
-    this.#$listbox.addEventListener('click', this.#onListboxClick, {
-      signal
-    });
-    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    const { signal } = this.#controller;
+    this.setAttribute("role", "listbox");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("keydown", this.#onListboxKeyDown, { signal });
+    this.addEventListener("blur", this.#onListboxBlur, { signal });
+    this.#$listbox.addEventListener("click", this.#onListboxClick, { signal });
+    subscribeContext(this, "keydown", this.#onContextKeyDown, signal);
+    subscribeContext(this, "visibility", this.#onContextVisibility, signal);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['rows'];
+    return ["rows"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'rows':
-        {
-          this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
-            min: 1,
-            itemSizeMultiplier: ITEM_HEIGHT
-          });
-          break;
-        }
+      case "rows": {
+        this.#$listbox.style.maxHeight = attrValueToPixels(newVal, { min: 1, itemSizeMultiplier: ITEM_HEIGHT });
+        break;
+      }
     }
   }
   set rows(value) {
-    updateIntegerAttribute(this, 'rows', value);
+    updateIntegerAttribute(this, "rows", value);
   }
   get rows() {
-    return getIntegerAttribute(this, 'rows', null);
+    return getIntegerAttribute(this, "rows", null);
   }
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
-  #onListboxClick = e => {
+  #onListboxClick = (e) => {
     this.focus();
     if (isSinchActionMenuOption(e.target)) {
       this.#selectOption(e.target);
     }
   };
-  #onListboxKeyDown = e => {
+  #onListboxKeyDown = (e) => {
     this.#handleKeydown(e);
   };
-  #onContextKeyDown = e => {
+  #onContextKeyDown = (e) => {
     this.#handleKeydown(e.detail);
   };
-  #onContextVisibility = e => {
+  #onContextVisibility = (e) => {
     if (!e.detail) {
       this.#selectOption(null);
-      this.#$listbox.scrollTo({
-        top: 0,
-        behavior: 'auto'
-      });
+      this.#$listbox.scrollTo({ top: 0, behavior: "auto" });
     } else {
       const activeElement = this.#getDeepActiveElement();
-      const isTextInput = activeElement !== null && activeElement.tagName === 'INPUT';
+      const isTextInput = activeElement !== null && activeElement.tagName === "INPUT";
       if (!isTextInput) {
         this.focus();
         this.#selectOption(this.#getFirstOption());
@@ -92,35 +79,32 @@ export class ActionMenu extends NectaryElement {
   };
   #handleKeydown(e) {
     switch (e.code) {
-      case 'Enter':
-      case 'Space':
-        {
-          const $opt = this.#findSelectedOption();
-          if ($opt !== null) {
-            e.preventDefault();
-            $opt.click();
-          }
-          break;
-        }
-      case 'ArrowUp':
-        {
-          e.preventDefault();
-          this.#selectOption(this.#getPrevOption());
-          break;
-        }
-      case 'ArrowDown':
-        {
+      case "Enter":
+      case "Space": {
+        const $opt = this.#findSelectedOption();
+        if ($opt !== null) {
           e.preventDefault();
-          this.#selectOption(this.#getNextOption());
-          break;
+          $opt.click();
         }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        this.#selectOption(this.#getPrevOption());
+        break;
+      }
+      case "ArrowDown": {
+        e.preventDefault();
+        this.#selectOption(this.#getNextOption());
+        break;
+      }
     }
   }
   #getFirstOption() {
     const $options = this.#getOptionElements();
     for (let i = 0; i < $options.length; i++) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, 'disabled')) {
+      if (!getBooleanAttribute(el, "disabled")) {
         return el;
       }
     }
@@ -130,7 +114,7 @@ export class ActionMenu extends NectaryElement {
     const $options = this.#getOptionElements();
     for (let i = $options.length - 1; i >= 0; i--) {
       const el = $options[i];
-      if (!getBooleanAttribute(el, 'disabled')) {
+      if (!getBooleanAttribute(el, "disabled")) {
         return el;
       }
     }
@@ -142,7 +126,7 @@ export class ActionMenu extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(i + index) % $options.length];
-        if (!getBooleanAttribute(el, 'disabled')) {
+        if (!getBooleanAttribute(el, "disabled")) {
           return el;
         }
       }
@@ -155,7 +139,7 @@ export class ActionMenu extends NectaryElement {
       const $options = this.#getOptionElements();
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(index - i + $options.length) % $options.length];
-        if (!getBooleanAttribute(el, 'disabled')) {
+        if (!getBooleanAttribute(el, "disabled")) {
           return el;
         }
       }
@@ -170,19 +154,17 @@ export class ActionMenu extends NectaryElement {
     return activeElement;
   }
   #selectOption($option) {
-    const hasRows = this.hasAttribute('rows');
+    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?.({
-          block: 'nearest'
-        });
+      updateBooleanAttribute($op, "data-selected", isSelected);
+      if (isSelected && Boolean(hasRows)) {
+        $op.scrollIntoView?.({ block: "nearest" });
       }
     }
     if ($option !== null) {
       $option.focus();
-      $option.onmouseover = e => {
+      $option.onmouseover = (e) => {
         if (e.defaultPrevented) {
           return;
         }
@@ -197,7 +179,7 @@ export class ActionMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-      if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
+      if (!getBooleanAttribute(el, "disabled") && getBooleanAttribute(el, "data-selected")) {
         return i;
       }
     }
@@ -206,7 +188,7 @@ export class ActionMenu extends NectaryElement {
   #findSelectedOption() {
     const elements = this.#getOptionElements();
     for (const el of elements) {
-      if (getBooleanAttribute(el, 'data-selected')) {
+      if (getBooleanAttribute(el, "data-selected")) {
         return el;
       }
     }
@@ -216,4 +198,7 @@ export class ActionMenu extends NectaryElement {
     return true;
   }
 }
-defineCustomElement('sinch-action-menu', ActionMenu);
+defineCustomElement("sinch-action-menu", ActionMenu);
+export {
+  ActionMenu
+};

package/action-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchActionMenuProps = {
     /** How many rows to show and scroll the rest */
     rows?: number;
@@ -10,3 +10,23 @@ export type TSinchActionMenu = {
 };
 export type TSinchActionMenuElement = NectaryComponentVanillaByType<TSinchActionMenu>;
 export type TSinchActionMenuReact = NectaryComponentReactByType<TSinchActionMenu>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-action-menu': TSinchActionMenu;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-action-menu': NectaryComponentVanilla<'sinch-action-menu'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-action-menu': NectaryComponentReact<'sinch-action-menu'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-action-menu': NectaryComponentReact<'sinch-action-menu'>;
+        }
+    }
+}

package/action-menu/types.js

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

package/action-menu-option/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/action-menu-option/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-action-menu-option");

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

@@ -1,7 +1,6 @@
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchActionMenuOption } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class ActionMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -15,23 +14,3 @@ export declare class ActionMenuOption extends NectaryElement {
     get disabled(): boolean;
     click(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-action-menu-option': TSinchActionMenuOption;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-action-menu-option': NectaryComponentVanilla<'sinch-action-menu-option'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
-        }
-    }
-}

package/action-menu-option/index.js

@@ -1,71 +1,64 @@
-import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;cursor:pointer}:host([disabled]){cursor:initial}#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;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
-const template = document.createElement('template');
+import "../text/index.js";
+import { isAttrEqual, getBooleanAttribute, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, getAttribute } 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  cursor: pointer;\n}\n\n:host([disabled]) {\n  cursor: initial;\n}\n\n#wrapper {\n  all: initial;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  height: 40px;\n  width: 100%;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 10px;\n  user-select: none;\n  background-color: var(--sinch-comp-action-menu-color-default-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-default-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-action-menu-size-icon);\n}\n\n:host([data-selected]) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-selected);\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-hover);\n}\n\n:host([disabled]) > #wrapper {\n  pointer-events: none;\n  background-color: var(--sinch-comp-action-menu-color-disabled-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-disabled-icon-initial);\n}\n\n#content {\n  flex: 1;\n  min-width: 0;\n\n  --sinch-comp-text-font: var(--sinch-comp-action-menu-font-option);\n}\n\n::slotted(*) {\n  margin-left: -6px;\n}\n</style>\n\n<div id="wrapper" inert>\n  <slot name="icon"></slot>\n  <sinch-text id="content" type="m" ellipsis></sinch-text>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ActionMenuOption extends NectaryElement {
+class ActionMenuOption extends NectaryElement {
   #$content;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$content = shadowRoot.querySelector('#content');
+    this.#$content = shadowRoot.querySelector("#content");
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.setAttribute('role', 'option');
-    this.addEventListener('mousedown', this.#onMouseDown, {
-      signal
-    });
-    this.addEventListener('-click', this.#onClickReactHandler, {
-      signal
-    });
+    const { signal } = this.#controller;
+    this.setAttribute("role", "option");
+    this.addEventListener("mousedown", this.#onMouseDown, { signal });
+    this.addEventListener("-click", this.#onClickReactHandler, { signal });
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['text', 'disabled', 'data-selected'];
+    return ["text", "disabled", "data-selected"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'text':
-        {
-          this.#$content.textContent = newVal;
-          break;
-        }
-      case 'disabled':
-        {
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-      case 'data-selected':
-        {
-          const isDisabled = getBooleanAttribute(this, 'disabled');
-          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal) && !isDisabled);
-          break;
-        }
+      case "text": {
+        this.#$content.textContent = newVal;
+        break;
+      }
+      case "disabled": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
+      case "data-selected": {
+        const isDisabled = getBooleanAttribute(this, "disabled");
+        updateExplicitBooleanAttribute(this, "aria-selected", isAttrTrue(newVal) && !isDisabled);
+        break;
+      }
     }
   }
   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");
   }
   click() {
     this.#dispatchClickEvent();
@@ -74,10 +67,15 @@ export class ActionMenuOption extends NectaryElement {
     this.#dispatchClickEvent();
   };
   #dispatchClickEvent() {
-    this.dispatchEvent(new CustomEvent('-click'));
+    this.dispatchEvent(
+      new CustomEvent("-click")
+    );
   }
-  #onClickReactHandler = e => {
-    getReactEventHandler(this, 'on-click')?.(e);
+  #onClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-click")?.(e);
   };
 }
-defineCustomElement('sinch-action-menu-option', ActionMenuOption);
+defineCustomElement("sinch-action-menu-option", ActionMenuOption);
+export {
+  ActionMenuOption
+};

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

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchActionMenuOptionProps = {
     /** Display text */
     text: string;
@@ -34,3 +34,23 @@ export type TSinchActionMenuOption = {
 };
 export type TSinchActionMenuOptionElement = NectaryComponentVanillaByType<TSinchActionMenuOption>;
 export type TSinchActionMenuOptionReact = NectaryComponentReactByType<TSinchActionMenuOption>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-action-menu-option': TSinchActionMenuOption;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-action-menu-option': NectaryComponentVanilla<'sinch-action-menu-option'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-action-menu-option': NectaryComponentReact<'sinch-action-menu-option'>;
+        }
+    }
+}

package/action-menu-option/types.js

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

package/action-menu-option/utils.js

@@ -1,3 +1,6 @@
-export const isSinchActionMenuOption = el => {
-  return el instanceof Element && el.tagName === 'SINCH-ACTION-MENU-OPTION';
-};
+const isSinchActionMenuOption = (el) => {
+  return el instanceof Element && el.tagName === "SINCH-ACTION-MENU-OPTION";
+};
+export {
+  isSinchActionMenuOption
+};

package/alert/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/alert/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-alert");

package/alert/index.d.ts

@@ -2,8 +2,8 @@ import '../icon';
 import '../rich-text';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchAlertType, TSinchAlert } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchAlertType } from './types';
+export * from './types';
 export declare class Alert extends NectaryElement {
     #private;
     constructor();
@@ -16,23 +16,3 @@ export declare class Alert extends NectaryElement {
     get text(): string;
     set text(value: string);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-alert': TSinchAlert;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-alert': NectaryComponentVanilla<'sinch-alert'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
-        }
-    }
-}

package/alert/index.js

@@ -1,49 +1,52 @@
-import '../icon';
-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}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
-import { typeValues } from './utils';
-const template = document.createElement('template');
+import "../icon/index.js";
+import "../rich-text/index.js";
+import "../text/index.js";
+import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { typeValues } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: center;\n    padding: 8px 16px;\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 48px;\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-info-default-background);\n  }\n\n  #icon-info,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-info-default-icon);\n  }\n\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-alert-font-body);\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-info-default-text);\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Alert extends NectaryElement {
+class Alert extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
+    this.#$text = shadowRoot.querySelector("#text");
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('role', 'alert');
+    this.setAttribute("role", "alert");
   }
   disconnectedCallback() {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['text'];
+    return ["text"];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'text':
-        {
-          updateAttribute(this.#$text, 'text', newVal);
-          break;
-        }
+      case "text": {
+        updateAttribute(this.#$text, "text", newVal);
+        break;
+      }
     }
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
+    return getLiteralAttribute(this, typeValues, "type");
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
 }
-defineCustomElement('sinch-alert', Alert);
+defineCustomElement("sinch-alert", Alert);
+export {
+  Alert
+};

package/alert/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchAlertType = 'info' | 'warn' | 'error';
 export type TSinchAlertProps = {
     /** Type */
@@ -27,3 +27,23 @@ export type TSinchAlert = {
 };
 export type TSinchAlertElement = NectaryComponentVanillaByType<TSinchAlert>;
 export type TSinchAlertReact = NectaryComponentReactByType<TSinchAlert>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-alert': TSinchAlert;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-alert': NectaryComponentVanilla<'sinch-alert'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-alert': NectaryComponentReact<'sinch-alert'>;
+        }
+    }
+}

package/alert/types.js

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