@nectary/components 2.4.0

package/dialog/index.js

@@ -0,0 +1,144 @@
+import '../icon-button';
+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:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;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;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#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;max-height:var(--sinch-comp-dialog-max-height);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{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-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;
+defineCustomElement('sinch-dialog', class extends NectaryElement {
+  #$dialog;
+  #$closeButton;
+  #$caption;
+  #$actionWrapper;
+  #$actionSlot;
+  #controller = null;
+  constructor() {
+    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.#$actionSlot = shadowRoot.querySelector('slot[name="buttons"]');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.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();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#onCollapse();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    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();
+          }
+          updateBooleanAttribute(this, 'open', shouldOpen);
+          break;
+        }
+      case 'close-aria-label':
+        {
+          updateAttribute(this.#$closeButton, 'aria-label', newVal);
+          break;
+        }
+    }
+  }
+  set caption(caption) {
+    updateAttribute(this, 'caption', caption);
+  }
+  get caption() {
+    return getAttribute(this, 'caption', '');
+  }
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+  get dialogRect() {
+    return getRect(this.#$dialog);
+  }
+  get closeButtonRect() {
+    return getRect(this.#$closeButton);
+  }
+  #onCancel = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.#dispatchCloseEvent('escape');
+  };
+  #onCloseClick = () => {
+    this.#dispatchCloseEvent('close');
+  };
+  #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');
+      }
+    }
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+  #dispatchCloseEvent(detail) {
+    this.dispatchEvent(new CustomEvent('-close', {
+      detail
+    }));
+  }
+  #onExpand() {
+    if (!this.isDomConnected || this.#$dialog.open || !this.open) {
+      return;
+    }
+    this.#$dialog.showModal();
+    disableScroll();
+  }
+  #onCollapse() {
+    if (!this.#$dialog.open) {
+      return;
+    }
+    this.#$dialog.close?.();
+    enableScroll();
+  }
+  #onActionSlotChange = () => {
+    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
+  };
+});

package/dialog/types.d.ts

@@ -0,0 +1,28 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchDialogCloseDetail = 'close' | 'escape' | 'backdrop';
+export type TSinchDialogElement = HTMLElement & {
+    /** Open/close state */
+    open: boolean;
+    /** Dialog caption */
+    caption: string;
+    readonly dialogRect: TRect;
+    readonly closeButtonRect: TRect;
+    /** close event handler */
+    addEventListener(type: '-close', listener: (e: CustomEvent<TSinchDialogCloseDetail>) => void): void;
+    /** Dialog caption */
+    setAttribute(name: 'caption', value: string): void;
+    /** Close button label that is used for a11y */
+    setAttribute(name: 'close-aria-label', value: string): void;
+};
+export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
+    /** Controls whether the dialog should be open */
+    open: boolean;
+    /** Dialog caption */
+    caption: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Close button label that is used for a11y */
+    'close-aria-label': string;
+    /** close event handler */
+    'on-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
+};

package/dialog/types.js

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

package/dialog/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const disableScroll: () => void;
+export declare const enableScroll: () => void;

package/dialog/utils.js

@@ -0,0 +1,18 @@
+const bodyEl = document.body;
+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';
+    if (scrollWidth > 0) {
+      bodyEl.style.setProperty('padding-right', `${scrollWidth}px`);
+    }
+  }
+};
+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');
+  }
+};

package/emoji/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchEmojiElement, TSinchEmojiReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-emoji': TSinchEmojiReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-emoji': TSinchEmojiElement;
+    }
+}

package/emoji/index.js

@@ -0,0 +1,46 @@
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}#image{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 { getEmojiUrl } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-emoji', class extends NectaryElement {
+  #$img;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$img = shadowRoot.querySelector('#image');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateChar();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  static get observedAttributes() {
+    return ['char'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'char':
+        {
+          this.#$img.alt = newVal ?? '';
+          this.#updateChar();
+          break;
+        }
+    }
+  }
+  set char(value) {
+    updateAttribute(this, 'char', value);
+  }
+  get char() {
+    return getAttribute(this, 'char', '');
+  }
+  #updateChar() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    this.#$img.src = getEmojiUrl(this, this.char);
+  }
+});

package/emoji/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchEmojiElement = HTMLElement & {
+    /** Emoji character */
+    char: string;
+    /** Emoji character */
+    setAttribute(name: 'char', value: string): void;
+};
+export type TSinchEmojiReact = TSinchElementReact<TSinchEmojiElement> & {
+    /** Emoji character */
+    char: string;
+};

package/emoji/types.js

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

package/emoji/utils.d.ts

@@ -0,0 +1 @@
+export declare const getEmojiUrl: (root: Element, char: string | null) => string;

package/emoji/utils.js

@@ -0,0 +1,42 @@
+import { getCssVar } from '../utils';
+const vs16RegExp = /\uFE0F/g;
+const zeroWidthJoiner = String.fromCharCode(0x200d);
+const removeVS16s = rawEmoji => rawEmoji.indexOf(zeroWidthJoiner) < 0 ? rawEmoji.replace(vs16RegExp, '') : rawEmoji;
+function toCodePoints(unicodeSurrogates) {
+  const points = [];
+  let char = 0;
+  let previous = 0;
+  let i = 0;
+  while (i < unicodeSurrogates.length) {
+    char = unicodeSurrogates.charCodeAt(i++);
+    if (previous !== 0) {
+      points.push((0x10000 + (previous - 0xd800 << 10) + (char - 0xdc00)).toString(16));
+      previous = 0;
+    } else if (char > 0xd800 && char <= 0xdbff) {
+      previous = char;
+    } else {
+      points.push(char.toString(16));
+    }
+  }
+  return points;
+}
+let emojiUrl = null;
+export const getEmojiUrl = (root, char) => {
+  if (char === null || char.length === 0) {
+    return '';
+  }
+  if (emojiUrl === null) {
+    emojiUrl = getCssVar(root, '--sinch-emoji-src-url');
+    if (emojiUrl !== null) {
+      emojiUrl = emojiUrl.replaceAll('"', '').trim();
+    }
+  }
+  if (emojiUrl === null) {
+    return '';
+  }
+  let codepoints = toCodePoints(removeVS16s(char)).join('-');
+  if (codepoints === '1f441-fe0f-200d-1f5e8-fe0f') {
+    codepoints = '1f441-200d-1f5e8';
+  }
+  return emojiUrl.replace('%s', codepoints);
+};