@nectary/components 4.12.0 → 4.12.1

package/popover/index.d.ts

@@ -1,7 +1,7 @@
 import '../pop';
 import { NectaryElement } from '../utils';
-import type { TSinchPopoverOrientation } from './types';
-export * from './types';
+import type { TSinchPopoverOrientation, TSinchPopover } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Popover extends NectaryElement {
     #private;
     constructor();
@@ -20,3 +20,23 @@ export declare class Popover extends NectaryElement {
     get footprintRect(): import("../types").TRect;
     get popoverRect(): import("../types").TRect;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-popover': TSinchPopover;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-popover': NectaryComponentVanilla<'sinch-popover'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
+        }
+    }
+}

package/popover/index.js

@@ -1,15 +1,11 @@
-import "../pop/index.js";
-import { subscribeContext } from "../utils/context.js";
-import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, setClass } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { rectOverlap } from "../utils/rect.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { getPopOrientation, orientationValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: contents;\n}\n\n#content-wrapper {\n  position: relative;\n  padding-top: 4px;\n  width: fit-content;\n  min-width: 100%;\n}\n\n:host([tip]) #content-wrapper {\n  padding-top: 12px;\n  filter: drop-shadow(var(--sinch-comp-popover-shadow));\n}\n\n:host([orientation^="top"]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 4px;\n}\n\n:host([orientation^="top"][tip]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 12px;\n}\n\n#content {\n  background-color: var(--sinch-comp-popover-color-default-background-initial);\n  border: 1px solid var(--sinch-comp-popover-color-default-border-initial);\n  border-radius: var(--sinch-comp-popover-shape-radius);\n  box-shadow: var(--sinch-comp-popover-shadow);\n  overflow: hidden;\n}\n\n:host([tip]) #content {\n  box-shadow: none;\n}\n\n#tip {\n  position: absolute;\n  left: 50%;\n  top: 13px;\n  transform: translateX(-50%) rotate(180deg);\n  transform-origin: top center;\n  fill: var(--sinch-comp-popover-color-default-background-initial);\n  stroke: var(--sinch-comp-popover-color-default-border-initial);\n  stroke-linecap: square;\n  pointer-events: none;\n  display: none;\n}\n\n:host([orientation^="top"]) #tip {\n  transform: translateX(-50%) rotate(0deg);\n  top: calc(100% - 13px);\n}\n\n:host([tip]) #tip:not(.hidden) {\n  display: block;\n}\n</style>\n\n<sinch-pop id="pop" inset="4">\n  <slot name="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <slot name="content"></slot>\n    </div>\n    <svg id="tip" width="16" height="9" aria-hidden="true">\n      <path d="m0 0 8 8 8 -8"/>\n    </svg>\n  </div>\n</sinch-pop>\n';
+import '../pop';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, subscribeContext, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+import { getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;
-const template = document.createElement("template");
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Popover extends NectaryElement {
+export class Popover extends NectaryElement {
   #$pop;
   #$content;
   #$tip;
@@ -19,17 +15,23 @@ class Popover extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$pop = shadowRoot.querySelector("#pop");
-    this.#$content = shadowRoot.querySelector("#content");
-    this.#$tip = shadowRoot.querySelector("#tip");
+    this.#$pop = shadowRoot.querySelector('#pop');
+    this.#$content = shadowRoot.querySelector('#content');
+    this.#$tip = shadowRoot.querySelector('#tip');
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const { signal } = this.#controller;
-    this.addEventListener("-close", this.#onCloseReactHandler, { signal });
-    this.#$pop.addEventListener("-close", this.#onPopClose, { signal });
-    subscribeContext(this.#$content, "visibility", this.#onContextVisibility, signal);
-    updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+    const {
+      signal
+    } = this.#controller;
+    this.addEventListener('-close', this.#onCloseReactHandler, {
+      signal
+    });
+    this.#$pop.addEventListener('-close', this.#onPopClose, {
+      signal
+    });
+    subscribeContext(this.#$content, 'visibility', this.#onContextVisibility, signal);
+    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
     this.#resizeObserver = new ResizeObserver(() => {
       if (this.#$pop.open) {
         this.#updateContentMaxWidth();
@@ -44,71 +46,68 @@ class Popover extends NectaryElement {
     this.#resizeObserver = null;
   }
   static get observedAttributes() {
-    return [
-      "orientation",
-      "open",
-      "modal",
-      "tip",
-      "aria-label",
-      "aria-description"
-    ];
+    return ['orientation', 'open', 'modal', 'tip', 'aria-label', 'aria-description'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case "orientation": {
-        updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
-        if (this.#$pop.open) {
-          this.#updateTipOrientation();
+      case 'orientation':
+        {
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+          if (this.#$pop.open) {
+            this.#updateTipOrientation();
+          }
+          break;
         }
-        break;
-      }
-      case "tip": {
-        const hasTip = isAttrTrue(newVal);
-        if (hasTip && this.#$pop.open) {
-          this.#updateTipOrientation();
+      case 'tip':
+        {
+          const hasTip = isAttrTrue(newVal);
+          if (hasTip && this.#$pop.open) {
+            this.#updateTipOrientation();
+          }
+          updateBooleanAttribute(this, name, hasTip);
+          break;
+        }
+      case 'modal':
+      case 'open':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'aria-label':
+      case 'aria-description':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          break;
         }
-        updateBooleanAttribute(this, name, hasTip);
-        break;
-      }
-      case "modal":
-      case "open": {
-        updateAttribute(this.#$pop, name, newVal);
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
-      case "aria-label":
-      case "aria-description": {
-        updateAttribute(this.#$pop, name, newVal);
-        break;
-      }
     }
   }
   set modal(isModal) {
-    updateBooleanAttribute(this, "modal", isModal);
+    updateBooleanAttribute(this, 'modal', isModal);
   }
   get modal() {
-    return getBooleanAttribute(this, "modal");
+    return getBooleanAttribute(this, 'modal');
   }
   set open(isOpen) {
-    updateBooleanAttribute(this, "open", isOpen);
+    updateBooleanAttribute(this, 'open', isOpen);
   }
   get open() {
-    return getBooleanAttribute(this, "open");
+    return getBooleanAttribute(this, 'open');
   }
   set tip(hasTip) {
-    updateBooleanAttribute(this, "tip", hasTip);
+    updateBooleanAttribute(this, 'tip', hasTip);
   }
   get tip() {
-    return getBooleanAttribute(this, "tip");
+    return getBooleanAttribute(this, 'tip');
   }
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, "orientation", "bottom-left");
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
   }
   set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, "orientation", value);
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
   get footprintRect() {
     return this.#$pop.footprintRect;
@@ -119,16 +118,14 @@ class Popover extends NectaryElement {
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };
-  #onCloseReactHandler = (e) => {
-    getReactEventHandler(this, "onClose")?.();
-    getReactEventHandler(this, "on-close")?.(e);
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
   };
   #dispatchCloseEvent() {
-    this.dispatchEvent(
-      new CustomEvent("-close")
-    );
+    this.dispatchEvent(new CustomEvent('-close'));
   }
-  #onContextVisibility = (e) => {
+  #onContextVisibility = e => {
     if (e.detail) {
       this.#updateTipOrientation();
       this.#updateContentMaxWidth();
@@ -137,8 +134,8 @@ class Popover extends NectaryElement {
     }
   };
   #resetTipOrientation() {
-    this.#$tip.style.top = "";
-    this.#$tip.style.left = "";
+    this.#$tip.style.top = '';
+    this.#$tip.style.left = '';
   }
   #updateTipOrientation = () => {
     const orientation = this.orientation;
@@ -146,24 +143,20 @@ class Popover extends NectaryElement {
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
     let desiredX = diffX + targetRect.width / 2;
-    if (orientation === "bottom-left" || orientation === "top-left") {
+    if (orientation === 'bottom-left' || orientation === 'top-left') {
       desiredX = Math.max(desiredX, contentRect.width * 0.75);
     }
-    if (orientation === "bottom-right" || orientation === "top-right") {
+    if (orientation === 'bottom-right' || orientation === 'top-right') {
       desiredX = Math.min(desiredX, contentRect.width * 0.25);
     }
     const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
     this.#$tip.style.left = `${xPos}px`;
-    setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
+    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
-  // Prevent content from overflowing the viewport
   #updateContentMaxWidth = () => {
     const contentRect = this.#$content.getBoundingClientRect();
     const availableSpace = window.innerWidth - contentRect.left - 16;
     this.#$content.style.maxWidth = `${availableSpace}px`;
   };
 }
-defineCustomElement("sinch-popover", Popover);
-export {
-  Popover
-};
+defineCustomElement('sinch-popover', Popover);

package/popover/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top';
 export type TSinchPopoverProps = {
     /** Open/close state */
@@ -31,23 +31,3 @@ export type TSinchPopover = {
 };
 export type TSinchPopoverElement = NectaryComponentVanillaByType<TSinchPopover>;
 export type TSinchPopoverReact = NectaryComponentReactByType<TSinchPopover>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-popover': TSinchPopover;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-popover': NectaryComponentVanilla<'sinch-popover'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-popover': NectaryComponentReact<'sinch-popover'>;
-        }
-    }
-}

package/popover/types.js

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

package/popover/utils.js

@@ -1,21 +1,10 @@
-const orientationValues = [
-  "top-left",
-  "top-right",
-  "bottom-left",
-  "bottom-right",
-  "bottom",
-  "top"
-];
-const getPopOrientation = (orientation) => {
-  if (orientation === "top") {
-    return "top-stretch";
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];
+export const getPopOrientation = orientation => {
+  if (orientation === 'top') {
+    return 'top-stretch';
   }
-  if (orientation === "bottom") {
-    return "bottom-stretch";
+  if (orientation === 'bottom') {
+    return 'bottom-stretch';
   }
   return orientation;
-};
-export {
-  getPopOrientation,
-  orientationValues
-};
+};

package/progress/index.d.ts

@@ -1,6 +1,7 @@
 import '../text';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchProgress } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class Progress extends NectaryElement {
     #private;
     constructor();
@@ -12,3 +13,23 @@ export declare class Progress extends NectaryElement {
     get detailed(): boolean;
     set detailed(isDetailed: boolean);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-progress': TSinchProgress;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress': NectaryComponentVanilla<'sinch-progress'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
+        }
+    }
+}

package/progress/index.js

@@ -1,57 +1,60 @@
-import "../text/index.js";
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, attrValueToInteger, getIntegerAttribute, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  align-items: center;\n  height: 24px;\n}\n\n#progress,\n#bar {\n  height: 8px;\n  border-radius: 4px;\n}\n\n#progress {\n  background-color: var(--sinch-comp-progress-color-default-background-initial);\n  flex: 1;\n  min-width: 0;\n}\n\n#bar {\n  background-color: var(--sinch-comp-progress-color-default-bar-initial);\n  width: 0;\n}\n\n#text {\n  display: none;\n  width: 46px;\n\n  --sinch-global-color-text: var(--sinch-comp-progress-color-default-text-initial);\n}\n\n:host([detailed]) #text {\n  display: block;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="text" type="m"></sinch-text>\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+import '../text';
+import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-comp-progress-color-default-background-initial);flex:1;min-width:0}#bar{background-color:var(--sinch-comp-progress-color-default-bar-initial);width:0}#text{display:none;width:46px;--sinch-global-color-text:var(--sinch-comp-progress-color-default-text-initial)}:host([detailed]) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
+const template = document.createElement('template');
 template.innerHTML = templateHTML;
-class Progress extends NectaryElement {
+export class Progress extends NectaryElement {
   #$bar;
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$bar = shadowRoot.querySelector("#bar");
-    this.#$text = shadowRoot.querySelector("#text");
+    this.#$bar = shadowRoot.querySelector('#bar');
+    this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.setAttribute("role", "progressbar");
+    this.setAttribute('role', 'progressbar');
   }
   static get observedAttributes() {
-    return ["value", "detailed"];
+    return ['value', 'detailed'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "value": {
-        const int = attrValueToInteger(newVal, { min: 0, max: 100 }) ?? 0;
-        this.#$bar.style.width = `${int}%`;
-        this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
-        this.setAttribute("valuenow", int !== null ? String(int) : "0");
-        break;
-      }
-      case "detailed": {
-        if (isAttrEqual(oldVal, newVal)) {
+      case 'value':
+        {
+          const int = attrValueToInteger(newVal, {
+            min: 0,
+            max: 100
+          }) ?? 0;
+          this.#$bar.style.width = `${int}%`;
+          this.#$text.textContent = Intl.NumberFormat(navigator.language, {
+            style: 'percent'
+          }).format(int / 100);
+          this.setAttribute('valuenow', int !== null ? String(int) : '0');
+          break;
+        }
+      case 'detailed':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
           break;
         }
-        updateBooleanAttribute(this, name, isAttrTrue(newVal));
-        break;
-      }
     }
   }
   get value() {
-    return getIntegerAttribute(this, "value", 0);
+    return getIntegerAttribute(this, 'value', 0);
   }
   set value(value) {
-    updateAttribute(this, "value", value);
+    updateAttribute(this, 'value', value);
   }
   get detailed() {
-    return getBooleanAttribute(this, "detailed");
+    return getBooleanAttribute(this, 'detailed');
   }
   set detailed(isDetailed) {
-    updateBooleanAttribute(this, "detailed", isDetailed);
+    updateBooleanAttribute(this, 'detailed', isDetailed);
   }
 }
-defineCustomElement("sinch-progress", Progress);
-export {
-  Progress
-};
+defineCustomElement('sinch-progress', Progress);

package/progress/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchProgressProps = {
     value: number;
     detailed?: boolean;
@@ -15,23 +15,3 @@ export type TSinchProgress = {
 };
 export type TSinchProgressElement = NectaryComponentVanillaByType<TSinchProgress>;
 export type TSinchProgressReact = NectaryComponentReactByType<TSinchProgress>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-progress': TSinchProgress;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-progress': NectaryComponentVanilla<'sinch-progress'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-progress': NectaryComponentReact<'sinch-progress'>;
-        }
-    }
-}

package/progress/types.js

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

package/progress-stepper/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchProgressStepper } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class ProgressStepper extends NectaryElement {
     #private;
     constructor();
@@ -14,3 +14,23 @@ export declare class ProgressStepper extends NectaryElement {
     get progressValue(): string;
     nthOptionRect(index: number): TRect | null;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-progress-stepper': TSinchProgressStepper;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress-stepper': NectaryComponentVanilla<'sinch-progress-stepper'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress-stepper': NectaryComponentReact<'sinch-progress-stepper'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-progress-stepper': NectaryComponentReact<'sinch-progress-stepper'>;
+        }
+    }
+}