@nectary/components 2.8.8 → 2.9.0

package/dialog/index.js

@@ -1,144 +0,0 @@
-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:90vh;--sinch-comp-dialog-width:fit-content}#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{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-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

@@ -1,28 +0,0 @@
-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

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

package/dialog/utils.d.ts

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

package/dialog/utils.js

@@ -1,18 +0,0 @@
-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

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

package/emoji/index.js

@@ -1,46 +0,0 @@
-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;
-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(getEmojiBaseUrl(this), this.char);
-  }
-});

package/emoji/types.d.ts

@@ -1,11 +0,0 @@
-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

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

package/emoji/utils.d.ts

@@ -1,3 +0,0 @@
-export declare const setEmojiBaseUrl: (emojiEl: Element, baseUrl: string | null) => void;
-export declare const getEmojiBaseUrl: (root: Element) => string | null;
-export declare const getEmojiUrl: (baseUrl: string | null, char: string | null) => string;

package/emoji/utils.js

@@ -1,47 +0,0 @@
-import { getAttribute, getCssVar, updateAttribute } from '../utils/dom';
-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;
-}
-const BASE_URL_ATTR = 'data-emoji-base-url';
-export const setEmojiBaseUrl = (emojiEl, baseUrl) => {
-  updateAttribute(emojiEl, BASE_URL_ATTR, baseUrl);
-};
-export const getEmojiBaseUrl = root => {
-  let baseUrl = getAttribute(root, BASE_URL_ATTR);
-  if (baseUrl !== null) {
-    return baseUrl;
-  }
-  baseUrl = getCssVar(root, '--sinch-emoji-src-url');
-  if (baseUrl !== null) {
-    return baseUrl.replaceAll('"', '').trim();
-  }
-  return null;
-};
-export const getEmojiUrl = (baseUrl, char) => {
-  if (char === null || char.length === 0 || baseUrl === null) {
-    return '';
-  }
-  let codepoints = toCodePoints(removeVS16s(char)).join('-');
-  if (codepoints === '1f441-fe0f-200d-1f5e8-fe0f') {
-    codepoints = '1f441-200d-1f5e8';
-  }
-  return baseUrl.replace('%s', codepoints);
-};

package/emoji-picker/index.d.ts

@@ -1,22 +0,0 @@
-import '../input';
-import '../icon-button';
-import '../color-swatch';
-import '../color-menu';
-import '../color-menu-option';
-import '../popover';
-import '../tabs';
-import '../tabs-icon-option';
-import '../emoji';
-import '../text';
-import '../icon';
-import type { TSinchEmojiPickerElement, TSinchEmojiPickerReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-emoji-picker': TSinchEmojiPickerReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-emoji-picker': TSinchEmojiPickerElement;
-    }
-}

package/emoji-picker/index.js

@@ -1,308 +0,0 @@
-import '../input';
-import '../icon-button';
-import '../color-swatch';
-import '../color-menu';
-import '../color-menu-option';
-import '../popover';
-import '../tabs';
-import '../tabs-icon-option';
-import '../emoji';
-import '../text';
-import '../icon';
-import { getEmojiBaseUrl, setEmojiBaseUrl } from '../emoji/utils';
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, debounceTimeout, setClass } from '../utils';
-import dataJson from './data.json';
-const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}sinch-tabs-icon-option>svg{pointer-events:none;height:var(--sinch-global-size-icon);fill:var(--sinch-global-color-icon)}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skintone-default"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"><sinch-tabs-icon-option id="tab-emotions"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm4.41-6.11a.745.745 0 0 0-1.03.24A3.98 3.98 0 0 1 12 16c-1.38 0-2.64-.7-3.38-1.88a.747.747 0 1 0-1.27.79A5.446 5.446 0 0 0 12 17.5c1.9 0 3.63-.97 4.65-2.58.22-.35.11-.81-.24-1.03Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-people"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54a5.023 5.023 0 0 1-4.92-4.15.998.998 0 0 0-.98-.85c-.61 0-1.09.54-1 1.14A7.037 7.037 0 0 0 9 8.71V21c0 .55.45 1 1 1s1-.45 1-1v-5h2v5c0 .55.45 1 1 1s1-.45 1-1V10.05l3.24 3.24a.996.996 0 1 0 1.41-1.41l-3.76-3.77Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-animals"><svg slot="icon" viewBox="0 0 24 24"><path d="M17 14c-.24-.24-.44-.49-.65-.75C17.51 11.5 19 8.56 19 5c0-1.95-.74-3-2-3-1.54 0-3.96 2.06-5 5.97C10.96 4.06 8.54 2 7 2 5.74 2 5 3.05 5 5c0 3.56 1.49 6.5 2.65 8.25-.21.26-.41.51-.65.75-.25.25-2 1.39-2 3.5C5 19.98 7.02 22 9.5 22c1.5 0 2.5-.5 2.5-.5s1 .5 2.5.5c2.48 0 4.5-2.02 4.5-4.5 0-2.11-1.75-3.25-2-3.5Zm-.12-9.97c.06.17.12.48.12.97 0 2.84-1.11 5.24-2.07 6.78-.38-.26-.83-.48-1.4-.62.24-4.52 2.44-6.83 3.35-7.13ZM7 5c0-.49.06-.8.12-.97.91.3 3.11 2.61 3.36 7.13-.58.14-1.03.35-1.4.62C8.11 10.24 7 7.84 7 5Zm7.5 15c-1 0-1.8-.33-2.22-.56.42-.18.72-.71.72-.94 0-.28-.45-.5-1-.5s-1 .22-1 .5c0 .23.3.76.72.94-.42.23-1.22.56-2.22.56A2.5 2.5 0 0 1 7 17.5c0-.7.43-1.24 1-1.73.44-.36.61-.52 1.3-1.37.76-.95 1.09-1.4 2.7-1.4s1.94.45 2.7 1.4c.69.85.86 1.01 1.3 1.37.57.49 1 1.03 1 1.73a2.5 2.5 0 0 1-2.5 2.5Zm-.5-4c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Zm-3 0c0 .41-.22.75-.5.75s-.5-.34-.5-.75.22-.75.5-.75.5.34.5.75Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-food"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 19H3c-.55 0-1 .45-1 1s.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1Zm1-16H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H6c-1.1 0-2 .9-2 2v8c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 5h-2V5h2v3Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-travel"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m21.99 14.77-1.43-4.11c-.14-.4-.52-.66-.97-.66H12.4c-.46 0-.83.26-.98.66L10 14.77v5.24c0 .55.45.99 1 .99s1-.45 1-1v-1h8v1a1 1 0 0 0 2 .01l-.01-5.24Zm-10.38-1.43.69-2c.05-.2.24-.34.46-.34h6.48c.21 0 .4.14.47.34l.69 2a.5.5 0 0 1-.47.66h-7.85a.5.5 0 0 1-.47-.66Zm.38 3.66c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1Z"/><path d="M14 4.5V9h1V4c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1v4H3c-.55 0-1 .45-1 1v12h1V9.5c0-.28.22-.5.5-.5h4c.28 0 .5-.22.5-.5v-4c0-.28.22-.5.5-.5h5c.28 0 .5.22.5.5Z"/><path d="M7 11H5v2h2v-2Zm5-6h-2v2h2V5ZM7 15H5v2h2v-2Zm0 4H5v2h2v-2Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-sports"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.52 2.49C17.18.15 12.9.62 9.97 3.55c-1.6 1.6-2.52 3.87-2.54 5.46-.02 1.58.26 3.89-1.35 5.5l-3.54 3.53c-.39.39-.39 1.02 0 1.42.39.39 1.02.39 1.42 0l3.53-3.54c1.61-1.61 3.92-1.33 5.5-1.35 1.58-.02 3.86-.94 5.46-2.54 2.93-2.92 3.41-7.2 1.07-9.54Zm-9.2 9.19c-1.53-1.53-1.05-4.61 1.06-6.72 2.11-2.11 5.18-2.59 6.72-1.06 1.53 1.53 1.05 4.61-1.06 6.72-2.11 2.11-5.18 2.59-6.72 1.06ZM18 17c.53 0 1.04.21 1.41.59.78.78.78 2.05 0 2.83-.37.37-.88.58-1.41.58-.53 0-1.04-.21-1.41-.59-.78-.78-.78-2.05 0-2.83.37-.37.88-.58 1.41-.58Zm0-2a3.998 3.998 0 0 0-2.83 6.83c.78.78 1.81 1.17 2.83 1.17a3.998 3.998 0 0 0 2.83-6.83A3.998 3.998 0 0 0 18 15Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-objects"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7Zm.5 11h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.83V14Zm1 5c-.01 0-.02-.01-.03-.01V19h-2.94v-.01c-.01 0-.02.01-.03.01-.28 0-.5-.22-.5-.5s.22-.5.5-.5c.01 0 .02.01.03.01V18h2.94v.01c.01 0 .02-.01.03-.01.28 0 .5.22.5.5s-.22.5-.5.5Zm0-2h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5s-.22.5-.5.5Z"/></svg></sinch-tabs-icon-option><sinch-tabs-icon-option id="tab-symbols"><svg slot="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 5H4c-.55 0-1 .45-1 1s.45 1 1 1h2v3c0 .55.45 1 1 1s1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1Zm0-3H4c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1Zm10.89 11.11a.996.996 0 0 0-1.41 0l-6.36 6.36a.996.996 0 1 0 1.41 1.41l6.36-6.36a.996.996 0 0 0 0-1.41ZM14.5 16a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-4-10A2.5 2.5 0 0 0 18 8.5V4h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1v3.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 0 0 0 5Zm-5.05 7.09a.996.996 0 1 0-1.41-1.41l-.71.71-.71-.71.35-.35a2.499 2.499 0 0 0-1.77-4.27 2.499 2.499 0 0 0-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.48 1.14.72 1.78.72.64 0 1.28-.24 1.77-.73l1.06-1.06.71.71a.996.996 0 1 0 1.41-1.41l-.71-.71.71-.71Zm-4.6-3.89a.5.5 0 0 1 .35-.15.5.5 0 0 1 .35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35Zm0 5.65a.5.5 0 0 1-.35.15.5.5 0 0 1-.35-.15.5.5 0 0 1-.15-.35.5.5 0 0 1 .15-.35l1.06-1.06.71.71-1.07 1.05Z"/></svg></sinch-tabs-icon-option></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
-const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
-const data = dataJson;
-const template = document.createElement('template');
-const MIN_SEARCH_LENGTH = 2;
-const SEARCH_DEBOUNCE_TIMEOUT = 300;
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
-  #$tabs;
-  #$searchInput;
-  #$searchClearButton;
-  #$skinPopover;
-  #$skinMenu;
-  #$skinSwatch;
-  #$skinButton;
-  #$list;
-  #$notFound;
-  #controller = null;
-  #$sh;
-  #searchDebounce;
-  #currentSkinTone = 0;
-  #prevTabsValue = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$sh = shadowRoot;
-    this.#$tabs = shadowRoot.querySelector('#tabs');
-    this.#$searchInput = shadowRoot.querySelector('#search');
-    this.#$searchClearButton = shadowRoot.querySelector('#search-clear');
-    this.#$skinPopover = shadowRoot.querySelector('#skin-popover');
-    this.#$skinMenu = shadowRoot.querySelector('#skin-menu');
-    this.#$skinSwatch = shadowRoot.querySelector('#skin-swatch');
-    this.#$skinButton = shadowRoot.querySelector('#skin-button');
-    this.#$list = shadowRoot.querySelector('#list');
-    this.#$notFound = shadowRoot.querySelector('#not-found');
-    this.#searchDebounce = debounceTimeout(SEARCH_DEBOUNCE_TIMEOUT)(this.#updateSearch);
-  }
-  connectedCallback() {
-    this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.#$tabs.addEventListener('-change', this.#onTabsChange, {
-      signal
-    });
-    this.#$searchInput.addEventListener('-change', this.#onSearchChange, {
-      signal
-    });
-    this.#$searchClearButton.addEventListener('-click', this.#onSearchClearClick, {
-      signal
-    });
-    this.#$skinButton.addEventListener('-click', this.#onSkinButtonClick, {
-      signal
-    });
-    this.#$skinPopover.addEventListener('-close', this.#onSkinPopoverClose, {
-      signal
-    });
-    this.#$skinMenu.addEventListener('-change', this.#onSkinMenuChange, {
-      signal
-    });
-    this.#$list.addEventListener('click', this.#onListClick, {
-      signal
-    });
-    this.addEventListener('-change', this.#onChangeReactHandler, {
-      signal
-    });
-    this.#updateTabs();
-    this.#updateEmojis();
-  }
-  disconnectedCallback() {
-    this.#searchDebounce.cancel();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  get skinToneButtonRect() {
-    return getRect(this.#$skinButton);
-  }
-  get searchInputRect() {
-    return getRect(this.#$searchInput);
-  }
-  get searchClearButtonRect() {
-    return getRect(this.#$searchClearButton);
-  }
-  nthSkinToneRect(index) {
-    return this.#$skinMenu.nthItemRect(index);
-  }
-  nthTabRect(index) {
-    return this.#$tabs.nthOptionRect(index);
-  }
-  nthEmojiRect(index) {
-    const $el = this.#$list.children[index];
-    return $el != null ? getRect($el) : null;
-  }
-  #onListClick = e => {
-    const value = e.target.getAttribute('data-value');
-    if (value === null) {
-      return;
-    }
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: value
-    }));
-  };
-  #onTabsChange = e => {
-    const value = e.detail;
-    updateAttribute(this.#$tabs, 'value', value);
-    updateAttribute(this.#$searchInput, 'value', '');
-    this.#updateEmojis();
-  };
-  #onSearchChange = e => {
-    this.#$searchInput.value = e.detail;
-    this.#searchDebounce.fn();
-    setClass(this.#$searchClearButton, 'active', e.detail.length > 0);
-  };
-  #onSearchClearClick = () => {
-    this.#$searchInput.value = '';
-    this.#$searchInput.focus();
-    this.#searchDebounce.fn();
-    setClass(this.#$searchClearButton, 'active', false);
-  };
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
-  };
-  get focusable() {
-    return true;
-  }
-  #getDocumentRoot() {
-    return Reflect.has(this.#$sh, 'createElement') ? this.#$sh : document;
-  }
-  #updateSearch = () => {
-    const value = this.#$searchInput.value;
-    if (value.length < MIN_SEARCH_LENGTH) {
-      if (this.#isSearchMode()) {
-        if (this.#prevTabsValue !== null) {
-          this.#$tabs.setAttribute('value', this.#prevTabsValue);
-        }
-        this.#updateEmojis();
-      }
-      return;
-    }
-    const currentActiveTab = this.#$tabs.getAttribute('value');
-    if (currentActiveTab !== null) {
-      this.#prevTabsValue = currentActiveTab;
-    }
-    this.#$tabs.removeAttribute('value');
-    this.#updateSearchEmojis();
-  };
-  #updateTabs() {
-    const tabOptions = this.#$tabs.querySelectorAll('sinch-tabs-icon-option');
-    const activeTabName = data[0].name;
-    const numTabs = Math.min(data.length, tabOptions.length);
-    for (let i = 0; i < numTabs; i++) {
-      const group = data[i];
-      const tabOption = tabOptions[i];
-      tabOption.setAttribute('value', group.name);
-      tabOption.setAttribute('aria-label', groupLabels[i]);
-    }
-    updateAttribute(this.#$tabs, 'value', activeTabName);
-  }
-  *#iterateSearchEmojis(searchValue, skinTone) {
-    for (const group of data) {
-      for (const entry of group.emojis) {
-        if (entry.label.toLowerCase().includes(searchValue)) {
-          const hasSkins = entry.skins != null;
-          if (skinTone === 0 || !hasSkins) {
-            yield entry;
-          } else if (hasSkins) {
-            for (const skin of entry.skins) {
-              if (skinTone === skin.tone || Array.isArray(skin.tone) && skin.tone.includes(skinTone)) {
-                yield skin;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  *#iterateGroupEmojis(group, skinTone) {
-    for (const entry of group.emojis) {
-      const hasSkins = entry.skins != null;
-      if (skinTone === 0 || !hasSkins) {
-        yield entry;
-      } else if (hasSkins) {
-        for (const skin of entry.skins) {
-          if (skinTone === skin.tone || Array.isArray(skin.tone) && skin.tone.includes(skinTone)) {
-            yield skin;
-          }
-        }
-      }
-    }
-  }
-  #updateSearchEmojis() {
-    const searchValue = this.#$searchInput.value;
-    if (searchValue.length < MIN_SEARCH_LENGTH) {
-      return;
-    }
-    const doc = this.#getDocumentRoot();
-    const fragment = document.createDocumentFragment();
-    const emojiBaseUrl = getEmojiBaseUrl(this);
-    let someFound = false;
-    for (const entry of this.#iterateSearchEmojis(searchValue, this.#currentSkinTone)) {
-      const el = this.#createEmojiElement(doc, entry, emojiBaseUrl);
-      someFound = true;
-      fragment.appendChild(el);
-    }
-    setClass(this.#$notFound, 'active', !someFound);
-    this.#$list.replaceChildren(fragment);
-    this.#$list.scrollTo(0, 0);
-  }
-  #updateEmojis() {
-    if (this.#isSearchMode()) {
-      return;
-    }
-    const activeGroup = getAttribute(this.#$tabs, 'value');
-    const group = data.find(group => group.name === activeGroup);
-    if (group == null) {
-      return;
-    }
-    const doc = this.#getDocumentRoot();
-    const fragment = document.createDocumentFragment();
-    const emojiBaseUrl = getEmojiBaseUrl(this);
-    for (const entry of this.#iterateGroupEmojis(group, this.#currentSkinTone)) {
-      const el = this.#createEmojiElement(doc, entry, emojiBaseUrl);
-      fragment.appendChild(el);
-    }
-    this.#$list.replaceChildren(fragment);
-    this.#$list.scrollTo(0, 0);
-  }
-  #onSkinButtonClick = () => {
-    updateBooleanAttribute(this.#$skinPopover, 'open', !getBooleanAttribute(this.#$skinPopover, 'open'));
-  };
-  #onSkinPopoverClose = () => {
-    updateBooleanAttribute(this.#$skinPopover, 'open', false);
-  };
-  #onSkinMenuChange = e => {
-    this.#$skinSwatch.name = e.detail;
-    this.#$skinMenu.value = e.detail;
-    switch (e.detail) {
-      case 'skintone-default':
-        {
-          this.#currentSkinTone = 0;
-          break;
-        }
-      case 'skintone-light':
-        {
-          this.#currentSkinTone = 1;
-          break;
-        }
-      case 'skintone-light-medium':
-        {
-          this.#currentSkinTone = 2;
-          break;
-        }
-      case 'skintone-medium':
-        {
-          this.#currentSkinTone = 3;
-          break;
-        }
-      case 'skintone-medium-dark':
-        {
-          this.#currentSkinTone = 4;
-          break;
-        }
-      case 'skintone-dark':
-        {
-          this.#currentSkinTone = 5;
-          break;
-        }
-    }
-    this.#onSkinPopoverClose();
-    if (this.#isSearchMode()) {
-      this.#updateSearchEmojis();
-    } else {
-      this.#updateEmojis();
-    }
-  };
-  #isSearchMode() {
-    const activeTab = getAttribute(this.#$tabs, 'value');
-    return activeTab === null || activeTab.length === 0;
-  }
-  #createEmojiElement(doc, emoji, baseUrl) {
-    const btn = doc.createElement('sinch-icon-button');
-    const el = doc.createElement('sinch-emoji');
-    el.setAttribute('slot', 'icon');
-    el.setAttribute('char', emoji.emoji);
-    el.setAttribute('label', emoji.label);
-    setEmojiBaseUrl(el, baseUrl);
-    btn.setAttribute('aria-label', emoji.label);
-    btn.setAttribute('size', 's');
-    btn.setAttribute('data-value', emoji.emoji);
-    btn.appendChild(el);
-    return btn;
-  }
-});