@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/elements/sio-composer.d.ts

@@ -0,0 +1,48 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+/** Accent of the circular send button. 'tint' = system blue (default). */
+export type TSioComposerAccent = 'tint' | 'mail' | 'chats' | 'calls' | 'letters';
+/** 'email' swaps the field to type=email with a "you@email.com" placeholder. */
+export type TSioComposerVariant = 'message' | 'email';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-composer': SioComposer;
+    }
+}
+/**
+ * sio-composer — the v7 message composer row.
+ *
+ * Pill input (radius 20, --sio-surface-2, 15px) + circular 32px send
+ * button (solid accent, white arrow-up), optional leading attach "+"
+ * button, optional auto-expanding multiline field. Email-capture
+ * variant for the widget's mail-fallback moment.
+ *
+ * Events (bubbles, composed):
+ *   composer-send   { text }  — send click or Enter (Shift+Enter = newline when auto-expand)
+ *   composer-attach           — attach button click
+ *
+ * Design sources: SocialIOChannels.jsx (chat composer),
+ * SocialIOWidget.jsx (widget composer + email capture).
+ */
+export declare class SioComposer extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** Field placeholder; defaults to "Message" (or "you@email.com" for the email variant). */
+    accessor placeholder: string;
+    /** 'message' (default) or 'email' — email capture swaps input type + placeholder. */
+    accessor variant: TSioComposerVariant;
+    /** Send-button accent: system tint or a channel color. */
+    accessor accent: TSioComposerAccent;
+    /** Show the leading circular "+" attach button. */
+    accessor attach: boolean;
+    /** Multiline field that grows with content (Shift+Enter for newline). */
+    accessor autoExpand: boolean;
+    /** Current field text. */
+    accessor value: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    updated(): void;
+    private handleInput;
+    private handleKeydown;
+    private handleSend;
+    private handleAttach;
+}

package/dist_ts_web/elements/sio-composer.js

@@ -0,0 +1,357 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+/**
+ * sio-composer — the v7 message composer row.
+ *
+ * Pill input (radius 20, --sio-surface-2, 15px) + circular 32px send
+ * button (solid accent, white arrow-up), optional leading attach "+"
+ * button, optional auto-expanding multiline field. Email-capture
+ * variant for the widget's mail-fallback moment.
+ *
+ * Events (bubbles, composed):
+ *   composer-send   { text }  — send click or Enter (Shift+Enter = newline when auto-expand)
+ *   composer-attach           — attach button click
+ *
+ * Design sources: SocialIOChannels.jsx (chat composer),
+ * SocialIOWidget.jsx (widget composer + email capture).
+ */
+let SioComposer = (() => {
+    let _classDecorators = [customElement('sio-composer')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _accent_decorators;
+    let _accent_initializers = [];
+    let _accent_extraInitializers = [];
+    let _attach_decorators;
+    let _attach_initializers = [];
+    let _attach_extraInitializers = [];
+    let _autoExpand_decorators;
+    let _autoExpand_initializers = [];
+    let _autoExpand_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    var SioComposer = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _placeholder_decorators = [property({ type: String })];
+            _variant_decorators = [property({ type: String, reflect: true })];
+            _accent_decorators = [property({ type: String, reflect: true })];
+            _attach_decorators = [property({ type: Boolean, reflect: true })];
+            _autoExpand_decorators = [property({ type: Boolean, reflect: true, attribute: 'auto-expand' })];
+            _value_decorators = [property({ type: String })];
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(this, null, _accent_decorators, { kind: "accessor", name: "accent", static: false, private: false, access: { has: obj => "accent" in obj, get: obj => obj.accent, set: (obj, value) => { obj.accent = value; } }, metadata: _metadata }, _accent_initializers, _accent_extraInitializers);
+            __esDecorate(this, null, _attach_decorators, { kind: "accessor", name: "attach", static: false, private: false, access: { has: obj => "attach" in obj, get: obj => obj.attach, set: (obj, value) => { obj.attach = value; } }, metadata: _metadata }, _attach_initializers, _attach_extraInitializers);
+            __esDecorate(this, null, _autoExpand_decorators, { kind: "accessor", name: "autoExpand", static: false, private: false, access: { has: obj => "autoExpand" in obj, get: obj => obj.autoExpand, set: (obj, value) => { obj.autoExpand = value; } }, metadata: _metadata }, _autoExpand_initializers, _autoExpand_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioComposer = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div
+      style="display: grid; gap: 18px; max-width: 420px; padding: 24px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Chat composer — attach + chats accent
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-composer attach accent="chats" placeholder="Message"></sio-composer>
+      </div>
+
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Widget composer — auto-expand, tint accent
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-composer auto-expand placeholder="Write a message…"></sio-composer>
+      </div>
+
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Email capture — team is away
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-composer variant="email"></sio-composer>
+      </div>
+
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Mail reply — mail accent
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-composer attach accent="mail" placeholder="Reply to Lena…"></sio-composer>
+      </div>
+    </div>
+  `;
+        #placeholder_accessor_storage = __runInitializers(this, _placeholder_initializers, '');
+        /** Field placeholder; defaults to "Message" (or "you@email.com" for the email variant). */
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #variant_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _variant_initializers, 'message'));
+        /** 'message' (default) or 'email' — email capture swaps input type + placeholder. */
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        #accent_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _accent_initializers, 'tint'));
+        /** Send-button accent: system tint or a channel color. */
+        get accent() { return this.#accent_accessor_storage; }
+        set accent(value) { this.#accent_accessor_storage = value; }
+        #attach_accessor_storage = (__runInitializers(this, _accent_extraInitializers), __runInitializers(this, _attach_initializers, false));
+        /** Show the leading circular "+" attach button. */
+        get attach() { return this.#attach_accessor_storage; }
+        set attach(value) { this.#attach_accessor_storage = value; }
+        #autoExpand_accessor_storage = (__runInitializers(this, _attach_extraInitializers), __runInitializers(this, _autoExpand_initializers, false));
+        /** Multiline field that grows with content (Shift+Enter for newline). */
+        get autoExpand() { return this.#autoExpand_accessor_storage; }
+        set autoExpand(value) { this.#autoExpand_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _autoExpand_extraInitializers), __runInitializers(this, _value_initializers, ''));
+        /** Current field text. */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: flex;
+        gap: 8px;
+        align-items: flex-end;
+        padding: 8px 10px 14px;
+        border-top: var(--sio-hairline) solid var(--sio-separator);
+        font-family: var(--sio-font-sf);
+        --sio-composer-accent: var(--sio-tint);
+        --sio-composer-accent-active: var(--sio-tint-hover);
+      }
+      :host([accent='mail']) {
+        --sio-composer-accent: var(--sio-ch-mail);
+        --sio-composer-accent-active: color-mix(in oklab, var(--sio-ch-mail) 85%, var(--sio-label));
+      }
+      :host([accent='chats']) {
+        --sio-composer-accent: var(--sio-ch-chats);
+        --sio-composer-accent-active: color-mix(in oklab, var(--sio-ch-chats) 85%, var(--sio-label));
+      }
+      :host([accent='calls']) {
+        --sio-composer-accent: var(--sio-ch-calls);
+        --sio-composer-accent-active: color-mix(in oklab, var(--sio-ch-calls) 85%, var(--sio-label));
+      }
+      :host([accent='letters']) {
+        --sio-composer-accent: var(--sio-ch-letters);
+        --sio-composer-accent-active: color-mix(in oklab, var(--sio-ch-letters) 85%, var(--sio-label));
+      }
+
+      .attach,
+      .send {
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        border: none;
+        padding: 0;
+        margin-bottom: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        flex: 0 0 auto;
+        font-family: inherit;
+        transition: background 120ms ease, color 120ms ease, transform 80ms ease;
+      }
+
+      .attach {
+        background: var(--sio-surface-2);
+        color: var(--sio-label-3);
+      }
+      .attach:hover {
+        color: var(--sio-label-2);
+      }
+      .attach:active {
+        transform: scale(0.94);
+      }
+
+      .send {
+        background: var(--sio-composer-accent);
+        color: var(--sio-on-accent, #fff);
+      }
+      .send:hover:not(:disabled) {
+        background: var(--sio-composer-accent-active);
+      }
+      .send:active:not(:disabled) {
+        transform: scale(0.94);
+      }
+      .send:disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
+
+      .attach:focus-visible,
+      .send:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-composer-accent) 55%, transparent);
+        outline-offset: 2px;
+      }
+
+      .field {
+        flex: 1;
+        min-width: 0;
+        box-sizing: border-box;
+        min-height: 36px;
+        background: var(--sio-surface-2);
+        border: none;
+        outline: none;
+        border-radius: 20px;
+        padding: 8px 14px;
+        margin: 0;
+        font-family: inherit;
+        font-size: 15px;
+        line-height: 20px;
+        letter-spacing: -0.24px;
+        color: var(--sio-label);
+      }
+      .field::placeholder {
+        color: var(--sio-label-3);
+      }
+      .field:focus-visible {
+        box-shadow: 0 0 0 3px color-mix(in oklab, var(--sio-composer-accent) 25%, transparent);
+      }
+
+      textarea.field {
+        resize: none;
+        max-height: 120px;
+        overflow-y: auto;
+        display: block;
+      }
+    `,
+        ];
+        render() {
+            const placeholder = this.placeholder || (this.variant === 'email' ? 'you@email.com' : 'Message');
+            return html `
+      ${this.attach
+                ? html `
+            <button class="attach" aria-label="Add attachment" @click=${this.handleAttach}>
+              <sio-icon icon="plus" size="16" .strokeWidth=${2}></sio-icon>
+            </button>
+          `
+                : html ``}
+      ${this.autoExpand
+                ? html `
+            <textarea
+              class="field"
+              rows="1"
+              placeholder=${placeholder}
+              .value=${this.value}
+              @input=${this.handleInput}
+              @keydown=${this.handleKeydown}
+            ></textarea>
+          `
+                : html `
+            <input
+              class="field"
+              type=${this.variant === 'email' ? 'email' : 'text'}
+              placeholder=${placeholder}
+              .value=${this.value}
+              @input=${this.handleInput}
+              @keydown=${this.handleKeydown}
+            />
+          `}
+      <button
+        class="send"
+        aria-label="Send"
+        ?disabled=${!this.value.trim()}
+        @click=${this.handleSend}
+      >
+        <sio-icon icon="arrow-up" size="15" .strokeWidth=${2.2}></sio-icon>
+      </button>
+    `;
+        }
+        updated() {
+            if (this.autoExpand) {
+                const textarea = this.shadowRoot?.querySelector('textarea');
+                if (textarea) {
+                    textarea.style.height = 'auto';
+                    textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
+                }
+            }
+        }
+        handleInput = (__runInitializers(this, _value_extraInitializers), (event) => {
+            this.value = event.target.value;
+        });
+        handleKeydown = (event) => {
+            if (event.key === 'Enter' && !(this.autoExpand && event.shiftKey)) {
+                event.preventDefault();
+                this.handleSend();
+            }
+        };
+        handleSend = () => {
+            const text = this.value.trim();
+            if (!text) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('composer-send', {
+                detail: { text },
+                bubbles: true,
+                composed: true,
+            }));
+            this.value = '';
+        };
+        handleAttach = () => {
+            this.dispatchEvent(new CustomEvent('composer-attach', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioComposer = _classThis;
+})();
+export { SioComposer };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWNvbXBvc2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3Npby1jb21wb3Nlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxJQUFJLEVBQ0osUUFBUSxFQUNSLGFBQWEsRUFDYixHQUFHLEdBRUosTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDL0MsT0FBTyxlQUFlLENBQUM7QUFjdkI7Ozs7Ozs7Ozs7Ozs7O0dBY0c7SUFFVSxXQUFXOzRCQUR2QixhQUFhLENBQUMsY0FBYyxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7MkJBQW5CLFNBQVEsV0FBVzs7Ozt1Q0E0Q3pDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7a0NBSXpDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO2tDQUl6QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztzQ0FJMUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsQ0FBQztpQ0FJcEUsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBbkIzQixzTEFBZ0IsV0FBVyw2QkFBWCxXQUFXLGlHQUFNO1lBSWpDLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQWtDO1lBSXpELHVLQUFnQixNQUFNLDZCQUFO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

package/dist_ts_web/elements/sio-conversation-selector.d.ts

@@ -1,4 +1,7 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+import './sio-avatar.js';
+export type TConversationStatus = 'new' | 'waiting' | 'needs-action' | 'resolved';
 export interface IConversation {
     id: string;
     title: string;
@@ -6,19 +9,56 @@ export interface IConversation {
     time: string;
     unread?: boolean;
     avatar?: string;
+    status?: TConversationStatus;
+    /** agent initials for the avatar circle (falls back to the title's initials) */
+    initials?: string;
+    /** agent accent color (data-driven, any CSS color) */
+    tint?: string;
+}
+/** team member shown in the welcome header's avatar stack */
+export interface ITeamMember {
+    initials: string;
+    tint: string;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sio-conversation-selector': SioConversationSelector;
     }
 }
+/**
+ * sio-conversation-selector — the widget's home / welcome state
+ * (v7 SocialIOWidget.jsx SIOWidgetHome).
+ *
+ * Gradient tint header (white text) with the 3-avatar team stack,
+ * "Hi there 👋 / How can we help?" greeting and the presence line;
+ * body cards on radius 14: recent-conversation resume rows, the solid
+ * tint "Send us a message" CTA and the FAQ list with 0.5px hairlines.
+ *
+ * Events (bubbles, composed):
+ *   conversation-selected { conversation } — resume a recent thread
+ *   new-conversation                       — CTA row click
+ *   faq-selected          { question }     — FAQ row click
+ *   close                                  — phablet close chevron
+ */
 export declare class SioConversationSelector extends DeesElement {
     static demo: () => TemplateResult<1>;
     accessor conversations: IConversation[];
     accessor selectedConversationId: string | null;
-    private accessor searchQuery;
+    /** greeting headline, first line */
+    accessor greeting: string;
+    /** greeting headline, second line */
+    accessor tagline: string;
+    /** presence line next to the green dot */
+    accessor replyNote: string;
+    /** team members for the overlapping avatar stack in the header */
+    accessor team: ITeamMember[];
+    /** FAQ quick answers */
+    accessor faqs: string[];
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    private deriveInitials;
     private selectConversation;
     private startNewConversation;
+    private selectFaq;
+    private handleClose;
 }