@nectary/labs 2.5.39 → 2.5.41

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

@@ -1,64 +1,62 @@
-import '@nectary/components/icon';
-import { defineCustomElement, NectaryElement } from '../utils';
-import '../phone-preview-rcs-channel-info-option';
-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-info-option/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.info {\n  display: flex;\n  flex-flow: column;\n  font: var(--sinch-sys-font-body-xs);\n}\n</style>\n\n<section class="info" id="info-container">\n  <slot name="contacts"></slot>\n  <slot></slot>\n</section>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class PhonePreviewRcsChannelInfo extends NectaryElement {
-    #optionSlot;
-    #controller = null;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#optionSlot = shadowRoot.querySelector('slot');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.#controller = new AbortController();
-        const { signal } = this.#controller;
-        this.#optionSlot.addEventListener('slotchange', this.#onSlotChange, { signal });
-        this.#onSlotChange();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#controller?.abort();
-        this.#controller = null;
-    }
-    static get observedAttributes() {
-        return [];
-    }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            // No change needed
-        }
-    }
-    #onSlotChange = () => {
-        const options = this.#getOptionElements();
-        // If no options are provided, show placeholder data
-        if (options.length === 0) {
-            this.#showPlaceholders();
-        }
-    };
-    #getOptionElements() {
-        const assignedElements = this.#optionSlot.assignedElements();
-        return assignedElements.filter((el) => el.tagName.toLowerCase() === 'sinch-labs-phone-preview-rcs-channel-info-option');
-    }
-    #showPlaceholders() {
-        // Create placeholder options when no content is provided
-        const placeholders = [
-            { type: 'phone', contact: '+1234567890', label: 'Contact us' },
-            { type: 'website', contact: 'https://company.com', label: 'Contact us' },
-            { type: 'email', contact: 'mail@company.com', label: 'Contact us' },
-        ];
-        placeholders.forEach(({ type, contact, label }) => {
-            const option = document.createElement('sinch-labs-phone-preview-rcs-channel-info-option');
-            option.setAttribute('type', type);
-            option.setAttribute('contact', contact);
-            option.setAttribute('label', label);
-            option.setAttribute('placeholder', '');
-            this.appendChild(option);
-        });
+class PhonePreviewRcsChannelInfo extends NectaryElement {
+  #optionSlot;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#optionSlot = shadowRoot.querySelector("slot");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#optionSlot.addEventListener("slotchange", this.#onSlotChange, { signal });
+    this.#onSlotChange();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller?.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+  }
+  #onSlotChange = () => {
+    const options = this.#getOptionElements();
+    if (options.length === 0) {
+      this.#showPlaceholders();
     }
+  };
+  #getOptionElements() {
+    const assignedElements = this.#optionSlot.assignedElements();
+    return assignedElements.filter((el) => el.tagName.toLowerCase() === "sinch-labs-phone-preview-rcs-channel-info-option");
+  }
+  #showPlaceholders() {
+    const placeholders = [
+      { type: "phone", contact: "+1234567890", label: "Contact us" },
+      { type: "website", contact: "https://company.com", label: "Contact us" },
+      { type: "email", contact: "mail@company.com", label: "Contact us" }
+    ];
+    placeholders.forEach(({ type, contact, label }) => {
+      const option = document.createElement("sinch-labs-phone-preview-rcs-channel-info-option");
+      option.setAttribute("type", type);
+      option.setAttribute("contact", contact);
+      option.setAttribute("label", label);
+      option.setAttribute("placeholder", "");
+      this.appendChild(option);
+    });
+  }
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-channel-info', PhonePreviewRcsChannelInfo);
+defineCustomElement("sinch-labs-phone-preview-rcs-channel-info", PhonePreviewRcsChannelInfo);
+export {
+  PhonePreviewRcsChannelInfo
+};

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

@@ -1,106 +1,101 @@
-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\na {\n  display: grid;\n  grid-template:\n    "icon contact" auto\n    "icon label  " auto\n    / auto 1fr;\n  align-items: center;\n  gap: 0 16px;\n  padding: 8px 16px;\n  border-block-end:\n    1px solid\n    var(--sinch-sys-color-surface-secondary-active);\n  color: currentcolor;\n  word-break: break-all;\n  text-decoration: none;\n}\n\na > sinch-icon {\n  grid-area: icon;\n}\n\na > #contact {\n  grid-area: contact;\n}\n\na > #contact::before {\n  content: "\\200b";\n}\n\na > #label {\n  grid-area: label;\n}\n\na > #label::before {\n  content: "\\200b";\n}\n\na[inert] {\n  --sinch-global-color-icon: currentcolor;\n\n  color: var(--sinch-sys-color-text-muted);\n}\n</style>\n\n<a target="_blank">\n  <sinch-icon icons-version="2"></sinch-icon>\n  <span id="contact"></span>\n  <p id="label"></p>\n</a>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class PhonePreviewRcsChannelInfoOption extends NectaryElement {
-    #link;
-    #icon;
-    #contact;
-    #label;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#link = shadowRoot.querySelector('a');
-        this.#icon = shadowRoot.querySelector('sinch-icon');
-        this.#contact = shadowRoot.querySelector('#contact');
-        this.#label = shadowRoot.querySelector('#label');
+class PhonePreviewRcsChannelInfoOption extends NectaryElement {
+  #link;
+  #icon;
+  #contact;
+  #label;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#link = shadowRoot.querySelector("a");
+    this.#icon = shadowRoot.querySelector("sinch-icon");
+    this.#contact = shadowRoot.querySelector("#contact");
+    this.#label = shadowRoot.querySelector("#label");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateUI();
+  }
+  static get observedAttributes() {
+    return ["type", "contact", "label", "placeholder"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.#updateUI();
+    this.#updateUI();
+  }
+  get type() {
+    return this.getAttribute("type") ?? "phone";
+  }
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  get contact() {
+    return this.getAttribute("contact") ?? "";
+  }
+  set contact(value) {
+    this.setAttribute("contact", value);
+  }
+  get label() {
+    return this.getAttribute("label") ?? "";
+  }
+  set label(value) {
+    this.setAttribute("label", value);
+  }
+  get placeholder() {
+    return this.hasAttribute("placeholder");
+  }
+  set placeholder(value) {
+    if (value) {
+      this.setAttribute("placeholder", "");
+    } else {
+      this.removeAttribute("placeholder");
     }
-    static get observedAttributes() {
-        return ['type', 'contact', 'label', 'placeholder'];
+  }
+  #updateUI() {
+    if (!this.isDomConnected) {
+      return;
     }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            return;
-        }
-        this.#updateUI();
+    const type = this.type;
+    const contact = this.contact;
+    const label = this.label;
+    const isPlaceholder = this.placeholder;
+    let iconName = "fa-phone";
+    let href = `tel:${contact}`;
+    switch (type) {
+      case "website":
+        iconName = "fa-earth-americas";
+        href = contact;
+        break;
+      case "email":
+        iconName = "envelope";
+        href = `mailto:${contact}`;
+        break;
+      case "phone":
+      default:
+        iconName = "fa-phone";
+        href = `tel:${contact}`;
+        break;
     }
-    get type() {
-        return this.getAttribute('type') ?? 'phone';
-    }
-    set type(value) {
-        this.setAttribute('type', value);
-    }
-    get contact() {
-        return this.getAttribute('contact') ?? '';
-    }
-    set contact(value) {
-        this.setAttribute('contact', value);
-    }
-    get label() {
-        return this.getAttribute('label') ?? '';
-    }
-    set label(value) {
-        this.setAttribute('label', value);
-    }
-    get placeholder() {
-        return this.hasAttribute('placeholder');
-    }
-    set placeholder(value) {
-        if (value) {
-            this.setAttribute('placeholder', '');
-        }
-        else {
-            this.removeAttribute('placeholder');
-        }
-    }
-    #updateUI() {
-        if (!this.isDomConnected) {
-            return;
-        }
-        const type = this.type;
-        const contact = this.contact;
-        const label = this.label;
-        const isPlaceholder = this.placeholder;
-        // Set icon based on type
-        let iconName = 'fa-phone';
-        let href = `tel:${contact}`;
-        switch (type) {
-            case 'website':
-                iconName = 'fa-earth-americas';
-                href = contact;
-                break;
-            case 'email':
-                iconName = 'envelope';
-                href = `mailto:${contact}`;
-                break;
-            case 'phone':
-            default:
-                iconName = 'fa-phone';
-                href = `tel:${contact}`;
-                break;
-        }
-        // Update icon
-        this.#icon.setAttribute('name', iconName);
-        // Update link
-        this.#link.href = href;
-        this.#link.target = '_blank';
-        // Set inert if it's a placeholder
-        if (isPlaceholder) {
-            this.#link.setAttribute('inert', '');
-        }
-        else {
-            this.#link.removeAttribute('inert');
-        }
-        // Update contact text
-        this.#contact.textContent = contact;
-        // Update label text
-        this.#label.textContent = label;
+    this.#icon.setAttribute("name", iconName);
+    this.#link.href = href;
+    this.#link.target = "_blank";
+    if (isPlaceholder) {
+      this.#link.setAttribute("inert", "");
+    } else {
+      this.#link.removeAttribute("inert");
     }
+    this.#contact.textContent = contact;
+    this.#label.textContent = label;
+  }
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-channel-info-option', PhonePreviewRcsChannelInfoOption);
+defineCustomElement("sinch-labs-phone-preview-rcs-channel-info-option", PhonePreviewRcsChannelInfoOption);
+export {
+  PhonePreviewRcsChannelInfoOption
+};

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

@@ -1,46 +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:where(*, *::before, *::after) {\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  font: inherit;\n}\n\n.options {\n  display: flex;\n  flex-flow: column;\n  font: var(--sinch-sys-font-body-xs);\n}\n\n.options > header {\n  padding-block-end: 8px;\n}\n\n.options > span {\n  font: var(--sinch-sys-font-body-xxs);\n}\n\n.options > button {\n  padding: 4px;\n  outline: none;\n  background: transparent;\n  text-align: start;\n}\n\n.options > hr {\n  border-color: var(--sinch-sys-color-surface-secondary-active);\n}\n</style>\n\n<section class="options" id="options-container">\n  <header>Notifications</header>\n  <span>Business</span>\n  <button>Block & report spam</button>\n  <hr />\n  <button>View Privacy Policy</button>\n  <hr />\n  <button>View Terms of Service</button>\n  <hr />\n  <button>Learn mode</button>\n</section>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class PhonePreviewRcsChannelOptions extends NectaryElement {
-    #optionsContainer;
-    #controller = null;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#optionsContainer = shadowRoot.querySelector('#options-container');
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.#controller = new AbortController();
-        const { signal } = this.#controller;
-        this.#optionsContainer.addEventListener('click', this.#onOptionClick, { signal });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#controller?.abort();
-        this.#controller = null;
-    }
-    static get observedAttributes() {
-        return [];
-    }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            // No change needed
+class PhonePreviewRcsChannelOptions extends NectaryElement {
+  #optionsContainer;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#optionsContainer = shadowRoot.querySelector("#options-container");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#optionsContainer.addEventListener("click", this.#onOptionClick, { signal });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller?.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+  }
+  #onOptionClick = (event) => {
+    const target = event.target;
+    if (target.tagName === "BUTTON") {
+      const buttonText = target.textContent?.trim();
+      this.dispatchEvent(new CustomEvent("-option-click", {
+        detail: {
+          action: buttonText,
+          element: target
         }
+      }));
     }
-    #onOptionClick = (event) => {
-        const target = event.target;
-        if (target.tagName === 'BUTTON') {
-            const buttonText = target.textContent?.trim();
-            this.dispatchEvent(new CustomEvent('-option-click', {
-                detail: {
-                    action: buttonText,
-                    element: target,
-                },
-            }));
-        }
-    };
+  };
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-channel-options', PhonePreviewRcsChannelOptions);
+defineCustomElement("sinch-labs-phone-preview-rcs-channel-options", PhonePreviewRcsChannelOptions);
+export {
+  PhonePreviewRcsChannelOptions
+};

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

@@ -1,79 +1,79 @@
-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.tabs {\n  --highlight-color: var(--sinch-sys-color-text-default);\n\n  display: flex;\n}\n\n.tabs > button {\n  flex: 1;\n  padding-block-end: 10px;\n  border-block-end: 2px solid transparent;\n  outline: none;\n  background: transparent;\n  color: var(--sinch-sys-color-text-disabled);\n  font: var(--sinch-sys-font-desktop-title-xs);\n}\n\n.tabs > button.active {\n  color: var(--sinch-sys-color-primary-default);\n  border-block-end: 2px solid var(--highlight-color);\n}\n</style>\n\n<section class="tabs" id="tabs-container">\n  <button>Info</button>\n  <button>Options</button>\n</section>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class PhonePreviewRcsChannelTabs extends NectaryElement {
-    #tabsContainer;
-    #controller = null;
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow();
-        shadowRoot.appendChild(template.content.cloneNode(true));
-        this.#tabsContainer = shadowRoot.querySelector('#tabs-container');
+class PhonePreviewRcsChannelTabs extends NectaryElement {
+  #tabsContainer;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#tabsContainer = shadowRoot.querySelector("#tabs-container");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#tabsContainer.addEventListener("click", this.#onTabClick, { signal });
+    this.#updateUI();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller?.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ["color", "active-tab"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.#controller = new AbortController();
-        const { signal } = this.#controller;
-        this.#tabsContainer.addEventListener('click', this.#onTabClick, { signal });
-        this.#updateUI();
+    this.#updateUI();
+  }
+  get color() {
+    return this.getAttribute("color") ?? "var(--sinch-sys-color-primary-default)";
+  }
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  get activeTab() {
+    const value = this.getAttribute("active-tab");
+    return value !== null ? parseInt(value, 10) : 0;
+  }
+  set activeTab(value) {
+    this.setAttribute("active-tab", value.toString());
+  }
+  #updateUI() {
+    if (!this.isDomConnected) {
+      return;
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#controller?.abort();
-        this.#controller = null;
+    this.#tabsContainer.style.setProperty("--highlight-color", this.color);
+    const buttons = this.#tabsContainer.querySelectorAll("button");
+    buttons.forEach((button, index) => {
+      if (index === this.activeTab) {
+        button.classList.add("active");
+      } else {
+        button.classList.remove("active");
+      }
+    });
+  }
+  #onTabClick = (event) => {
+    const target = event.target;
+    if (target.tagName === "BUTTON") {
+      const buttons = Array.from(this.#tabsContainer.querySelectorAll("button"));
+      const clickedIndex = buttons.indexOf(target);
+      if (clickedIndex !== -1) {
+        this.activeTab = clickedIndex;
+        this.dispatchEvent(new CustomEvent("-tab-change", {
+          detail: clickedIndex
+        }));
+      }
     }
-    static get observedAttributes() {
-        return ['color', 'active-tab'];
-    }
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) {
-            return;
-        }
-        this.#updateUI();
-    }
-    get color() {
-        return this.getAttribute('color') ?? 'var(--sinch-sys-color-primary-default)';
-    }
-    set color(value) {
-        this.setAttribute('color', value);
-    }
-    get activeTab() {
-        const value = this.getAttribute('active-tab');
-        return (value !== null) ? parseInt(value, 10) : 0;
-    }
-    set activeTab(value) {
-        this.setAttribute('active-tab', value.toString());
-    }
-    #updateUI() {
-        if (!this.isDomConnected) {
-            return;
-        }
-        // Update CSS custom property for highlight color
-        this.#tabsContainer.style.setProperty('--highlight-color', this.color);
-        // Update active tab state
-        const buttons = this.#tabsContainer.querySelectorAll('button');
-        buttons.forEach((button, index) => {
-            if (index === this.activeTab) {
-                button.classList.add('active');
-            }
-            else {
-                button.classList.remove('active');
-            }
-        });
-    }
-    #onTabClick = (event) => {
-        const target = event.target;
-        if (target.tagName === 'BUTTON') {
-            const buttons = Array.from(this.#tabsContainer.querySelectorAll('button'));
-            const clickedIndex = buttons.indexOf(target);
-            if (clickedIndex !== -1) {
-                this.activeTab = clickedIndex;
-                this.dispatchEvent(new CustomEvent('-tab-change', {
-                    detail: clickedIndex,
-                }));
-            }
-        }
-    };
+  };
 }
-defineCustomElement('sinch-labs-phone-preview-rcs-channel-tabs', PhonePreviewRcsChannelTabs);
+defineCustomElement("sinch-labs-phone-preview-rcs-channel-tabs", PhonePreviewRcsChannelTabs);
+export {
+  PhonePreviewRcsChannelTabs
+};