@nectary/components 4.12.1 → 5.0.1

package/input/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentVanilla, NectaryComponentReact } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchInputType = 'text' | 'password' | 'number';
 export type TSinchInputClipboardEvent = CustomEvent<{
@@ -83,3 +83,23 @@ export type TSinchInput = {
 };
 export type TSinchInputElement = NectaryComponentVanillaByType<TSinchInput>;
 export type TSinchInputReact = NectaryComponentReactByType<TSinchInput>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-input': TSinchInput;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-input': NectaryComponentVanilla<'sinch-input'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-input': NectaryComponentReact<'sinch-input'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-input': NectaryComponentReact<'sinch-input'>;
+        }
+    }
+}

package/input/types.js

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

package/input/utils.js

@@ -1,34 +1,32 @@
-export const inputTypes = ['text', 'password', 'number'];
-const MASK_SYMBOL_LETTER = 'A';
-const MASK_SYMBOL_DIGIT = '0';
-const EMPTY_CHAR = ' ';
+const inputTypes = ["text", "password", "number"];
+const MASK_SYMBOL_LETTER = "A";
+const MASK_SYMBOL_DIGIT = "0";
+const EMPTY_CHAR = " ";
 const MASK_MODE_DIGIT = 0;
 const MASK_MODE_LETTER = 1;
 const MASK_MODE_EXACT = 2;
-const MASK_PLACEHOLDER_DELIMITER = '@@';
-const MASK_PLACEHOLDER = '_';
+const MASK_PLACEHOLDER_DELIMITER = "@@";
+const MASK_PLACEHOLDER = "_";
 const testMaskedValue = (maskSymbol, inputChar) => {
   switch (maskSymbol.mode) {
-    case MASK_MODE_DIGIT:
-      {
-        return /\d/.test(inputChar);
-      }
-    case MASK_MODE_LETTER:
-      {
-        return /\p{Letter}/u.test(inputChar);
-      }
+    case MASK_MODE_DIGIT: {
+      return /\d/.test(inputChar);
+    }
+    case MASK_MODE_LETTER: {
+      return new RegExp("\\p{Letter}", "u").test(inputChar);
+    }
   }
   return false;
 };
-const isExactMode = maskSymbol => maskSymbol.mode === MASK_MODE_EXACT;
-const isEmptyChar = char => char === EMPTY_CHAR;
-export const getMaskSymbols = maskValue => {
+const isExactMode = (maskSymbol) => maskSymbol.mode === MASK_MODE_EXACT;
+const isEmptyChar = (char) => char === EMPTY_CHAR;
+const getMaskSymbols = (maskValue) => {
   const res = [];
   const [mask, placeholder] = maskValue.split(MASK_PLACEHOLDER_DELIMITER);
   const maskSymbols = [...mask];
   const placeholderChars = placeholder != null ? [...placeholder] : [];
   for (let maskIndex = 0, placeholderIndex = 0; maskIndex < maskSymbols.length; maskIndex++, placeholderIndex++) {
-    if (maskSymbols[maskIndex] === '\\') {
+    if (maskSymbols[maskIndex] === "\\") {
       maskIndex += 1;
       res.push({
         value: maskSymbols[maskIndex],
@@ -63,11 +61,11 @@ const getPlaceholder = (chars, maskSymbols) => {
   for (let i = 0; i < maskSymbols.length; i++) {
     res[i] = i >= chars.length || isEmptyChar(chars[i]) || isExactMode(maskSymbols[i]) ? maskSymbols[i].placeholder : EMPTY_CHAR;
   }
-  return res.join('');
+  return res.join("");
 };
 const isMaskedInputComplete = (chars, maskSymbols) => {
   if (chars.length > maskSymbols.length) {
-    throw new Error('chars.length > maskSymbols.length');
+    throw new Error("chars.length > maskSymbols.length");
   }
   if (chars.length < maskSymbols.length) {
     return false;
@@ -101,15 +99,15 @@ const isCursorAtTheBeginning = (maskSymbols, selectoinStart) => {
 };
 const getMergedValue = (chars, maskSymbols) => {
   if (!isMaskedInputComplete(chars, maskSymbols)) {
-    return '';
+    return "";
   }
   const res = new Array(chars.length);
   for (let i = 0; i < chars.length; i++) {
     res[i] = isExactMode(maskSymbols[i]) ? maskSymbols[i].value : chars[i];
   }
-  return res.join('');
+  return res.join("");
 };
-const findLastNonEmptyCharIndex = chars => {
+const findLastNonEmptyCharIndex = (chars) => {
   for (let i = chars.length - 1; i >= 0; i--) {
     if (!isEmptyChar(chars[i])) {
       return i;
@@ -129,13 +127,13 @@ const compileResult = (chars, maskSymbols, cursorPos) => {
     chars.length = lastEmptyPos;
   }
   return {
-    value: chars.join(''),
+    value: chars.join(""),
     placeholder: getPlaceholder(chars, maskSymbols),
     cursorPos: Math.min(cursorPos, chars.length),
     mergedValue: getMergedValue(chars, maskSymbols)
   };
 };
-export const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+const deleteContentBackward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
   if (selectionEnd === 0) {
     return null;
   }
@@ -156,7 +154,7 @@ export const deleteContentBackward = (inputValue, maskSymbols, selectionStart, s
   }
   return compileResult(chars, maskSymbols, cusrsorPos);
 };
-export const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+const deleteContentForward = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
   if (selectionStart >= maskSymbols.length) {
     return null;
   }
@@ -174,7 +172,7 @@ export const deleteContentForward = (inputValue, maskSymbols, selectionStart, se
   }
   return compileResult(chars, maskSymbols, cursorPos + 1);
 };
-export const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
+const beginMaskedComposition = (inputValue, maskSymbols, selectionStart) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   const placeholder = new Array(chars.length);
   for (let i = 0; i < maskSymbols.length; i++) {
@@ -183,11 +181,11 @@ export const beginMaskedComposition = (inputValue, maskSymbols, selectionStart)
   placeholder[selectionStart] = EMPTY_CHAR;
   chars.splice(selectionStart, 1);
   return {
-    value: chars.join(''),
-    placeholder: placeholder.join('')
+    value: chars.join(""),
+    placeholder: placeholder.join("")
   };
 };
-export const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
+const endMaskedComposition = (inputValue, data, maskSymbols, selectionStart, wasValueInserted) => {
   let cursorPos = selectionStart;
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   const dataChars = [...data];
@@ -205,9 +203,9 @@ export const endMaskedComposition = (inputValue, data, maskSymbols, selectionSta
     return compileResult(chars, maskSymbols, cursorPos);
   }
   for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ++dataPos, ++cursorPos) {
-    const data = dataChars[dataPos];
-    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data)) {
-      chars[cursorPos] = data;
+    const data2 = dataChars[dataPos];
+    if (isEmptyChar(chars[cursorPos]) && testMaskedValue(maskSymbols[cursorPos], data2)) {
+      chars[cursorPos] = data2;
     }
   }
   while (cursorPos < maskSymbols.length && isExactMode(maskSymbols[cursorPos])) {
@@ -215,7 +213,7 @@ export const endMaskedComposition = (inputValue, data, maskSymbols, selectionSta
   }
   return compileResult(chars, maskSymbols, cursorPos);
 };
-export const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+const insertText = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   let cursorPos = selectionStart;
   clearCharsSelection(chars, selectionStart, selectionEnd);
@@ -236,7 +234,7 @@ export const insertText = (inputValue, data, maskSymbols, selectionStart, select
   }
   return compileResult(chars, maskSymbols, cursorPos);
 };
-export const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
+const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, selectionEnd) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   let cursorPos = selectionStart;
   clearCharsSelection(chars, selectionStart, selectionEnd);
@@ -251,17 +249,17 @@ export const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, s
     return compileResult(chars, maskSymbols, cursorPos);
   }
   const dataChars = [...data];
-  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
-    const data = dataChars[dataPos];
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ) {
+    const data2 = dataChars[dataPos];
     const maskSymbol = maskSymbols[cursorPos];
     if (isExactMode(maskSymbol)) {
-      if (maskSymbol.value === data) {
+      if (maskSymbol.value === data2) {
         ++dataPos;
       }
       ++cursorPos;
     } else {
-      if (testMaskedValue(maskSymbol, data)) {
-        chars[cursorPos] = data;
+      if (testMaskedValue(maskSymbol, data2)) {
+        chars[cursorPos] = data2;
         ++cursorPos;
       }
       ++dataPos;
@@ -269,11 +267,11 @@ export const insertFromPaste = (inputValue, data, maskSymbols, selectionStart, s
   }
   return compileResult(chars, maskSymbols, cursorPos);
 };
-export const splitValueAndMask = (inputValue, maskSymbols) => {
-  const chars = getCharsFromInputValue('', maskSymbols);
+const splitValueAndMask = (inputValue, maskSymbols) => {
+  const chars = getCharsFromInputValue("", maskSymbols);
   const dataChars = getCharsFromInputValue(inputValue, maskSymbols);
   let cursorPos = 0;
-  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length;) {
+  for (let dataPos = 0; dataPos < dataChars.length && cursorPos < maskSymbols.length; ) {
     const data = dataChars[dataPos];
     const maskSymbol = maskSymbols[cursorPos];
     if (isExactMode(maskSymbol)) {
@@ -291,12 +289,24 @@ export const splitValueAndMask = (inputValue, maskSymbols) => {
   }
   return compileResult(chars, maskSymbols, chars.length);
 };
-export const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
+const getMergedValueSliced = (inputValue, maskSymbols, selectionStart, selectionEnd) => {
   const chars = getCharsFromInputValue(inputValue, maskSymbols);
   for (let i = selectionStart; i < selectionEnd && i < maskSymbols.length; i++) {
     if (isExactMode(maskSymbols[i])) {
       chars[i] = maskSymbols[i].value;
     }
   }
-  return chars.slice(selectionStart, selectionEnd).join('');
-};
+  return chars.slice(selectionStart, selectionEnd).join("");
+};
+export {
+  beginMaskedComposition,
+  deleteContentBackward,
+  deleteContentForward,
+  endMaskedComposition,
+  getMaskSymbols,
+  getMergedValueSliced,
+  inputTypes,
+  insertFromPaste,
+  insertText,
+  splitValueAndMask
+};

package/link/global/index.d.ts

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

package/link/global/index.js

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

package/link/index.d.ts

@@ -1,7 +1,6 @@
 import '../icon';
 import { NectaryElement } from '../utils';
-import type { TSinchLink } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Link extends NectaryElement {
     #private;
     constructor();
@@ -27,23 +26,3 @@ export declare class Link extends NectaryElement {
     focus(): void;
     blur(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-link': TSinchLink;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-link': NectaryComponentVanilla<'sinch-link'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-link': NectaryComponentReact<'sinch-link'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-link': NectaryComponentReact<'sinch-link'>;
-        }
-    }
-}

package/link/index.js

@@ -1,118 +1,122 @@
-import '../icon';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span><span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
-const template = document.createElement('template');
+import "../icon/index.js";
+import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getAttribute, 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: inline;\n  }\n\n  a {\n    font: var(--sinch-comp-link-default-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-initial);\n    color: var(--sinch-comp-link-color-default-text-initial);\n    border-radius: 0.5em;\n    white-space: nowrap;\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-initial);\n  }\n\n  a:hover {\n    text-decoration: var(--sinch-comp-link-default-text-decoration-hover);\n    color: var(--sinch-comp-link-color-default-text-hover);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-hover);\n  }\n\n  a:focus-visible {\n    outline: 2px solid var(--sinch-comp-link-color-default-outline-focus);\n    outline-offset: 2px;\n  }\n\n  :host([standalone]) {\n    display: block;\n  }\n\n  :host([standalone]) a {\n    display: block;\n    font: var(--sinch-comp-link-standalone-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: none;\n    width: fit-content;\n  }\n\n  #external-icon,\n  #standalone-icon {\n    display: none;\n    height: 1em;\n  }\n\n  #icon-prefix {\n    display: none;\n    margin-left: -0.25em;\n  }\n\n  :host([external]:not([standalone])) #external-icon {\n    display: inline-block;\n    margin-left: 0.25em;\n    vertical-align: -0.2em;\n\n    --sinch-global-size-icon: 1em;\n  }\n\n  :host([standalone][external]) #external-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([standalone]) #icon-prefix {\n    display: inline;\n  }\n\n  :host([standalone]:not([external])) #standalone-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([disabled]) a {\n    color: var(--sinch-comp-link-color-disabled-text-initial);\n    pointer-events: none;\n    cursor: initial;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-disabled);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-disabled-icon-initial);\n  }\n\n  #content {\n    white-space: var(--sinch-global-text-white-space, normal);\n  }\n</style>\n\n<a referrerpolicy="no-referer" aria-hidden="true">\n  <span id="content"></span>\n  <span id="icon-prefix">&nbsp;</span>\n  <sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon>\n</a>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Link extends NectaryElement {
+class Link extends NectaryElement {
   #$anchor;
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$anchor = shadowRoot.querySelector('a');
-    this.#$text = shadowRoot.querySelector('#content');
+    this.#$anchor = shadowRoot.querySelector("a");
+    this.#$text = shadowRoot.querySelector("#content");
   }
   connectedCallback() {
-    this.setAttribute('role', 'link');
-    this.#$anchor.addEventListener('click', this.#onAnchorClick);
-    this.#$anchor.addEventListener('focus', this.#onAnchorFocus);
-    this.#$anchor.addEventListener('blur', this.#onAnchorBlur);
-    this.addEventListener('-click', this.#onClickReactHandler);
-    this.addEventListener('-focus', this.#onFocusReactHandler);
-    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.setAttribute("role", "link");
+    this.#$anchor.addEventListener("click", this.#onAnchorClick);
+    this.#$anchor.addEventListener("focus", this.#onAnchorFocus);
+    this.#$anchor.addEventListener("blur", this.#onAnchorBlur);
+    this.addEventListener("-click", this.#onClickReactHandler);
+    this.addEventListener("-focus", this.#onFocusReactHandler);
+    this.addEventListener("-blur", this.#onBlurReactHandler);
   }
   disconnectedCallback() {
-    this.#$anchor.removeEventListener('click', this.#onAnchorClick);
-    this.#$anchor.removeEventListener('focus', this.#onAnchorFocus);
-    this.#$anchor.removeEventListener('blur', this.#onAnchorBlur);
-    this.removeEventListener('-click', this.#onClickReactHandler);
-    this.removeEventListener('-focus', this.#onFocusReactHandler);
-    this.removeEventListener('-blur', this.#onBlurReactHandler);
+    this.#$anchor.removeEventListener("click", this.#onAnchorClick);
+    this.#$anchor.removeEventListener("focus", this.#onAnchorFocus);
+    this.#$anchor.removeEventListener("blur", this.#onAnchorBlur);
+    this.removeEventListener("-click", this.#onClickReactHandler);
+    this.removeEventListener("-focus", this.#onFocusReactHandler);
+    this.removeEventListener("-blur", this.#onBlurReactHandler);
   }
   static get observedAttributes() {
-    return ['text', 'href', 'use-history', 'external', 'standalone', 'disabled'];
+    return [
+      "text",
+      "href",
+      "use-history",
+      "external",
+      "standalone",
+      "disabled"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'href':
-        {
-          updateAttribute(this.#$anchor, 'href', newVal);
-          break;
-        }
-      case 'use-history':
-        {
-          const shouldUseHistory = isAttrTrue(newVal);
-          if (shouldUseHistory) {
-            updateBooleanAttribute(this, 'preventdefault', true);
-          }
-          updateBooleanAttribute(this, name, shouldUseHistory);
-          break;
-        }
-      case 'standalone':
-      case 'disabled':
-        {
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-      case 'external':
-        {
-          const isExternal = isAttrTrue(newVal);
-          updateAttribute(this.#$anchor, 'target', isExternal ? '_blank' : null);
-          updateBooleanAttribute(this, name, isExternal);
-          break;
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
+      case "href": {
+        updateAttribute(this.#$anchor, "href", newVal);
+        break;
+      }
+      case "use-history": {
+        const shouldUseHistory = isAttrTrue(newVal);
+        if (shouldUseHistory) {
+          updateBooleanAttribute(this, "preventdefault", true);
         }
+        updateBooleanAttribute(this, name, shouldUseHistory);
+        break;
+      }
+      case "standalone":
+      case "disabled": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
+      case "external": {
+        const isExternal = isAttrTrue(newVal);
+        updateAttribute(this.#$anchor, "target", isExternal ? "_blank" : null);
+        updateBooleanAttribute(this, name, isExternal);
+        break;
+      }
     }
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get href() {
-    return getAttribute(this, 'href', '');
+    return getAttribute(this, "href", "");
   }
   set href(value) {
-    updateAttribute(this, 'href', value);
+    updateAttribute(this, "href", value);
   }
-  set 'use-history'(value) {
-    updateBooleanAttribute(this, 'use-history', value);
+  set "use-history"(value) {
+    updateBooleanAttribute(this, "use-history", value);
   }
-  get 'use-history'() {
-    return getBooleanAttribute(this, 'use-history');
+  get "use-history"() {
+    return getBooleanAttribute(this, "use-history");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set external(isExternal) {
-    updateBooleanAttribute(this, 'external', isExternal);
+    updateBooleanAttribute(this, "external", isExternal);
   }
   get external() {
-    return getBooleanAttribute(this, 'external');
+    return getBooleanAttribute(this, "external");
   }
   set standalone(isstandalone) {
-    updateBooleanAttribute(this, 'standalone', isstandalone);
+    updateBooleanAttribute(this, "standalone", isstandalone);
   }
   get standalone() {
-    return getBooleanAttribute(this, 'standalone');
+    return getBooleanAttribute(this, "standalone");
   }
   set preventDefault(isPrevented) {
-    updateBooleanAttribute(this, 'preventdefault', isPrevented);
+    updateBooleanAttribute(this, "preventdefault", isPrevented);
   }
   get preventDefault() {
-    return getBooleanAttribute(this, 'preventdefault');
+    return getBooleanAttribute(this, "preventdefault");
   }
   get focusable() {
     return true;
@@ -123,29 +127,34 @@ export class Link extends NectaryElement {
   blur() {
     this.#$anchor.blur();
   }
-  #onAnchorClick = e => {
+  #onAnchorClick = (e) => {
     if (this.preventDefault) {
       e.preventDefault();
-      if (this['use-history']) {
-        history.pushState({}, '', this.href);
+      if (this["use-history"]) {
+        history.pushState({}, "", this.href);
       }
     }
-    this.dispatchEvent(new CustomEvent('-click'));
+    this.dispatchEvent(
+      new CustomEvent("-click")
+    );
   };
   #onAnchorFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(new CustomEvent("-focus"));
   };
   #onAnchorBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    this.dispatchEvent(new CustomEvent("-blur"));
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
-  #onClickReactHandler = e => {
-    getReactEventHandler(this, 'on-click')?.(e);
+  #onClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-click")?.(e);
   };
 }
-defineCustomElement('sinch-link', Link);
+defineCustomElement("sinch-link", Link);
+export {
+  Link
+};

package/link/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchLinkProps = {
     /** Text content of hyperlink */
     text: string;
@@ -49,3 +49,23 @@ export type TSinchLink = {
 };
 export type TSinchLinkElement = NectaryComponentVanillaByType<TSinchLink>;
 export type TSinchLinkReact = NectaryComponentReactByType<TSinchLink>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-link': TSinchLink;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-link': NectaryComponentVanilla<'sinch-link'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-link': NectaryComponentReact<'sinch-link'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-link': NectaryComponentReact<'sinch-link'>;
+        }
+    }
+}

package/link/types.js

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

package/list/global/index.d.ts

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

package/list/global/index.js

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

package/list/index.d.ts

@@ -1,26 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class List extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-list': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-list': NectaryComponentVanilla<'sinch-list'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-list': NectaryComponentReact<'sinch-list'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-list': NectaryComponentReact<'sinch-list'>;
-        }
-    }
-}

package/list/index.js

@@ -1,15 +1,18 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n  height: 100%;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class List extends NectaryElement {
+class List extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute('role', 'list');
+    this.setAttribute("role", "list");
   }
 }
-defineCustomElement('sinch-list', List);
+defineCustomElement("sinch-list", List);
+export {
+  List
+};