@nectary/components 4.12.1 → 5.0.0

package/code-tag/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchCodeTag } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class CodeTag extends NectaryElement {
     #private;
     constructor();
@@ -9,23 +8,3 @@ export declare class CodeTag extends NectaryElement {
     get text(): string;
     set text(value: string);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-code-tag': TSinchCodeTag;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-code-tag': NectaryComponentVanilla<'sinch-code-tag'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
-        }
-    }
-}

package/code-tag/index.js

@@ -1,32 +1,35 @@
-import { defineCustomElement, getAttribute, updateAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline}#content{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);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);white-space:var(--sinch-global-text-white-space,normal)}</style><span id="content"></span>';
-const template = document.createElement('template');
+import { getAttribute, updateAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:host {\n  display: inline;\n}\n\n#content {\n  font: var(--sinch-comp-code-tag-font-text);\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--sinch-comp-code-tag-color-default-text-initial);\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  white-space: var(--sinch-global-text-white-space, normal);\n}\n</style>\n\n<span id="content"></span>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class CodeTag extends NectaryElement {
+class CodeTag extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#content');
+    this.#$text = shadowRoot.querySelector("#content");
   }
   static get observedAttributes() {
-    return ['text'];
+    return ["text"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
     }
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
 }
-defineCustomElement('sinch-code-tag', CodeTag);
+defineCustomElement("sinch-code-tag", CodeTag);
+export {
+  CodeTag
+};

package/code-tag/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchCodeTagProps = {
     /** Text content of hyperlink */
     text: string;
@@ -17,3 +17,23 @@ export type TSinchCodeTag = {
 };
 export type TSinchCodeTagElement = NectaryComponentVanillaByType<TSinchCodeTag>;
 export type TSinchCodeTagReact = NectaryComponentReactByType<TSinchCodeTag>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-code-tag': TSinchCodeTag;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-code-tag': NectaryComponentVanilla<'sinch-code-tag'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-code-tag': NectaryComponentReact<'sinch-code-tag'>;
+        }
+    }
+}

package/code-tag/types.js

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

package/color-menu/global/index.d.ts

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

package/color-menu/global/index.js

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

package/color-menu/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchColorMenu } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class ColorMenu extends NectaryElement {
     #private;
     constructor();
@@ -19,23 +19,3 @@ export declare class ColorMenu extends NectaryElement {
     get focusable(): boolean;
     nthItemRect(index: number): TRect | null;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-color-menu': TSinchColorMenu;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-color-menu': NectaryComponentVanilla<'sinch-color-menu'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
-        }
-    }
-}

package/color-menu/index.js

@@ -1,11 +1,16 @@
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext, getTargetByAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox.empty{display:none}</style><div id="listbox" role="presentation"><slot id="options"></slot></div>';
+import { subscribeContext } from "../utils/context.js";
+import { updateAttribute, getAttribute, updateIntegerAttribute, getIntegerAttribute, attrValueToPixels, updateBooleanAttribute, updateExplicitBooleanAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { getTargetByAttribute } from "../utils/event-target.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 10px;\n  overflow-y: auto;\n}\n\n#listbox.empty {\n  display: none;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot id="options"></slot>\n</div>\n';
 const NUM_COLS_DEFAULT = 5;
 const ITEM_WIDTH = 44;
 const ITEM_HEIGHT = 56;
-const template = document.createElement('template');
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ColorMenu extends NectaryElement {
+class ColorMenu extends NectaryElement {
   #$listbox;
   #$optionsSlot;
   #controller = null;
@@ -13,27 +18,23 @@ export class ColorMenu extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$listbox = shadowRoot.querySelector('#listbox');
-    this.#$optionsSlot = shadowRoot.querySelector('#options');
+    this.#$listbox = shadowRoot.querySelector("#listbox");
+    this.#$optionsSlot = shadowRoot.querySelector("#options");
   }
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const options = {
-      signal
-    };
-    this.setAttribute('role', 'listbox');
+    const { signal } = this.#controller;
+    const options = { signal };
+    this.setAttribute("role", "listbox");
     this.tabIndex = 0;
-    this.addEventListener('keydown', this.#onListboxKeyDown, options);
-    this.addEventListener('blur', this.#onListboxBlur, options);
-    this.#$listbox.addEventListener('click', this.#onListboxClick, options);
-    this.#$optionsSlot.addEventListener('slotchange', this.#onSlotChange, options);
-    this.addEventListener('-change', this.#onChangeReactHandler, options);
-    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    this.addEventListener("keydown", this.#onListboxKeyDown, options);
+    this.addEventListener("blur", this.#onListboxBlur, options);
+    this.#$listbox.addEventListener("click", this.#onListboxClick, options);
+    this.#$optionsSlot.addEventListener("slotchange", this.#onSlotChange, options);
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    subscribeContext(this, "keydown", this.#onContextKeyDown, signal);
+    subscribeContext(this, "visibility", this.#onContextVisibility, signal);
     this.#onSlotChange();
   }
   disconnectedCallback() {
@@ -42,54 +43,51 @@ export class ColorMenu extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'cols'];
+    return ["value", "rows", "cols"];
   }
   attributeChangedCallback(name) {
     switch (name) {
-      case 'value':
-        {
-          if (this.isDomConnected) {
-            this.#onValueChange();
-          }
-          break;
+      case "value": {
+        if (this.isDomConnected) {
+          this.#onValueChange();
         }
-      case 'rows':
-        {
-          this.#updateRows();
-          break;
-        }
-      case 'cols':
-        {
-          if (this.isDomConnected) {
-            this.#updateColumns();
-          }
-          break;
+        break;
+      }
+      case "rows": {
+        this.#updateRows();
+        break;
+      }
+      case "cols": {
+        if (this.isDomConnected) {
+          this.#updateColumns();
         }
+        break;
+      }
     }
   }
   set value(value) {
-    updateAttribute(this, 'value', value);
+    updateAttribute(this, "value", value);
   }
   get value() {
-    return getAttribute(this, 'value', '');
+    return getAttribute(this, "value", "");
   }
   set colors(value) {
-    updateAttribute(this, 'colors', value);
+    updateAttribute(this, "colors", value);
   }
   get colors() {
-    return getAttribute(this, 'colors');
+    return getAttribute(this, "colors");
   }
   set rows(value) {
-    updateIntegerAttribute(this, 'rows', value);
+    updateIntegerAttribute(this, "rows", value);
   }
   get rows() {
-    return getIntegerAttribute(this, 'rows', null);
+    return getIntegerAttribute(this, "rows", null);
   }
   set cols(value) {
-    updateIntegerAttribute(this, 'cols', value);
+    updateIntegerAttribute(this, "cols", value);
   }
   get cols() {
-    return getIntegerAttribute(this, 'cols', null);
+    return getIntegerAttribute(this, "cols", null);
   }
   get focusable() {
     return true;
@@ -106,91 +104,92 @@ export class ColorMenu extends NectaryElement {
     this.#onValueChange();
   };
   #updateRows() {
-    const rowsValue = getAttribute(this, 'rows');
-    this.#$listbox.style.maxHeight = attrValueToPixels(rowsValue, {
-      min: 2,
-      itemSizeMultiplier: ITEM_HEIGHT
-    });
+    const rowsValue = getAttribute(this, "rows");
+    this.#$listbox.style.maxHeight = attrValueToPixels(
+      rowsValue,
+      {
+        min: 2,
+        itemSizeMultiplier: ITEM_HEIGHT
+      }
+    );
   }
   #updateColumns() {
-    const colsValue = getAttribute(this, 'cols');
+    const colsValue = getAttribute(this, "cols");
     const numItems = this.#getOptionElements().length;
-    this.#$listbox.style.width = attrValueToPixels(colsValue, {
-      min: 1,
-      max: numItems,
-      defaultValue: Math.min(numItems, NUM_COLS_DEFAULT),
-      itemSizeMultiplier: ITEM_WIDTH
-    });
+    this.#$listbox.style.width = attrValueToPixels(
+      colsValue,
+      {
+        min: 1,
+        max: numItems,
+        defaultValue: Math.min(numItems, NUM_COLS_DEFAULT),
+        itemSizeMultiplier: ITEM_WIDTH
+      }
+    );
   }
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
-  #onListboxClick = e => {
-    const target = getTargetByAttribute(e, 'value');
+  #onListboxClick = (e) => {
+    const target = getTargetByAttribute(e, "value");
     if (target === null) {
       return;
     }
     this.focus();
     this.#dispatchChangeEvent(target);
   };
-  #onContextVisibility = e => {
+  #onContextVisibility = (e) => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
     } else {
       this.#selectOption(null);
     }
   };
-  #onContextKeyDown = e => {
+  #onContextKeyDown = (e) => {
     this.#handleKeydown(e.detail);
   };
-  #onListboxKeyDown = e => {
+  #onListboxKeyDown = (e) => {
     this.#handleKeydown(e);
   };
   #handleKeydown(e) {
     switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          const $option = this.#findSelectedOption();
-          if ($option !== null) {
-            e.preventDefault();
-            this.#dispatchChangeEvent($option);
-          }
-          break;
-        }
-      case 'ArrowLeft':
-        {
-          e.preventDefault();
-          this.#selectOption(this.#getPrevOption());
-          break;
-        }
-      case 'ArrowRight':
-        {
+      case "Space":
+      case "Enter": {
+        const $option = this.#findSelectedOption();
+        if ($option !== null) {
           e.preventDefault();
-          this.#selectOption(this.#getNextOption());
-          break;
-        }
-      case 'ArrowDown':
-        {
-          e.preventDefault();
-          this.#selectOption(this.#getNextRowOption());
-          break;
-        }
-      case 'ArrowUp':
-        {
-          e.preventDefault();
-          this.#selectOption(this.#getPrevRowOption());
-          break;
+          this.#dispatchChangeEvent($option);
         }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        this.#selectOption(this.#getPrevOption());
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        this.#selectOption(this.#getNextOption());
+        break;
+      }
+      case "ArrowDown": {
+        e.preventDefault();
+        this.#selectOption(this.#getNextRowOption());
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        this.#selectOption(this.#getPrevRowOption());
+        break;
+      }
     }
   }
   #onValueChange() {
     const value = this.value;
     for (const $option of this.#getOptionElements()) {
-      const isChecked = value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'data-checked', isChecked);
-      updateBooleanAttribute($option, 'data-selected', isChecked);
-      updateExplicitBooleanAttribute($option, 'aria-selected', isChecked);
+      const isChecked = value === getAttribute($option, "value", "");
+      updateBooleanAttribute($option, "data-checked", isChecked);
+      updateBooleanAttribute($option, "data-selected", isChecked);
+      updateExplicitBooleanAttribute($option, "aria-selected", isChecked);
     }
   }
   #getFirstOption() {
@@ -253,14 +252,12 @@ export class ColorMenu extends NectaryElement {
     return this.#getFirstOption();
   }
   #selectOption($option) {
-    const hasRows = this.hasAttribute('rows');
+    const hasRows = this.hasAttribute("rows");
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-      updateBooleanAttribute($op, 'data-selected', isSelected);
-      if (isSelected && hasRows) {
-        $op.scrollIntoView?.({
-          block: 'nearest'
-        });
+      updateBooleanAttribute($op, "data-selected", isSelected);
+      if (isSelected && Boolean(hasRows)) {
+        $op.scrollIntoView?.({ block: "nearest" });
       }
     }
   }
@@ -271,7 +268,7 @@ export class ColorMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-      if (getBooleanAttribute(el, 'data-selected')) {
+      if (getBooleanAttribute(el, "data-selected")) {
         return i;
       }
     }
@@ -280,7 +277,7 @@ export class ColorMenu extends NectaryElement {
   #findSelectedOption() {
     const elements = this.#getOptionElements();
     for (const el of elements) {
-      if (getBooleanAttribute(el, 'data-selected')) {
+      if (getBooleanAttribute(el, "data-selected")) {
         return el;
       }
     }
@@ -290,20 +287,23 @@ export class ColorMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.value;
     for (const $el of elements) {
-      if (getAttribute($el, 'value') === value) {
+      if (getAttribute($el, "value") === value) {
         return $el;
       }
     }
     return null;
   }
   #dispatchChangeEvent($opt) {
-    const value = getAttribute($opt, 'value', '');
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: value
-    }));
+    const value = getAttribute($opt, "value", "");
+    this.dispatchEvent(
+      new CustomEvent("-change", { detail: value })
+    );
   }
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
   };
 }
-defineCustomElement('sinch-color-menu', ColorMenu);
+defineCustomElement("sinch-color-menu", ColorMenu);
+export {
+  ColorMenu
+};

package/color-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchColorMenuProps = {
     /** Value */
     value: string;
@@ -23,3 +23,23 @@ export type TSinchColorMenu = {
 };
 export type TSinchColorMenuElement = NectaryComponentVanillaByType<TSinchColorMenu>;
 export type TSinchColorMenuReact = NectaryComponentReactByType<TSinchColorMenu>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-color-menu': TSinchColorMenu;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-menu': NectaryComponentVanilla<'sinch-color-menu'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-color-menu': NectaryComponentReact<'sinch-color-menu'>;
+        }
+    }
+}

package/color-menu/types.js

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

package/color-menu/utils.js

@@ -1,6 +1,6 @@
-export const getParentOption = $element => {
+const getParentOption = ($element) => {
   let $el = $element;
-  while (!$el.hasAttribute('data-value')) {
+  while (!$el.hasAttribute("data-value")) {
     const parent = $el.parentElement;
     if (parent === null) {
       return null;
@@ -8,4 +8,7 @@ export const getParentOption = $element => {
     $el = parent;
   }
   return $el;
-};
+};
+export {
+  getParentOption
+};

package/color-menu-option/global/index.d.ts

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

package/color-menu-option/global/index.js

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

package/color-menu-option/index.d.ts

@@ -1,8 +1,7 @@
 import '../color-swatch';
 import '../tooltip';
 import { NectaryElement } from '../utils';
-import type { TSinchColorMenuOption } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class ColorMenuOption extends NectaryElement {
     #private;
     constructor();
@@ -13,23 +12,3 @@ export declare class ColorMenuOption extends NectaryElement {
     set value(value: string);
     get value(): string;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-color-menu-option': TSinchColorMenuOption;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-color-menu-option': NectaryComponentVanilla<'sinch-color-menu-option'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
-        }
-    }
-}