@nectary/labs 2.3.4 → 2.4.1

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

@@ -0,0 +1,46 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+import templateHTML from './template.html';
+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
+        }
+    }
+    #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);

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

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

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

@@ -0,0 +1,79 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+import templateHTML from './template.html';
+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');
+    }
+    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;
+        }
+        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);

package/{phone-preview-rcs-chat.d.ts → phone-preview-rcs-chat/index.d.ts}

@@ -1,4 +1,6 @@
 import '@nectary/components/icon';
+import { NectaryElement } from '../utils';
+import '../phone-preview-rcs-chat-message';
 import type React from 'react';
 /**
  * RCS chat preview component.
@@ -6,15 +8,25 @@ import type React from 'react';
  * @param props.name Brand name.
  * @param props.description Brand description.
  * @param props.logo Brand logo image.
- * @param props.messages List of messages.
  */
-export declare const RcsChatPreview: (props: {
-    name: string;
-    description: string;
-    logo: string;
-    messages: string[];
-}) => Node | Node[];
-type Props = Parameters<typeof RcsChatPreview>[0];
+export declare class RcsChatPreview extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): 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 logo(): string;
+    set logo(value: string);
+}
+type Props = {
+    name?: string;
+    description?: string;
+    logo?: string;
+};
 type ElementProps = Partial<{
     [K in keyof Props]: Props[K] | string;
 }>;

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

@@ -0,0 +1,79 @@
+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');
+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');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#updateUI();
+    }
+    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;
+    }
+}
+defineCustomElement('sinch-labs-phone-preview-rcs-chat', RcsChatPreview);

package/phone-preview-rcs-chat-message/index.d.ts

@@ -0,0 +1,35 @@
+import { NectaryElement } from '../utils';
+import type React from 'react';
+/**
+ * Individual RCS chat message component.
+ *
+ * @param props.text Message text content.
+ */
+export declare class RcsChatMessage extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+}
+type Props = {
+    text?: string;
+};
+type ElementProps = Partial<{
+    [K in keyof Props]: Props[K] | string;
+}>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'sinch-labs-phone-preview-rcs-chat-message': ElementProps & HTMLElement;
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-labs-phone-preview-rcs-chat-message': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,48 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+import templateHTML from './template.html';
+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');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#updateUI();
+    }
+    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';
+    }
+}
+defineCustomElement('sinch-labs-phone-preview-rcs-chat-message', RcsChatMessage);

package/utils/element.d.ts

@@ -6,3 +6,12 @@ declare global {
         customElements?: CustomElementRegistry;
     }
 }
+export declare class NectaryElement extends HTMLElement {
+    #private;
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
+    version: string;
+    get focusable(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get isDomConnected(): boolean;
+}

package/utils/element.js

@@ -1,13 +1,19 @@
+import pkg from '../package.json';
 const nectaryDefinitions = 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;
     }
     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) {
@@ -17,6 +23,7 @@ export const setLabRegistry = (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();
@@ -24,3 +31,31 @@ export const setLabRegistry = (registry) => {
 export 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;
+    }
+}

package/utils/index.d.ts

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

package/utils/index.js

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

package/Readme.md

@@ -1 +0,0 @@
-# Nectary labs

package/color-select.d.ts

@@ -1,34 +0,0 @@
-import '@nectary/components/color-menu';
-import '@nectary/components/color-menu-option';
-import '@nectary/components/color-swatch';
-import '@nectary/components/popover';
-import '@nectary/components/select-button';
-import { LitElement } from 'lit';
-export declare class ColorSelect extends LitElement {
-    accessor open: boolean;
-    accessor value: string;
-    onClose(): void;
-    onOpen(): void;
-    onChange(e: CustomEvent<string>): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare const ScopedColorSelect_base: typeof LitElement;
-export declare class ScopedColorSelect extends ScopedColorSelect_base {
-    static elementDefinitions: {
-        'sinch-color-select': typeof ColorSelect;
-    };
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sinch-labs-color-select': {};
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-labs-color-select': {};
-        }
-    }
-}
-export {};

package/color-select.js

@@ -1,79 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
-import '@nectary/components/color-menu';
-import '@nectary/components/color-menu-option';
-import '@nectary/components/color-swatch';
-import '@nectary/components/popover';
-import '@nectary/components/select-button';
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { defineCustomElement } from './utils';
-let ColorSelect = class ColorSelect extends LitElement {
-    accessor open = false;
-    accessor value = '';
-    onClose() {
-        this.open = false;
-    }
-    onOpen() {
-        this.open = true;
-    }
-    onChange(e) {
-        this.value = e.detail;
-    }
-    render() {
-        return html `
-      <sinch-popover
-        ?open=${this.open}
-        aria-label="Select color"
-        orientation="bottom-right"
-        modal
-        @-close=${this.onClose}
-      >
-        <sinch-select-button
-          slot="target"
-          text=${this.value}
-          placeholder="Select color"
-          aria-label="Open color select"
-          @-click=${this.onOpen}
-        >
-          <sinch-color-swatch slot="icon" name="${this.value}" />
-        </sinch-select-button>
-        <sinch-color-menu
-          slot="content"
-          value=${this.value}
-          aria-label="Color menu"
-          @-change=${this.onChange}
-        >
-          <sinch-color-menu-option value="violet" />
-        </sinch-color-menu>
-        </sinch-popover>
-        </sinch-color-menu></sinch-popover>
-    `;
-    }
-};
-__decorate([
-    property({ type: 'boolean' })
-], ColorSelect.prototype, "open", null);
-__decorate([
-    property()
-], ColorSelect.prototype, "value", null);
-ColorSelect = __decorate([
-    customElement('sinch-color-select')
-], ColorSelect);
-export { ColorSelect };
-export class ScopedColorSelect extends ScopedRegistryHost(LitElement) {
-    // Elements here will be registered against the tag names provided only
-    // in the shadow root for this element
-    static { this.elementDefinitions = {
-        'sinch-color-select': ColorSelect,
-    }; }
-    render() {
-        return html `<sinch-color-select></sinch-color-select>`;
-    }
-}
-defineCustomElement('sinch-labs-color-select', ScopedColorSelect);

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

@@ -1,50 +0,0 @@
-import '@nectary/components/icon';
-interface RcsChannelProps {
-    name: string;
-    description: string;
-    color: string;
-    banner: string;
-    logo: string;
-    phones: {
-        label: string;
-        number: string;
-    }[];
-    websites: {
-        label: string;
-        url: string;
-    }[];
-    emails: {
-        label: string;
-        address: string;
-    }[];
-}
-/**
- * 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 declare const RcsChannelPreview: (props: RcsChannelProps) => Node | Node[];
-type Props = Partial<Parameters<typeof RcsChannelPreview>[0]>;
-type ElementProps = Partial<{
-    [K in keyof Props]: Props[K] | string;
-}>;
-declare global {
-    interface HTMLElementTagNameMap {
-        'sinch-labs-phone-preview-rcs-channel': ElementProps & HTMLElement;
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-labs-phone-preview-rcs-channel': ElementProps & React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement>;
-        }
-    }
-}
-export {};