@nectary/labs 2.1.1 → 2.1.2

package/color-select.d.ts

@@ -0,0 +1,32 @@
+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 { LitElement } from 'lit';
+export declare class ColorSelect extends LitElement {
+    accessor open: boolean;
+    accessor value: string;
+    onClose(): void;
+    onOpen(): void;
+    onChange(e: CustomEvent<string>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare const ScopedColorSelect_base: typeof LitElement;
+export declare class ScopedColorSelect extends ScopedColorSelect_base {
+    static elementDefinitions: {
+        'sinch-color-select': typeof ColorSelect;
+    };
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-color-select': {};
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-labs-color-select': {};
+    }
+}
+export {};

package/color-select.js

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
+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 { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { defineCustomElement } from './utils';
+let ColorSelect = class ColorSelect extends LitElement {
+    accessor open = false;
+    accessor value = '';
+    onClose() {
+        this.open = false;
+    }
+    onOpen() {
+        this.open = true;
+    }
+    onChange(e) {
+        this.value = e.detail;
+    }
+    render() {
+        return html `
+      <sinch-popover
+        ?open=${this.open}
+        aria-label="Select color"
+        orientation="bottom-right"
+        modal
+        @-close=${this.onClose}
+      >
+        <sinch-select-button
+          slot="target"
+          text=${this.value}
+          placeholder="Select color"
+          aria-label="Open color select"
+          @-click=${this.onOpen}
+        >
+          <sinch-color-swatch slot="icon" name="${this.value}" />
+        </sinch-select-button>
+        <sinch-color-menu
+          slot="content"
+          value=${this.value}
+          aria-label="Color menu"
+          @-change=${this.onChange}
+        >
+          <sinch-color-menu-option value="violet" />
+        </sinch-color-menu>
+        </sinch-popover>
+        </sinch-color-menu></sinch-popover>
+    `;
+    }
+};
+__decorate([
+    property({ type: 'boolean' })
+], ColorSelect.prototype, "open", null);
+__decorate([
+    property()
+], ColorSelect.prototype, "value", null);
+ColorSelect = __decorate([
+    customElement('sinch-color-select')
+], ColorSelect);
+export { ColorSelect };
+export class ScopedColorSelect extends ScopedRegistryHost(LitElement) {
+    // Elements here will be registered against the tag names provided only
+    // in the shadow root for this element
+    static { this.elementDefinitions = {
+        'sinch-color-select': ColorSelect,
+    }; }
+    render() {
+        return html `<sinch-color-select></sinch-color-select>`;
+    }
+}
+defineCustomElement('sinch-labs-color-select', ScopedColorSelect);

package/imports.d.ts

@@ -0,0 +1,9 @@
+declare module '*.html' {
+  const value: string
+  export default value
+}
+
+declare module '*.svg' {
+  const value: string
+  export default value
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/index.js

@@ -0,0 +1,2 @@
+/// Nectary Labs
+export default {};

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@nectary/labs",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "files": [
-    "lib/"
+    "**/*/*.css",
+    "**/*/*.json",
+    "**/*/*.js",
+    "**/*/*.d.ts",
+    "*.d.ts",
+    "*.js"
   ],
   "publishConfig": {
     "access": "public"

package/phone-preview-rcs-channel.d.ts

@@ -0,0 +1,47 @@
+import '@nectary/components/icon';
+/**
+ * RCS channel preview component.
+ *
+ * @param props.color Brand color, used in the banner (if no image provided) and tabs.
+ * @param props.name Brand name.
+ * @param props.description Brand description.
+ * @param props.banner Brand banner image.
+ * @param props.logo Brand logo image.
+ * @param props.phone Brand phone numbers.
+ * @param props.website Brand website URLs.
+ * @param props.email Brand email addresses.
+ */
+export declare const RcsChannelPreview: (props: {
+    name: string;
+    description: string;
+    color: string;
+    banner: string;
+    logo: string;
+    phones: {
+        label: string;
+        number: string;
+    }[];
+    websites: {
+        label: string;
+        url: string;
+    }[];
+    emails: {
+        label: string;
+        address: string;
+    }[];
+}) => Node | Node[];
+type Props = Partial<Parameters<typeof RcsChannelPreview>[0]>;
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-channel': ElementProps & HTMLElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-channel': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

package/phone-preview-rcs-channel.js

@@ -0,0 +1,319 @@
+import '@nectary/components/icon';
+import { customElement } from 'solid-element';
+import { createSignal, For } from 'solid-js';
+import html from 'solid-js/html';
+import pkg from './package.json';
+import { defineCustomElement } from './utils';
+const style = `
+:where(*, *::before, *::after) {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+}
+
+.root {
+  --banner-color: var(--sinch-sys-color-surface-tertiary-active);
+  --logo-color: var(--sinch-sys-color-surface-secondary-default);
+  display: flex;
+  flex-flow: column;
+  color: var(--sinch-sys-color-text-default);
+
+  & > img:first-of-type {
+    block-size: 70px;
+    margin-block-end: -40px;
+    background: var(--banner-color);
+  }
+
+  & > img:last-of-type {
+    block-size: 64px;
+    inline-size: 64px;
+    border-radius: 100%;
+    background: var(--logo-color);
+    align-self: center;
+  }
+
+  & > h1 {
+    padding: 8px 24px;
+    font: var(--sinch-sys-font-body-m);
+    text-align: center;
+    text-wrap: balance;
+    word-wrap: break-word;
+  }
+
+  & > p {
+    padding-inline: 24px;
+    font: var(--sinch-sys-font-body-xs);
+    text-align: center;
+    text-wrap: balance;
+    word-wrap: break-word;
+  }
+
+  & > .actions {
+    align-self: center;
+    padding-block: 32px 24px;
+  }
+
+  & > .tabs {
+    padding-block-end: 8px;
+  }
+}
+
+.actions {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: 24px;
+  font: var(--sinch-sys-font-body-xs);
+
+  & > a {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    gap: 2px;
+    color: inherit;
+    text-decoration: none;
+
+    &[inert] {
+      --sinch-global-color-icon: currentColor;
+      color: var(--sinch-sys-color-text-muted);
+    }
+  }
+}
+
+
+.info {
+  display: flex;
+  flex-flow: column;
+  font: var(--sinch-sys-font-body-xs);
+
+  & > a {
+    display: grid;
+    grid-template:
+      "icon contact" auto
+      "icon label  " auto
+      / auto 1fr;
+    align-items: center;
+    gap: 0 16px;
+    padding: 8px 16px;
+    border-block-end: 1px solid
+      var(--sinch-sys-color-surface-secondary-active);
+    color: currentColor;
+    word-break: break-all;
+    text-decoration: none;
+
+    & > sinch-icon {
+      grid-area: icon;
+    }
+
+    & > span {
+      grid-area: contact;
+
+      &::before {
+        content: "\\200b";
+      }
+    }
+
+    & > p {
+      grid-area: label;
+
+      &::before {
+        content: "\\200b";
+      }
+    }
+
+    &[inert] {
+      --sinch-global-color-icon: currentColor;
+      color: var(--sinch-sys-color-text-muted);
+    }
+  }
+}
+
+.tabs {
+  --highlight-color: var(--sinch-sys-color-text-default);
+  display: flex;
+
+  & > button {
+    flex: 1;
+    padding-block-end: 10px;
+    border-block-end: 2px solid transparent;
+    outline: none;
+    background: transparent;
+    color: var(--sinch-sys-color-text-disabled);
+    font: var(--sinch-sys-font-desktop-title-xs);
+
+    &.active {
+      color: var(--sinch-sys-color-primary-default);
+      border-block-end: 2px solid var(--highlight-color);
+    }
+  }
+}
+
+
+.options {
+  display: flex;
+  flex-flow: column;
+  font: var(--sinch-sys-font-body-xs);
+
+  & > header {
+    padding-block-end: 8px;
+  }
+
+  & > span {
+    font: var(--sinch-sys-font-body-xxs);
+  }
+
+  & > button {
+    padding: 4px;
+    outline: none;
+    background: transparent;
+    text-align: start;
+  }
+
+  & > hr {
+    border-color: var(--sinch-sys-color-surface-secondary-active);
+  }
+}
+`;
+const Actions = (props) => {
+    const number = () => props.phones.at(0)?.number ?? '';
+    const url = () => props.websites.at(0)?.url ?? '';
+    const email = () => props.emails.at(0)?.address ?? '';
+    const numberHref = () => `tel:${number()}`;
+    const urlHref = url;
+    const emailHref = () => `mailto:${email()}`;
+    return html `
+    <section class="actions">
+      <a inert=${() => number() === ''} target="_blank" href=${numberHref}>
+        <sinch-icon name="call" />
+        Call
+      </a>
+      <a inert=${() => url() === ''} target="_blank" href=${urlHref}>
+        <sinch-icon name="public" />
+        Website
+      </a>
+      <a inert=${() => email() === ''} target="_blank" href=${emailHref}>
+        <sinch-icon name="mail" />
+        Email
+      </a>
+    </section>
+  `;
+};
+const Info = (props) => {
+    const phones = () => ((props.phones.length > 0)
+        ? props.phones
+        : [{ label: 'Contact us', number: '+1234567890' }]);
+    const websites = () => ((props.websites.length > 0)
+        ? props.websites
+        : [{ label: 'Contact us', url: 'https://company.com' }]);
+    const emails = () => ((props.emails.length > 0)
+        ? props.emails
+        : [{ label: 'Contact us', address: 'mail@company.com' }]);
+    return html `
+    <section class="info">
+      <${For} each=${phones}>
+        ${({ label, number }) => html `
+          <a
+            inert=${() => props.phones.length === 0}
+            target="_blank"
+            href=${`tel:${number}`}
+          >
+            <sinch-icon name="call" />
+            <span>${number}</span>
+            <p>${label}</p>
+          </a>
+        `}
+      <//>
+      <${For} each=${websites}>
+        ${({ label, url }) => html `
+          <a inert=${() => props.websites.length === 0} target="_blank" href=${url}>
+            <sinch-icon name="public" />
+            <span>${url}</span>
+            <p>${label}</p>
+          </a>
+        `}
+      <//>
+      <${For} each=${emails}>
+        ${({ label, address }) => html `
+          <a
+            inert=${() => props.emails.length === 0}
+            target="_blank"
+            href=${`mailto:${address}`}
+          >
+            <sinch-icon name="mail" />
+            <span>${address}</span>
+            <p>${label}</p>
+          </a>
+        `}
+      <//>
+    </section>
+  `;
+};
+const Tabs = (props) => html `
+  <section class="tabs" style=${() => ({ '--highlight-color': props.color })}>
+    <${For} each=${['Info', 'Options']}>
+      ${(label, i) => html `
+        <button
+          class=${() => (i() === props.tab ? 'active' : '')}
+          on:click=${() => props.onTab?.(i())}
+        >
+          ${label}
+        </button>
+      `}
+    <//>
+  </section>
+`;
+const Options = () => html `
+  <section class="options">
+    <header>Notifications</header>
+    <span>Business</span>
+    <button>Block & report spam</button>
+    <hr />
+    <button>View Privacy Policy</button>
+    <hr />
+    <button>View Terms of Service</button>
+    <hr />
+    <button>Learn mode</button>
+  </section>
+`;
+/**
+ * RCS channel preview component.
+ *
+ * @param props.color Brand color, used in the banner (if no image provided) and tabs.
+ * @param props.name Brand name.
+ * @param props.description Brand description.
+ * @param props.banner Brand banner image.
+ * @param props.logo Brand logo image.
+ * @param props.phone Brand phone numbers.
+ * @param props.website Brand website URLs.
+ * @param props.email Brand email addresses.
+ */
+export const RcsChannelPreview = (props) => {
+    const [tab, setTab] = createSignal(0);
+    const transparentIcon = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+    return html `
+    <style>
+      ${style}
+    </style>
+    <section class="root" style=${() => ({ '--banner-color': props.color })}>
+      <img src=${() => (props.banner !== '' ? props.banner : transparentIcon)} alt="" />
+      <img src=${() => (props.logo !== '' ? props.logo : transparentIcon)} alt="" />
+      <h1>${() => (props.name !== '' ? props.name : 'Brand name')}</h1>
+      <p>${() => (props.description !== '' ? props.description : 'Brand description')}</p>
+      <${Actions} ...${props} />
+      <${Tabs} color=${() => props.color} tab=${tab} onTab=${setTab} />
+      ${() => (tab() === 0 ? html `<${Info} ...${props} />` : html `<${Options} />`)}
+    </section>
+  `;
+};
+defineCustomElement('sinch-labs-phone-preview-rcs-channel', customElement(`sinch-labs-phone-preview-rcs-channel-${pkg.version}`, {
+    name: '',
+    description: '',
+    color: '',
+    banner: '',
+    logo: '',
+    phones: [],
+    websites: [],
+    emails: [],
+}, RcsChannelPreview));

package/phone-preview-rcs-chat.d.ts

@@ -0,0 +1,31 @@
+import '@nectary/components/icon';
+import type React from 'react';
+/**
+ * RCS chat preview component.
+ *
+ * @param props.name Brand name.
+ * @param props.description Brand description.
+ * @param props.logo Brand logo image.
+ * @param props.messages List of messages.
+ */
+export declare const RcsChatPreview: (props: {
+    name: string;
+    description: string;
+    logo: string;
+    messages: string[];
+}) => Node | Node[];
+type Props = Parameters<typeof RcsChatPreview>[0];
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-chat': ElementProps & HTMLElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-chat': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

package/phone-preview-rcs-chat.js

@@ -0,0 +1,162 @@
+import '@nectary/components/icon';
+import { customElement } from 'solid-element';
+import { For } from 'solid-js';
+import html from 'solid-js/html';
+import pkg from './package.json';
+import { defineCustomElement } from './utils';
+const style = `
+:where(*, *::before, *::after) {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+}
+
+.root {
+  --logo-color: var(--sinch-sys-color-surface-secondary-default);
+  block-size: 100%;
+  display: flex;
+  flex-flow: column;
+
+  & > header {
+    display: flex;
+    gap: 8px;
+    padding: 12px 4px;
+    background: var(--sinch-sys-color-surface-tertiary-default);
+    font: var(--sinch-sys-font-body-m);
+
+    & > img {
+      block-size: 24px;
+      inline-size: 24px;
+      margin-inline-start: 8px;
+      border-radius: 100%;
+      background: var(--logo-color);
+    }
+
+    & > h1 {
+      flex: 1;
+      overflow: hidden;
+      min-inline-size: 0;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  & > div {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-width: none;
+    display: flex;
+    flex-flow: column;
+    gap: 8px;
+    padding: 8px;
+    margin-block-end: 8px;
+
+    & > img {
+      block-size: 64px;
+      inline-size: 64px;
+      border-radius: 100%;
+      align-self: center;
+      background: var(--logo-color);
+    }
+
+    & > p {
+      padding-inline: 24px;
+      font: var(--sinch-sys-font-body-xs);
+      text-align: center;
+      text-wrap: balance;
+      word-wrap: break-word;
+    }
+
+    & > hr {
+      border-block-end: 1px solid var(--sinch-sys-color-border-subtle);
+    }
+  }
+
+  & > footer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font: var(--sinch-sys-font-body-xs);
+
+    & > div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      border-radius: 24px;
+      background: var(--sinch-sys-color-surface-primary-active);
+
+      & > span {
+        flex: 1;
+      }
+    }
+  }
+}
+
+.message {
+  padding: 8px 12px;
+  margin-inline-end: 8px;
+  border-radius: 16px;
+  border-end-start-radius: 0;
+  background: var(--sinch-sys-color-feedback-info-subtle);
+  font: var(--sinch-sys-font-body-xs);
+}
+`;
+const Message = (props) => html `<section class="message">${props.message}</section>`;
+/**
+ * RCS chat preview component.
+ *
+ * @param props.name Brand name.
+ * @param props.description Brand description.
+ * @param props.logo Brand logo image.
+ * @param props.messages List of messages.
+ */
+export const RcsChatPreview = (props) => {
+    const transparentIcon = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+    return html ` <style>
+      ${style}
+    </style>
+    <section class="root">
+      <header>
+        <sinch-icon name="arrow_back" />
+        <img
+          src=${() => (props.logo !== '' ? props.logo : transparentIcon)}
+          alt=""
+        />
+        <h1>${() => (props.name !== '' ? props.name : 'Brand name')}</h1>
+        <sinch-icon name="verified_user" />
+        <sinch-icon name="more_vert" />
+      </header>
+      <div>
+        <img
+          src=${() => (props.logo !== '' ? props.logo : transparentIcon)}
+          alt=""
+        />
+        <p>
+          ${() => (props.description !== '' ? props.description : 'Brand description')}
+        </p>
+        <hr />
+        <${For} each=${() => props.messages}>
+          ${(message) => html `<${Message} message=${message} />`}
+        <//>
+      </div>
+      <footer>
+        <sinch-icon name="add_circle" />
+        <sinch-icon name="photo_camera" />
+        <div>
+          <span>RCS Message</span>
+          <sinch-icon name="sentiment_satisfied" />
+          <sinch-icon name="mic" />
+        </div>
+      </footer>
+    </section>`;
+};
+defineCustomElement('sinch-labs-phone-preview-rcs-chat', customElement(`sinch-labs-phone-preview-rcs-chat-${pkg.version}`, {
+    name: '',
+    description: '',
+    logo: '',
+    messages: [],
+}, RcsChatPreview));

package/phone-preview.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+declare const PhonePreview: (props: {
+    locale: string;
+    clock: Intl.DateTimeFormatOptions;
+}, options: {
+    element: any;
+}) => Node | Node[];
+type Props = Partial<Parameters<typeof PhonePreview>[0]>;
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview': ElementProps & HTMLElement;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

package/phone-preview.js

@@ -0,0 +1,120 @@
+import { customElement } from 'solid-element';
+import { createComputed, createMemo, createSignal, onCleanup, onMount, } from 'solid-js';
+import html from 'solid-js/html';
+import pkg from './package.json';
+import { defineCustomElement } from './utils';
+const style = `
+:where(*, *::before, *::after) {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+}
+
+:host {
+  --base-size: 288px; /* 18rem */
+  --aspect-ratio: 1 / 2.1;
+  --scale: 1;
+  inline-size: min(100%, var(--base-size));
+  aspect-ratio: var(--aspect-ratio);
+  overflow: hidden;
+  display: block;
+}
+
+section {
+  position: relative;
+  inline-size: var(--base-size);
+  aspect-ratio: var(--aspect-ratio);
+  scale: var(--scale);
+  transform-origin: top left;
+  overflow: hidden;
+  display: flex;
+  flex-flow: column;
+  padding: 12px;
+  border: 1px solid var(--sinch-sys-color-border-strong);
+  border-radius: 32px;
+  background: var(--sinch-sys-color-surface-primary-default);
+
+  & > header {
+    position: sticky;
+    inset-block-start: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    background: var(--sinch-sys-color-surface-primary-default);
+    font: var(--sinch-sys-font-body-xxs);
+
+    & > svg {
+      inline-size: 48px;
+    }
+  }
+
+  & > div {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-width: none;
+    border-end-start-radius: 16px;
+    border-end-end-radius: 16px;
+  }
+}
+`;
+const StatusSvg = () => html `
+  <svg viewBox="0 0 50 12">
+    <path
+      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"
+    />
+    <rect width="12.6" height="5.4" x="33.3" y="3.5" rx=".9" />
+    <path fill="#999" d="M48 4.9v2.7c.5-.3.9-.8.9-1.4 0-.6-.4-1.1-.9-1.3Z" />
+    <path
+      fill="none"
+      stroke="#999"
+      stroke-width=".7"
+      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"
+    />
+  </svg>
+`;
+/**
+ * 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.
+ */
+const PhonePreview = (props, options) => {
+    const host = options.element;
+    const observer = new ResizeObserver(() => {
+        const style = getComputedStyle(host);
+        const baseSize = parseFloat(style.getPropertyValue('--base-size'));
+        const currentSize = host.getBoundingClientRect().width;
+        host.style.setProperty('--scale', `${currentSize / baseSize}`);
+    });
+    onMount(() => {
+        const section = host.shadowRoot.querySelector('section');
+        observer.observe(host);
+        observer.observe(section);
+    });
+    onCleanup(() => observer.disconnect());
+    const fmt = createMemo(() => Intl.DateTimeFormat(props.locale, props.clock));
+    const [clock, setClock] = createSignal();
+    const interval = setInterval(() => setClock(fmt().format()), 60000);
+    createComputed(() => setClock(fmt().format()));
+    onCleanup(() => clearInterval(interval));
+    return html `
+    <style>
+      ${style}
+    </style>
+    <section>
+      <header>
+        <span>${clock}</span>
+        <${StatusSvg} />
+      </header>
+      <div>
+        <slot />
+      </div>
+    </section>
+  `;
+};
+defineCustomElement('sinch-labs-phone-preview', customElement(`sinch-labs-phone-preview-${pkg.version}`, { locale: 'en-US', clock: { hour: '2-digit', minute: '2-digit' } }, PhonePreview));

package/utils/element.d.ts

@@ -0,0 +1,7 @@
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const setLabRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}

package/utils/element.js

@@ -0,0 +1,23 @@
+const nectaryDefinitions = new Map();
+let nectaryRegistry = null;
+export const defineCustomElement = (name, constructor) => {
+    if (nectaryRegistry !== null) {
+        if (nectaryRegistry.get(name) == null) {
+            nectaryRegistry.define(name, constructor);
+        }
+        return;
+    }
+    nectaryDefinitions.set(name, constructor);
+};
+export const setLabRegistry = (registry) => {
+    if (nectaryRegistry !== null) {
+        throw new Error('Nectary registry already set');
+    }
+    nectaryRegistry = registry;
+    for (const [name, ctor] of nectaryDefinitions.entries()) {
+        if (nectaryRegistry.get(name) == null) {
+            nectaryRegistry.define(name, ctor);
+        }
+    }
+    nectaryDefinitions.clear();
+};

package/utils/index.d.ts

@@ -0,0 +1 @@
+export { defineCustomElement, setLabRegistry } from './element';

package/utils/index.js

@@ -0,0 +1 @@
+export { defineCustomElement, setLabRegistry } from './element';