@nectary/components 4.6.8 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.6.8",
+  "version": "4.7.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.2.1"
+    "@nectary/assets": "2.2.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -34,6 +34,6 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.4.0"
+    "@nectary/theme-base": "1.4.1"
   }
 }

package/radio/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getTargetByAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:var(--sinch-comp-radio-direction,column);gap:var(--sinch-comp-radio-gap,8px);box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio', class extends NectaryElement {

package/radio/types.d.ts

@@ -11,4 +11,8 @@ export type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     invalid?: boolean;
     'aria-label': string;
     'on-change'?: (e: CustomEvent<string>) => void;
+    style?: {
+        '--sinch-comp-radio-direction'?: 'row' | 'column';
+        '--sinch-comp-radio-gap'?: number | string;
+    };
 };

package/rich-text/index.js

@@ -2,7 +2,7 @@ import { getEmojiBaseUrl } from '../emoji/utils';
 import '../emoji';
 import '../code-tag';
 import '../link';
-import { defineCustomElement, NectaryElement, getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, parseMarkdown } from '../utils';
+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');
@@ -10,6 +10,7 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-rich-text', class extends NectaryElement {
   #wrapper;
   #parseVisitor;
+  #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -29,12 +30,26 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
     this.#parseVisitor = createParseVisitor(shadowRoot);
   }
   connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
     super.connectedCallback();
     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
+    });
   }
   disconnectedCallback() {
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#wrapper.removeEventListener('click', this.#handleElementClick);
+    this.removeEventListener('-element-click', this.#onClickReactHandler);
     super.disconnectedCallback();
   }
   static get observedAttributes() {
@@ -61,6 +76,14 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
   set text(value) {
     updateAttribute(this, 'text', value);
   }
+  #handleElementClick = e => {
+    const eventTarget = e.target;
+    const elementClickEvent = new CustomEvent('-element-click');
+    Object.defineProperty(elementClickEvent, 'currentTarget', {
+      value: eventTarget
+    });
+    this.dispatchEvent(elementClickEvent);
+  };
   #updateText() {
     if (!this.isDomConnected) {
       return;
@@ -72,4 +95,7 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
       this.#wrapper.replaceChildren(parseMarkdown(text, this.#parseVisitor.createVisitor()));
     }
   }
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-element-click')?.(e);
+  };
 });

package/rich-text/types.d.ts

@@ -1,14 +1,21 @@
 import type { TSinchTextType } from '../text/types';
 import type { TSinchElementReact } from '../types';
+export type ElementClickedEvent = CustomEvent & {
+    currentTarget: HTMLElement;
+};
 export type TSinchRichTextElement = HTMLElement & {
     size: TSinchTextType;
     text: string;
     setAttribute(name: 'size', value: TSinchTextType): void;
     setAttribute(name: 'text', value: string): void;
+    /** Click event */
+    addEventListener(type: '-element-click', listener: (e: ElementClickedEvent) => void): void;
 };
 export type TSinchRichTextReact = TSinchElementReact<TSinchRichTextElement> & {
     size?: TSinchTextType;
     text: string;
+    /** Click event handler */
+    'on-element-click'?: (e: ElementClickedEvent) => void;
 } & {
     style?: {
         '--sinch-comp-rich-text-font'?: string;

package/rich-text/utils.js

@@ -53,7 +53,13 @@ export const createParseVisitor = doc => {
           $link.href = href;
           if (attributes != null) {
             attributes.forEach(attr => {
+              if (attr.startsWith('#')) {
+                $link.id = attr.slice(1);
+              }
               switch (attr) {
+                case 'prevent-default':
+                  $link.preventDefault = true;
+                  break;
                 case 'use-history':
                   $link['use-history'] = true;
                   break;