@nectary/components 4.12.1 → 5.0.0

package/title/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchTitleType, TSinchTitle } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchTitleType } from './types';
+export * from './types';
 export declare class Title extends NectaryElement {
     #private;
     constructor();
@@ -14,23 +14,3 @@ export declare class Title extends NectaryElement {
     set ellipsis(isEllipsis: boolean);
     get ellipsis(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-title': TSinchTitle;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-title': NectaryComponentVanilla<'sinch-title'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-title': NectaryComponentReact<'sinch-title'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-title': NectaryComponentReact<'sinch-title'>;
-        }
-    }
-}

package/title/index.js

@@ -1,61 +1,62 @@
-import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
-import { typeValues } from './utils';
-const template = document.createElement('template');
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, updateLiteralAttribute, getLiteralAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { typeValues } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="xl"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xl);\n}\n\n:host([type="l"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-l);\n}\n\n:host([type="m"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="s"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-s);\n}\n\n:host([type="xs"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xs);\n}\n\n#text {\n  letter-spacing: -2%;\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n  font: var(--sinch-comp-title-font);\n}\n\n:host([ellipsis]) #text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n</style>\n\n<span id="text"></span>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Title extends NectaryElement {
+class Title extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
+    this.#$text = shadowRoot.querySelector("#text");
   }
   connectedCallback() {
-    this.setAttribute('role', 'heading');
+    this.setAttribute("role", "heading");
   }
   static get observedAttributes() {
-    return ['text', 'level', 'ellipsis'];
+    return ["text", "level", "ellipsis"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'level':
-        {
-          updateAttribute(this, 'aria-level', newVal);
-          break;
-        }
-      case 'ellipsis':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            break;
-          }
-          updateBooleanAttribute(this, 'ellipsis', isAttrTrue(newVal));
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
+      case "level": {
+        updateAttribute(this, "aria-level", newVal);
+        break;
+      }
+      case "ellipsis": {
+        if (isAttrEqual(oldVal, newVal)) {
           break;
         }
+        updateBooleanAttribute(this, "ellipsis", isAttrTrue(newVal));
+        break;
+      }
     }
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
+    return getLiteralAttribute(this, typeValues, "type");
   }
   set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+    updateBooleanAttribute(this, "ellipsis", isEllipsis);
   }
   get ellipsis() {
-    return getBooleanAttribute(this, 'ellipsis');
+    return getBooleanAttribute(this, "ellipsis");
   }
 }
-defineCustomElement('sinch-title', Title);
+defineCustomElement("sinch-title", Title);
+export {
+  Title
+};

package/title/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
 export type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
 export type TSinchTitleProps = {
@@ -27,3 +27,23 @@ export type TSinchTitle = {
 };
 export type TSinchTitleElement = NectaryComponentVanillaByType<TSinchTitle>;
 export type TSinchTitleReact = NectaryComponentReactByType<TSinchTitle>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-title': TSinchTitle;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-title': NectaryComponentVanilla<'sinch-title'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-title': NectaryComponentReact<'sinch-title'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-title': NectaryComponentReact<'sinch-title'>;
+        }
+    }
+}

package/title/types.js

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

package/title/utils.js

@@ -1,17 +1,21 @@
-export const typeValues = ['xl', 'l', 'm', 's', 'xs'];
-export const getTitleLevelFromType = type => {
+const typeValues = ["xl", "l", "m", "s", "xs"];
+const getTitleLevelFromType = (type) => {
   switch (type) {
-    case 'xl':
-      return '1';
-    case 'l':
-      return '2';
-    case 'm':
-      return '3';
-    case 's':
-      return '4';
-    case 'xs':
-      return '5';
+    case "xl":
+      return "1";
+    case "l":
+      return "2";
+    case "m":
+      return "3";
+    case "s":
+      return "4";
+    case "xs":
+      return "5";
     default:
-      return '';
+      return "";
   }
-};
+};
+export {
+  getTitleLevelFromType,
+  typeValues
+};

package/toast/global/index.d.ts

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

package/toast/global/index.js

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

package/toast/index.d.ts

@@ -1,8 +1,8 @@
 import '../icon';
 import '../rich-text';
 import { NectaryElement } from '../utils';
-import type { TSinchToastType, TSinchToast } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchToastType } from './types';
+export * from './types';
 export declare class Toast extends NectaryElement {
     #private;
     constructor();
@@ -17,23 +17,3 @@ export declare class Toast extends NectaryElement {
     get persistent(): boolean;
     set persistent(isPersistent: boolean);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-toast': TSinchToast;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-toast': NectaryComponentVanilla<'sinch-toast'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
-        }
-    }
-}

package/toast/index.js

@@ -1,66 +1,66 @@
-import '../icon';
-import '../rich-text';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
-import { typeValues } from './utils';
-const TIMEOUT = 5000;
-const template = document.createElement('template');
+import "../icon/index.js";
+import "../rich-text/index.js";
+import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { typeValues } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    width: 328px;\n    max-width: 90vw;\n    padding: 16px;\n    box-sizing: border-box;\n    border-radius: var(--sinch-comp-toast-shape-radius);\n    box-shadow: var(--sinch-comp-toast-shadow);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-success-default-background);\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-info-default-background);\n  }\n\n  #text {\n    padding: 4px 0 4px 4px;\n    flex: 1;\n    min-width: 0;\n    word-wrap: break-word;\n\n    --sinch-comp-text-font: var(--sinch-comp-toast-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-info-default-text);\n  }\n\n  #icon {\n    align-self: flex-start;\n    margin: 4px 0;\n  }\n\n  #icon-info,\n  #icon-success,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-info-default-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text" size="m"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
+const TIMEOUT = 5e3;
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Toast extends NectaryElement {
+class Toast extends NectaryElement {
   #$text;
   #tid = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
+    this.#$text = shadowRoot.querySelector("#text");
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute('aria-atomic', 'true');
-    this.setAttribute('aria-live', 'polite');
-    this.addEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.setAttribute("aria-atomic", "true");
+    this.setAttribute("aria-live", "polite");
+    this.addEventListener("-timeout", this.#onTimeoutReactHandler);
     this.#updateTimeout();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.removeEventListener("-timeout", this.#onTimeoutReactHandler);
     this.#clearTimeout();
   }
   static get observedAttributes() {
-    return ['text', 'persistent'];
+    return ["text", "persistent"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'text':
-        {
-          updateAttribute(this.#$text, name, newVal);
-          break;
-        }
-      case 'persistent':
-        {
-          this.#updateTimeout();
-          break;
-        }
+      case "text": {
+        updateAttribute(this.#$text, name, newVal);
+        break;
+      }
+      case "persistent": {
+        this.#updateTimeout();
+        break;
+      }
     }
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
+    return getLiteralAttribute(this, typeValues, "type");
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get persistent() {
-    return getBooleanAttribute(this, 'persistent');
+    return getBooleanAttribute(this, "persistent");
   }
   set persistent(isPersistent) {
-    updateBooleanAttribute(this, 'persistent', isPersistent);
+    updateBooleanAttribute(this, "persistent", isPersistent);
   }
   #updateTimeout() {
     if (this.persistent) {
@@ -72,7 +72,7 @@ export class Toast extends NectaryElement {
     }
   }
   #onTimeout = () => {
-    this.dispatchEvent(new CustomEvent('-timeout'));
+    this.dispatchEvent(new CustomEvent("-timeout"));
   };
   #clearTimeout() {
     if (this.#tid !== null) {
@@ -80,8 +80,11 @@ export class Toast extends NectaryElement {
       this.#tid = null;
     }
   }
-  #onTimeoutReactHandler = e => {
-    getReactEventHandler(this, 'on-timeout')?.(e);
+  #onTimeoutReactHandler = (e) => {
+    getReactEventHandler(this, "on-timeout")?.(e);
   };
 }
-defineCustomElement('sinch-toast', Toast);
+defineCustomElement("sinch-toast", Toast);
+export {
+  Toast
+};

package/toast/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
 export type TSinchToastProps = {
     /** Type */
@@ -38,3 +38,23 @@ export type TSinchToast = {
 };
 export type TSinchToastElement = NectaryComponentVanillaByType<TSinchToast>;
 export type TSinchToastReact = NectaryComponentReactByType<TSinchToast>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-toast': TSinchToast;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast': NectaryComponentVanilla<'sinch-toast'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-toast': NectaryComponentReact<'sinch-toast'>;
+        }
+    }
+}

package/toast/types.js

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

package/toast/utils.js

@@ -1 +1,4 @@
-export const typeValues = ['info', 'success', 'warn', 'error'];
+const typeValues = ["info", "success", "warn", "error"];
+export {
+  typeValues
+};

package/toast-manager/global/index.d.ts

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

package/toast-manager/global/index.js

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

package/toast-manager/index.d.ts

@@ -1,8 +1,9 @@
 import '../title';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchToastManagerOrigin, TSinchToastManager } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TSinchToastManagerOrigin } from './types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class ToastManager extends NectaryElement {
     #private;
     constructor();
@@ -14,23 +15,3 @@ export declare class ToastManager extends NectaryElement {
     nthActionRect(nth: number): TRect | null;
     nthCloseRect(nth: number): TRect | null;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-toast-manager': TSinchToastManager;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-toast-manager': NectaryComponentVanilla<'sinch-toast-manager'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
-        }
-    }
-}