@nectary/labs 2.3.4 → 2.4.0

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

@@ -0,0 +1,49 @@
+import '@nectary/components/icon';
+import { 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 type React from 'react';
+export declare class PhonePreviewRcsChannel extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get name(): string;
+    set name(value: string);
+    get description(): string;
+    set description(value: string);
+    get color(): string;
+    set color(value: string);
+    get banner(): string;
+    set banner(value: string);
+    get logo(): string;
+    set logo(value: string);
+}
+type RcsChannelProps = {
+    name?: string;
+    description?: string;
+    color?: string;
+    banner?: string;
+    logo?: string;
+};
+type RcsChannelElementProps = Partial<{
+    [K in keyof RcsChannelProps]: RcsChannelProps[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-channel': RcsChannelElementProps & HTMLElement;
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-channel': RcsChannelElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,175 @@
+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');
+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();
+        });
+        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();
+    };
+}
+defineCustomElement('sinch-labs-phone-preview-rcs-channel', PhonePreviewRcsChannel);

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

@@ -0,0 +1,37 @@
+import '@nectary/components/icon';
+import { NectaryElement } from '../utils';
+import type React from 'react';
+export declare class PhonePreviewRcsChannelActions extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get phone(): string;
+    set phone(value: string);
+    get website(): string;
+    set website(value: string);
+    get email(): string;
+    set email(value: string);
+}
+type Props = {
+    phone?: string;
+    website?: string;
+    email?: string;
+};
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-channel-actions': ElementProps & HTMLElement;
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-channel-actions': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,126 @@
+import '@nectary/components/icon';
+import { defineCustomElement, NectaryElement } from '../utils';
+import templateHTML from './template.html';
+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,
+        });
+    }
+    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;
+        }
+        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');
+        }
+    }
+    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');
+        }
+    }
+    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');
+        }
+    }
+}
+defineCustomElement('sinch-labs-phone-preview-rcs-channel-actions', PhonePreviewRcsChannelActions);

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

@@ -0,0 +1,29 @@
+import '@nectary/components/icon';
+import { NectaryElement } from '../utils';
+import '../phone-preview-rcs-channel-info-option';
+import type React from 'react';
+export declare class PhonePreviewRcsChannelInfo extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): never[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
+type Props = {};
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-channel-info': ElementProps & HTMLElement;
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-channel-info': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,64 @@
+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');
+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);
+        });
+    }
+}
+defineCustomElement('sinch-labs-phone-preview-rcs-channel-info', PhonePreviewRcsChannelInfo);

package/phone-preview-rcs-channel-info-option/index.d.ts

@@ -0,0 +1,40 @@
+import '@nectary/components/icon';
+import { NectaryElement } from '../utils';
+import type React from 'react';
+export declare class PhonePreviewRcsChannelInfoOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get type(): string;
+    set type(value: string);
+    get contact(): string;
+    set contact(value: string);
+    get label(): string;
+    set label(value: string);
+    get placeholder(): boolean;
+    set placeholder(value: boolean);
+}
+type Props = {
+    type?: 'phone' | 'website' | 'email';
+    contact?: string;
+    label?: string;
+    placeholder?: boolean;
+};
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-channel-info-option': ElementProps & HTMLElement;
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-channel-info-option': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,106 @@
+import '@nectary/components/icon';
+import { defineCustomElement, NectaryElement } from '../utils';
+import templateHTML from './template.html';
+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');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#updateUI();
+    }
+    static get observedAttributes() {
+        return ['type', 'contact', 'label', 'placeholder'];
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) {
+            return;
+        }
+        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');
+        }
+    }
+    #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;
+    }
+}
+defineCustomElement('sinch-labs-phone-preview-rcs-channel-info-option', PhonePreviewRcsChannelInfoOption);

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

@@ -0,0 +1,27 @@
+import { NectaryElement } from '../utils';
+import type React from 'react';
+export declare class PhonePreviewRcsChannelOptions extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): never[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+}
+type Props = {};
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-channel-options': ElementProps & HTMLElement;
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-channel-options': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};