@nectary/labs 2.5.39 → 2.5.41

package/phone-preview-rcs-chat/index.js

@@ -1,79 +1,196 @@
-import '@nectary/components/icon';
-import { defineCustomElement, NectaryElement } from '../utils';
-import '../phone-preview-rcs-chat-message';
-import templateHTML from './template.html';
-const template = document.createElement('template');
+import "@nectary/components/icon";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../phone-preview-rcs-chat-message/index.js";
+const templateHTML = `<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;
+}
+
+.root > header {
+  display: flex;
+  gap: 8px;
+  padding: 12px 4px;
+  background: var(--sinch-sys-color-surface-tertiary-default);
+  font: var(--sinch-sys-font-body-m);
+}
+
+.root > header > img {
+  block-size: 24px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+  border-radius: 100%;
+  background: var(--logo-color);
+}
+
+.root > header > h1 {
+  flex: 1;
+  overflow: hidden;
+  min-inline-size: 0;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+}
+
+.root > div {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  padding: 8px;
+  margin-block-end: 8px;
+}
+
+.root > div > img {
+  block-size: 64px;
+  inline-size: 64px;
+  border-radius: 100%;
+  align-self: center;
+  background: var(--logo-color);
+}
+
+.root > div > p {
+  padding-inline: 24px;
+  font: var(--sinch-sys-font-body-xs);
+  text-align: center;
+  text-wrap: balance;
+  word-wrap: break-word;
+}
+
+.root > div > hr {
+  border-block-end: 1px solid var(--sinch-sys-color-border-subtle);
+}
+
+.root > footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font: var(--sinch-sys-font-body-xs);
+}
+
+.root > footer > div {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 24px;
+  background: var(--sinch-sys-color-surface-primary-active);
+}
+
+.root > footer > div > span {
+  flex: 1;
+}
+</style>
+<section class="root">
+  <header>
+    <sinch-icon icons-version="2" name="fa-arrow-left"></sinch-icon>
+    <img id="header-logo" alt="" />
+    <h1 id="brand-name">Brand name</h1>
+    <sinch-icon icons-version="2" name="fa-shield-check"></sinch-icon>
+    <sinch-icon icons-version="2" name="fa-ellipsis-vertical"></sinch-icon>
+  </header>
+  <div>
+    <img id="main-logo" alt="" />
+    <p id="brand-description">Brand description</p>
+    <hr />
+    <slot name="messages">
+      <!-- Default messages when no slotted content -->
+      <sinch-labs-phone-preview-rcs-chat-message text="Hello! How can I help you today?"></sinch-labs-phone-preview-rcs-chat-message>
+      <sinch-labs-phone-preview-rcs-chat-message text="We're here to assist you."></sinch-labs-phone-preview-rcs-chat-message>
+    </slot>
+  </div>
+  <footer>
+    <sinch-icon icons-version="2" name="fa-circle-plus"></sinch-icon>
+    <sinch-icon icons-version="2" name="fa-camera"></sinch-icon>
+    <div>
+      <span>RCS Message</span>
+      <sinch-icon icons-version="2" name="fa-face-smile"></sinch-icon>
+      <sinch-icon icons-version="2" name="microphone"></sinch-icon>
+    </div>
+  </footer>
+</section>
+`;
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-/**
- * RCS chat preview component.
- *
- * @param props.name Brand name.
- * @param props.description Brand description.
- * @param props.logo Brand logo image.
- */
-export class RcsChatPreview extends NectaryElement {
-    #headerLogo;
-    #mainLogo;
-    #brandName;
-    #brandDescription;
-    #transparentIcon = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#headerLogo = shadowRoot.querySelector('#header-logo');
-        this.#mainLogo = shadowRoot.querySelector('#main-logo');
-        this.#brandName = shadowRoot.querySelector('#brand-name');
-        this.#brandDescription = shadowRoot.querySelector('#brand-description');
+class RcsChatPreview extends NectaryElement {
+  #headerLogo;
+  #mainLogo;
+  #brandName;
+  #brandDescription;
+  #transparentIcon = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#headerLogo = shadowRoot.querySelector("#header-logo");
+    this.#mainLogo = shadowRoot.querySelector("#main-logo");
+    this.#brandName = shadowRoot.querySelector("#brand-name");
+    this.#brandDescription = shadowRoot.querySelector("#brand-description");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateUI();
+  }
+  static get observedAttributes() {
+    return ["name", "description", "logo"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    switch (name) {
+      case "name":
+      case "description":
+      case "logo":
         this.#updateUI();
+        break;
     }
-    static get observedAttributes() {
-        return ['name', 'description', 'logo'];
-    }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            return;
-        }
-        switch (name) {
-            case 'name':
-            case 'description':
-            case 'logo':
-                this.#updateUI();
-                break;
-        }
-    }
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(value) {
-        this.setAttribute('name', value);
-    }
-    get description() {
-        return this.getAttribute('description') ?? '';
-    }
-    set description(value) {
-        this.setAttribute('description', value);
-    }
-    get logo() {
-        return this.getAttribute('logo') ?? '';
-    }
-    set logo(value) {
-        this.setAttribute('logo', value);
-    }
-    #updateUI() {
-        if (!this.isDomConnected) {
-            return;
-        }
-        const logoSrc = this.logo !== '' ? this.logo : this.#transparentIcon;
-        const displayName = this.name !== '' ? this.name : 'Brand name';
-        const displayDescription = this.description !== '' ? this.description : 'Brand description';
-        this.#headerLogo.src = logoSrc;
-        this.#mainLogo.src = logoSrc;
-        this.#brandName.textContent = displayName;
-        this.#brandDescription.textContent = displayDescription;
+  }
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  get description() {
+    return this.getAttribute("description") ?? "";
+  }
+  set description(value) {
+    this.setAttribute("description", value);
+  }
+  get logo() {
+    return this.getAttribute("logo") ?? "";
+  }
+  set logo(value) {
+    this.setAttribute("logo", value);
+  }
+  #updateUI() {
+    if (!this.isDomConnected) {
+      return;
     }
+    const logoSrc = this.logo !== "" ? this.logo : this.#transparentIcon;
+    const displayName = this.name !== "" ? this.name : "Brand name";
+    const displayDescription = this.description !== "" ? this.description : "Brand description";
+    this.#headerLogo.src = logoSrc;
+    this.#mainLogo.src = logoSrc;
+    this.#brandName.textContent = displayName;
+    this.#brandDescription.textContent = displayDescription;
+  }
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-chat', RcsChatPreview);
+defineCustomElement("sinch-labs-phone-preview-rcs-chat", RcsChatPreview);
+export {
+  RcsChatPreview
+};

package/phone-preview-rcs-chat-message/index.js

@@ -1,48 +1,46 @@
-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:host {\n  display: block;\n}\n\n.message {\n  padding: 8px 12px;\n  margin-inline-end: 8px;\n  border-radius: 16px;\n  border-end-start-radius: 0;\n  background: var(--sinch-sys-color-feedback-info-subtle);\n  font: var(--sinch-sys-font-body-xs);\n}\n</style>\n\n<section class="message">\n  <span id="message-text">Sample message</span>\n</section>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-/**
- * Individual RCS chat message component.
- *
- * @param props.text Message text content.
- */
-export class RcsChatMessage extends NectaryElement {
-    #messageText;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#messageText = shadowRoot.querySelector('#message-text');
+class RcsChatMessage extends NectaryElement {
+  #messageText;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#messageText = shadowRoot.querySelector("#message-text");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateUI();
+  }
+  static get observedAttributes() {
+    return ["text"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
     }
-    connectedCallback() {
-        super.connectedCallback();
+    switch (name) {
+      case "text":
         this.#updateUI();
+        break;
     }
-    static get observedAttributes() {
-        return ['text'];
-    }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            return;
-        }
-        switch (name) {
-            case 'text':
-                this.#updateUI();
-                break;
-        }
-    }
-    get text() {
-        return this.getAttribute('text') ?? '';
-    }
-    set text(value) {
-        this.setAttribute('text', value);
-    }
-    #updateUI() {
-        if (!this.isDomConnected) {
-            return;
-        }
-        this.#messageText.textContent = this.text !== '' ? this.text : 'Sample message';
+  }
+  get text() {
+    return this.getAttribute("text") ?? "";
+  }
+  set text(value) {
+    this.setAttribute("text", value);
+  }
+  #updateUI() {
+    if (!this.isDomConnected) {
+      return;
     }
+    this.#messageText.textContent = this.text !== "" ? this.text : "Sample message";
+  }
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-chat-message', RcsChatMessage);
+defineCustomElement("sinch-labs-phone-preview-rcs-chat-message", RcsChatMessage);
+export {
+  RcsChatMessage
+};

package/utils/element.js

@@ -1,61 +1,70 @@
-import pkg from '../package.json';
-const nectaryDefinitions = new Map();
+const version = "2.8.3";
+const pkg = {
+  version
+};
+const nectaryDefinitions = /* @__PURE__ */ new Map();
 let nectaryRegistry = null;
-export const defineCustomElement = (name, constructor) => {
-    console.log(`Defining custom element: ${name} nectaryRegistry`, nectaryRegistry);
-    if (nectaryRegistry !== null) {
-        if (nectaryRegistry.get(name) == null) {
-            nectaryRegistry.define(name, constructor);
-            console.log(`Custom element ${name} defined immediately`);
-        }
-        console.log(`Custom element ${name} already defined in registry`);
-        return;
+const defineCustomElement = (name, constructor) => {
+  console.log(`Defining custom element: ${name} nectaryRegistry`, nectaryRegistry);
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+      console.log(`Custom element ${name} defined immediately`);
     }
-    nectaryDefinitions.set(name, constructor);
-    console.log(`Custom element ${name} queued for definition`);
-    console.log(`Current definitions queue: ${Array.from(nectaryDefinitions.keys()).join(', ')}`);
+    console.log(`Custom element ${name} already defined in registry`);
+    return;
+  }
+  nectaryDefinitions.set(name, constructor);
+  console.log(`Custom element ${name} queued for definition`);
+  console.log(`Current definitions queue: ${Array.from(nectaryDefinitions.keys()).join(", ")}`);
 };
-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);
-            console.log(`Custom element ${name} defined in registry`);
-        }
+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);
+      console.log(`Custom element ${name} defined in registry`);
     }
-    nectaryDefinitions.clear();
+  }
+  nectaryDefinitions.clear();
 };
-export const resetLabRegistry = () => {
-    nectaryRegistry = null;
+const resetLabRegistry = () => {
+  nectaryRegistry = null;
 };
-export class NectaryElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.version = pkg.version;
-        this.#isDomConnected = false;
-    }
-    attachShadow(options) {
-        return super.attachShadow({
-            mode: 'open',
-            delegatesFocus: false,
-            customElements: nectaryRegistry,
-            ...options,
-        });
-    }
-    get focusable() {
-        return false;
-    }
-    #isDomConnected;
-    connectedCallback() {
-        this.#isDomConnected = true;
-    }
-    disconnectedCallback() {
-        this.#isDomConnected = false;
-    }
-    get isDomConnected() {
-        return this.#isDomConnected;
-    }
+class NectaryElement extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.version = pkg.version;
+    this.#isDomConnected = false;
+  }
+  attachShadow(options) {
+    return super.attachShadow({
+      mode: "open",
+      delegatesFocus: false,
+      customElements: nectaryRegistry,
+      ...options
+    });
+  }
+  get focusable() {
+    return false;
+  }
+  #isDomConnected;
+  connectedCallback() {
+    this.#isDomConnected = true;
+  }
+  disconnectedCallback() {
+    this.#isDomConnected = false;
+  }
+  get isDomConnected() {
+    return this.#isDomConnected;
+  }
 }
+export {
+  NectaryElement,
+  defineCustomElement,
+  resetLabRegistry,
+  setLabRegistry
+};

package/utils/index.js

@@ -1 +1,7 @@
-export { defineCustomElement, setLabRegistry, resetLabRegistry, NectaryElement } from './element';
+import { NectaryElement, defineCustomElement, resetLabRegistry, setLabRegistry } from "./element.js";
+export {
+  NectaryElement,
+  defineCustomElement,
+  resetLabRegistry,
+  setLabRegistry
+};

package/vite.config.js

@@ -0,0 +1,66 @@
+import { readFileSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { glob } from 'glob'
+import { defineConfig } from 'vite'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const tsFiles = glob.sync('**/*.ts', {
+  cwd: __dirname,
+  absolute: false,
+  ignore: ['**/*.d.ts'],
+})
+
+const input = {}
+
+tsFiles.forEach((file) => {
+  const entryName = file.replace(/\.ts$/, '')
+
+  input[entryName] = resolve(__dirname, file)
+})
+
+if (Object.keys(input).length === 0) {
+  throw new Error('No TypeScript files found')
+}
+
+export default defineConfig({
+  plugins: [
+    {
+      name: 'html-raw-import',
+      enforce: 'pre',
+      resolveId(source, importer) {
+        if (source.endsWith('.html') && importer) {
+          const resolved = resolve(dirname(importer), source)
+
+          return `${resolved}?raw`
+        }
+      },
+      load(id) {
+        if (id.endsWith('.html?raw')) {
+          const filePath = id.replace(/\?raw$/, '')
+          const content = readFileSync(filePath, 'utf-8')
+
+          return `export default ${JSON.stringify(content)}`
+        }
+      },
+    },
+  ],
+  build: {
+    minify: false,
+    outDir: __dirname,
+    lib: {
+      entry: input,
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [/^@nectary\/components/],
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]',
+      },
+    },
+  },
+})