@nectary/labs 2.5.39 → 2.5.41

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

@@ -1,175 +1,161 @@
-import '@nectary/components/icon';
-import { defineCustomElement, NectaryElement } from '../utils';
-import '../phone-preview-rcs-channel-actions';
-import '../phone-preview-rcs-channel-info';
-import '../phone-preview-rcs-channel-info-option';
-import '../phone-preview-rcs-channel-options';
-import '../phone-preview-rcs-channel-tabs';
-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-channel-actions/index.js";
+import "../phone-preview-rcs-channel-info/index.js";
+import "../phone-preview-rcs-channel-info-option/index.js";
+import "../phone-preview-rcs-channel-options/index.js";
+import "../phone-preview-rcs-channel-tabs/index.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  --banner-color: var(--sinch-sys-color-surface-tertiary-active);\n  --logo-color: var(--sinch-sys-color-surface-secondary-default);\n\n  display: flex;\n  flex-flow: column;\n  color: var(--sinch-sys-color-text-default);\n}\n\n#banner-img {\n  block-size: 70px;\n  margin-block-end: -40px;\n  background: var(--banner-color);\n}\n\n#logo-img {\n  block-size: 64px;\n  inline-size: 64px;\n  border-radius: 100%;\n  background: var(--logo-color);\n  align-self: center;\n}\n\n#brand-name {\n  padding: 8px 24px;\n  font: var(--sinch-sys-font-body-m);\n  text-align: center;\n  text-wrap: balance;\n  word-wrap: break-word;\n}\n\n#brand-description {\n  padding-inline: 24px;\n  font: var(--sinch-sys-font-body-xs);\n  text-align: center;\n  text-wrap: balance;\n  word-wrap: break-word;\n}\n\n#actions {\n  align-self: center;\n  padding-block: 32px 24px;\n}\n\n#tabs {\n  padding-block-end: 8px;\n}\n\n#info-container {\n  display: block;\n}\n\n#options-container {\n  display: none;\n}\n</style>\n\n<img id="banner-img" alt="" />\n<img id="logo-img" alt="" />\n<h1 id="brand-name">Brand name</h1>\n<p id="brand-description">Brand description</p>\n<sinch-labs-phone-preview-rcs-channel-actions id="actions"></sinch-labs-phone-preview-rcs-channel-actions>\n<sinch-labs-phone-preview-rcs-channel-tabs id="tabs"></sinch-labs-phone-preview-rcs-channel-tabs>\n<sinch-labs-phone-preview-rcs-channel-info id="info-container">\n  <slot name="contacts"></slot>\n</sinch-labs-phone-preview-rcs-channel-info>\n<sinch-labs-phone-preview-rcs-channel-options id="options-container"></sinch-labs-phone-preview-rcs-channel-options>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class PhonePreviewRcsChannel extends NectaryElement {
-    #bannerImg;
-    #logoImg;
-    #brandName;
-    #brandDescription;
-    #actions;
-    #tabs;
-    #infoContainer;
-    #optionsContainer;
-    #controller = null;
-    #currentTab = 0;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#bannerImg = shadowRoot.querySelector('#banner-img');
-        this.#logoImg = shadowRoot.querySelector('#logo-img');
-        this.#brandName = shadowRoot.querySelector('#brand-name');
-        this.#brandDescription = shadowRoot.querySelector('#brand-description');
-        this.#actions = shadowRoot.querySelector('#actions');
-        this.#tabs = shadowRoot.querySelector('#tabs');
-        this.#infoContainer = shadowRoot.querySelector('#info-container');
-        this.#optionsContainer = shadowRoot.querySelector('#options-container');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.#controller = new AbortController();
-        const { signal } = this.#controller;
-        this.#tabs.addEventListener('-tab-change', this.#onTabChange, { signal });
-        // Listen for changes in slotted children
-        this.addEventListener('slotchange', this.#onSlotChange, { signal });
-        // Watch for changes to child elements
-        const observer = new MutationObserver(() => {
-            this.#updateActionsFromSlottedChildren();
-        });
-        observer.observe(this, { childList: true, subtree: true });
-        // Clean up observer when disconnected
-        signal.addEventListener('abort', () => {
-            observer.disconnect();
-        });
+class PhonePreviewRcsChannel extends NectaryElement {
+  #bannerImg;
+  #logoImg;
+  #brandName;
+  #brandDescription;
+  #actions;
+  #tabs;
+  #infoContainer;
+  #optionsContainer;
+  #controller = null;
+  #currentTab = 0;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#bannerImg = shadowRoot.querySelector("#banner-img");
+    this.#logoImg = shadowRoot.querySelector("#logo-img");
+    this.#brandName = shadowRoot.querySelector("#brand-name");
+    this.#brandDescription = shadowRoot.querySelector("#brand-description");
+    this.#actions = shadowRoot.querySelector("#actions");
+    this.#tabs = shadowRoot.querySelector("#tabs");
+    this.#infoContainer = shadowRoot.querySelector("#info-container");
+    this.#optionsContainer = shadowRoot.querySelector("#options-container");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#tabs.addEventListener("-tab-change", this.#onTabChange, { signal });
+    this.addEventListener("slotchange", this.#onSlotChange, { signal });
+    const observer = new MutationObserver(() => {
+      this.#updateActionsFromSlottedChildren();
+    });
+    observer.observe(this, { childList: true, subtree: true });
+    signal.addEventListener("abort", () => {
+      observer.disconnect();
+    });
+    this.#updateUI();
+    this.#updateTabContent();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller?.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ["name", "description", "color", "banner", "logo"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case "name":
+      case "description":
+      case "color":
+      case "banner":
+      case "logo":
         this.#updateUI();
-        this.#updateTabContent();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#controller?.abort();
-        this.#controller = null;
-    }
-    static get observedAttributes() {
-        return ['name', 'description', 'color', 'banner', 'logo'];
-    }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            return;
-        }
-        switch (name) {
-            case 'name':
-            case 'description':
-            case 'color':
-            case 'banner':
-            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 color() {
-        return this.getAttribute('color') ?? '';
-    }
-    set color(value) {
-        this.setAttribute('color', value);
-    }
-    get banner() {
-        return this.getAttribute('banner') ?? '';
-    }
-    set banner(value) {
-        this.setAttribute('banner', value);
-    }
-    get logo() {
-        return this.getAttribute('logo') ?? '';
-    }
-    set logo(value) {
-        this.setAttribute('logo', value);
-    }
-    #updateUI() {
-        if (!this.isDomConnected) {
-            return;
-        }
-        // Transparent placeholder for empty images
-        const transparentIcon = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
-        // Update banner image
-        this.#bannerImg.src = this.banner !== '' ? this.banner : transparentIcon;
-        // Update logo image
-        this.#logoImg.src = this.logo !== '' ? this.logo : transparentIcon;
-        // Update brand name
-        this.#brandName.textContent = this.name !== '' ? this.name : 'Brand name';
-        // Update brand description
-        this.#brandDescription.textContent = this.description !== '' ? this.description : 'Brand description';
-        // Update banner color
-        if (this.color !== '') {
-            this.style.setProperty('--banner-color', this.color);
-        }
-        // Update actions component with data from slotted children
-        this.#updateActionsFromSlottedChildren();
-        // Update tabs color
-        this.#tabs.setAttribute('color', this.color);
-    }
-    #updateActionsFromSlottedChildren() {
-        // Get slotted contact options
-        const slottedElements = this.querySelectorAll('sinch-labs-phone-preview-rcs-channel-info-option');
-        // Find first phone, website, and email from slotted children
-        let firstPhone = '';
-        let firstWebsite = '';
-        let firstEmail = '';
-        for (const element of slottedElements) {
-            const type = element.getAttribute('type');
-            const contact = element.getAttribute('contact') ?? '';
-            if (type === 'phone' && firstPhone === '') {
-                firstPhone = contact;
-            }
-            else if (type === 'website' && firstWebsite === '') {
-                firstWebsite = contact;
-            }
-            else if (type === 'email' && firstEmail === '') {
-                firstEmail = contact;
-            }
-        }
-        this.#actions.setAttribute('phone', firstPhone);
-        this.#actions.setAttribute('website', firstWebsite);
-        this.#actions.setAttribute('email', firstEmail);
-    }
-    #updateTabContent() {
-        // No longer needed since we use slots
-        this.#updateTabVisibility();
-    }
-    #updateTabVisibility() {
-        if (this.#currentTab === 0) {
-            this.#infoContainer.style.display = 'block';
-            this.#optionsContainer.style.display = 'none';
-        }
-        else {
-            this.#infoContainer.style.display = 'none';
-            this.#optionsContainer.style.display = 'block';
-        }
-    }
-    #onSlotChange = () => {
-        this.#updateActionsFromSlottedChildren();
-    };
-    #onTabChange = (event) => {
-        this.#currentTab = event.detail;
-        this.#updateTabVisibility();
-    };
+        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 color() {
+    return this.getAttribute("color") ?? "";
+  }
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  get banner() {
+    return this.getAttribute("banner") ?? "";
+  }
+  set banner(value) {
+    this.setAttribute("banner", value);
+  }
+  get logo() {
+    return this.getAttribute("logo") ?? "";
+  }
+  set logo(value) {
+    this.setAttribute("logo", value);
+  }
+  #updateUI() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const transparentIcon = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+    this.#bannerImg.src = this.banner !== "" ? this.banner : transparentIcon;
+    this.#logoImg.src = this.logo !== "" ? this.logo : transparentIcon;
+    this.#brandName.textContent = this.name !== "" ? this.name : "Brand name";
+    this.#brandDescription.textContent = this.description !== "" ? this.description : "Brand description";
+    if (this.color !== "") {
+      this.style.setProperty("--banner-color", this.color);
+    }
+    this.#updateActionsFromSlottedChildren();
+    this.#tabs.setAttribute("color", this.color);
+  }
+  #updateActionsFromSlottedChildren() {
+    const slottedElements = this.querySelectorAll("sinch-labs-phone-preview-rcs-channel-info-option");
+    let firstPhone = "";
+    let firstWebsite = "";
+    let firstEmail = "";
+    for (const element of slottedElements) {
+      const type = element.getAttribute("type");
+      const contact = element.getAttribute("contact") ?? "";
+      if (type === "phone" && firstPhone === "") {
+        firstPhone = contact;
+      } else if (type === "website" && firstWebsite === "") {
+        firstWebsite = contact;
+      } else if (type === "email" && firstEmail === "") {
+        firstEmail = contact;
+      }
+    }
+    this.#actions.setAttribute("phone", firstPhone);
+    this.#actions.setAttribute("website", firstWebsite);
+    this.#actions.setAttribute("email", firstEmail);
+  }
+  #updateTabContent() {
+    this.#updateTabVisibility();
+  }
+  #updateTabVisibility() {
+    if (this.#currentTab === 0) {
+      this.#infoContainer.style.display = "block";
+      this.#optionsContainer.style.display = "none";
+    } else {
+      this.#infoContainer.style.display = "none";
+      this.#optionsContainer.style.display = "block";
+    }
+  }
+  #onSlotChange = () => {
+    this.#updateActionsFromSlottedChildren();
+  };
+  #onTabChange = (event) => {
+    this.#currentTab = event.detail;
+    this.#updateTabVisibility();
+  };
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-channel', PhonePreviewRcsChannel);
+defineCustomElement("sinch-labs-phone-preview-rcs-channel", PhonePreviewRcsChannel);
+export {
+  PhonePreviewRcsChannel
+};

package/phone-preview-rcs-channel-actions/index.js

@@ -1,126 +1,119 @@
-import '@nectary/components/icon';
-import { defineCustomElement, NectaryElement } from '../utils';
-import templateHTML from './template.html';
-const template = document.createElement('template');
+import "@nectary/components/icon";
+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.actions {\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n  gap: 24px;\n  font: var(--sinch-sys-font-body-xs);\n}\n\n.actions > a {\n  display: flex;\n  flex-flow: column;\n  align-items: center;\n  gap: 2px;\n  color: inherit;\n  text-decoration: none;\n}\n\n.actions > a[inert] {\n  --sinch-global-color-icon: currentcolor;\n\n  color: var(--sinch-sys-color-text-muted);\n}\n</style>\n\n<section class="actions">\n  <!-- Call button -->\n  <a id="call-action" target="_blank">\n    <sinch-icon icons-version="2" name="fa-phone" class="icon-link"></sinch-icon>\n    Call\n  </a>\n\n  <!-- Website button -->\n  <a id="website-action" target="_blank">\n    <sinch-icon icons-version="2" name="fa-earth-americas" name="public" class="icon-link"></sinch-icon>\n    Website\n  </a>\n\n  <!-- Email button -->\n  <a id="email-action" target="_blank">\n    <sinch-icon icons-version="2" name="envelope" name="mail" class="icon-link"></sinch-icon>\n    Email\n  </a>\n</section>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
 console.log(template);
-export class PhonePreviewRcsChannelActions extends NectaryElement {
-    #callAction;
-    #websiteAction;
-    #emailAction;
-    constructor() {
-        super();
-        console.log('[PhonePreviewRcsChannelActions] Constructor called');
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#callAction = shadowRoot.querySelector('#call-action');
-        this.#websiteAction = shadowRoot.querySelector('#website-action');
-        this.#emailAction = shadowRoot.querySelector('#email-action');
-        console.log('[PhonePreviewRcsChannelActions] Elements queried:', {
-            callAction: this.#callAction,
-            websiteAction: this.#websiteAction,
-            emailAction: this.#emailAction,
-        });
+class PhonePreviewRcsChannelActions extends NectaryElement {
+  #callAction;
+  #websiteAction;
+  #emailAction;
+  constructor() {
+    super();
+    console.log("[PhonePreviewRcsChannelActions] Constructor called");
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#callAction = shadowRoot.querySelector("#call-action");
+    this.#websiteAction = shadowRoot.querySelector("#website-action");
+    this.#emailAction = shadowRoot.querySelector("#email-action");
+    console.log("[PhonePreviewRcsChannelActions] Elements queried:", {
+      callAction: this.#callAction,
+      websiteAction: this.#websiteAction,
+      emailAction: this.#emailAction
+    });
+  }
+  connectedCallback() {
+    console.log("[PhonePreviewRcsChannelActions] Connected to DOM");
+    super.connectedCallback();
+    this.#updateUI();
+  }
+  static get observedAttributes() {
+    return ["phone", "website", "email"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    console.log(`[PhonePreviewRcsChannelActions] Attribute "${name}" changed from "${oldVal}" to "${newVal}"`);
+    if (oldVal === newVal) {
+      return;
     }
-    connectedCallback() {
-        console.log('[PhonePreviewRcsChannelActions] Connected to DOM');
-        super.connectedCallback();
-        this.#updateUI();
+    this.#updateUI();
+  }
+  get phone() {
+    return this.getAttribute("phone") ?? "";
+  }
+  set phone(value) {
+    console.log(`[PhonePreviewRcsChannelActions] Setting phone to "${value}"`);
+    if (value !== "") {
+      this.setAttribute("phone", value);
+    } else {
+      this.removeAttribute("phone");
     }
-    static get observedAttributes() {
-        return ['phone', 'website', 'email'];
+  }
+  get website() {
+    return this.getAttribute("website") ?? "";
+  }
+  set website(value) {
+    console.log(`[PhonePreviewRcsChannelActions] Setting website to "${value}"`);
+    if (value !== "") {
+      this.setAttribute("website", value);
+    } else {
+      this.removeAttribute("website");
     }
-    attributeChangedCallback(name, oldVal, newVal) {
-        console.log(`[PhonePreviewRcsChannelActions] Attribute "${name}" changed from "${oldVal}" to "${newVal}"`);
-        if (oldVal === newVal) {
-            return;
-        }
-        this.#updateUI();
+  }
+  get email() {
+    return this.getAttribute("email") ?? "";
+  }
+  set email(value) {
+    console.log(`[PhonePreviewRcsChannelActions] Setting email to "${value}"`);
+    if (value !== "") {
+      this.setAttribute("email", value);
+    } else {
+      this.removeAttribute("email");
     }
-    get phone() {
-        return this.getAttribute('phone') ?? '';
+  }
+  #updateUI() {
+    console.log("[PhonePreviewRcsChannelActions] Updating UI");
+    if (!this.isDomConnected) {
+      console.log("[PhonePreviewRcsChannelActions] DOM not connected, skipping UI update");
+      return;
     }
-    set phone(value) {
-        console.log(`[PhonePreviewRcsChannelActions] Setting phone to "${value}"`);
-        if (value !== '') {
-            this.setAttribute('phone', value);
-        }
-        else {
-            this.removeAttribute('phone');
-        }
+    const phoneNumber = this.phone;
+    const websiteUrl = this.website;
+    const emailAddress = this.email;
+    console.log("[PhonePreviewRcsChannelActions] Current values:", {
+      phone: phoneNumber,
+      website: websiteUrl,
+      email: emailAddress
+    });
+    if (phoneNumber !== "") {
+      this.#callAction.href = `tel:${phoneNumber}`;
+      this.#callAction.removeAttribute("inert");
+      console.log(`[PhonePreviewRcsChannelActions] Enabling call action with href: ${this.#callAction.href}`);
+    } else {
+      this.#callAction.href = "#";
+      this.#callAction.setAttribute("inert", "");
+      console.log("[PhonePreviewRcsChannelActions] Disabling call action");
     }
-    get website() {
-        return this.getAttribute('website') ?? '';
+    if (websiteUrl !== "") {
+      this.#websiteAction.href = websiteUrl;
+      this.#websiteAction.removeAttribute("inert");
+      console.log(`[PhonePreviewRcsChannelActions] Enabling website action with href: ${this.#websiteAction.href}`);
+    } else {
+      this.#websiteAction.href = "#";
+      this.#websiteAction.setAttribute("inert", "");
+      console.log("[PhonePreviewRcsChannelActions] Disabling website action");
     }
-    set website(value) {
-        console.log(`[PhonePreviewRcsChannelActions] Setting website to "${value}"`);
-        if (value !== '') {
-            this.setAttribute('website', value);
-        }
-        else {
-            this.removeAttribute('website');
-        }
-    }
-    get email() {
-        return this.getAttribute('email') ?? '';
-    }
-    set email(value) {
-        console.log(`[PhonePreviewRcsChannelActions] Setting email to "${value}"`);
-        if (value !== '') {
-            this.setAttribute('email', value);
-        }
-        else {
-            this.removeAttribute('email');
-        }
-    }
-    #updateUI() {
-        console.log('[PhonePreviewRcsChannelActions] Updating UI');
-        if (!this.isDomConnected) {
-            console.log('[PhonePreviewRcsChannelActions] DOM not connected, skipping UI update');
-            return;
-        }
-        // Get contact values directly as strings
-        const phoneNumber = this.phone;
-        const websiteUrl = this.website;
-        const emailAddress = this.email;
-        console.log('[PhonePreviewRcsChannelActions] Current values:', {
-            phone: phoneNumber,
-            website: websiteUrl,
-            email: emailAddress,
-        });
-        // Update call action
-        if (phoneNumber !== '') {
-            this.#callAction.href = `tel:${phoneNumber}`;
-            this.#callAction.removeAttribute('inert');
-            console.log(`[PhonePreviewRcsChannelActions] Enabling call action with href: ${this.#callAction.href}`);
-        }
-        else {
-            this.#callAction.href = '#';
-            this.#callAction.setAttribute('inert', '');
-            console.log('[PhonePreviewRcsChannelActions] Disabling call action');
-        }
-        // Update website action
-        if (websiteUrl !== '') {
-            this.#websiteAction.href = websiteUrl;
-            this.#websiteAction.removeAttribute('inert');
-            console.log(`[PhonePreviewRcsChannelActions] Enabling website action with href: ${this.#websiteAction.href}`);
-        }
-        else {
-            this.#websiteAction.href = '#';
-            this.#websiteAction.setAttribute('inert', '');
-            console.log('[PhonePreviewRcsChannelActions] Disabling website action');
-        }
-        // Update email action
-        if (emailAddress !== '') {
-            this.#emailAction.href = `mailto:${emailAddress}`;
-            this.#emailAction.removeAttribute('inert');
-            console.log(`[PhonePreviewRcsChannelActions] Enabling email action with href: ${this.#emailAction.href}`);
-        }
-        else {
-            this.#emailAction.href = '#';
-            this.#emailAction.setAttribute('inert', '');
-            console.log('[PhonePreviewRcsChannelActions] Disabling email action');
-        }
+    if (emailAddress !== "") {
+      this.#emailAction.href = `mailto:${emailAddress}`;
+      this.#emailAction.removeAttribute("inert");
+      console.log(`[PhonePreviewRcsChannelActions] Enabling email action with href: ${this.#emailAction.href}`);
+    } else {
+      this.#emailAction.href = "#";
+      this.#emailAction.setAttribute("inert", "");
+      console.log("[PhonePreviewRcsChannelActions] Disabling email action");
     }
+  }
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-channel-actions', PhonePreviewRcsChannelActions);
+defineCustomElement("sinch-labs-phone-preview-rcs-channel-actions", PhonePreviewRcsChannelActions);
+export {
+  PhonePreviewRcsChannelActions
+};