@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-composer.ts

@@ -0,0 +1,306 @@
+import {
+  DeesElement,
+  html,
+  property,
+  customElement,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+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).
+ */
+@customElement('sio-composer')
+export class SioComposer extends DeesElement {
+  public 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>
+  `;
+
+  /** Field placeholder; defaults to "Message" (or "you@email.com" for the email variant). */
+  @property({ type: String })
+  public accessor placeholder = '';
+
+  /** 'message' (default) or 'email' — email capture swaps input type + placeholder. */
+  @property({ type: String, reflect: true })
+  public accessor variant: TSioComposerVariant = 'message';
+
+  /** Send-button accent: system tint or a channel color. */
+  @property({ type: String, reflect: true })
+  public accessor accent: TSioComposerAccent = 'tint';
+
+  /** Show the leading circular "+" attach button. */
+  @property({ type: Boolean, reflect: true })
+  public accessor attach = false;
+
+  /** Multiline field that grows with content (Shift+Enter for newline). */
+  @property({ type: Boolean, reflect: true, attribute: 'auto-expand' })
+  public accessor autoExpand = false;
+
+  /** Current field text. */
+  @property({ type: String })
+  public accessor value = '';
+
+  public 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;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    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>
+    `;
+  }
+
+  public 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`;
+      }
+    }
+  }
+
+  private handleInput = (event: Event) => {
+    this.value = (event.target as HTMLInputElement | HTMLTextAreaElement).value;
+  };
+
+  private handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' && !(this.autoExpand && event.shiftKey)) {
+      event.preventDefault();
+      this.handleSend();
+    }
+  };
+
+  private handleSend = () => {
+    const text = this.value.trim();
+    if (!text) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent<{ text: string }>('composer-send', {
+        detail: { text },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.value = '';
+  };
+
+  private handleAttach = () => {
+    this.dispatchEvent(
+      new CustomEvent('composer-attach', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+}