@nectary/components 4.12.0 → 4.12.1

package/date-picker/utils.js

@@ -1,9 +1,11 @@
 const DAYS_IN_WEEK = 7;
-const pad = (value) => {
-  return value.toString().padStart(2, "0");
+const pad = value => {
+  return value.toString().padStart(2, '0');
 };
-const getCalendarMonth = (date, options) => {
-  const { firstDayOfWeek } = {
+export const getCalendarMonth = (date, options) => {
+  const {
+    firstDayOfWeek
+  } = {
     firstDayOfWeek: 1,
     ...options
   };
@@ -31,129 +33,110 @@ const getCalendarMonth = (date, options) => {
   }
   return month;
 };
-const dateToIso = (date) => {
+export const dateToIso = date => {
   return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
 };
-const isoToDate = (value) => {
-  return /* @__PURE__ */ new Date(`${value.substring(0, 10)}T00:00:00Z`);
+export const isoToDate = value => {
+  return new Date(`${value.substring(0, 10)}T00:00:00Z`);
 };
-const today = () => {
-  const today2 = /* @__PURE__ */ new Date();
-  return new Date(Date.UTC(today2.getUTCFullYear(), today2.getUTCMonth(), today2.getUTCDate()));
+export const today = () => {
+  const today = new Date();
+  return new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate()));
 };
-const getDayNames = (locale) => {
-  const formatter = new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" });
-  return [1, 2, 3, 4, 5, 6, 7].map((dd) => {
+export const getDayNames = locale => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'narrow',
+    timeZone: 'UTC'
+  });
+  return [1, 2, 3, 4, 5, 6, 7].map(dd => {
     const date = new Date(Date.UTC(2018, 0, dd));
     return formatter.format(date);
   });
 };
-const getMonthNames = (locale) => {
-  const formatter = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" });
-  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((mm) => {
+export const getMonthNames = locale => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    month: 'short',
+    timeZone: 'UTC'
+  });
+  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(mm => {
     const date = new Date(Date.UTC(2018, mm, 1));
     return formatter.format(date);
   });
 };
-const isValidDate = (value) => {
+export const isValidDate = value => {
   return value instanceof Date && !isNaN(value);
 };
-const compareDates = (a, b) => {
+export const compareDates = (a, b) => {
   return a.getTime() - b.getTime();
 };
-const clampMinDate = (date, min) => {
+export const clampMinDate = (date, min) => {
   if (compareDates(min, date) > 0) {
     date.setTime(min.getTime());
   }
 };
-const clampMaxDate = (date, max) => {
+export const clampMaxDate = (date, max) => {
   if (compareDates(date, max) > 0) {
     date.setTime(max.getTime());
   }
 };
-const incMonth = (date, max) => {
+export const incMonth = (date, max) => {
   date.setUTCMonth(date.getUTCMonth() + 1);
   clampMaxDate(date, max);
 };
-const decMonth = (date, min) => {
+export const decMonth = (date, min) => {
   date.setUTCMonth(date.getUTCMonth() - 1);
   clampMinDate(date, min);
 };
-const incYear = (date, max) => {
+export const incYear = (date, max) => {
   date.setUTCFullYear(date.getUTCFullYear() + 1);
   clampMaxDate(date, max);
 };
-const decYear = (date, min) => {
+export const decYear = (date, min) => {
   date.setUTCFullYear(date.getUTCFullYear() - 1);
   clampMinDate(date, min);
 };
-const canGoPrevMonth = (date, min) => {
+export const canGoPrevMonth = (date, min) => {
   const prevMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 0));
   return compareDates(prevMonth, min) >= 0;
 };
-const canGoNextMonth = (date, max) => {
+export const canGoNextMonth = (date, max) => {
   const nextMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));
   return compareDates(max, nextMonth) >= 0;
 };
-const canGoNextYear = (date, max) => {
+export const canGoNextYear = (date, max) => {
   const nextYear = new Date(Date.UTC(date.getUTCFullYear() + 1, 0, 1));
   return compareDates(max, nextYear) >= 0;
 };
-const canGoPrevYear = (date, min) => {
+export const canGoPrevYear = (date, min) => {
   const prevYear = new Date(Date.UTC(date.getUTCFullYear(), 0, 0));
   return compareDates(prevYear, min) >= 0;
 };
-const isDateBetween = (date, min, max) => {
+export const isDateBetween = (date, min, max) => {
   if (min === null || max === null) {
     return false;
   }
   return compareDates(date, min) >= 0 && compareDates(max, date) >= 0;
 };
-const areDatesEqual = (a, b) => {
+export const areDatesEqual = (a, b) => {
   if (b === null) {
     return false;
   }
   return compareDates(a, b) === 0;
 };
-const cloneDate = (date) => {
+export const cloneDate = date => {
   return new Date(date.getTime());
 };
-const sortDates = (dateTuple) => {
+export const sortDates = dateTuple => {
   if (compareDates(dateTuple[0], dateTuple[1]) > 0) {
     return [dateTuple[1], dateTuple[0]];
   }
   return dateTuple;
 };
-const isDateOnScreen = (uiDate, date) => {
+export const isDateOnScreen = (uiDate, date) => {
   if (uiDate === null || date === null) {
     return false;
   }
   const firstDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth(), 1));
   const lastDateOfMonth = new Date(Date.UTC(uiDate.getUTCFullYear(), uiDate.getUTCMonth() + 1, 0));
   return isDateBetween(date, firstDateOfMonth, lastDateOfMonth);
-};
-export {
-  areDatesEqual,
-  canGoNextMonth,
-  canGoNextYear,
-  canGoPrevMonth,
-  canGoPrevYear,
-  clampMaxDate,
-  clampMinDate,
-  cloneDate,
-  compareDates,
-  dateToIso,
-  decMonth,
-  decYear,
-  getCalendarMonth,
-  getDayNames,
-  getMonthNames,
-  incMonth,
-  incYear,
-  isDateBetween,
-  isDateOnScreen,
-  isValidDate,
-  isoToDate,
-  sortDates,
-  today
-};
+};

package/dialog/index.d.ts

@@ -2,7 +2,8 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchDialog } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Dialog extends NectaryElement {
     #private;
     constructor();
@@ -17,3 +18,23 @@ export declare class Dialog extends NectaryElement {
     get dialogRect(): import("../types").TRect;
     get closeButtonRect(): import("../types").TRect;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-dialog': TSinchDialog;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-dialog': NectaryComponentVanilla<'sinch-dialog'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
+        }
+    }
+}

package/dialog/index.js

@@ -1,16 +1,12 @@
-import "../icon/index.js";
-import "../stop-events/index.js";
-import "../title/index.js";
-import { isAttrEqual, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getRect } from "../utils/rect.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { isTargetEqual } from "../utils/event-target.js";
-import { disableScroll, enableScroll } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: contents;\n\n    --sinch-comp-dialog-max-width: 512px;\n    --sinch-comp-dialog-max-height: 90vh;\n    --sinch-comp-dialog-width: fit-content;\n    --sinch-dialog-close-button-display: unset;\n  }\n\n  #dialog {\n    position: fixed;\n    left: 0;\n    right: 0;\n    margin: auto;\n    display: flex;\n    flex-direction: column;\n    padding: 24px 0;\n    width: var(--sinch-comp-dialog-width);\n    max-width: var(--sinch-comp-dialog-max-width);\n    max-height: var(--sinch-comp-dialog-max-height);\n    border-radius: var(--sinch-comp-dialog-shape-radius);\n    box-sizing: border-box;\n    contain: content;\n    background-color: var(--sinch-comp-dialog-color-default-background-initial);\n    border: none;\n    box-shadow: var(--sinch-comp-dialog-shadow);\n    outline: none;\n  }\n\n  #dialog:not([open]) {\n    display: none;\n  }\n\n  dialog::backdrop {\n    background-color: black;\n    opacity: 0.55;\n  }\n\n  #header {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    margin-bottom: 12px;\n    padding: 0 24px;\n    gap: 8px;\n\n    --sinch-global-size-icon: 24px;\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-dialog-color-default-icon-initial\n      );\n  }\n\n  #caption {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-dialog-color-default-title-initial\n      );\n    --sinch-comp-title-font: var(--sinch-comp-dialog-font-title);\n  }\n\n  #content {\n    min-height: 0;\n    overflow: auto;\n    padding: 4px 24px;\n  }\n\n  #action {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    gap: 16px;\n    margin-top: 20px;\n    padding: 0 24px;\n  }\n\n  #action.empty {\n    display: none;\n  }\n\n  #close {\n    display: var(--sinch-dialog-close-button-display, initial);\n    position: relative;\n    left: 4px;\n    top: -4px;\n    margin-left: auto;\n  }\n</style>\n\n<dialog id="dialog">\n  <div id="header">\n    <slot id="icon" name="icon"></slot>\n    <sinch-title id="caption" type="m" level="3"></sinch-title>\n    <sinch-button id="close" size="s">\n      <sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="content">\n    <sinch-stop-events events="close">\n      <slot name="content"></slot>\n    </sinch-stop-events>\n  </div>\n  <div id="action">\n    <sinch-stop-events events="close">\n      <slot name="buttons"></slot>\n    </sinch-stop-events>\n  </div>\n</dialog>\n';
-const template = document.createElement("template");
+import '../icon';
+import '../stop-events';
+import '../title';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { disableScroll, enableScroll } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Dialog extends NectaryElement {
+export class Dialog extends NectaryElement {
   #$dialog;
   #$closeButton;
   #$caption;
@@ -21,10 +17,10 @@ class Dialog extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$dialog = shadowRoot.querySelector("#dialog");
-    this.#$closeButton = shadowRoot.querySelector("#close");
-    this.#$caption = shadowRoot.querySelector("#caption");
-    this.#$actionWrapper = shadowRoot.querySelector("#action");
+    this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$closeButton = shadowRoot.querySelector('#close');
+    this.#$caption = shadowRoot.querySelector('#caption');
+    this.#$actionWrapper = shadowRoot.querySelector('#action');
     this.#$actionSlot = shadowRoot.querySelector('slot[name="buttons"]');
   }
   connectedCallback() {
@@ -33,20 +29,12 @@ class Dialog extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute("role", "dialog");
-    this.#$closeButton.addEventListener("click", this.#onCloseClick, options);
-    this.#$dialog.addEventListener(
-      "mousedown",
-      this.#onBackdropMouseDown,
-      options
-    );
-    this.#$dialog.addEventListener("cancel", this.#onCancel, options);
-    this.#$actionSlot.addEventListener(
-      "slotchange",
-      this.#onActionSlotChange,
-      options
-    );
-    this.addEventListener("-close", this.#onCloseReactHandler, options);
+    this.setAttribute('role', 'dialog');
+    this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
+    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, options);
+    this.#$dialog.addEventListener('cancel', this.#onCancel, options);
+    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange, options);
+    this.addEventListener('-close', this.#onCloseReactHandler, options);
     this.#onActionSlotChange();
     if (this.open) {
       this.#onExpand();
@@ -59,46 +47,49 @@ class Dialog extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["caption", "open", "close-aria-label"];
+    return ['caption', 'open', 'close-aria-label'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "caption": {
-        updateAttribute(this.#$caption, "text", newVal);
-        break;
-      }
-      case "open": {
-        const shouldOpen = isAttrTrue(newVal);
-        if (shouldOpen) {
-          requestAnimationFrame(() => {
-            this.#onExpand();
-          });
-        } else {
-          this.#onCollapse();
+      case 'caption':
+        {
+          updateAttribute(this.#$caption, 'text', newVal);
+          break;
+        }
+      case 'open':
+        {
+          const shouldOpen = isAttrTrue(newVal);
+          if (shouldOpen) {
+            requestAnimationFrame(() => {
+              this.#onExpand();
+            });
+          } else {
+            this.#onCollapse();
+          }
+          updateBooleanAttribute(this, 'open', shouldOpen);
+          break;
+        }
+      case 'close-aria-label':
+        {
+          updateAttribute(this.#$closeButton, 'aria-label', newVal);
+          break;
         }
-        updateBooleanAttribute(this, "open", shouldOpen);
-        break;
-      }
-      case "close-aria-label": {
-        updateAttribute(this.#$closeButton, "aria-label", newVal);
-        break;
-      }
     }
   }
   set caption(caption) {
-    updateAttribute(this, "caption", caption);
+    updateAttribute(this, 'caption', caption);
   }
   get caption() {
-    return getAttribute(this, "caption", "");
+    return getAttribute(this, 'caption', '');
   }
   set open(isOpen) {
-    updateBooleanAttribute(this, "open", isOpen);
+    updateBooleanAttribute(this, 'open', isOpen);
   }
   get open() {
-    return getBooleanAttribute(this, "open");
+    return getBooleanAttribute(this, 'open');
   }
   get dialogRect() {
     return getRect(this.#$dialog);
@@ -106,33 +97,36 @@ class Dialog extends NectaryElement {
   get closeButtonRect() {
     return getRect(this.#$closeButton);
   }
-  #onCancel = (e) => {
+  #onCancel = e => {
     if (e.cancelable) {
       e.preventDefault();
     } else {
       this.#onCollapse();
     }
     e.stopPropagation();
-    this.#dispatchCloseEvent("escape", e.cancelable);
+    this.#dispatchCloseEvent('escape', e.cancelable);
   };
   #onCloseClick = () => {
-    this.#dispatchCloseEvent("close", true);
+    this.#dispatchCloseEvent('close', true);
   };
-  #onBackdropMouseDown = (e) => {
+  #onBackdropMouseDown = e => {
     if (isTargetEqual(e, this.#$dialog)) {
       const rect = this.dialogRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
       if (!isInside) {
         e.stopPropagation();
-        this.#dispatchCloseEvent("backdrop", e.cancelable);
+        this.#dispatchCloseEvent('backdrop', e.cancelable);
       }
     }
   };
-  #onCloseReactHandler = (e) => {
-    getReactEventHandler(this, "on-close")?.(e);
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'on-close')?.(e);
   };
   #dispatchCloseEvent(detail, cancelable) {
-    this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
+    this.dispatchEvent(new CustomEvent('-close', {
+      detail,
+      cancelable
+    }));
   }
   #onExpand() {
     if (!this.isDomConnected || this.#$dialog.open || !this.open) {
@@ -149,14 +143,7 @@ class Dialog extends NectaryElement {
     enableScroll();
   }
   #onActionSlotChange = () => {
-    setClass(
-      this.#$actionWrapper,
-      "empty",
-      this.#$actionSlot.assignedElements().length === 0
-    );
+    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
   };
 }
-defineCustomElement("sinch-dialog", Dialog);
-export {
-  Dialog
-};
+defineCustomElement('sinch-dialog', Dialog);

package/dialog/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
 export type TSinchDialogProps = {
     /** Controls whether the dialog should be open */
@@ -39,23 +39,3 @@ export type TSinchDialog = {
 };
 export type TSinchDialogElement = NectaryComponentVanillaByType<TSinchDialog>;
 export type TSinchDialogReact = NectaryComponentReactByType<TSinchDialog>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-dialog': TSinchDialog;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dialog': NectaryComponentVanilla<'sinch-dialog'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-dialog': NectaryComponentReact<'sinch-dialog'>;
-        }
-    }
-}

package/dialog/types.js

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

package/dialog/utils.js

@@ -1,22 +1,18 @@
 const bodyEl = document.body;
-const disableScroll = () => {
+export const disableScroll = () => {
   bodyEl.__dialog_counter__ = (bodyEl.__dialog_counter__ ?? 0) + 1;
   if (bodyEl.__dialog_counter__ === 1) {
     const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
-    bodyEl.style.overflow = "hidden";
+    bodyEl.style.overflow = 'hidden';
     if (scrollWidth > 0) {
-      bodyEl.style.setProperty("padding-right", `${scrollWidth}px`);
+      bodyEl.style.setProperty('padding-right', `${scrollWidth}px`);
     }
   }
 };
-const enableScroll = () => {
+export const enableScroll = () => {
   bodyEl.__dialog_counter__ = Math.max(0, (bodyEl.__dialog_counter__ ?? 0) - 1);
   if (bodyEl.__dialog_counter__ === 0) {
-    bodyEl.style.overflow = "";
-    bodyEl.style.removeProperty("padding-right");
+    bodyEl.style.overflow = '';
+    bodyEl.style.removeProperty('padding-right');
   }
-};
-export {
-  disableScroll,
-  enableScroll
-};
+};

package/emoji/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchEmoji } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Emoji extends NectaryElement {
     #private;
     constructor();
@@ -10,3 +11,23 @@ export declare class Emoji extends NectaryElement {
     set char(value: string);
     get char(): string;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-emoji': TSinchEmoji;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-emoji': NectaryComponentVanilla<'sinch-emoji'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
+        }
+    }
+}

package/emoji/index.js

@@ -1,16 +1,15 @@
-import { updateAttribute, getAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getEmojiUrl, getEmojiBaseUrl } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: contents;\n\n  --sinch-comp-emoji-vertical-align: initial;\n}\n\n#image {\n  vertical-align: var(--sinch-comp-emoji-vertical-align);\n  pointer-events: none;\n  width: var(--sinch-global-size-icon, 48px);\n  height: var(--sinch-global-size-icon, 48px);\n}\n</style>\n\n<img id="image" src="" alt="" loading="lazy"/>\n';
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-emoji-vertical-align:initial}#image{vertical-align:var(--sinch-comp-emoji-vertical-align);pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy"/>';
+import { getEmojiBaseUrl, getEmojiUrl } from './utils';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Emoji extends NectaryElement {
+export class Emoji extends NectaryElement {
   #$img;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$img = shadowRoot.querySelector("#image");
+    this.#$img = shadowRoot.querySelector('#image');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -20,22 +19,23 @@ class Emoji extends NectaryElement {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ["char"];
+    return ['char'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case "char": {
-        this.#$img.alt = newVal ?? "";
-        this.#updateChar();
-        break;
-      }
+      case 'char':
+        {
+          this.#$img.alt = newVal ?? '';
+          this.#updateChar();
+          break;
+        }
     }
   }
   set char(value) {
-    updateAttribute(this, "char", value);
+    updateAttribute(this, 'char', value);
   }
   get char() {
-    return getAttribute(this, "char", "");
+    return getAttribute(this, 'char', '');
   }
   #updateChar() {
     if (!this.isDomConnected) {
@@ -44,7 +44,4 @@ class Emoji extends NectaryElement {
     this.#$img.src = getEmojiUrl(getEmojiBaseUrl(this), this.char);
   }
 }
-defineCustomElement("sinch-emoji", Emoji);
-export {
-  Emoji
-};
+defineCustomElement('sinch-emoji', Emoji);

package/emoji/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchEmojiProps = {
     /** Emoji character */
     char: string;
@@ -13,23 +13,3 @@ export type TSinchEmoji = {
 };
 export type TSinchEmojiElement = NectaryComponentVanillaByType<TSinchEmoji>;
 export type TSinchEmojiReact = NectaryComponentReactByType<TSinchEmoji>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-emoji': TSinchEmoji;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-emoji': NectaryComponentVanilla<'sinch-emoji'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-emoji': NectaryComponentReact<'sinch-emoji'>;
-        }
-    }
-}

package/emoji/types.js

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