@nectary/components 4.12.1 → 5.0.0

package/rich-text/index.js

@@ -1,87 +1,81 @@
-import { getEmojiBaseUrl } from '../emoji/utils';
-import '../emoji';
-import '../code-tag';
-import '../link';
-import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown, getReactEventHandler } from '../utils';
-const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.emoji{--sinch-global-size-icon:1em;--sinch-comp-emoji-vertical-align:-0.2em}.ol,.p,.ul{margin:0}.ol,.ul{padding-left:1.5em}.ol+.p,.p+.ol,.p+.p,.p+.ul,.ul+.p{margin-top:.5em}.li>.p+.ol,.li>.p+.ul{margin-top:0}</style><div id="wrapper"></div>';
-import { createParseVisitor, sizeValues } from './utils';
-const template = document.createElement('template');
+import { getEmojiBaseUrl } from "../emoji/utils.js";
+import "../emoji/index.js";
+import "../code-tag/index.js";
+import "../link/index.js";
+import { getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { parseMarkdown } from "../utils/markdown.js";
+import { createParseVisitor, sizeValues } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-m);\n}\n\n:host([size="s"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-s);\n}\n\n:host([size="xs"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-xs);\n}\n\n:host([size="xxs"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-xxs);\n}\n\n#wrapper {\n  font: var(--sinch-comp-rich-text-font);\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n}\n\n.em1 {\n  font-style: italic;\n}\n\n.em2 {\n  font-weight: var(--sinch-ref-typography-font-weight-700);\n}\n\n.strikethrough {\n  text-decoration: line-through;\n}\n\n.link {\n  font: var(--sinch-comp-link-default-font-initial);\n  color: var(--sinch-comp-link-color-default-text-initial);\n  text-decoration: underline;\n}\n\n.link:hover {\n  color: var(--sinch-comp-link-color-default-text-hover);\n  text-decoration: none;\n}\n\n.code {\n  font: var(--sinch-comp-code-tag-font-text);\n  line-height: inherit;\n  font-size: inherit;\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n}\n\n.emoji {\n  --sinch-global-size-icon: 1em;\n  --sinch-comp-emoji-vertical-align: -0.2em;\n}\n\n.p,\n.ul,\n.ol {\n  margin: 0;\n}\n\n.ul,\n.ol {\n  padding-left: 1.5em;\n}\n\n.p + .p,\n.p + .ul,\n.p + .ol,\n.ol + .p,\n.ul + .p {\n  margin-top: 0.5em;\n}\n\n.li > .p + .ul,\n.li > .p + .ol {\n  margin-top: 0;\n}\n</style>\n\n<div id="wrapper"></div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class RichText extends NectaryElement {
+class RichText extends NectaryElement {
   #wrapper;
   #parseVisitor;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
-    if (typeof shadowRoot.createElement !== 'function') {
-      Object.defineProperty(shadowRoot, 'createElement', {
+    if (typeof shadowRoot.createElement !== "function") {
+      Object.defineProperty(shadowRoot, "createElement", {
         value: document.createElement.bind(shadowRoot.ownerDocument)
       });
     }
-    Object.defineProperty(shadowRoot, 'createTextNode', {
+    Object.defineProperty(shadowRoot, "createTextNode", {
       value: document.createTextNode.bind(shadowRoot.ownerDocument)
     });
-    Object.defineProperty(shadowRoot, 'createDocumentFragment', {
+    Object.defineProperty(shadowRoot, "createDocumentFragment", {
       value: document.createDocumentFragment.bind(shadowRoot.ownerDocument)
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#wrapper = shadowRoot.querySelector('#wrapper');
+    this.#wrapper = shadowRoot.querySelector("#wrapper");
     this.#parseVisitor = createParseVisitor(shadowRoot);
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
+    const { signal } = this.#controller;
     super.connectedCallback();
-    this.setAttribute('role', 'paragraph');
+    this.setAttribute("role", "paragraph");
     this.#parseVisitor.updateEmojiBaseUrl(getEmojiBaseUrl(this));
     this.#updateText();
-    this.#wrapper.addEventListener('click', this.#handleElementClick, {
-      signal
-    });
-    this.addEventListener('-element-click', this.#onClickReactHandler, {
-      signal
-    });
+    this.#wrapper.addEventListener("click", this.#handleElementClick, { signal });
+    this.addEventListener("-element-click", this.#onClickReactHandler, { signal });
   }
   disconnectedCallback() {
     this.#controller?.abort();
     this.#controller = null;
-    this.#wrapper.removeEventListener('click', this.#handleElementClick);
-    this.removeEventListener('-element-click', this.#onClickReactHandler);
+    this.#wrapper.removeEventListener("click", this.#handleElementClick);
+    this.removeEventListener("-element-click", this.#onClickReactHandler);
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['text'];
+    return ["text"];
   }
   attributeChangedCallback(name, _oldVal, _newVal) {
     switch (name) {
-      case 'text':
-        {
-          this.#updateText();
-          break;
-        }
+      case "text": {
+        this.#updateText();
+        break;
+      }
     }
   }
   get size() {
-    return getLiteralAttribute(this, sizeValues, 'size', 'm');
+    return getLiteralAttribute(this, sizeValues, "size", "m");
   }
   set size(value) {
-    updateLiteralAttribute(this, sizeValues, 'size', value);
+    updateLiteralAttribute(this, sizeValues, "size", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
-  #handleElementClick = e => {
+  #handleElementClick = (e) => {
     const eventTarget = e.target;
-    const elementClickEvent = new CustomEvent('-element-click');
-    Object.defineProperty(elementClickEvent, 'currentTarget', {
-      value: eventTarget
-    });
+    const elementClickEvent = new CustomEvent("-element-click");
+    Object.defineProperty(elementClickEvent, "currentTarget", { value: eventTarget });
     this.dispatchEvent(elementClickEvent);
   };
   #updateText() {
@@ -90,13 +84,18 @@ export class RichText extends NectaryElement {
     }
     const text = this.text;
     if (text === null) {
-      this.#wrapper.innerHTML = '';
+      this.#wrapper.innerHTML = "";
     } else {
-      this.#wrapper.replaceChildren(parseMarkdown(text, this.#parseVisitor.createVisitor()));
+      this.#wrapper.replaceChildren(
+        parseMarkdown(text, this.#parseVisitor.createVisitor())
+      );
     }
   }
-  #onClickReactHandler = e => {
-    getReactEventHandler(this, 'on-element-click')?.(e);
+  #onClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-element-click")?.(e);
   };
 }
-defineCustomElement('sinch-rich-text', RichText);
+defineCustomElement("sinch-rich-text", RichText);
+export {
+  RichText
+};

package/rich-text/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchTextType } from '../text/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type ElementClickedEvent = CustomEvent & {
     currentTarget: HTMLElement;
 };
@@ -37,3 +37,23 @@ export type TSinchRichText = {
 };
 export type TSinchRichTextElement = NectaryComponentVanillaByType<TSinchRichText>;
 export type TSinchRichTextReact = NectaryComponentReactByType<TSinchRichText>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-rich-text': TSinchRichText;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-rich-text': NectaryComponentVanilla<'sinch-rich-text'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-rich-text': NectaryComponentReact<'sinch-rich-text'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-rich-text': NectaryComponentReact<'sinch-rich-text'>;
+        }
+    }
+}

package/rich-text/types.js

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

package/rich-text/utils.js

@@ -1,6 +1,6 @@
-import { setEmojiBaseUrl } from '../emoji/utils';
-export const sizeValues = ['m', 's', 'xs', 'xxs'];
-export const createParseVisitor = doc => {
+import { setEmojiBaseUrl } from "../emoji/utils.js";
+const sizeValues = ["m", "s", "xs", "xxs"];
+const createParseVisitor = (doc) => {
   let emojiBaseUrl = null;
   return {
     updateEmojiBaseUrl(url) {
@@ -12,6 +12,7 @@ export const createParseVisitor = doc => {
       let $li = null;
       const $lists = [];
       return {
+        // Add new escaped method to handle escaped characters
         escaped(char) {
           const $text = doc.createTextNode(char);
           if ($p != null) {
@@ -22,69 +23,62 @@ export const createParseVisitor = doc => {
           }
         },
         emoji(emojiChar) {
-          const $emoji = doc.createElement('sinch-emoji');
+          const $emoji = doc.createElement("sinch-emoji");
           setEmojiBaseUrl($emoji, emojiBaseUrl);
-          $emoji.setAttribute('char', emojiChar);
-          $emoji.className = 'emoji';
+          $emoji.setAttribute("char", emojiChar);
+          $emoji.className = "emoji";
           $p.appendChild($emoji);
         },
         codetag(text) {
-          const $codeTag = doc.createElement('sinch-code-tag');
+          const $codeTag = doc.createElement("sinch-code-tag");
           $codeTag.text = text;
           $p.appendChild($codeTag);
         },
-        inline(text, _ref) {
-          let {
-            isBold,
-            isItalic,
-            isStrikethrough
-          } = _ref;
-          const $inline = doc.createElement('SPAN');
+        inline(text, { isBold, isItalic, isStrikethrough }) {
+          const $inline = doc.createElement("SPAN");
           $inline.append(doc.createTextNode(text));
           if (isItalic === true) {
-            $inline.classList.add('em1');
+            $inline.classList.add("em1");
           }
           if (isBold === true) {
-            $inline.classList.add('em2');
+            $inline.classList.add("em2");
           }
           if (isStrikethrough === true) {
-            $inline.classList.add('strikethrough');
+            $inline.classList.add("strikethrough");
           }
           $p.appendChild($inline);
         },
         linebreak() {
-          const $br = doc.createElement('br');
+          const $br = doc.createElement("br");
           $p.appendChild($br);
         },
         link(text, href, attributes) {
-          const $link = doc.createElement('sinch-link');
+          const $link = doc.createElement("sinch-link");
           $link.text = text;
           $link.href = href;
           if (attributes != null) {
-            attributes.forEach(attr => {
-              if (attr.startsWith('#')) {
+            attributes.forEach((attr) => {
+              if (attr.startsWith("#")) {
                 $link.id = attr.slice(1);
               }
               switch (attr) {
-                case 'prevent-default':
+                case "prevent-default":
                   $link.preventDefault = true;
                   break;
-                case 'use-history':
+                case "use-history":
                   $link.useHistory = true;
                   break;
-                case 'external':
+                case "external":
                   $link.external = true;
                   break;
-                default:
-                  break;
               }
             });
           }
           $p.appendChild($link);
         },
         list(isOrdered) {
-          const $list = doc.createElement(isOrdered ? 'ol' : 'ul');
-          $list.classList.add(isOrdered ? 'ol' : 'ul');
+          const $list = doc.createElement(isOrdered ? "ol" : "ul");
+          $list.classList.add(isOrdered ? "ol" : "ul");
           if ($li !== null) {
             $li.appendChild($list);
             $li = null;
@@ -103,13 +97,13 @@ export const createParseVisitor = doc => {
         },
         listItem() {
           $p = null;
-          $li = doc.createElement('li');
-          $li.classList.add('li');
+          $li = doc.createElement("li");
+          $li.classList.add("li");
           $lists.at(-1).appendChild($li);
         },
         paragraph() {
-          $p = doc.createElement('p');
-          $p.classList.add('p');
+          $p = doc.createElement("p");
+          $p.classList.add("p");
           if ($li !== null) {
             $li.appendChild($p);
           } else {
@@ -122,4 +116,8 @@ export const createParseVisitor = doc => {
       };
     }
   };
-};
+};
+export {
+  createParseVisitor,
+  sizeValues
+};

package/rich-textarea/global/index.d.ts

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

package/rich-textarea/global/index.js

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

package/rich-textarea/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchRichTextarea } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class RichTextarea extends NectaryElement {
     #private;
     constructor();
@@ -28,23 +27,3 @@ export declare class RichTextarea extends NectaryElement {
     formatOrderedList(): void;
     formatUnorderedList(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-rich-textarea': TSinchRichTextarea;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-rich-textarea': NectaryComponentVanilla<'sinch-rich-textarea'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-rich-textarea': NectaryComponentReact<'sinch-rich-textarea'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-rich-textarea': NectaryComponentReact<'sinch-rich-textarea'>;
-        }
-    }
-}