@signalwire/web-components 4.0.0-beta.11 → 4.0.0-beta.12

package/dist/components/UI/layout/sw-ui-call-layout.js

@@ -0,0 +1,278 @@
+import { LitElement as p, nothing as h, html as d, css as m } from "lit";
+import { property as c, state as u, customElement as v } from "lit/decorators.js";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (r, a, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? g(a, s) : a, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (t = (o ? l(a, s, t) : l(t)) || t);
+  return o && t && f(a, s, t), t;
+};
+let e = class extends p {
+  constructor() {
+    super(...arguments), this.transcript = !1, this.loading = !1, this.shadow = !1, this._fullscreen = !1, this._onFullscreenChange = () => {
+      const r = document.fullscreenElement === this;
+      this._fullscreen !== r && (this._fullscreen = r, r ? this.setAttribute("fullscreen", "") : this.removeAttribute("fullscreen"));
+    };
+  }
+  /** Reflects as an attribute so CSS can target `:host([fullscreen])`. */
+  get fullscreen() {
+    return this._fullscreen;
+  }
+  toggleTranscript() {
+    this.transcript = !this.transcript;
+  }
+  toggleFullscreen() {
+    document.fullscreenElement ? document.exitFullscreen().catch(() => {
+    }) : this.requestFullscreen().catch(() => {
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("fullscreenchange", this._onFullscreenChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("fullscreenchange", this._onFullscreenChange);
+  }
+  render() {
+    return d`
+      <div class="root">
+        <div class="video">
+          <slot name="background"></slot>
+          <div class="video-content">
+            <slot name="video"></slot>
+          </div>
+          <div class="floating-video">
+            <slot name="floating-video"></slot>
+          </div>
+          ${this.loading ? d`<div class="loading-overlay">
+                <sw-ui-icon
+                  class="spinner"
+                  name="spinner"
+                  .size=${48}
+                ></sw-ui-icon>
+              </div>` : h}
+        </div>
+        <div class="controls">
+          <slot name="controls"></slot>
+        </div>
+        <div class="transcript-pane">
+          <div class="transcript-inner">
+            <slot name="transcript"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = m`
+    /* ================================================================== *
+     *  HOST                                                              *
+     * ================================================================== */
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: var(--sw-call-layout-radius, var(--radius-md));
+      overflow: hidden;
+      font-family: var(--type-family-body);
+      container-type: size;
+    }
+
+    :host([shadow]) {
+      box-shadow: var(--sw-call-layout-shadow, var(--shadow-md));
+    }
+
+    /* ================================================================== *
+     *  FULLSCREEN                                                        *
+     * ================================================================== */
+    :host([fullscreen]) {
+      border-radius: 0;
+      box-shadow: none;
+      width: 100vw;
+      height: 100vh;
+      background: black;
+    }
+
+    /* ================================================================== *
+     *  GRID — wide (landscape) default                                   *
+     * ================================================================== */
+    .root {
+      display: grid;
+      height: 100%;
+      grid-template-rows: 1fr auto;
+      grid-template-columns: 1fr 0fr;
+      grid-template-areas:
+        'video transcript'
+        'controls controls';
+    }
+
+    :host([transcript]) .root {
+      grid-template-columns: 1fr minmax(180px, 0.25fr);
+    }
+
+    /* ================================================================== *
+     *  VIDEO AREA                                                        *
+     * ================================================================== */
+    .video {
+      grid-area: video;
+      display: grid;
+      grid-template: 1fr / 1fr;
+      position: relative;
+      overflow: hidden;
+      min-height: 0;
+      min-width: 0;
+    }
+
+    /* ── Background layer ───────────────────────────────────────────── */
+    slot[name='background'] {
+      display: contents;
+    }
+
+    ::slotted([slot='background']) {
+      grid-area: 1 / 1;
+      z-index: 0;
+      overflow: hidden;
+    }
+
+    /* ── Video content layer ────────────────────────────────────────── */
+    .video-content {
+      grid-area: 1 / 1;
+      z-index: 1;
+      min-height: 0;
+      min-width: 0;
+    }
+
+    /* ── Floating PiP ───────────────────────────────────────────────── */
+    .floating-video {
+      position: absolute;
+      bottom: var(--sw-call-layout-pip-bottom, 12px);
+      right: var(--sw-call-layout-pip-right, 12px);
+      width: var(--sw-call-layout-pip-width, clamp(80px, 20%, 200px));
+      max-width: calc(100% - var(--sw-call-layout-pip-right, 12px) * 2);
+      max-height: calc(100% - var(--sw-call-layout-pip-bottom, 12px) * 2);
+      border-radius: var(--sw-call-layout-pip-radius, var(--radius-md));
+      box-shadow: var(--sw-call-layout-pip-shadow, var(--shadow-md));
+      overflow: hidden;
+      z-index: 3;
+    }
+
+    /* ── Loading overlay ────────────────────────────────────────────── */
+    .loading-overlay {
+      grid-area: 1 / 1;
+      z-index: 4;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--sw-call-layout-loading-bg, rgba(0, 0, 0, 0.6));
+    }
+
+    .spinner {
+      animation: spin 1s linear infinite;
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* ================================================================== *
+     *  CONTROLS                                                          *
+     * ================================================================== */
+    .controls {
+      grid-area: controls;
+      position: relative;
+      z-index: 10;
+      overflow: visible;
+      min-width: 0;
+    }
+
+    /* ================================================================== *
+     *  TRANSCRIPT PANE                                                   *
+     * ================================================================== */
+    .transcript-pane {
+      grid-area: transcript;
+      overflow: hidden;
+      min-width: 0;
+      min-height: 0;
+
+      /* Animate width via grid + clip the overflow during collapse */
+      transition: opacity 350ms ease-in-out;
+      opacity: 0;
+    }
+
+    :host([transcript]) .transcript-pane {
+      opacity: 1;
+    }
+
+    .transcript-inner {
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ================================================================== *
+     *  NARROW / PORTRAIT — aspect-ratio <= ~4:3                          *
+     * ================================================================== */
+    @container (max-aspect-ratio: 4/3) {
+      .root {
+        grid-template-rows: 1fr auto 0fr;
+        grid-template-columns: 1fr;
+        grid-template-areas:
+          'video'
+          'controls'
+          'transcript';
+      }
+
+      /* Cap the video so it doesn't hog all space — leave room for
+         transcript.  minmax(0, 3fr) keeps the video dominant but allows
+         the transcript row to claim meaningful space. */
+      :host([transcript]) .root {
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(0, 3fr) auto minmax(120px, 2fr);
+      }
+    }
+
+    /* ================================================================== *
+     *  VERY WIDE — show transcript narrower                              *
+     * ================================================================== */
+    @container (min-aspect-ratio: 21/9) {
+      :host([transcript]) .root {
+        grid-template-columns: 1fr minmax(160px, 0.15fr);
+      }
+    }
+
+    /* ================================================================== *
+     *  TINY CONTAINER GUARDS                                             *
+     * ================================================================== */
+    @container (max-width: 240px) {
+      .floating-video {
+        display: none;
+      }
+    }
+
+    @container (max-width: 200px), (max-height: 200px) {
+      .transcript-pane {
+        display: none;
+      }
+    }
+  `;
+i([
+  c({ type: Boolean, reflect: !0 })
+], e.prototype, "transcript", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], e.prototype, "shadow", 2);
+i([
+  u()
+], e.prototype, "_fullscreen", 2);
+e = i([
+  v("sw-ui-call-layout")
+], e);
+export {
+  e as SwUiCallLayout
+};
+//# sourceMappingURL=sw-ui-call-layout.js.map

package/dist/components/UI/layout/sw-ui-call-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-call-layout.js","sources":["../../../../src/components/UI/layout/sw-ui-call-layout.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../icons/sw-ui-icon.js';\n\n/**\n * Fluid call layout that adapts to any container shape.\n *\n * Uses the container's **aspect ratio** (not just width) to decide whether\n * the transcript pane sits beside the video (landscape) or below it\n * (portrait / narrow). The video area is always maximised.\n *\n * ```\n * Wide (landscape):                Narrow (portrait):\n * ┌────────────────┬─────────┐    ┌─────────────────┐\n * │     VIDEO      │ TRANSCR │    │      VIDEO       │\n * │  (maximised)   │ (side)  │    │   (maximised)    │\n * ├────────────────┴─────────┤    ├──────────────────┤\n * │        CONTROLS           │    │    CONTROLS      │\n * └──────────────────────────┘    ├──────────────────┤\n *                                  │    TRANSCRIPT    │\n *                                  └──────────────────┘\n * ```\n *\n * @slot video            - main video content\n * @slot background       - element behind the video (e.g. `<sw-ui-background>`)\n * @slot floating-video   - picture-in-picture overlay (absolute, bottom-right)\n * @slot controls         - control bar beneath the video\n * @slot transcript       - transcript panel (side or bottom)\n *\n * @prop {boolean} transcript - show / hide the transcript pane\n * @prop {boolean} loading    - show a spinner overlay on the video area\n * @prop {boolean} shadow     - apply a drop shadow to the host\n * @prop {boolean} fullscreen - (read-only) reflects the current fullscreen state\n *\n * @method toggleTranscript()  - flip the transcript pane open / closed\n * @method toggleFullscreen()  - enter or exit fullscreen\n * @method requestFullscreen() - inherited, enters fullscreen\n * @method exitFullscreen()    - static, exits fullscreen\n *\n * @cssprop --sw-call-layout-radius [0]                   - border-radius on external corners\n * @cssprop --sw-call-layout-shadow                     - box-shadow when `shadow` is set\n * @cssprop --sw-call-layout-loading-bg [rgba(0,0,0,0.6)]    - loading overlay background\n * @cssprop --loading-spinner-size [48]        - spinner icon size (px, number)\n * @cssprop --sw-call-layout-transcript-transition [350ms ease-in-out] - open/close transition\n * @cssprop --sw-call-layout-pip-width [clamp(100px, 20%, 200px)]  - PiP container width\n * @cssprop --sw-call-layout-pip-radius [8px]               - PiP border-radius\n * @cssprop --sw-call-layout-pip-shadow [0 2px 8px rgba(0,0,0,0.5)] - PiP box-shadow\n * @cssprop --sw-call-layout-pip-bottom [12px]              - PiP offset from bottom\n * @cssprop --sw-call-layout-pip-right [12px]               - PiP offset from right\n */\n@customElement('sw-ui-call-layout')\nexport class SwUiCallLayout extends LitElement {\n  @property({ type: Boolean, reflect: true }) transcript = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean, reflect: true }) shadow = false;\n  @state() private _fullscreen = false;\n\n  /** Reflects as an attribute so CSS can target `:host([fullscreen])`. */\n  get fullscreen(): boolean {\n    return this._fullscreen;\n  }\n\n  toggleTranscript(): void {\n    this.transcript = !this.transcript;\n  }\n\n  toggleFullscreen(): void {\n    if (document.fullscreenElement) {\n      document.exitFullscreen().catch(() => {});\n    } else {\n      this.requestFullscreen().catch(() => {});\n    }\n  }\n\n  private _onFullscreenChange = (): void => {\n    const isFs = document.fullscreenElement === this;\n    if (this._fullscreen !== isFs) {\n      this._fullscreen = isFs;\n      if (isFs) {\n        this.setAttribute('fullscreen', '');\n      } else {\n        this.removeAttribute('fullscreen');\n      }\n    }\n  };\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('fullscreenchange', this._onFullscreenChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('fullscreenchange', this._onFullscreenChange);\n  }\n\n  static styles = css`\n    /* ================================================================== *\n     *  HOST                                                              *\n     * ================================================================== */\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: var(--sw-call-layout-radius, var(--radius-md));\n      overflow: hidden;\n      font-family: var(--type-family-body);\n      container-type: size;\n    }\n\n    :host([shadow]) {\n      box-shadow: var(--sw-call-layout-shadow, var(--shadow-md));\n    }\n\n    /* ================================================================== *\n     *  FULLSCREEN                                                        *\n     * ================================================================== */\n    :host([fullscreen]) {\n      border-radius: 0;\n      box-shadow: none;\n      width: 100vw;\n      height: 100vh;\n      background: black;\n    }\n\n    /* ================================================================== *\n     *  GRID — wide (landscape) default                                   *\n     * ================================================================== */\n    .root {\n      display: grid;\n      height: 100%;\n      grid-template-rows: 1fr auto;\n      grid-template-columns: 1fr 0fr;\n      grid-template-areas:\n        'video transcript'\n        'controls controls';\n    }\n\n    :host([transcript]) .root {\n      grid-template-columns: 1fr minmax(180px, 0.25fr);\n    }\n\n    /* ================================================================== *\n     *  VIDEO AREA                                                        *\n     * ================================================================== */\n    .video {\n      grid-area: video;\n      display: grid;\n      grid-template: 1fr / 1fr;\n      position: relative;\n      overflow: hidden;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    /* ── Background layer ───────────────────────────────────────────── */\n    slot[name='background'] {\n      display: contents;\n    }\n\n    ::slotted([slot='background']) {\n      grid-area: 1 / 1;\n      z-index: 0;\n      overflow: hidden;\n    }\n\n    /* ── Video content layer ────────────────────────────────────────── */\n    .video-content {\n      grid-area: 1 / 1;\n      z-index: 1;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    /* ── Floating PiP ───────────────────────────────────────────────── */\n    .floating-video {\n      position: absolute;\n      bottom: var(--sw-call-layout-pip-bottom, 12px);\n      right: var(--sw-call-layout-pip-right, 12px);\n      width: var(--sw-call-layout-pip-width, clamp(80px, 20%, 200px));\n      max-width: calc(100% - var(--sw-call-layout-pip-right, 12px) * 2);\n      max-height: calc(100% - var(--sw-call-layout-pip-bottom, 12px) * 2);\n      border-radius: var(--sw-call-layout-pip-radius, var(--radius-md));\n      box-shadow: var(--sw-call-layout-pip-shadow, var(--shadow-md));\n      overflow: hidden;\n      z-index: 3;\n    }\n\n    /* ── Loading overlay ────────────────────────────────────────────── */\n    .loading-overlay {\n      grid-area: 1 / 1;\n      z-index: 4;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--sw-call-layout-loading-bg, rgba(0, 0, 0, 0.6));\n    }\n\n    .spinner {\n      animation: spin 1s linear infinite;\n      color: rgba(255, 255, 255, 0.85);\n    }\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    /* ================================================================== *\n     *  CONTROLS                                                          *\n     * ================================================================== */\n    .controls {\n      grid-area: controls;\n      position: relative;\n      z-index: 10;\n      overflow: visible;\n      min-width: 0;\n    }\n\n    /* ================================================================== *\n     *  TRANSCRIPT PANE                                                   *\n     * ================================================================== */\n    .transcript-pane {\n      grid-area: transcript;\n      overflow: hidden;\n      min-width: 0;\n      min-height: 0;\n\n      /* Animate width via grid + clip the overflow during collapse */\n      transition: opacity 350ms ease-in-out;\n      opacity: 0;\n    }\n\n    :host([transcript]) .transcript-pane {\n      opacity: 1;\n    }\n\n    .transcript-inner {\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* ================================================================== *\n     *  NARROW / PORTRAIT — aspect-ratio <= ~4:3                          *\n     * ================================================================== */\n    @container (max-aspect-ratio: 4/3) {\n      .root {\n        grid-template-rows: 1fr auto 0fr;\n        grid-template-columns: 1fr;\n        grid-template-areas:\n          'video'\n          'controls'\n          'transcript';\n      }\n\n      /* Cap the video so it doesn't hog all space — leave room for\n         transcript.  minmax(0, 3fr) keeps the video dominant but allows\n         the transcript row to claim meaningful space. */\n      :host([transcript]) .root {\n        grid-template-columns: 1fr;\n        grid-template-rows: minmax(0, 3fr) auto minmax(120px, 2fr);\n      }\n    }\n\n    /* ================================================================== *\n     *  VERY WIDE — show transcript narrower                              *\n     * ================================================================== */\n    @container (min-aspect-ratio: 21/9) {\n      :host([transcript]) .root {\n        grid-template-columns: 1fr minmax(160px, 0.15fr);\n      }\n    }\n\n    /* ================================================================== *\n     *  TINY CONTAINER GUARDS                                             *\n     * ================================================================== */\n    @container (max-width: 240px) {\n      .floating-video {\n        display: none;\n      }\n    }\n\n    @container (max-width: 200px), (max-height: 200px) {\n      .transcript-pane {\n        display: none;\n      }\n    }\n  `;\n\n  render() {\n    return html`\n      <div class=\"root\">\n        <div class=\"video\">\n          <slot name=\"background\"></slot>\n          <div class=\"video-content\">\n            <slot name=\"video\"></slot>\n          </div>\n          <div class=\"floating-video\">\n            <slot name=\"floating-video\"></slot>\n          </div>\n          ${this.loading\n            ? html`<div class=\"loading-overlay\">\n                <sw-ui-icon\n                  class=\"spinner\"\n                  name=\"spinner\"\n                  .size=${48}\n                ></sw-ui-icon>\n              </div>`\n            : nothing}\n        </div>\n        <div class=\"controls\">\n          <slot name=\"controls\"></slot>\n        </div>\n        <div class=\"transcript-pane\">\n          <div class=\"transcript-inner\">\n            <slot name=\"transcript\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-call-layout': SwUiCallLayout;\n  }\n}\n"],"names":["SwUiCallLayout","LitElement","isFs","html","nothing","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/UI/layout/sw-ui-content-drawer.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import '../icons/sw-ui-icon.js';
+/** Formats supported by the content drawer. */
+export type ContentFormat = 'text' | 'markdown' | 'code' | 'html';
+/** Payload that drives the content drawer. */
+export interface DisplayContentPayload {
+    title?: string;
+    content: string;
+    format: ContentFormat;
+    /** Prism language name (required when format === 'code'). */
+    language?: string;
+}
+/**
+ * Content drawer overlay for the call widget.
+ *
+ * Slides in from the right on wide containers; on narrow containers (parent
+ * width ≤ 480 px) it slides up from the bottom instead.
+ *
+ * Formats: `text` · `markdown` (marked + DOMPurify) · `code` (Prism) · `html` (DOMPurify)
+ *
+ * @fires sw-content-drawer-close - User clicked the close button. No detail.
+ */
+export declare class SwUiContentDrawer extends LitElement {
+    static styles: import("lit").CSSResult;
+    open: boolean;
+    narrow: boolean;
+    title: string;
+    content: string;
+    format: ContentFormat;
+    language: string;
+    private _renderedHtml;
+    private _renderFormat;
+    private _copied;
+    private _renderId;
+    private _ro?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _renderContent;
+    private _close;
+    private _copy;
+    private _renderBody;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-content-drawer': SwUiContentDrawer;
+    }
+}
+//# sourceMappingURL=sw-ui-content-drawer.d.ts.map

package/dist/components/UI/layout/sw-ui-content-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-content-drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/layout/sw-ui-content-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,wBAAwB,CAAC;AAMhC,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,8CAA8C;AAC9C,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,aAAa,CAAC;IACtB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAqCD;;;;;;;;;GASG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,0BA4OX;IAE0C,IAAI,UAAS;IACb,MAAM,UAAS;IAC/B,KAAK,SAAM;IACX,OAAO,SAAM;IACb,MAAM,EAAE,aAAa,CAAU;IAC/B,QAAQ,SAAM;IAEjC,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,OAAO,CAAS;IAGjC,OAAO,CAAC,SAAS,CAAK;IAEtB,OAAO,CAAC,GAAG,CAAC,CAAiB;IAE7B,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;YAOxC,cAAc;IAuC5B,OAAO,CAAC,MAAM;YAIA,KAAK;IAUnB,OAAO,CAAC,WAAW;IAenB,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}