@signalwire/web-components 4.0.0-beta.3 → 4.0.0-beta.5

package/dist/components/click-to-call.js

@@ -0,0 +1,428 @@
+import { LitElement as h, html as o, css as p } from "lit";
+import { property as c, state as n, customElement as v } from "lit/decorators.js";
+import { switchMap as w } from "rxjs";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (t, e, r, l) => {
+  for (var i = l > 1 ? void 0 : l ? g(e, r) : e, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (i = (l ? d(e, r, i) : d(i)) || i);
+  return l && i && f(e, r, i), i;
+};
+let s = class extends h {
+  constructor() {
+    super(...arguments), this.client = null, this.destination = "", this.label = "Call", this.audioOnly = !0, this.status = "idle", this.call = null, this.audioMuted = !1, this.selfParticipant = null, this.callDuration = 0, this.errorMessage = "", this.subscriptions = [], this.durationInterval = null, this.callStartTime = null;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanup();
+  }
+  async initiateCall() {
+    if (!this.client || !this.destination) {
+      this.errorMessage = "No client or destination configured", this.status = "error";
+      return;
+    }
+    try {
+      this.status = "connecting", this.errorMessage = "", this.dispatchEvent(
+        new CustomEvent("sw-dial", {
+          detail: { destination: this.destination },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+      const t = await this.client.dial(this.destination, {
+        audio: !0,
+        video: !this.audioOnly
+      });
+      this.call = t, this.subscribeToCall(t);
+    } catch (t) {
+      this.status = "error", this.errorMessage = t instanceof Error ? t.message : "Failed to connect", console.error("Click-to-call error:", t);
+    }
+  }
+  subscribeToCall(t) {
+    if (t.status$) {
+      const e = t.status$.subscribe((r) => {
+        r === "active" || r === "connected" ? (this.status = "connected", this.startDurationTimer()) : r === "disconnecting" ? this.status = "disconnecting" : (r === "disconnected" || r === "destroyed" || r === "failed") && this.handleCallEnded();
+      });
+      this.subscriptions.push(e);
+    }
+    if (t.self$) {
+      const e = t.self$.pipe(
+        w((r) => (this.selfParticipant = r, r.audioMuted$))
+      ).subscribe((r) => {
+        this.audioMuted = r;
+      });
+      this.subscriptions.push(e);
+    }
+  }
+  startDurationTimer() {
+    this.callStartTime = Date.now(), this.callDuration = 0, this.durationInterval = window.setInterval(() => {
+      this.callStartTime && (this.callDuration = Math.floor((Date.now() - this.callStartTime) / 1e3));
+    }, 1e3);
+  }
+  stopDurationTimer() {
+    this.durationInterval && (clearInterval(this.durationInterval), this.durationInterval = null), this.callStartTime = null;
+  }
+  formatDuration(t) {
+    const e = Math.floor(t / 60), r = t % 60;
+    return `${e}:${r.toString().padStart(2, "0")}`;
+  }
+  handleCallEnded() {
+    this.cleanup(), this.status = "idle", this.call = null, this.selfParticipant = null, this.audioMuted = !1, this.callDuration = 0, this.dispatchEvent(
+      new CustomEvent("sw-hangup", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  async toggleMute() {
+    if (this.selfParticipant)
+      try {
+        this.audioMuted ? await this.selfParticipant.unmute() : await this.selfParticipant.mute(), this.dispatchEvent(
+          new CustomEvent("sw-mute-toggle", {
+            detail: { muted: !this.audioMuted },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch (t) {
+        console.error("Failed to toggle mute:", t);
+      }
+  }
+  async hangup() {
+    if (this.call)
+      try {
+        this.status = "disconnecting", await this.call.hangup();
+      } catch (t) {
+        console.error("Failed to hangup:", t), this.handleCallEnded();
+      }
+  }
+  cleanup() {
+    this.subscriptions.forEach((t) => t.unsubscribe()), this.subscriptions = [], this.stopDurationTimer();
+  }
+  renderIdleState() {
+    return o`
+      <button
+        class="call-button"
+        part="button"
+        @click=${this.initiateCall}
+        ?disabled=${!this.client || !this.destination}
+        aria-label="${this.label}"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
+          />
+        </svg>
+        ${this.label}
+      </button>
+    `;
+  }
+  renderConnectingState() {
+    return o`
+      <div class="active-call" part="controls">
+        <div class="status-row">
+          <div class="status" part="status">
+            <span class="status-indicator connecting"></span>
+            Connecting...
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderConnectedState() {
+    return o`
+      <div class="active-call" part="controls">
+        <div class="status-row">
+          <div class="status" part="status">
+            <span class="status-indicator"></span>
+            Connected
+          </div>
+          <span class="duration" part="duration">${this.formatDuration(this.callDuration)}</span>
+        </div>
+        <div class="controls-row">
+          <button
+            class="control-button ${this.audioMuted ? "active" : ""}"
+            @click=${this.toggleMute}
+            aria-label="${this.audioMuted ? "Unmute" : "Mute"}"
+            aria-pressed="${this.audioMuted}"
+          >
+            ${this.audioMuted ? o`<svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
+                  />
+                </svg>` : o`<svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
+                  />
+                </svg>`}
+          </button>
+          <button class="control-button hangup-button" @click=${this.hangup} aria-label="Hang up">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  renderErrorState() {
+    return o`
+      <div class="container" part="container">
+        ${this.renderIdleState()}
+        ${this.errorMessage ? o`<div class="error-message">${this.errorMessage}</div>` : null}
+      </div>
+    `;
+  }
+  render() {
+    return this.status === "error" ? this.renderErrorState() : this.status === "connecting" ? o` <div class="container" part="container">${this.renderConnectingState()}</div> ` : this.status === "connected" || this.status === "disconnecting" ? o` <div class="container" part="container">${this.renderConnectedState()}</div> ` : o` <div class="container" part="container">${this.renderIdleState()}</div> `;
+  }
+};
+s.styles = p`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-primary: #044cf6;
+      --sw-color-primary-hover: #0339c4;
+      --sw-color-success: #10b981;
+      --sw-color-success-hover: #0ea472;
+      --sw-color-danger: #ef4444;
+      --sw-color-danger-hover: #dc2626;
+      --sw-color-warning: #f59e0b;
+      --sw-color-text: #1f2937;
+      --sw-color-text-muted: #6b7280;
+      --sw-color-text-inverse: #ffffff;
+      --sw-color-background: #ffffff;
+      --sw-color-background-hover: #f3f4f6;
+      --sw-color-border: #e5e7eb;
+      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --sw-font-size-sm: 12px;
+      --sw-font-size-base: 14px;
+      --sw-font-size-lg: 16px;
+      --sw-space-1: 4px;
+      --sw-space-2: 8px;
+      --sw-space-3: 12px;
+      --sw-space-4: 16px;
+      --sw-border-radius: 8px;
+      --sw-border-radius-full: 9999px;
+
+      display: inline-block;
+      font-family: var(--sw-font-family);
+    }
+
+    /* Dark mode support */
+    :host([data-theme='dark']) {
+      --sw-color-text: #f9fafb;
+      --sw-color-text-muted: #9ca3af;
+      --sw-color-background: #1f2937;
+      --sw-color-background-hover: #374151;
+      --sw-color-border: #374151;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host(:not([data-theme='light'])) {
+        --sw-color-text: #f9fafb;
+        --sw-color-text-muted: #9ca3af;
+        --sw-color-background: #1f2937;
+        --sw-color-background-hover: #374151;
+        --sw-color-border: #374151;
+      }
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sw-space-2);
+    }
+
+    /* Idle state - call button */
+    .call-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sw-space-2);
+      padding: var(--sw-space-3) var(--sw-space-4);
+      min-width: 120px;
+      min-height: 44px;
+      background: var(--sw-color-success);
+      color: var(--sw-color-text-inverse);
+      border: none;
+      border-radius: var(--sw-border-radius);
+      font-family: var(--sw-font-family);
+      font-size: var(--sw-font-size-lg);
+      font-weight: 600;
+      cursor: pointer;
+      transition:
+        background-color 0.15s ease,
+        transform 0.1s ease;
+    }
+
+    .call-button:hover {
+      background: var(--sw-color-success-hover);
+    }
+
+    .call-button:active {
+      transform: scale(0.98);
+    }
+
+    .call-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .call-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* Connected state - expanded controls */
+    .active-call {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sw-space-3);
+      padding: var(--sw-space-4);
+      background: var(--sw-color-background);
+      border: 1px solid var(--sw-color-border);
+      border-radius: var(--sw-border-radius);
+      min-width: 200px;
+    }
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--sw-space-3);
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: var(--sw-space-2);
+      font-size: var(--sw-font-size-base);
+      color: var(--sw-color-text);
+    }
+
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--sw-color-success);
+    }
+
+    .status-indicator.connecting {
+      background: var(--sw-color-warning);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .status-indicator.error {
+      background: var(--sw-color-danger);
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    .duration {
+      font-variant-numeric: tabular-nums;
+      color: var(--sw-color-text-muted);
+      font-size: var(--sw-font-size-sm);
+    }
+
+    .controls-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sw-space-2);
+    }
+
+    .control-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      background: var(--sw-color-background-hover);
+      border: 1px solid var(--sw-color-border);
+      border-radius: var(--sw-border-radius-full);
+      cursor: pointer;
+      color: var(--sw-color-text);
+      transition: background-color 0.15s ease;
+    }
+
+    .control-button:hover {
+      background: var(--sw-color-border);
+    }
+
+    .control-button.active {
+      background: var(--sw-color-danger);
+      border-color: var(--sw-color-danger);
+      color: var(--sw-color-text-inverse);
+    }
+
+    .control-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .hangup-button {
+      background: var(--sw-color-danger);
+      border-color: var(--sw-color-danger);
+      color: var(--sw-color-text-inverse);
+    }
+
+    .hangup-button:hover {
+      background: var(--sw-color-danger-hover);
+    }
+
+    /* Error state */
+    .error-message {
+      color: var(--sw-color-danger);
+      font-size: var(--sw-font-size-sm);
+      text-align: center;
+    }
+  `;
+a([
+  c({ attribute: !1 })
+], s.prototype, "client", 2);
+a([
+  c({ type: String })
+], s.prototype, "destination", 2);
+a([
+  c({ type: String })
+], s.prototype, "label", 2);
+a([
+  c({ type: Boolean, attribute: "audio-only" })
+], s.prototype, "audioOnly", 2);
+a([
+  n()
+], s.prototype, "status", 2);
+a([
+  n()
+], s.prototype, "call", 2);
+a([
+  n()
+], s.prototype, "audioMuted", 2);
+a([
+  n()
+], s.prototype, "callDuration", 2);
+a([
+  n()
+], s.prototype, "errorMessage", 2);
+s = a([
+  v("sw-click-to-call")
+], s);
+export {
+  s as ClickToCallComponent
+};
+//# sourceMappingURL=click-to-call.js.map

package/dist/components/click-to-call.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-to-call.js","sources":["../../src/components/click-to-call.ts"],"sourcesContent":["/**\n * Click to Call Component\n *\n * A single button widget to initiate calls to a preconfigured destination.\n * Shows minimal UI with call status, duration, and basic controls.\n *\n * @example\n * ```html\n * <sw-click-to-call\n *   destination=\"sip:support@example.com\"\n *   .client=${signalWire}\n *   label=\"Call Support\"\n * ></sw-click-to-call>\n * ```\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { Subscription, switchMap } from 'rxjs';\nimport type { Observable } from 'rxjs';\n\n/**\n * Call status type\n */\nexport type ClickToCallStatus = 'idle' | 'connecting' | 'connected' | 'disconnecting' | 'error';\n\n/**\n * Self participant interface for click-to-call component\n */\nexport interface ClickToCallSelf {\n  audioMuted$: Observable<boolean>;\n  mute(): Promise<void>;\n  unmute(): Promise<void>;\n}\n\n/**\n * Call interface for click-to-call component\n */\nexport interface ClickToCallCall {\n  status$: Observable<string>;\n  hangup(): Promise<void>;\n  self$?: Observable<ClickToCallSelf>;\n  self?: ClickToCallSelf;\n}\n\n/**\n * Client interface for click-to-call component\n */\nexport interface ClickToCallClient {\n  dial(\n    destination: string,\n    options?: { audio?: boolean; video?: boolean }\n  ): Promise<ClickToCallCall>;\n}\n\n@customElement('sw-click-to-call')\nexport class ClickToCallComponent extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-primary: #044cf6;\n      --sw-color-primary-hover: #0339c4;\n      --sw-color-success: #10b981;\n      --sw-color-success-hover: #0ea472;\n      --sw-color-danger: #ef4444;\n      --sw-color-danger-hover: #dc2626;\n      --sw-color-warning: #f59e0b;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-color-text-inverse: #ffffff;\n      --sw-color-background: #ffffff;\n      --sw-color-background-hover: #f3f4f6;\n      --sw-color-border: #e5e7eb;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-sm: 12px;\n      --sw-font-size-base: 14px;\n      --sw-font-size-lg: 16px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-border-radius: 8px;\n      --sw-border-radius-full: 9999px;\n\n      display: inline-block;\n      font-family: var(--sw-font-family);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n      --sw-color-background: #1f2937;\n      --sw-color-background-hover: #374151;\n      --sw-color-border: #374151;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n        --sw-color-background: #1f2937;\n        --sw-color-background-hover: #374151;\n        --sw-color-border: #374151;\n      }\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-2);\n    }\n\n    /* Idle state - call button */\n    .call-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-2);\n      padding: var(--sw-space-3) var(--sw-space-4);\n      min-width: 120px;\n      min-height: 44px;\n      background: var(--sw-color-success);\n      color: var(--sw-color-text-inverse);\n      border: none;\n      border-radius: var(--sw-border-radius);\n      font-family: var(--sw-font-family);\n      font-size: var(--sw-font-size-lg);\n      font-weight: 600;\n      cursor: pointer;\n      transition:\n        background-color 0.15s ease,\n        transform 0.1s ease;\n    }\n\n    .call-button:hover {\n      background: var(--sw-color-success-hover);\n    }\n\n    .call-button:active {\n      transform: scale(0.98);\n    }\n\n    .call-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .call-button svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    /* Connected state - expanded controls */\n    .active-call {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-4);\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      min-width: 200px;\n    }\n\n    .status-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--sw-space-3);\n    }\n\n    .status {\n      display: flex;\n      align-items: center;\n      gap: var(--sw-space-2);\n      font-size: var(--sw-font-size-base);\n      color: var(--sw-color-text);\n    }\n\n    .status-indicator {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: var(--sw-color-success);\n    }\n\n    .status-indicator.connecting {\n      background: var(--sw-color-warning);\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .status-indicator.error {\n      background: var(--sw-color-danger);\n    }\n\n    @keyframes pulse {\n      0%,\n      100% {\n        opacity: 1;\n      }\n      50% {\n        opacity: 0.5;\n      }\n    }\n\n    .duration {\n      font-variant-numeric: tabular-nums;\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-sm);\n    }\n\n    .controls-row {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-2);\n    }\n\n    .control-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 44px;\n      height: 44px;\n      background: var(--sw-color-background-hover);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius-full);\n      cursor: pointer;\n      color: var(--sw-color-text);\n      transition: background-color 0.15s ease;\n    }\n\n    .control-button:hover {\n      background: var(--sw-color-border);\n    }\n\n    .control-button.active {\n      background: var(--sw-color-danger);\n      border-color: var(--sw-color-danger);\n      color: var(--sw-color-text-inverse);\n    }\n\n    .control-button svg {\n      width: 20px;\n      height: 20px;\n    }\n\n    .hangup-button {\n      background: var(--sw-color-danger);\n      border-color: var(--sw-color-danger);\n      color: var(--sw-color-text-inverse);\n    }\n\n    .hangup-button:hover {\n      background: var(--sw-color-danger-hover);\n    }\n\n    /* Error state */\n    .error-message {\n      color: var(--sw-color-danger);\n      font-size: var(--sw-font-size-sm);\n      text-align: center;\n    }\n  `;\n\n  /**\n   * Client for initiating calls (SignalWire)\n   */\n  @property({ attribute: false })\n  client: ClickToCallClient | null = null;\n\n  /**\n   * Destination address to call\n   */\n  @property({ type: String })\n  destination: string = '';\n\n  /**\n   * Button label when idle\n   */\n  @property({ type: String })\n  label: string = 'Call';\n\n  /**\n   * Audio-only mode (no video)\n   */\n  @property({ type: Boolean, attribute: 'audio-only' })\n  audioOnly: boolean = true;\n\n  /**\n   * Current call status\n   */\n  @state()\n  private status: ClickToCallStatus = 'idle';\n\n  /**\n   * Current call object\n   */\n  @state()\n  private call: ClickToCallCall | null = null;\n\n  /**\n   * Is audio muted\n   */\n  @state()\n  private audioMuted: boolean = false;\n\n  /**\n   * Self participant reference for mute/unmute operations\n   */\n  private selfParticipant: ClickToCallSelf | null = null;\n\n  /**\n   * Call duration in seconds\n   */\n  @state()\n  private callDuration: number = 0;\n\n  /**\n   * Error message\n   */\n  @state()\n  private errorMessage: string = '';\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Duration timer interval\n   */\n  private durationInterval: number | null = null;\n\n  /**\n   * Call start time\n   */\n  private callStartTime: number | null = null;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanup();\n  }\n\n  private async initiateCall() {\n    if (!this.client || !this.destination) {\n      this.errorMessage = 'No client or destination configured';\n      this.status = 'error';\n      return;\n    }\n\n    try {\n      this.status = 'connecting';\n      this.errorMessage = '';\n\n      // Dispatch dial event\n      this.dispatchEvent(\n        new CustomEvent('sw-dial', {\n          detail: { destination: this.destination },\n          bubbles: true,\n          composed: true\n        })\n      );\n\n      const call = await this.client.dial(this.destination, {\n        audio: true,\n        video: !this.audioOnly\n      });\n\n      this.call = call;\n      this.subscribeToCall(call);\n    } catch (error) {\n      this.status = 'error';\n      this.errorMessage = error instanceof Error ? error.message : 'Failed to connect';\n      console.error('Click-to-call error:', error);\n    }\n  }\n\n  private subscribeToCall(call: ClickToCallCall) {\n    // Subscribe to status\n    if (call.status$) {\n      const statusSub = call.status$.subscribe((status) => {\n        if (status === 'active' || status === 'connected') {\n          this.status = 'connected';\n          this.startDurationTimer();\n        } else if (status === 'disconnecting') {\n          this.status = 'disconnecting';\n        } else if (status === 'disconnected' || status === 'destroyed' || status === 'failed') {\n          this.handleCallEnded();\n        }\n      });\n      this.subscriptions.push(statusSub);\n    }\n\n    // Subscribe to self$ observable to get audioMuted$ updates when self becomes available\n    if (call.self$) {\n      const selfSub = call.self$\n        .pipe(\n          switchMap((self) => {\n            this.selfParticipant = self;\n            return self.audioMuted$;\n          })\n        )\n        .subscribe((muted) => {\n          this.audioMuted = muted;\n        });\n      this.subscriptions.push(selfSub);\n    }\n  }\n\n  private startDurationTimer() {\n    this.callStartTime = Date.now();\n    this.callDuration = 0;\n\n    this.durationInterval = window.setInterval(() => {\n      if (this.callStartTime) {\n        this.callDuration = Math.floor((Date.now() - this.callStartTime) / 1000);\n      }\n    }, 1000);\n  }\n\n  private stopDurationTimer() {\n    if (this.durationInterval) {\n      clearInterval(this.durationInterval);\n      this.durationInterval = null;\n    }\n    this.callStartTime = null;\n  }\n\n  private formatDuration(seconds: number): string {\n    const mins = Math.floor(seconds / 60);\n    const secs = seconds % 60;\n    return `${mins}:${secs.toString().padStart(2, '0')}`;\n  }\n\n  private handleCallEnded() {\n    this.cleanup();\n    this.status = 'idle';\n    this.call = null;\n    this.selfParticipant = null;\n    this.audioMuted = false;\n    this.callDuration = 0;\n\n    this.dispatchEvent(\n      new CustomEvent('sw-hangup', {\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private async toggleMute() {\n    if (!this.selfParticipant) return;\n\n    try {\n      if (this.audioMuted) {\n        await this.selfParticipant.unmute();\n      } else {\n        await this.selfParticipant.mute();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-toggle', {\n          detail: { muted: !this.audioMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle mute:', error);\n    }\n  }\n\n  private async hangup() {\n    if (!this.call) return;\n\n    try {\n      this.status = 'disconnecting';\n      await this.call.hangup();\n    } catch (error) {\n      console.error('Failed to hangup:', error);\n      this.handleCallEnded();\n    }\n  }\n\n  private cleanup() {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    this.stopDurationTimer();\n  }\n\n  private renderIdleState() {\n    return html`\n      <button\n        class=\"call-button\"\n        part=\"button\"\n        @click=${this.initiateCall}\n        ?disabled=${!this.client || !this.destination}\n        aria-label=\"${this.label}\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path\n            d=\"M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\n          />\n        </svg>\n        ${this.label}\n      </button>\n    `;\n  }\n\n  private renderConnectingState() {\n    return html`\n      <div class=\"active-call\" part=\"controls\">\n        <div class=\"status-row\">\n          <div class=\"status\" part=\"status\">\n            <span class=\"status-indicator connecting\"></span>\n            Connecting...\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderConnectedState() {\n    return html`\n      <div class=\"active-call\" part=\"controls\">\n        <div class=\"status-row\">\n          <div class=\"status\" part=\"status\">\n            <span class=\"status-indicator\"></span>\n            Connected\n          </div>\n          <span class=\"duration\" part=\"duration\">${this.formatDuration(this.callDuration)}</span>\n        </div>\n        <div class=\"controls-row\">\n          <button\n            class=\"control-button ${this.audioMuted ? 'active' : ''}\"\n            @click=${this.toggleMute}\n            aria-label=\"${this.audioMuted ? 'Unmute' : 'Mute'}\"\n            aria-pressed=\"${this.audioMuted}\"\n          >\n            ${this.audioMuted\n              ? html`<svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\n                  />\n                </svg>`\n              : html`<svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    d=\"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z\"\n                  />\n                </svg>`}\n          </button>\n          <button class=\"control-button hangup-button\" @click=${this.hangup} aria-label=\"Hang up\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderErrorState() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.renderIdleState()}\n        ${this.errorMessage ? html`<div class=\"error-message\">${this.errorMessage}</div>` : null}\n      </div>\n    `;\n  }\n\n  render() {\n    if (this.status === 'error') {\n      return this.renderErrorState();\n    }\n\n    if (this.status === 'connecting') {\n      return html` <div class=\"container\" part=\"container\">${this.renderConnectingState()}</div> `;\n    }\n\n    if (this.status === 'connected' || this.status === 'disconnecting') {\n      return html` <div class=\"container\" part=\"container\">${this.renderConnectedState()}</div> `;\n    }\n\n    return html` <div class=\"container\" part=\"container\">${this.renderIdleState()}</div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-click-to-call': ClickToCallComponent;\n  }\n}\n"],"names":["ClickToCallComponent","LitElement","call","error","statusSub","status","selfSub","switchMap","self","muted","seconds","mins","secs","sub","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}