@signalwire/web-components 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/components/call-controls.js

@@ -0,0 +1,606 @@
+import { LitElement as b, html as n, nothing as v, css as f } from "lit";
+import { property as h, state as u, customElement as w } from "lit/decorators.js";
+import { consume as m } from "@lit/context";
+import { of as g } from "rxjs";
+import { filter as x, switchMap as d } from "rxjs/operators";
+import { callContext as S } from "../context/call-context.js";
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (t, e, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? C(e, s) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (i = (r ? l(e, s, i) : l(i)) || i);
+  return r && i && y(e, s, i), i;
+};
+let a = class extends b {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.showTooltips = !0, this._audioMuted = !1, this._videoMuted = !1, this._screenShareStatus = "inactive", this._capabilities = [], this._overflowOpen = !1, this.subscriptions = [];
+  }
+  /**
+   * Get the effective call (property or context)
+   */
+  get effectiveCall() {
+    return this.call || this._contextCall;
+  }
+  /**
+   * Lifecycle: Component connected to DOM
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.setupSubscriptions();
+  }
+  /**
+   * Lifecycle: React to property changes
+   */
+  updated(t) {
+    super.updated(t), (t.has("call") || t.has("_contextCall")) && (this.cleanupSubscriptions(), this.setupSubscriptions());
+  }
+  /**
+   * Lifecycle: Component disconnected from DOM
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupSubscriptions();
+  }
+  /**
+   * Subscribe to call observables
+   */
+  setupSubscriptions() {
+    const t = this.effectiveCall;
+    if (t) {
+      if (t.self$) {
+        const e = t.self$.pipe(
+          x((o) => o !== null)
+        ), s = e.pipe(
+          d((o) => (this.selfParticipant = o, o.audioMuted$))
+        ).subscribe((o) => {
+          this._audioMuted = o;
+        });
+        this.subscriptions.push(s);
+        const r = e.pipe(d((o) => o.videoMuted$)).subscribe((o) => {
+          this._videoMuted = o;
+        });
+        this.subscriptions.push(r);
+        const i = e.pipe(d((o) => o.screenShareStatus$ ?? g("inactive"))).subscribe((o) => {
+          this._screenShareStatus = o;
+        });
+        this.subscriptions.push(i);
+      } else t.self && (this.selfParticipant = t.self, t.self.audioMuted$ && this.subscriptions.push(
+        t.self.audioMuted$.subscribe((e) => {
+          this._audioMuted = e;
+        })
+      ), t.self.videoMuted$ && this.subscriptions.push(
+        t.self.videoMuted$.subscribe((e) => {
+          this._videoMuted = e;
+        })
+      ), t.self.screenShareStatus$ && this.subscriptions.push(
+        t.self.screenShareStatus$.subscribe((e) => {
+          this._screenShareStatus = e;
+        })
+      ));
+      t.capabilities$ && this.subscriptions.push(
+        t.capabilities$.subscribe((e) => {
+          this._capabilities = e;
+        })
+      );
+    }
+  }
+  /**
+   * Cleanup all subscriptions
+   */
+  cleanupSubscriptions() {
+    this.subscriptions.forEach((t) => t.unsubscribe()), this.subscriptions = [], this.selfParticipant = void 0;
+  }
+  /**
+   * Check if capability is available
+   */
+  hasCapability(t) {
+    return !this._capabilities || this._capabilities.length === 0 ? !0 : this._capabilities.includes(t);
+  }
+  /**
+   * Handle mute audio toggle
+   */
+  async handleMuteAudio() {
+    var s;
+    const t = this.selfParticipant ?? ((s = this.effectiveCall) == null ? void 0 : s.self);
+    if (!t) return;
+    const e = !this._audioMuted;
+    try {
+      this._audioMuted ? await t.unmute() : await t.mute(), this.dispatchEvent(
+        new CustomEvent("sw-mute-audio", {
+          detail: { muted: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } catch (r) {
+      console.error("Failed to toggle audio mute:", r);
+    }
+  }
+  /**
+   * Handle mute video toggle
+   */
+  async handleMuteVideo() {
+    var s;
+    const t = this.selfParticipant ?? ((s = this.effectiveCall) == null ? void 0 : s.self);
+    if (!t) return;
+    const e = !this._videoMuted;
+    try {
+      this._videoMuted ? await t.unmuteVideo() : await t.muteVideo(), this.dispatchEvent(
+        new CustomEvent("sw-mute-video", {
+          detail: { muted: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } catch (r) {
+      console.error("Failed to toggle video mute:", r);
+    }
+  }
+  /**
+   * Handle screen share toggle
+   */
+  async handleScreenShare() {
+    var s, r, i;
+    const t = this.selfParticipant ?? ((s = this.effectiveCall) == null ? void 0 : s.self);
+    if (!t) return;
+    const e = this._screenShareStatus !== "active";
+    try {
+      this._screenShareStatus === "active" ? await ((r = t.stopScreenShare) == null ? void 0 : r.call(t)) : await ((i = t.startScreenShare) == null ? void 0 : i.call(t)), this.dispatchEvent(
+        new CustomEvent("sw-screen-share", {
+          detail: { active: e },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } catch (o) {
+      console.error("Failed to toggle screen share:", o);
+    }
+  }
+  /**
+   * Handle hangup
+   */
+  async handleHangup() {
+    const t = this.effectiveCall;
+    if (t)
+      try {
+        await t.hangup(), this.dispatchEvent(
+          new CustomEvent("sw-hangup", {
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      } catch (e) {
+        console.error("Failed to hangup:", e);
+      }
+  }
+  /**
+   * Toggle overflow menu
+   */
+  toggleOverflow() {
+    this._overflowOpen = !this._overflowOpen;
+  }
+  /**
+   * Get tooltip text for button
+   */
+  getTooltipText(t) {
+    switch (t) {
+      case "mute-audio":
+        return this._audioMuted ? "Unmute Audio" : "Mute Audio";
+      case "mute-video":
+        return this._videoMuted ? "Turn On Camera" : "Turn Off Camera";
+      case "screen-share":
+        return this._screenShareStatus === "active" ? "Stop Sharing" : "Share Screen";
+      case "hangup":
+        return "End Call";
+    }
+  }
+  /**
+   * Render button icon
+   */
+  renderIcon(t) {
+    switch (t) {
+      case "mute-audio":
+        return this._audioMuted ? n`<svg class="button-icon" 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>` : n`<svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z"
+              />
+            </svg>`;
+      case "mute-video":
+        return this._videoMuted ? n`<svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"
+              />
+            </svg>` : n`<svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
+              />
+            </svg>`;
+      case "screen-share":
+        return this._screenShareStatus === "active" ? n`<svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M21.22 18.02l2 2H24v-2h-2.78zm.77-2l.01-10c0-1.11-.9-2-2-2H7.22l5.23 5.23c.18-.04.36-.07.55-.1V7.02l4 3.73-1.58 1.47 5.54 5.54c.61-.33 1.03-.99 1.03-1.74zM2.39 1.73L1.11 3l1.54 1.54c-.4.36-.65.89-.65 1.48v10c0 1.1.89 2 2 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 1.73zM7 15.02c.31-1.48.92-2.95 2.07-4.06l1.59 1.59c-1.54.38-2.7 1.18-3.66 2.47z"
+              />
+            </svg>` : n`<svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6zm9 9v-4h3l-4-4-4 4h3v4h2z"
+              />
+            </svg>`;
+      case "hangup":
+        return n`<svg class="button-icon" 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>`;
+    }
+  }
+  /**
+   * Render a control button
+   */
+  renderButton(t, e) {
+    const { onClick: s, active: r = !1, disabled: i = !1, className: o = "" } = e, l = this.getTooltipText(t);
+    return n`
+      <button
+        class="control-button ${t} ${r ? "active" : ""} ${o}"
+        part="button ${r ? "button-active" : ""} ${i ? "button-disabled" : ""}"
+        aria-label="${l}"
+        aria-pressed="${t !== "hangup" ? r : v}"
+        ?disabled=${i}
+        @click=${s}
+      >
+        ${this.renderIcon(t)}
+        ${this.showTooltips ? n` <span class="tooltip" part="tooltip">${l}</span> ` : v}
+      </button>
+    `;
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    var l, p;
+    const t = this.effectiveCall, e = !!(this.selfParticipant ?? (t == null ? void 0 : t.self)), s = this.hasCapability("self"), r = s || this.hasCapability("selfMuteAudio") || this.hasCapability("muteAudio"), i = s || this.hasCapability("vmuted") || this.hasCapability("selfMuteVideo") || this.hasCapability("muteVideo"), o = (this.hasCapability("screenshare") || this.hasCapability("screenShare")) && !!(((l = this.selfParticipant) == null ? void 0 : l.startScreenShare) ?? ((p = t == null ? void 0 : t.self) == null ? void 0 : p.startScreenShare));
+    return n`
+      <div
+        class="container ${this.orientation === "vertical" ? "vertical" : ""}"
+        part="container"
+        role="toolbar"
+        aria-label="Call controls"
+      >
+        ${this.renderButton("mute-audio", {
+      onClick: () => this.handleMuteAudio(),
+      active: this._audioMuted,
+      disabled: !e || !r
+    })}
+        ${this.renderButton("mute-video", {
+      onClick: () => this.handleMuteVideo(),
+      active: this._videoMuted,
+      disabled: !e || !i
+    })}
+        ${this.renderButton("screen-share", {
+      onClick: () => this.handleScreenShare(),
+      active: this._screenShareStatus === "active",
+      disabled: !e || !o
+    })}
+        ${this.renderButton("hangup", {
+      onClick: () => this.handleHangup(),
+      disabled: !t || !1,
+      className: "hangup"
+    })}
+
+        <!-- Overflow menu for responsive collapse -->
+        <div class="overflow-menu ${this._overflowOpen ? "open" : ""}">
+          <button
+            class="control-button overflow-button"
+            aria-label="More options"
+            aria-expanded="${this._overflowOpen}"
+            @click=${this.toggleOverflow}
+          >
+            <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+              />
+            </svg>
+          </button>
+          <div class="overflow-content">
+            ${this.renderButton("mute-audio", {
+      onClick: () => this.handleMuteAudio(),
+      active: this._audioMuted,
+      disabled: !e || !r
+    })}
+            ${this.renderButton("mute-video", {
+      onClick: () => this.handleMuteVideo(),
+      active: this._videoMuted,
+      disabled: !e || !i
+    })}
+            ${this.renderButton("screen-share", {
+      onClick: () => this.handleScreenShare(),
+      active: this._screenShareStatus === "active",
+      disabled: !e || !o
+    })}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = f`
+    :host {
+      /* CSS Custom Properties for theming */
+      --sw-color-primary: #044cf6;
+      --sw-color-primary-hover: #0339c4;
+      --sw-color-danger: #ef4444;
+      --sw-color-danger-hover: #dc2626;
+      --sw-color-background: #1a1a1a;
+      --sw-color-surface: #2a2a2a;
+      --sw-color-surface-hover: #3a3a3a;
+      --sw-color-text: #ffffff;
+      --sw-color-text-muted: #a0a0a0;
+      --sw-color-border: #404040;
+      --sw-color-active: #ef4444;
+      --sw-border-radius: 8px;
+      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --sw-space-1: 4px;
+      --sw-space-2: 8px;
+      --sw-space-3: 12px;
+      --sw-space-4: 16px;
+      --sw-space-6: 24px;
+
+      display: block;
+      font-family: var(--sw-font-family);
+      color: var(--sw-color-text);
+    }
+
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sw-space-3);
+      padding: var(--sw-space-3);
+      background: var(--sw-color-background);
+      border-radius: var(--sw-border-radius);
+      flex-wrap: wrap;
+    }
+
+    .container.vertical {
+      flex-direction: column;
+    }
+
+    .control-button {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      min-width: 44px;
+      min-height: 44px;
+      padding: 0;
+      background: var(--sw-color-surface);
+      border: 1px solid var(--sw-color-border);
+      border-radius: 50%;
+      color: var(--sw-color-text);
+      cursor: pointer;
+      transition:
+        background-color 0.2s ease,
+        border-color 0.2s ease,
+        transform 0.1s ease;
+    }
+
+    .control-button:hover:not(:disabled) {
+      background: var(--sw-color-surface-hover);
+      border-color: var(--sw-color-text-muted);
+    }
+
+    .control-button:focus {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--sw-color-background),
+        0 0 0 4px var(--sw-color-primary);
+    }
+
+    .control-button:focus-visible {
+      outline: 2px solid var(--sw-color-primary);
+      outline-offset: 2px;
+    }
+
+    .control-button:active:not(:disabled) {
+      transform: scale(0.95);
+    }
+
+    .control-button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .control-button.active {
+      background: var(--sw-color-active);
+      border-color: var(--sw-color-active);
+      color: white;
+    }
+
+    .control-button.active:hover:not(:disabled) {
+      background: var(--sw-color-danger-hover);
+      border-color: var(--sw-color-danger-hover);
+    }
+
+    .control-button.hangup {
+      background: var(--sw-color-danger);
+      border-color: var(--sw-color-danger);
+      color: white;
+    }
+
+    .control-button.hangup:hover:not(:disabled) {
+      background: var(--sw-color-danger-hover);
+      border-color: var(--sw-color-danger-hover);
+    }
+
+    .control-button.screen-share.active {
+      background: var(--sw-color-primary);
+      border-color: var(--sw-color-primary);
+    }
+
+    .control-button.screen-share.active:hover:not(:disabled) {
+      background: var(--sw-color-primary-hover);
+      border-color: var(--sw-color-primary-hover);
+    }
+
+    .button-icon {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+
+    .tooltip {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      padding: var(--sw-space-1) var(--sw-space-2);
+      background: var(--sw-color-surface);
+      border: 1px solid var(--sw-color-border);
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.2s ease,
+        visibility 0.2s ease;
+      pointer-events: none;
+      z-index: 10;
+    }
+
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 6px solid transparent;
+      border-top-color: var(--sw-color-border);
+    }
+
+    .control-button:hover .tooltip,
+    .control-button:focus .tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* Vertical orientation tooltip positioning */
+    .container.vertical .tooltip {
+      bottom: auto;
+      left: calc(100% + 8px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .container.vertical .tooltip::after {
+      top: 50%;
+      left: auto;
+      right: 100%;
+      transform: translateY(-50%);
+      border: 6px solid transparent;
+      border-right-color: var(--sw-color-border);
+    }
+
+    /* Overflow menu for responsive collapse */
+    .overflow-menu {
+      position: relative;
+    }
+
+    .overflow-button {
+      display: none;
+    }
+
+    .overflow-content {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 8px);
+      right: 0;
+      background: var(--sw-color-background);
+      border: 1px solid var(--sw-color-border);
+      border-radius: var(--sw-border-radius);
+      padding: var(--sw-space-2);
+      gap: var(--sw-space-2);
+      flex-direction: column;
+      z-index: 20;
+    }
+
+    .overflow-menu.open .overflow-content {
+      display: flex;
+    }
+
+    /* Responsive collapse at small widths */
+    @media (max-width: 320px) {
+      .container:not(.vertical) > .control-button:not(.hangup):not(.overflow-button) {
+        display: none;
+      }
+
+      .container:not(.vertical) .overflow-button {
+        display: flex;
+      }
+
+      /* Ensure overflow content buttons remain visible when menu is open */
+      .container:not(.vertical) .overflow-content .control-button {
+        display: flex;
+      }
+    }
+
+    /* Dark mode adjustments */
+    @media (prefers-color-scheme: light) {
+      :host {
+        --sw-color-background: #ffffff;
+        --sw-color-surface: #f5f5f5;
+        --sw-color-surface-hover: #e5e5e5;
+        --sw-color-text: #1a1a1a;
+        --sw-color-text-muted: #666666;
+        --sw-color-border: #d4d4d4;
+      }
+    }
+
+    :host([data-theme='light']) {
+      --sw-color-background: #ffffff;
+      --sw-color-surface: #f5f5f5;
+      --sw-color-surface-hover: #e5e5e5;
+      --sw-color-text: #1a1a1a;
+      --sw-color-text-muted: #666666;
+      --sw-color-border: #d4d4d4;
+    }
+  `;
+c([
+  h({ type: Object })
+], a.prototype, "call", 2);
+c([
+  m({ context: S, subscribe: !0 }),
+  u()
+], a.prototype, "_contextCall", 2);
+c([
+  h({ type: String })
+], a.prototype, "orientation", 2);
+c([
+  h({ type: Boolean, attribute: "show-tooltips" })
+], a.prototype, "showTooltips", 2);
+c([
+  u()
+], a.prototype, "_audioMuted", 2);
+c([
+  u()
+], a.prototype, "_videoMuted", 2);
+c([
+  u()
+], a.prototype, "_screenShareStatus", 2);
+c([
+  u()
+], a.prototype, "_capabilities", 2);
+c([
+  u()
+], a.prototype, "_overflowOpen", 2);
+c([
+  u()
+], a.prototype, "selfParticipant", 2);
+a = c([
+  w("sw-call-controls")
+], a);
+export {
+  a as CallControls
+};
+//# sourceMappingURL=call-controls.js.map

package/dist/components/call-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-controls.js","sources":["../../src/components/call-controls.ts"],"sourcesContent":["/**\n * Call Controls Component\n *\n * Responsive button bar for call actions. Displays mute audio, mute video,\n * screen share, and hangup buttons with states reflecting current call state.\n *\n * @example\n * ```html\n * <sw-call-controls .call=${call}></sw-call-controls>\n * ```\n */\n\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription, of } from 'rxjs';\nimport { switchMap, filter } from 'rxjs/operators';\nimport type { Observable } from 'rxjs';\nimport { callContext } from '../context/index.js';\n\n/**\n * Screen share status type\n */\nexport type ScreenShareStatus = 'inactive' | 'pending' | 'active';\n\n/**\n * SelfParticipant interface for call controls\n */\nexport interface SelfParticipant {\n  id: string;\n  audioMuted$: Observable<boolean>;\n  videoMuted$: Observable<boolean>;\n  screenShareStatus$?: Observable<string>;\n  mute: () => Promise<void>;\n  unmute: () => Promise<void>;\n  muteVideo: () => Promise<void>;\n  unmuteVideo: () => Promise<void>;\n  startScreenShare?: () => Promise<void>;\n  stopScreenShare?: () => Promise<void>;\n}\n\n/**\n * Call interface for call controls\n */\nexport interface CallControlsCall {\n  self?: SelfParticipant | null;\n  self$?: Observable<SelfParticipant | null>;\n  capabilities$?: Observable<string[]>;\n  hangup: () => Promise<void>;\n}\n\n/**\n * Button type for controls\n */\ntype ControlButtonType = 'mute-audio' | 'mute-video' | 'screen-share' | 'hangup';\n\n@customElement('sw-call-controls')\nexport class CallControls 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-danger: #ef4444;\n      --sw-color-danger-hover: #dc2626;\n      --sw-color-background: #1a1a1a;\n      --sw-color-surface: #2a2a2a;\n      --sw-color-surface-hover: #3a3a3a;\n      --sw-color-text: #ffffff;\n      --sw-color-text-muted: #a0a0a0;\n      --sw-color-border: #404040;\n      --sw-color-active: #ef4444;\n      --sw-border-radius: 8px;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-space-6: 24px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n      color: var(--sw-color-text);\n    }\n\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-3);\n      background: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n      flex-wrap: wrap;\n    }\n\n    .container.vertical {\n      flex-direction: column;\n    }\n\n    .control-button {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      min-width: 44px;\n      min-height: 44px;\n      padding: 0;\n      background: var(--sw-color-surface);\n      border: 1px solid var(--sw-color-border);\n      border-radius: 50%;\n      color: var(--sw-color-text);\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease,\n        transform 0.1s ease;\n    }\n\n    .control-button:hover:not(:disabled) {\n      background: var(--sw-color-surface-hover);\n      border-color: var(--sw-color-text-muted);\n    }\n\n    .control-button:focus {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--sw-color-background),\n        0 0 0 4px var(--sw-color-primary);\n    }\n\n    .control-button:focus-visible {\n      outline: 2px solid var(--sw-color-primary);\n      outline-offset: 2px;\n    }\n\n    .control-button:active:not(:disabled) {\n      transform: scale(0.95);\n    }\n\n    .control-button:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .control-button.active {\n      background: var(--sw-color-active);\n      border-color: var(--sw-color-active);\n      color: white;\n    }\n\n    .control-button.active:hover:not(:disabled) {\n      background: var(--sw-color-danger-hover);\n      border-color: var(--sw-color-danger-hover);\n    }\n\n    .control-button.hangup {\n      background: var(--sw-color-danger);\n      border-color: var(--sw-color-danger);\n      color: white;\n    }\n\n    .control-button.hangup:hover:not(:disabled) {\n      background: var(--sw-color-danger-hover);\n      border-color: var(--sw-color-danger-hover);\n    }\n\n    .control-button.screen-share.active {\n      background: var(--sw-color-primary);\n      border-color: var(--sw-color-primary);\n    }\n\n    .control-button.screen-share.active:hover:not(:disabled) {\n      background: var(--sw-color-primary-hover);\n      border-color: var(--sw-color-primary-hover);\n    }\n\n    .button-icon {\n      width: 24px;\n      height: 24px;\n      flex-shrink: 0;\n    }\n\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + 8px);\n      left: 50%;\n      transform: translateX(-50%);\n      padding: var(--sw-space-1) var(--sw-space-2);\n      background: var(--sw-color-surface);\n      border: 1px solid var(--sw-color-border);\n      border-radius: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      transition:\n        opacity 0.2s ease,\n        visibility 0.2s ease;\n      pointer-events: none;\n      z-index: 10;\n    }\n\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: 6px solid transparent;\n      border-top-color: var(--sw-color-border);\n    }\n\n    .control-button:hover .tooltip,\n    .control-button:focus .tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n\n    /* Vertical orientation tooltip positioning */\n    .container.vertical .tooltip {\n      bottom: auto;\n      left: calc(100% + 8px);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .container.vertical .tooltip::after {\n      top: 50%;\n      left: auto;\n      right: 100%;\n      transform: translateY(-50%);\n      border: 6px solid transparent;\n      border-right-color: var(--sw-color-border);\n    }\n\n    /* Overflow menu for responsive collapse */\n    .overflow-menu {\n      position: relative;\n    }\n\n    .overflow-button {\n      display: none;\n    }\n\n    .overflow-content {\n      display: none;\n      position: absolute;\n      bottom: calc(100% + 8px);\n      right: 0;\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius);\n      padding: var(--sw-space-2);\n      gap: var(--sw-space-2);\n      flex-direction: column;\n      z-index: 20;\n    }\n\n    .overflow-menu.open .overflow-content {\n      display: flex;\n    }\n\n    /* Responsive collapse at small widths */\n    @media (max-width: 320px) {\n      .container:not(.vertical) > .control-button:not(.hangup):not(.overflow-button) {\n        display: none;\n      }\n\n      .container:not(.vertical) .overflow-button {\n        display: flex;\n      }\n\n      /* Ensure overflow content buttons remain visible when menu is open */\n      .container:not(.vertical) .overflow-content .control-button {\n        display: flex;\n      }\n    }\n\n    /* Dark mode adjustments */\n    @media (prefers-color-scheme: light) {\n      :host {\n        --sw-color-background: #ffffff;\n        --sw-color-surface: #f5f5f5;\n        --sw-color-surface-hover: #e5e5e5;\n        --sw-color-text: #1a1a1a;\n        --sw-color-text-muted: #666666;\n        --sw-color-border: #d4d4d4;\n      }\n    }\n\n    :host([data-theme='light']) {\n      --sw-color-background: #ffffff;\n      --sw-color-surface: #f5f5f5;\n      --sw-color-surface-hover: #e5e5e5;\n      --sw-color-text: #1a1a1a;\n      --sw-color-text-muted: #666666;\n      --sw-color-border: #d4d4d4;\n    }\n  `;\n\n  /**\n   * The call object - can be provided via property or context\n   */\n  @property({ type: Object }) call?: CallControlsCall;\n\n  /**\n   * Consume call from context if not provided as property\n   */\n  @consume({ context: callContext, subscribe: true })\n  @state()\n  private _contextCall?: CallControlsCall;\n\n  /**\n   * Orientation: horizontal (default) or vertical\n   */\n  @property({ type: String }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Show tooltips on hover\n   */\n  @property({ type: Boolean, attribute: 'show-tooltips' }) showTooltips = true;\n\n  /**\n   * Current audio muted state\n   */\n  @state() private _audioMuted = false;\n\n  /**\n   * Current video muted state\n   */\n  @state() private _videoMuted = false;\n\n  /**\n   * Current screen share status\n   */\n  @state() private _screenShareStatus: ScreenShareStatus = 'inactive';\n\n  /**\n   * Available capabilities\n   */\n  @state() private _capabilities: string[] = [];\n\n  /**\n   * Is overflow menu open\n   */\n  @state() private _overflowOpen = false;\n\n  /**\n   * RxJS subscriptions for cleanup\n   */\n  private subscriptions: Subscription[] = [];\n\n  /**\n   * Cached self participant reference for button handlers.\n   * Marked as @state() to trigger re-render when self becomes available,\n   * enabling the control buttons.\n   */\n  @state() private selfParticipant?: SelfParticipant;\n\n  /**\n   * Get the effective call (property or context)\n   */\n  private get effectiveCall(): CallControlsCall | undefined {\n    return this.call || this._contextCall;\n  }\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this.setupSubscriptions();\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('call') || changedProperties.has('_contextCall')) {\n      this.cleanupSubscriptions();\n      this.setupSubscriptions();\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupSubscriptions();\n  }\n\n  /**\n   * Subscribe to call observables\n   */\n  private setupSubscriptions(): void {\n    const call = this.effectiveCall;\n    if (!call) return;\n\n    // Use self$ observable if available (recommended for real calls)\n    if (call.self$) {\n      // Subscribe to self$ and switch to audioMuted$ when self becomes available\n      const nonNullSelf$ = call.self$.pipe(\n        filter((self): self is SelfParticipant => self !== null)\n      );\n\n      const audioSub = nonNullSelf$\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(audioSub);\n\n      // Subscribe to videoMuted$\n      const videoSub = nonNullSelf$.pipe(switchMap((self) => self.videoMuted$)).subscribe((muted) => {\n        this._videoMuted = muted;\n      });\n      this.subscriptions.push(videoSub);\n\n      // Subscribe to screenShareStatus$\n      const screenShareSub = nonNullSelf$\n        .pipe(switchMap((self) => self.screenShareStatus$ ?? of('inactive' as ScreenShareStatus)))\n        .subscribe((status) => {\n          this._screenShareStatus = status as ScreenShareStatus;\n        });\n      this.subscriptions.push(screenShareSub);\n    } else if (call.self) {\n      // Fallback for synchronous self (tests, mocks)\n      this.selfParticipant = call.self;\n\n      if (call.self.audioMuted$) {\n        this.subscriptions.push(\n          call.self.audioMuted$.subscribe((muted) => {\n            this._audioMuted = muted;\n          })\n        );\n      }\n      if (call.self.videoMuted$) {\n        this.subscriptions.push(\n          call.self.videoMuted$.subscribe((muted) => {\n            this._videoMuted = muted;\n          })\n        );\n      }\n      if (call.self.screenShareStatus$) {\n        this.subscriptions.push(\n          call.self.screenShareStatus$.subscribe((status) => {\n            this._screenShareStatus = status as ScreenShareStatus;\n          })\n        );\n      }\n    }\n\n    // Subscribe to capabilities\n    if (call.capabilities$) {\n      this.subscriptions.push(\n        call.capabilities$.subscribe((caps) => {\n          this._capabilities = caps;\n        })\n      );\n    }\n  }\n\n  /**\n   * Cleanup all subscriptions\n   */\n  private cleanupSubscriptions(): void {\n    this.subscriptions.forEach((sub) => sub.unsubscribe());\n    this.subscriptions = [];\n    this.selfParticipant = undefined;\n  }\n\n  /**\n   * Check if capability is available\n   */\n  private hasCapability(capability: string): boolean {\n    // If no capabilities defined, assume all available\n    if (!this._capabilities || this._capabilities.length === 0) {\n      return true;\n    }\n    return this._capabilities.includes(capability);\n  }\n\n  /**\n   * Handle mute audio toggle\n   */\n  private async handleMuteAudio(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeMuted = !this._audioMuted;\n\n    try {\n      if (this._audioMuted) {\n        await self.unmute();\n      } else {\n        await self.mute();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-audio', {\n          detail: { muted: willBeMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle audio mute:', error);\n    }\n  }\n\n  /**\n   * Handle mute video toggle\n   */\n  private async handleMuteVideo(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeMuted = !this._videoMuted;\n\n    try {\n      if (this._videoMuted) {\n        await self.unmuteVideo();\n      } else {\n        await self.muteVideo();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-mute-video', {\n          detail: { muted: willBeMuted },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle video mute:', error);\n    }\n  }\n\n  /**\n   * Handle screen share toggle\n   */\n  private async handleScreenShare(): Promise<void> {\n    const self = this.selfParticipant ?? this.effectiveCall?.self;\n    if (!self) return;\n\n    // Capture the intended new state before calling the SDK\n    const willBeActive = this._screenShareStatus !== 'active';\n\n    try {\n      if (this._screenShareStatus === 'active') {\n        await self.stopScreenShare?.();\n      } else {\n        await self.startScreenShare?.();\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('sw-screen-share', {\n          detail: { active: willBeActive },\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to toggle screen share:', error);\n    }\n  }\n\n  /**\n   * Handle hangup\n   */\n  private async handleHangup(): Promise<void> {\n    const call = this.effectiveCall;\n    if (!call) return;\n\n    try {\n      await call.hangup();\n\n      this.dispatchEvent(\n        new CustomEvent('sw-hangup', {\n          bubbles: true,\n          composed: true\n        })\n      );\n    } catch (error) {\n      console.error('Failed to hangup:', error);\n    }\n  }\n\n  /**\n   * Toggle overflow menu\n   */\n  private toggleOverflow(): void {\n    this._overflowOpen = !this._overflowOpen;\n  }\n\n  /**\n   * Get tooltip text for button\n   */\n  private getTooltipText(type: ControlButtonType): string {\n    switch (type) {\n      case 'mute-audio':\n        return this._audioMuted ? 'Unmute Audio' : 'Mute Audio';\n      case 'mute-video':\n        return this._videoMuted ? 'Turn On Camera' : 'Turn Off Camera';\n      case 'screen-share':\n        return this._screenShareStatus === 'active' ? 'Stop Sharing' : 'Share Screen';\n      case 'hangup':\n        return 'End Call';\n    }\n  }\n\n  /**\n   * Render button icon\n   */\n  private renderIcon(type: ControlButtonType) {\n    switch (type) {\n      case 'mute-audio':\n        return this._audioMuted\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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 class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V20c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z\"\n              />\n            </svg>`;\n\n      case 'mute-video':\n        return this._videoMuted\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z\"\n              />\n            </svg>`;\n\n      case 'screen-share':\n        return this._screenShareStatus === 'active'\n          ? html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M21.22 18.02l2 2H24v-2h-2.78zm.77-2l.01-10c0-1.11-.9-2-2-2H7.22l5.23 5.23c.18-.04.36-.07.55-.1V7.02l4 3.73-1.58 1.47 5.54 5.54c.61-.33 1.03-.99 1.03-1.74zM2.39 1.73L1.11 3l1.54 1.54c-.4.36-.65.89-.65 1.48v10c0 1.1.89 2 2 2H0v2h18.13l2.71 2.71 1.27-1.27L2.39 1.73zM7 15.02c.31-1.48.92-2.95 2.07-4.06l1.59 1.59c-1.54.38-2.7 1.18-3.66 2.47z\"\n              />\n            </svg>`\n          : html`<svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6zm9 9v-4h3l-4-4-4 4h3v4h2z\"\n              />\n            </svg>`;\n\n      case 'hangup':\n        return html`<svg class=\"button-icon\" 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    }\n  }\n\n  /**\n   * Render a control button\n   */\n  private renderButton(\n    type: ControlButtonType,\n    options: {\n      onClick: () => void;\n      active?: boolean;\n      disabled?: boolean;\n      className?: string;\n    }\n  ) {\n    const { onClick, active = false, disabled = false, className = '' } = options;\n    const tooltipText = this.getTooltipText(type);\n\n    return html`\n      <button\n        class=\"control-button ${type} ${active ? 'active' : ''} ${className}\"\n        part=\"button ${active ? 'button-active' : ''} ${disabled ? 'button-disabled' : ''}\"\n        aria-label=\"${tooltipText}\"\n        aria-pressed=\"${type !== 'hangup' ? active : nothing}\"\n        ?disabled=${disabled}\n        @click=${onClick}\n      >\n        ${this.renderIcon(type)}\n        ${this.showTooltips\n          ? html` <span class=\"tooltip\" part=\"tooltip\">${tooltipText}</span> `\n          : nothing}\n      </button>\n    `;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    const call = this.effectiveCall;\n    const hasSelf = Boolean(this.selfParticipant ?? call?.self);\n\n    // Check capabilities - server sends: self, member, vmuted, layout, digit, screenshare, device, lock, end\n    // Having 'self' capability implies self-controls are available (mute audio/video)\n    const hasSelfCapability = this.hasCapability('self');\n    const canMuteAudio =\n      hasSelfCapability || this.hasCapability('selfMuteAudio') || this.hasCapability('muteAudio');\n    const canMuteVideo =\n      hasSelfCapability ||\n      this.hasCapability('vmuted') ||\n      this.hasCapability('selfMuteVideo') ||\n      this.hasCapability('muteVideo');\n    const canScreenShare =\n      (this.hasCapability('screenshare') || this.hasCapability('screenShare')) &&\n      Boolean(this.selfParticipant?.startScreenShare ?? call?.self?.startScreenShare);\n    const canHangup = true; // Always allow hangup\n\n    return html`\n      <div\n        class=\"container ${this.orientation === 'vertical' ? 'vertical' : ''}\"\n        part=\"container\"\n        role=\"toolbar\"\n        aria-label=\"Call controls\"\n      >\n        ${this.renderButton('mute-audio', {\n          onClick: () => this.handleMuteAudio(),\n          active: this._audioMuted,\n          disabled: !hasSelf || !canMuteAudio\n        })}\n        ${this.renderButton('mute-video', {\n          onClick: () => this.handleMuteVideo(),\n          active: this._videoMuted,\n          disabled: !hasSelf || !canMuteVideo\n        })}\n        ${this.renderButton('screen-share', {\n          onClick: () => this.handleScreenShare(),\n          active: this._screenShareStatus === 'active',\n          disabled: !hasSelf || !canScreenShare\n        })}\n        ${this.renderButton('hangup', {\n          onClick: () => this.handleHangup(),\n          disabled: !call || !canHangup,\n          className: 'hangup'\n        })}\n\n        <!-- Overflow menu for responsive collapse -->\n        <div class=\"overflow-menu ${this._overflowOpen ? 'open' : ''}\">\n          <button\n            class=\"control-button overflow-button\"\n            aria-label=\"More options\"\n            aria-expanded=\"${this._overflowOpen}\"\n            @click=${this.toggleOverflow}\n          >\n            <svg class=\"button-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path\n                d=\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\n              />\n            </svg>\n          </button>\n          <div class=\"overflow-content\">\n            ${this.renderButton('mute-audio', {\n              onClick: () => this.handleMuteAudio(),\n              active: this._audioMuted,\n              disabled: !hasSelf || !canMuteAudio\n            })}\n            ${this.renderButton('mute-video', {\n              onClick: () => this.handleMuteVideo(),\n              active: this._videoMuted,\n              disabled: !hasSelf || !canMuteVideo\n            })}\n            ${this.renderButton('screen-share', {\n              onClick: () => this.handleScreenShare(),\n              active: this._screenShareStatus === 'active',\n              disabled: !hasSelf || !canScreenShare\n            })}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-controls': CallControls;\n  }\n}\n"],"names":["CallControls","LitElement","changedProperties","call","nonNullSelf$","filter","self","audioSub","switchMap","muted","videoSub","screenShareSub","of","status","caps","sub","capability","_a","willBeMuted","error","willBeActive","_b","_c","type","html","options","onClick","active","disabled","className","tooltipText","nothing","hasSelf","hasSelfCapability","canMuteAudio","canMuteVideo","canScreenShare","css","__decorateClass","property","consume","callContext","state","customElement"],"mappings":"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"}