@nectary/labs 2.3.3 → 2.4.0

package/phone-preview-rcs-channel.js

@@ -1,319 +0,0 @@
-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;
-
-    & > .icon-link {
-      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 icons-version="2" name="fa-phone" class="icon-link" />
-        Call
-      </a>
-      <a inert=${() => url() === ''} target="_blank" href=${urlHref}>
-        <sinch-icon icons-version="2" name="fa-earth-americas" name="public" class="icon-link" />
-        Website
-      </a>
-      <a inert=${() => email() === ''} target="_blank" href=${emailHref}>
-        <sinch-icon icons-version="2" name="envelope" name="mail" class="icon-link" />
-        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 icons-version="2" name="fa-phone" class="icon-link" />
-            <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 icons-version="2" name="fa-earth-americas" name="public" class="icon-link" />
-            <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 icons-version="2" name="envelope" name="mail" class="icon-link" />
-            <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.js

@@ -1,162 +0,0 @@
-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 icons-version="2" name="fa-arrow-left"></sinch-icon>
-        <img
-          src=${() => (props.logo !== '' ? props.logo : transparentIcon)}
-          alt=""
-        />
-        <h1>${() => (props.name !== '' ? props.name : 'Brand name')}</h1>
-        <sinch-icon icons-version="2" name="fa-shield-check" name="verified_user" />
-        <sinch-icon icons-version="2" name="fa-ellipsis-vertical" 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 icons-version="2" name="fa-circle-plus" />
-        <sinch-icon icons-version="2" name="fa-camera" />
-        <div>
-          <span>RCS Message</span>
-          <sinch-icon icons-version="2" name="fa-face-smile" />
-          <sinch-icon icons-version="2" name="microphone" 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.js

@@ -1,120 +0,0 @@
-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));