@nectary/labs 2.5.39 → 2.5.40

package/color-select/index.js

@@ -1,96 +1,97 @@
-import '@nectary/components/color-menu';
-import '@nectary/components/color-menu-option';
-import '@nectary/components/color-swatch';
-import '@nectary/components/popover';
-import '@nectary/components/select-button';
-import { defineCustomElement, NectaryElement } from '../utils';
-import templateHTML from './template.html';
-const template = document.createElement('template');
+import "@nectary/components/color-menu";
+import "@nectary/components/color-menu-option";
+import "@nectary/components/color-swatch";
+import "@nectary/components/popover";
+import "@nectary/components/select-button";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<sinch-popover\n  aria-label="Select color"\n  orientation="bottom-right"\n  modal\n>\n  <sinch-select-button\n    slot="target"\n    placeholder="Select color"\n    aria-label="Open color select"\n  >\n    <sinch-color-swatch slot="icon"></sinch-color-swatch>\n  </sinch-select-button>\n  <sinch-color-menu\n    slot="content"\n    aria-label="Color menu"\n  >\n    <sinch-color-menu-option value="violet"></sinch-color-menu-option>\n  </sinch-color-menu>\n</sinch-popover>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ColorSelect extends NectaryElement {
-    #popover;
-    #selectButton;
-    #colorSwatch;
-    #colorMenu;
-    #controller = null;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#popover = shadowRoot.querySelector('sinch-popover');
-        this.#selectButton = shadowRoot.querySelector('sinch-select-button');
-        this.#colorSwatch = shadowRoot.querySelector('sinch-color-swatch');
-        this.#colorMenu = shadowRoot.querySelector('sinch-color-menu');
+class ColorSelect extends NectaryElement {
+  #popover;
+  #selectButton;
+  #colorSwatch;
+  #colorMenu;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#popover = shadowRoot.querySelector("sinch-popover");
+    this.#selectButton = shadowRoot.querySelector("sinch-select-button");
+    this.#colorSwatch = shadowRoot.querySelector("sinch-color-swatch");
+    this.#colorMenu = shadowRoot.querySelector("sinch-color-menu");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#selectButton.addEventListener("-click", this.#onOpen, { signal });
+    this.#popover.addEventListener("-close", this.#onClose, { signal });
+    this.#colorMenu.addEventListener("-change", this.#onChange, { signal });
+    this.#updateUI();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller?.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ["open", "value"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.#controller = new AbortController();
-        const { signal } = this.#controller;
-        this.#selectButton.addEventListener('-click', this.#onOpen, { signal });
-        this.#popover.addEventListener('-close', this.#onClose, { signal });
-        this.#colorMenu.addEventListener('-change', this.#onChange, { signal });
+    switch (name) {
+      case "open":
+      case "value": {
         this.#updateUI();
+        break;
+      }
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#controller?.abort();
-        this.#controller = null;
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(value) {
+    if (value) {
+      this.setAttribute("open", "");
+    } else {
+      this.removeAttribute("open");
     }
-    static get observedAttributes() {
-        return ['open', 'value'];
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(newValue) {
+    if (newValue !== "") {
+      this.setAttribute("value", newValue);
+    } else {
+      this.removeAttribute("value");
     }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            return;
-        }
-        switch (name) {
-            case 'open':
-            case 'value': {
-                this.#updateUI();
-                break;
-            }
-        }
+  }
+  #updateUI() {
+    if (!this.isDomConnected) {
+      return;
     }
-    get open() {
-        return this.hasAttribute('open');
-    }
-    set open(value) {
-        if (value) {
-            this.setAttribute('open', '');
-        }
-        else {
-            this.removeAttribute('open');
-        }
-    }
-    get value() {
-        return this.getAttribute('value') ?? '';
-    }
-    set value(newValue) {
-        if (newValue !== '') {
-            this.setAttribute('value', newValue);
-        }
-        else {
-            this.removeAttribute('value');
-        }
-    }
-    #updateUI() {
-        if (!this.isDomConnected) {
-            return;
-        }
-        this.#popover.toggleAttribute('open', this.open);
-        this.#selectButton.setAttribute('text', this.value);
-        this.#colorSwatch.setAttribute('name', this.value);
-        this.#colorMenu.setAttribute('value', this.value);
-    }
-    #onClose = () => {
-        this.open = false;
-    };
-    #onOpen = () => {
-        this.open = true;
-    };
-    #onChange = (e) => {
-        this.value = e.detail;
-        this.dispatchEvent(new CustomEvent('-change', { detail: e.detail }));
-    };
+    this.#popover.toggleAttribute("open", this.open);
+    this.#selectButton.setAttribute("text", this.value);
+    this.#colorSwatch.setAttribute("name", this.value);
+    this.#colorMenu.setAttribute("value", this.value);
+  }
+  #onClose = () => {
+    this.open = false;
+  };
+  #onOpen = () => {
+    this.open = true;
+  };
+  #onChange = (e) => {
+    this.value = e.detail;
+    this.dispatchEvent(new CustomEvent("-change", { detail: e.detail }));
+  };
 }
-defineCustomElement('sinch-labs-color-select', ColorSelect);
+defineCustomElement("sinch-labs-color-select", ColorSelect);
+export {
+  ColorSelect
+};

package/imports.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 declare module '*.html' {
   const value: string
   export default value

package/index.js

@@ -1,5 +1,6 @@
-/// Nectary Labs
-// Import to register the phone preview RCS channel web component
-import './phone-preview-rcs-channel';
-import './phone-preview-rcs-chat-message';
-export default {};
+import "./phone-preview-rcs-channel/index.js";
+import "./phone-preview-rcs-chat-message/index.js";
+const index = {};
+export {
+  index as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/labs",
-  "version": "2.5.39",
+  "version": "2.5.40",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -15,16 +15,17 @@
     "access": "public"
   },
   "scripts": {
-    "build": "NODE_ENV=production && rimraf lib/ && tsc"
+    "build": "vite build && npx tsc --declaration --emitDeclarationOnly",
+    "dev": "vite build --watch"
   },
   "dependencies": {
     "@nectary/components": "5.15.4"
   },
   "devDependencies": {
-    "@types/node": "^18.17.17",
+    "@types/node": "22.12.0",
     "@types/react": "^18.2.21",
-    "rimraf": "^3.0.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "glob": "^11.0.1",
+    "typescript": "^5.2.2",
+    "vite": "^7.0.6"
   }
 }

package/phone-preview/index.js

@@ -1,94 +1,86 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-import templateHTML from './template.html';
-const template = document.createElement('template');
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:where(*, *::before, *::after) {\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  font: inherit;\n}\n\n:host {\n  --base-size: 288px; /* 18rem */\n  --aspect-ratio: 1 / 2.1;\n  --scale: 1;\n\n  inline-size: min(100%, var(--base-size));\n  aspect-ratio: var(--aspect-ratio);\n  overflow: hidden;\n  display: block;\n}\n\nsection {\n  position: relative;\n  inline-size: var(--base-size);\n  aspect-ratio: var(--aspect-ratio);\n  scale: var(--scale);\n  transform-origin: top left;\n  overflow: hidden;\n  display: flex;\n  flex-flow: column;\n  padding: 12px;\n  border: 1px solid var(--sinch-sys-color-border-strong);\n  border-radius: 32px;\n  background: var(--sinch-sys-color-surface-primary-default);\n}\n\nsection > header {\n  position: sticky;\n  inset-block-start: 0;\n  display: flex;\n  justify-content: space-between;\n  padding: 16px;\n  background: var(--sinch-sys-color-surface-primary-default);\n  font: var(--sinch-sys-font-body-xxs);\n}\n\nsection > header > svg {\n  inline-size: 48px;\n}\n\nsection > div {\n  flex: 1;\n  overflow-y: auto;\n  scrollbar-width: none;\n  border-end-start-radius: 16px;\n  border-end-end-radius: 16px;\n}\n</style>\n<section>\n  <header>\n    <span id="clock"></span>\n    <svg viewBox="0 0 50 12">\n      <path\n        d="M13.2 2.4h-.7c-.4 0-.7.3-.7.7v6.2c0 .4.3.8.7.8h.7c.4 0 .7-.4.7-.8V3.1c0-.4-.3-.7-.7-.7ZM9.4 4.2h.6c.4 0 .7.3.7.7v4.5c0 .3-.3.7-.7.7h-.6c-.4 0-.7-.4-.7-.7V4.9c0-.4.3-.7.7-.7ZM6.9 6h-.7c-.4 0-.7.3-.7.7v2.7c0 .4.3.7.7.7h.7c.4 0 .7-.3.7-.7V6.7c0-.4-.3-.7-.7-.7ZM3.7 7.3H3c-.3 0-.6.4-.6.7v1.4c0 .4.3.7.6.7h.7c.4 0 .7-.3.7-.7V8c0-.3-.3-.7-.7-.7Zm19.4-3.7c1.7 0 3.3.7 4.5 1.8h.3l.8-.9.1-.1-.1-.2a8 8 0 0 0-11.1 0l-.1.2.1.1.8.9h.3a6.7 6.7 0 0 1 4.4-1.8Zm0 2.8a4 4 0 0 1 2.5 1h.3l.9-.9v-.3a5.4 5.4 0 0 0-7.3 0v.3l.9.9h.3c.7-.6 1.5-1 2.4-1Zm1.8 1.9-.1.2-1.5 1.5-.2.1-.1-.1-1.5-1.5-.1-.2.1-.1c1-.8 2.3-.8 3.3 0l.1.1Z"\n      />\n      <rect width="12.6" height="5.4" x="33.3" y="3.5" rx=".9" />\n      <path fill="#999" d="M48 4.9v2.7c.5-.3.9-.8.9-1.4 0-.6-.4-1.1-.9-1.3Z" />\n      <path\n        fill="none"\n        stroke="#999"\n        stroke-width=".7"\n        d="M32.3 4.4a2 2 0 0 1 1.9-1.9H45c1.1 0 2 .9 2 1.9V8c0 1.1-.9 1.9-2 1.9H34.2c-1 0-1.9-.8-1.9-1.9V4.4Z"\n      />\n    </svg>\n  </header>\n  <div>\n    <slot></slot>\n  </div>\n</section>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-/**
- * Container for channel previews in a styled phone container.
- * This container uses a custom scaling where the internal elements are scaled to fit the container from a fixed size.
- * Because of the fixed size, absolute units (px) are preferred over relative units (rem, em) for the internal elements.
- *
- * @param props.locale Clock locale.
- * @param props.clock Clock `Intl.DateTimeFormat` options.
- * @param props.children Content to display in the phone container.
- */
-export class PhonePreview extends NectaryElement {
-    #clockElement;
-    #resizeObserver;
-    #clockInterval = null;
-    #formatter;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#clockElement = shadowRoot.querySelector('#clock');
-        this.#resizeObserver = new ResizeObserver(() => {
-            this.#updateScale();
-        });
-        this.#formatter = new Intl.DateTimeFormat(this.locale, this.clockOptions);
+class PhonePreview extends NectaryElement {
+  #clockElement;
+  #resizeObserver;
+  #clockInterval = null;
+  #formatter;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#clockElement = shadowRoot.querySelector("#clock");
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#updateScale();
+    });
+    this.#formatter = new Intl.DateTimeFormat(this.locale, this.clockOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const section = this.shadowRoot.querySelector("section");
+    this.#resizeObserver.observe(this);
+    this.#resizeObserver.observe(section);
+    this.#startClock();
+    this.#updateClock();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#resizeObserver.disconnect();
+    this.#stopClock();
+  }
+  static get observedAttributes() {
+    return ["locale", "clock"];
+  }
+  attributeChangedCallback() {
+    this.#formatter = new Intl.DateTimeFormat(this.locale, this.clockOptions);
+    this.#updateClock();
+  }
+  get locale() {
+    return this.getAttribute("locale") ?? "en-US";
+  }
+  set locale(value) {
+    this.setAttribute("locale", value);
+  }
+  get clockOptions() {
+    const clockAttr = this.getAttribute("clock");
+    if (clockAttr !== null && clockAttr !== "") {
+      try {
+        return JSON.parse(clockAttr);
+      } catch {
+      }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        const section = this.shadowRoot.querySelector('section');
-        this.#resizeObserver.observe(this);
-        this.#resizeObserver.observe(section);
-        this.#startClock();
-        this.#updateClock();
+    return { hour: "2-digit", minute: "2-digit" };
+  }
+  set clockOptions(value) {
+    this.setAttribute("clock", JSON.stringify(value));
+  }
+  #updateScale() {
+    const style = getComputedStyle(this);
+    const baseSize = parseFloat(style.getPropertyValue("--base-size"));
+    const currentSize = this.getBoundingClientRect().width;
+    this.style.setProperty("--scale", `${currentSize / baseSize}`);
+  }
+  #startClock() {
+    this.#stopClock();
+    this.#clockInterval = window.setInterval(() => {
+      this.#updateClock();
+    }, 6e4);
+  }
+  #stopClock() {
+    if (this.#clockInterval !== null) {
+      clearInterval(this.#clockInterval);
+      this.#clockInterval = null;
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#resizeObserver.disconnect();
-        this.#stopClock();
-    }
-    static get observedAttributes() {
-        return ['locale', 'clock'];
-    }
-    attributeChangedCallback() {
-        this.#formatter = new Intl.DateTimeFormat(this.locale, this.clockOptions);
-        this.#updateClock();
-    }
-    get locale() {
-        return this.getAttribute('locale') ?? 'en-US';
-    }
-    set locale(value) {
-        this.setAttribute('locale', value);
-    }
-    get clockOptions() {
-        const clockAttr = this.getAttribute('clock');
-        if (clockAttr !== null && clockAttr !== '') {
-            try {
-                return JSON.parse(clockAttr);
-            }
-            catch {
-                // Fallback to default if JSON parsing fails
-            }
-        }
-        return { hour: '2-digit', minute: '2-digit' };
-    }
-    set clockOptions(value) {
-        this.setAttribute('clock', JSON.stringify(value));
-    }
-    #updateScale() {
-        const style = getComputedStyle(this);
-        const baseSize = parseFloat(style.getPropertyValue('--base-size'));
-        const currentSize = this.getBoundingClientRect().width;
-        this.style.setProperty('--scale', `${currentSize / baseSize}`);
-    }
-    #startClock() {
-        this.#stopClock();
-        this.#clockInterval = window.setInterval(() => {
-            this.#updateClock();
-        }, 60000);
-    }
-    #stopClock() {
-        if (this.#clockInterval !== null) {
-            clearInterval(this.#clockInterval);
-            this.#clockInterval = null;
-        }
-    }
-    #updateClock() {
-        if (this.isDomConnected) {
-            this.#clockElement.textContent = this.#formatter.format(new Date());
-        }
+  }
+  #updateClock() {
+    if (this.isDomConnected) {
+      this.#clockElement.textContent = this.#formatter.format(/* @__PURE__ */ new Date());
     }
+  }
 }
-defineCustomElement('sinch-labs-phone-preview', PhonePreview);
+defineCustomElement("sinch-labs-phone-preview", PhonePreview);
+export {
+  PhonePreview
+};