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

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

@@ -0,0 +1,186 @@
+import { LitElement as g, html as d, css as _ } from "lit";
+import { state as h, property as l, customElement as f } from "lit/decorators.js";
+import { consume as p } from "@lit/context";
+import { devicesContext as v } from "../context/devices-context.js";
+import { callStateContext as S } from "../context/call-state-context.js";
+import { getLogger as w } from "@signalwire/js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, s, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? m(s, i) : s, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (o = (t ? u(s, i, o) : u(o)) || o);
+  return t && o && b(s, i, o), o;
+};
+const a = w();
+let r = class extends g {
+  constructor() {
+    super(...arguments), this._directSelf = null, this._directSubscriptions = [], this._fullscreen = !1, this.showScreenShare = !0, this.showHandRaise = !0, this.showTranscript = !1, this.transcriptActive = !1, this.showSettings = !0, this.showFullscreen = !0;
+  }
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  updated(e) {
+    super.updated(e), e.has("call") && (this._teardownDirect(), this.call && this._directSubscriptions.push(
+      this.call.self$.subscribe((s) => this._directSelf = s)
+    ));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._teardownDirect();
+  }
+  _teardownDirect() {
+    this._directSubscriptions.forEach((e) => e.unsubscribe()), this._directSubscriptions = [], this._directSelf = null;
+  }
+  get _effectiveSelf() {
+    var e;
+    return this.call ? this._directSelf : ((e = this._callState) == null ? void 0 : e.self) ?? null;
+  }
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  _toDropupOptions(e, s) {
+    const i = /* @__PURE__ */ new Set(), t = [];
+    for (const o of e) {
+      const c = o.deviceId || `__default_${o.kind}`;
+      i.has(c) || (i.add(c), t.push({
+        id: c,
+        label: o.label || (o.deviceId ? o.deviceId.slice(0, 12) : "Default"),
+        selected: o.deviceId === (s == null ? void 0 : s.deviceId)
+      }));
+    }
+    return t;
+  }
+  // ── Handlers ─────────────────────────────────────────────────────────────
+  _onMicToggle() {
+    var e;
+    (e = this._devices) == null || e.toggleAudioMute();
+  }
+  _onCameraToggle() {
+    var e;
+    (e = this._devices) == null || e.toggleVideoMute();
+  }
+  _onSpeakerToggle() {
+    var e;
+    (e = this._devices) == null || e.toggleSpeakerMute();
+  }
+  _onFullscreenToggle(e) {
+    this._fullscreen = e.detail.fullscreen;
+  }
+  _onScreenShareToggle(e) {
+    const s = this._effectiveSelf;
+    s && (e.detail.active ? s.startScreenShare().catch((i) => {
+      a.error("[CallControls] Screen share failed:", i);
+    }) : s.stopScreenShare().catch((i) => {
+      a.error("[CallControls] Stop screen share failed:", i);
+    }));
+  }
+  _onHandRaiseToggle(e) {
+    const s = this._effectiveSelf;
+    s && s.toggleHandraise().catch((i) => {
+      a.error("[CallControls] Hand raise failed:", i);
+    });
+  }
+  _onHangUp() {
+    var s;
+    const e = this.call ? () => this.call.hangup() : (s = this._callState) == null ? void 0 : s.hangup;
+    e == null || e().catch((i) => {
+      a.error("[CallControls] Hangup failed:", i);
+    }), this.dispatchEvent(new CustomEvent("sw-call-hangup", { bubbles: !0, composed: !0 }));
+  }
+  _onDeviceChange(e) {
+    if (!this._devices) return;
+    const { kind: s, deviceId: i } = e.detail, t = (o) => o.find((c) => c.deviceId === i) ?? null;
+    s === "mic" && this._devices.selectAudioInput(t(this._devices.audioInputDevices)), s === "camera" && this._devices.selectVideoInput(t(this._devices.videoInputDevices)), s === "speaker" && this._devices.selectAudioOutput(t(this._devices.audioOutputDevices));
+  }
+  _onSettingsChange(e) {
+    if (!this._devices) return;
+    const { settingId: s } = e.detail, t = {
+      "echo-cancellation": () => this._devices.toggleEchoCancellation(),
+      "auto-gain": () => this._devices.toggleAutoGain(),
+      "noise-suppression": () => this._devices.toggleNoiseSuppression()
+    }[s];
+    t && t().catch((o) => a.error("[CallControls] Settings toggle failed:", o));
+  }
+  _buildSettingsItems() {
+    return [
+      { id: "echo-cancellation", label: "Echo Cancellation", selected: this._devices.echoCancellation },
+      { id: "auto-gain", label: "Auto Gain", selected: this._devices.autoGain },
+      { id: "noise-suppression", label: "Noise Suppression", selected: this._devices.noiseSuppression }
+    ];
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    if (!this._devices && !this.call) return d``;
+    const e = this._effectiveSelf, s = (e == null ? void 0 : e.screenShareStatus) === "started", i = (e == null ? void 0 : e.handraised) ?? !1, t = this._devices;
+    return d`
+      <sw-ui-control-bar
+        exportparts="bar,logo,button,chevron"
+        .micMuted=${(t == null ? void 0 : t.audioMuted) ?? !1}
+        .cameraMuted=${(t == null ? void 0 : t.videoMuted) ?? !1}
+        .speakerMuted=${(t == null ? void 0 : t.speakerMuted) ?? !1}
+        .fullscreen=${this._fullscreen}
+        .screenSharing=${s}
+        .handRaised=${i}
+        .transcriptActive=${this.transcriptActive}
+        .showScreenShare=${this.showScreenShare}
+        .showHandRaise=${this.showHandRaise}
+        .showTranscript=${this.showTranscript}
+        .showSettings=${this.showSettings && !!t}
+        .showFullscreen=${this.showFullscreen}
+        .micDevices=${t ? this._toDropupOptions(t.audioInputDevices, t.selectedAudioInput) : []}
+        .cameraDevices=${t ? this._toDropupOptions(t.videoInputDevices, t.selectedVideoInput) : []}
+        .speakerDevices=${t ? this._toDropupOptions(t.audioOutputDevices, t.selectedAudioOutput) : []}
+        .settingsItems=${t ? this._buildSettingsItems() : []}
+        @sw-mic-toggle=${this._onMicToggle}
+        @sw-camera-toggle=${this._onCameraToggle}
+        @sw-speaker-toggle=${this._onSpeakerToggle}
+        @sw-fullscreen-toggle=${this._onFullscreenToggle}
+        @sw-screen-share-toggle=${this._onScreenShareToggle}
+        @sw-hand-raise-toggle=${this._onHandRaiseToggle}
+        @sw-call-hangup=${this._onHangUp}
+        @sw-device-change=${this._onDeviceChange}
+        @sw-settings-change=${this._onSettingsChange}
+      ></sw-ui-control-bar>
+    `;
+  }
+};
+r.styles = _`
+    :host {
+      display: block;
+    }
+  `;
+n([
+  p({ context: v, subscribe: !0 }),
+  h()
+], r.prototype, "_devices", 2);
+n([
+  p({ context: S, subscribe: !0 }),
+  h()
+], r.prototype, "_callState", 2);
+n([
+  l({ type: Object })
+], r.prototype, "call", 2);
+n([
+  h()
+], r.prototype, "_directSelf", 2);
+n([
+  h()
+], r.prototype, "_fullscreen", 2);
+n([
+  l({ type: Boolean, reflect: !0, attribute: "show-screen-share" })
+], r.prototype, "showScreenShare", 2);
+n([
+  l({ type: Boolean, reflect: !0, attribute: "show-hand-raise" })
+], r.prototype, "showHandRaise", 2);
+n([
+  l({ type: Boolean, reflect: !0, attribute: "show-transcript" })
+], r.prototype, "showTranscript", 2);
+n([
+  l({ type: Boolean, reflect: !0, attribute: "transcript-active" })
+], r.prototype, "transcriptActive", 2);
+n([
+  l({ type: Boolean, reflect: !0, attribute: "show-settings" })
+], r.prototype, "showSettings", 2);
+n([
+  l({ type: Boolean, reflect: !0, attribute: "show-fullscreen" })
+], r.prototype, "showFullscreen", 2);
+r = n([
+  f("sw-call-controls")
+], r);
+export {
+  r as SwCallControls
+};
+//# sourceMappingURL=sw-call-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-controls.js","sources":["../../src/components/sw-call-controls.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport { devicesContext, type DevicesState } from '../context/devices-context.js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\nimport type { DropUpItem } from './UI/controls/sw-ui-dropup.js';\nimport type {\n  FullscreenToggleDetail,\n  ScreenShareToggleDetail,\n  HandRaiseToggleDetail,\n  SettingsChangeDetail,\n} from './UI/controls/sw-ui-control-bar.js';\nimport { getLogger } from '@signalwire/js';\nimport type { CallSelfParticipant } from '@signalwire/js';\nimport type { Call } from '../types/index.js';\n\nconst logger = getLogger();\n\n/**\n * Connected control bar that bridges `devicesContext` and `callStateContext`\n * to the pure `sw-ui-control-bar` UI component.\n *\n * Input precedence (most specific wins): `.call` > context.\n * When `.call` is set, the control bar drives screen-share / hand-raise /\n * hang-up directly from the Call. Mic/camera/speaker toggles still require\n * `devicesContext` — without it those buttons render in their default state.\n *\n * @prop {Call}    call             - explicit Call object (overrides context)\n * @prop {boolean} showScreenShare  - show the screen-share button\n * @prop {boolean} showHandRaise   - show the hand-raise button\n * @prop {boolean} showTranscript  - show the transcript toggle button\n * @prop {boolean} transcriptActive - current transcript panel visibility\n *\n * @fires sw-call-hangup - Re-dispatched when the user clicks hang-up so external\n *                         consumers (e.g. React parents) can react. No detail.\n */\n@customElement('sw-call-controls')\nexport class SwCallControls extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n  `;\n\n  @consume({ context: devicesContext, subscribe: true })\n  @state()\n  private _devices!: DevicesState;\n\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  /** Explicit Call — when set, drives call-state actions directly. */\n  @property({ type: Object }) call?: Call;\n\n  @state() private _directSelf: CallSelfParticipant | null = null;\n\n  private _directSubscriptions: Subscription[] = [];\n\n  @state() private _fullscreen = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-screen-share' })\n  showScreenShare = true;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-hand-raise' })\n  showHandRaise = true;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-transcript' })\n  showTranscript = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'transcript-active' })\n  transcriptActive = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-settings' })\n  showSettings = true;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-fullscreen' })\n  showFullscreen = true;\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('call')) {\n      this._teardownDirect();\n      if (this.call) {\n        this._directSubscriptions.push(\n          this.call.self$.subscribe((s) => (this._directSelf = s))\n        );\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardownDirect();\n  }\n\n  private _teardownDirect(): void {\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n    this._directSelf = null;\n  }\n\n  private get _effectiveSelf(): CallSelfParticipant | null {\n    return this.call ? this._directSelf : this._callState?.self ?? null;\n  }\n\n  // ── Helpers ───────────────────────────────────────────────────────────────\n\n  private _toDropupOptions(\n    devices: MediaDeviceInfo[],\n    selected: MediaDeviceInfo | null\n  ): DropUpItem[] {\n    // Before getUserMedia permission, browsers may return devices with\n    // empty deviceId/label. Deduplicate empty-ID entries into one\n    // placeholder so the chevron doesn't show multiple blank rows.\n    const seen = new Set<string>();\n    const result: DropUpItem[] = [];\n    for (const d of devices) {\n      const id = d.deviceId || `__default_${d.kind}`;\n      if (seen.has(id)) continue;\n      seen.add(id);\n      result.push({\n        id,\n        label: d.label || (d.deviceId ? d.deviceId.slice(0, 12) : 'Default'),\n        selected: d.deviceId === selected?.deviceId,\n      });\n    }\n    return result;\n  }\n\n  // ── Handlers ─────────────────────────────────────────────────────────────\n\n  private _onMicToggle() {\n    this._devices?.toggleAudioMute();\n  }\n\n  private _onCameraToggle() {\n    this._devices?.toggleVideoMute();\n  }\n\n  private _onSpeakerToggle() {\n    this._devices?.toggleSpeakerMute();\n  }\n\n  private _onFullscreenToggle(e: CustomEvent<FullscreenToggleDetail>) {\n    this._fullscreen = e.detail.fullscreen;\n  }\n\n  private _onScreenShareToggle(e: CustomEvent<ScreenShareToggleDetail>) {\n    const self = this._effectiveSelf;\n    if (!self) return;\n\n    if (e.detail.active) {\n      self.startScreenShare().catch((err) => {\n        logger.error('[CallControls] Screen share failed:', err);\n      });\n    } else {\n      self.stopScreenShare().catch((err) => {\n        logger.error('[CallControls] Stop screen share failed:', err);\n      });\n    }\n  }\n\n  private _onHandRaiseToggle(_e: CustomEvent<HandRaiseToggleDetail>) {\n    const self = this._effectiveSelf;\n    if (!self) return;\n\n    self.toggleHandraise().catch((err) => {\n      logger.error('[CallControls] Hand raise failed:', err);\n    });\n  }\n\n  private _onHangUp() {\n    const hangup = this.call ? () => this.call!.hangup() : this._callState?.hangup;\n    hangup?.().catch((err) => {\n      logger.error('[CallControls] Hangup failed:', err);\n    });\n    // Re-dispatch as sw-call-hangup so external consumers (e.g. React) can react.\n    this.dispatchEvent(new CustomEvent('sw-call-hangup', { bubbles: true, composed: true }));\n  }\n\n  private _onDeviceChange(e: CustomEvent<{ kind: 'mic' | 'camera' | 'speaker'; deviceId: string }>) {\n    if (!this._devices) return;\n    const { kind, deviceId } = e.detail;\n    const find = (list: MediaDeviceInfo[]) => list.find((d) => d.deviceId === deviceId) ?? null;\n\n    if (kind === 'mic')     this._devices.selectAudioInput(find(this._devices.audioInputDevices));\n    if (kind === 'camera')  this._devices.selectVideoInput(find(this._devices.videoInputDevices));\n    if (kind === 'speaker') this._devices.selectAudioOutput(find(this._devices.audioOutputDevices));\n  }\n\n  private _onSettingsChange(e: CustomEvent<SettingsChangeDetail>) {\n    if (!this._devices) return;\n    const { settingId } = e.detail;\n    const toggles: Record<string, () => Promise<void>> = {\n      'echo-cancellation': () => this._devices.toggleEchoCancellation(),\n      'auto-gain': () => this._devices.toggleAutoGain(),\n      'noise-suppression': () => this._devices.toggleNoiseSuppression(),\n    };\n    const toggle = toggles[settingId];\n    if (toggle) {\n      toggle().catch((err) => logger.error('[CallControls] Settings toggle failed:', err));\n    }\n  }\n\n  private _buildSettingsItems(): DropUpItem[] {\n    return [\n      { id: 'echo-cancellation', label: 'Echo Cancellation', selected: this._devices.echoCancellation },\n      { id: 'auto-gain', label: 'Auto Gain', selected: this._devices.autoGain },\n      { id: 'noise-suppression', label: 'Noise Suppression', selected: this._devices.noiseSuppression },\n    ];\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  render() {\n    if (!this._devices && !this.call) return html``;\n\n    const self = this._effectiveSelf;\n    const isScreenSharing = self?.screenShareStatus === 'started';\n    const isHandRaised = self?.handraised ?? false;\n\n    const d = this._devices;\n    return html`\n      <sw-ui-control-bar\n        exportparts=\"bar,logo,button,chevron\"\n        .micMuted=${d?.audioMuted ?? false}\n        .cameraMuted=${d?.videoMuted ?? false}\n        .speakerMuted=${d?.speakerMuted ?? false}\n        .fullscreen=${this._fullscreen}\n        .screenSharing=${isScreenSharing}\n        .handRaised=${isHandRaised}\n        .transcriptActive=${this.transcriptActive}\n        .showScreenShare=${this.showScreenShare}\n        .showHandRaise=${this.showHandRaise}\n        .showTranscript=${this.showTranscript}\n        .showSettings=${this.showSettings && !!d}\n        .showFullscreen=${this.showFullscreen}\n        .micDevices=${d ? this._toDropupOptions(d.audioInputDevices, d.selectedAudioInput) : []}\n        .cameraDevices=${d ? this._toDropupOptions(d.videoInputDevices, d.selectedVideoInput) : []}\n        .speakerDevices=${d ? this._toDropupOptions(d.audioOutputDevices, d.selectedAudioOutput) : []}\n        .settingsItems=${d ? this._buildSettingsItems() : []}\n        @sw-mic-toggle=${this._onMicToggle}\n        @sw-camera-toggle=${this._onCameraToggle}\n        @sw-speaker-toggle=${this._onSpeakerToggle}\n        @sw-fullscreen-toggle=${this._onFullscreenToggle}\n        @sw-screen-share-toggle=${this._onScreenShareToggle}\n        @sw-hand-raise-toggle=${this._onHandRaiseToggle}\n        @sw-call-hangup=${this._onHangUp}\n        @sw-device-change=${this._onDeviceChange}\n        @sw-settings-change=${this._onSettingsChange}\n      ></sw-ui-control-bar>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-controls': SwCallControls;\n  }\n}\n"],"names":["logger","getLogger","SwCallControls","LitElement","changed","s","_a","devices","selected","seen","result","d","id","self","err","_e","hangup","kind","deviceId","find","list","settingId","toggle","html","isScreenSharing","isHandRaised","css","__decorateClass","consume","devicesContext","state","callStateContext","property","customElement"],"mappings":"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"}

package/dist/components/sw-call-dialpad.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Call Dialpad Component
+ *
+ * Wrapper around `sw-dialpad` that integrates with a Call.
+ * When a call is connected, digit presses send DTMF tones.
+ * When no call is active, the dial event bubbles up for the parent to handle.
+ *
+ * Input precedence (most specific wins): `.call` > context.
+ *
+ * @example
+ * ```html
+ * <sw-call-dialpad></sw-call-dialpad>
+ * <sw-call-dialpad .call=${call}></sw-call-dialpad>
+ * <sw-call-dialpad show-call-button @sw-dial=${onDial}></sw-call-dialpad>
+ * ```
+ *
+ * @csspart container    - Outer dialpad container.
+ * @csspart display      - Number / text display field.
+ * @csspart keypad       - Grid of digit keys.
+ * @csspart key          - Individual digit button.
+ * @csspart key-pressed  - Digit button while pressed.
+ * @csspart call-button  - The call button (when `show-call-button`).
+ *
+ * @fires sw-digit-press - A digit was pressed. Detail: `{ digit: string, digits: string }`.
+ * @fires sw-dial        - User pressed the call button. Detail: `{ digits: string }`.
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+import './UI/controls/sw-ui-dialpad.js';
+export declare class SwCallDialpad extends LitElement {
+    private _callState?;
+    /** Explicit Call — when set, drives DTMF directly and bypasses context. */
+    call?: Call;
+    private _directStatus;
+    private _directSubscriptions;
+    /** Whether to display the call button below the keypad. */
+    showCallButton: boolean;
+    /** Allow free-text input in the display field (e.g., SIP URIs, vanity letters). */
+    allowText: boolean;
+    /** Placeholder text shown in the digit display input. */
+    placeholder: string;
+    protected updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private _onDigitPress;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-dialpad': SwCallDialpad;
+    }
+}
+//# sourceMappingURL=sw-call-dialpad.d.ts.map

package/dist/components/sw-call-dialpad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-dialpad.d.ts","sourceRoot":"","sources":["../../src/components/sw-call-dialpad.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,gCAAgC,CAAC;AAIxC,qBACa,aAAc,SAAQ,UAAU;IAG3C,OAAO,CAAC,UAAU,CAAC,CAAY;IAE/B,2EAA2E;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IAE/B,OAAO,CAAC,aAAa,CAA2B;IAEzD,OAAO,CAAC,oBAAoB,CAAsB;IAElD,2DAA2D;IAE3D,cAAc,UAAS;IAEvB,mFAAmF;IAEnF,SAAS,UAAS;IAElB,yDAAyD;IAEzD,WAAW,SAAkB;IAE7B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IActD,oBAAoB;IAMpB,OAAO,CAAC,aAAa;IAarB,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/sw-call-dialpad.js

@@ -0,0 +1,70 @@
+import { LitElement as n, html as d } from "lit";
+import { state as u, property as p, customElement as h } from "lit/decorators.js";
+import { consume as b } from "@lit/context";
+import { callStateContext as _ } from "../context/call-state-context.js";
+import { getLogger as f } from "@signalwire/js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (s, t, c, r) => {
+  for (var e = r > 1 ? void 0 : r ? w(t, c) : t, a = s.length - 1, l; a >= 0; a--)
+    (l = s[a]) && (e = (r ? l(t, c, e) : l(e)) || e);
+  return r && e && m(t, c, e), e;
+};
+const S = f();
+let i = class extends n {
+  constructor() {
+    super(...arguments), this._directStatus = null, this._directSubscriptions = [], this.showCallButton = !1, this.allowText = !1, this.placeholder = "Enter number";
+  }
+  updated(s) {
+    super.updated(s), s.has("call") && (this._directSubscriptions.forEach((t) => t.unsubscribe()), this._directSubscriptions = [], this._directStatus = null, this.call && this._directSubscriptions.push(
+      this.call.status$.subscribe((t) => this._directStatus = t)
+    ));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._directSubscriptions.forEach((s) => s.unsubscribe()), this._directSubscriptions = [];
+  }
+  _onDigitPress(s) {
+    var e, a;
+    const { digit: t } = s.detail;
+    if ((this.call ? this._directStatus : (e = this._callState) == null ? void 0 : e.status) !== "connected") return;
+    const r = this.call ? (l) => this.call.sendDigits(l) : (a = this._callState) == null ? void 0 : a.sendDigits;
+    r == null || r(t).catch((l) => {
+      S.error("Failed to send DTMF:", l);
+    });
+  }
+  render() {
+    return d`
+      <sw-ui-dialpad
+        exportparts="container,display,keypad,key,key-pressed,call-button"
+        ?show-call-button=${this.showCallButton}
+        ?allow-text=${this.allowText}
+        placeholder=${this.placeholder}
+        @sw-digit-press=${this._onDigitPress}
+      ></sw-ui-dialpad>
+    `;
+  }
+};
+o([
+  b({ context: _, subscribe: !0 }),
+  u()
+], i.prototype, "_callState", 2);
+o([
+  p({ type: Object })
+], i.prototype, "call", 2);
+o([
+  u()
+], i.prototype, "_directStatus", 2);
+o([
+  p({ type: Boolean, reflect: !0, attribute: "show-call-button" })
+], i.prototype, "showCallButton", 2);
+o([
+  p({ type: Boolean, reflect: !0, attribute: "allow-text" })
+], i.prototype, "allowText", 2);
+o([
+  p({ type: String })
+], i.prototype, "placeholder", 2);
+i = o([
+  h("sw-call-dialpad")
+], i);
+export {
+  i as SwCallDialpad
+};
+//# sourceMappingURL=sw-call-dialpad.js.map

package/dist/components/sw-call-dialpad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-dialpad.js","sources":["../../src/components/sw-call-dialpad.ts"],"sourcesContent":["/**\n * Call Dialpad Component\n *\n * Wrapper around `sw-dialpad` that integrates with a Call.\n * When a call is connected, digit presses send DTMF tones.\n * When no call is active, the dial event bubbles up for the parent to handle.\n *\n * Input precedence (most specific wins): `.call` > context.\n *\n * @example\n * ```html\n * <sw-call-dialpad></sw-call-dialpad>\n * <sw-call-dialpad .call=${call}></sw-call-dialpad>\n * <sw-call-dialpad show-call-button @sw-dial=${onDial}></sw-call-dialpad>\n * ```\n *\n * @csspart container    - Outer dialpad container.\n * @csspart display      - Number / text display field.\n * @csspart keypad       - Grid of digit keys.\n * @csspart key          - Individual digit button.\n * @csspart key-pressed  - Digit button while pressed.\n * @csspart call-button  - The call button (when `show-call-button`).\n *\n * @fires sw-digit-press - A digit was pressed. Detail: `{ digit: string, digits: string }`.\n * @fires sw-dial        - User pressed the call button. Detail: `{ digits: string }`.\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport { Subscription } from 'rxjs';\nimport type { CallStatus } from '@signalwire/js';\nimport { callStateContext, type CallState } from '../context/call-state-context.js';\nimport type { Call } from '../types/index.js';\nimport { getLogger } from '@signalwire/js';\nimport './UI/controls/sw-ui-dialpad.js';\n\nconst logger = getLogger();\n\n@customElement('sw-call-dialpad')\nexport class SwCallDialpad extends LitElement {\n  @consume({ context: callStateContext, subscribe: true })\n  @state()\n  private _callState?: CallState;\n\n  /** Explicit Call — when set, drives DTMF directly and bypasses context. */\n  @property({ type: Object }) call?: Call;\n\n  @state() private _directStatus: CallStatus | null = null;\n\n  private _directSubscriptions: Subscription[] = [];\n\n  /** Whether to display the call button below the keypad. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-call-button' })\n  showCallButton = false;\n\n  /** Allow free-text input in the display field (e.g., SIP URIs, vanity letters). */\n  @property({ type: Boolean, reflect: true, attribute: 'allow-text' })\n  allowText = false;\n\n  /** Placeholder text shown in the digit display input. */\n  @property({ type: String })\n  placeholder = 'Enter number';\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('call')) {\n      this._directSubscriptions.forEach((s) => s.unsubscribe());\n      this._directSubscriptions = [];\n      this._directStatus = null;\n      if (this.call) {\n        this._directSubscriptions.push(\n          this.call.status$.subscribe((s) => (this._directStatus = s))\n        );\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._directSubscriptions.forEach((s) => s.unsubscribe());\n    this._directSubscriptions = [];\n  }\n\n  private _onDigitPress(e: CustomEvent<{ digit: string; digits: string }>) {\n    const { digit } = e.detail;\n    const status = this.call ? this._directStatus : this._callState?.status;\n    if (status !== 'connected') return;\n\n    const send = this.call\n      ? (d: string) => this.call!.sendDigits(d)\n      : this._callState?.sendDigits;\n    send?.(digit).catch((err: unknown) => {\n      logger.error('Failed to send DTMF:', err);\n    });\n  }\n\n  render() {\n    return html`\n      <sw-ui-dialpad\n        exportparts=\"container,display,keypad,key,key-pressed,call-button\"\n        ?show-call-button=${this.showCallButton}\n        ?allow-text=${this.allowText}\n        placeholder=${this.placeholder}\n        @sw-digit-press=${this._onDigitPress}\n      ></sw-ui-dialpad>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-call-dialpad': SwCallDialpad;\n  }\n}\n"],"names":["logger","getLogger","SwCallDialpad","LitElement","changed","s","e","digit","_a","send","d","_b","err","html","__decorateClass","consume","callStateContext","state","property","customElement"],"mappings":";;;;;;;;;;AAqCA,MAAMA,IAASC,EAAA;AAGR,IAAMC,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQI,KAAQ,gBAAmC,MAEpD,KAAQ,uBAAuC,CAAA,GAI/C,KAAA,iBAAiB,IAIjB,KAAA,YAAY,IAIZ,KAAA,cAAc;AAAA,EAAA;AAAA,EAEJ,QAAQC,GAAqC;AACrD,UAAM,QAAQA,CAAO,GACjBA,EAAQ,IAAI,MAAM,MACpB,KAAK,qBAAqB,QAAQ,CAACC,MAAMA,EAAE,aAAa,GACxD,KAAK,uBAAuB,CAAA,GAC5B,KAAK,gBAAgB,MACjB,KAAK,QACP,KAAK,qBAAqB;AAAA,MACxB,KAAK,KAAK,QAAQ,UAAU,CAACA,MAAO,KAAK,gBAAgBA,CAAE;AAAA,IAAA;AAAA,EAInE;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,qBAAqB,QAAQ,CAAC,MAAM,EAAE,aAAa,GACxD,KAAK,uBAAuB,CAAA;AAAA,EAC9B;AAAA,EAEQ,cAAcC,GAAmD;;AACvE,UAAM,EAAE,OAAAC,MAAUD,EAAE;AAEpB,SADe,KAAK,OAAO,KAAK,iBAAgBE,IAAA,KAAK,eAAL,gBAAAA,EAAiB,YAClD,YAAa;AAE5B,UAAMC,IAAO,KAAK,OACd,CAACC,MAAc,KAAK,KAAM,WAAWA,CAAC,KACtCC,IAAA,KAAK,eAAL,gBAAAA,EAAiB;AACrB,IAAAF,KAAA,QAAAA,EAAOF,GAAO,MAAM,CAACK,MAAiB;AACpC,MAAAZ,EAAO,MAAM,wBAAwBY,CAAG;AAAA,IAC1C;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,4BAGiB,KAAK,cAAc;AAAA,sBACzB,KAAK,SAAS;AAAA,sBACd,KAAK,WAAW;AAAA,0BACZ,KAAK,aAAa;AAAA;AAAA;AAAA,EAG1C;AACF;AAjEUC,EAAA;AAAA,EAFPC,EAAQ,EAAE,SAASC,GAAkB,WAAW,IAAM;AAAA,EACtDC,EAAA;AAAM,GAFIf,EAGH,WAAA,cAAA,CAAA;AAGoBY,EAAA;AAAA,EAA3BI,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfhB,EAMiB,WAAA,QAAA,CAAA;AAEXY,EAAA;AAAA,EAAhBG,EAAA;AAAM,GARIf,EAQM,WAAA,iBAAA,CAAA;AAMjBY,EAAA;AAAA,EADCI,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,oBAAoB;AAAA,GAb9DhB,EAcX,WAAA,kBAAA,CAAA;AAIAY,EAAA;AAAA,EADCI,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,cAAc;AAAA,GAjBxDhB,EAkBX,WAAA,aAAA,CAAA;AAIAY,EAAA;AAAA,EADCI,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfhB,EAsBX,WAAA,eAAA,CAAA;AAtBWA,IAANY,EAAA;AAAA,EADNK,EAAc,iBAAiB;AAAA,GACnBjB,CAAA;"}

package/dist/components/sw-call-media.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Call Media Component
+ *
+ * Renders the remote video stream with aspect-ratio-aware sizing.
+ *
+ * Input precedence (most specific wins): `.stream` > `.call` > context.
+ *
+ * @example
+ * ```html
+ * <!-- Inside a context provider (sw-call-widget): -->
+ * <sw-call-media></sw-call-media>
+ *
+ * <!-- With an explicit Call: -->
+ * <sw-call-media .call=${call}></sw-call-media>
+ *
+ * <!-- With a raw remote stream: -->
+ * <sw-call-media .stream=${remoteStream}></sw-call-media>
+ * ```
+ *
+ * @csspart container - Outer container that holds the video and overlay layers.
+ * @csspart video     - The `<video>` element rendering the remote stream.
+ *
+ * @slot - Default slot for overlay layers (e.g. `<sw-self-media>`, `<sw-participants>`).
+ */
+import { LitElement } from 'lit';
+import type { Call } from '../types/index.js';
+export declare class SwCallMedia extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Explicit Call — when set, subscribes directly to its observables instead
+     * of relying on context. Overridden by `.stream` if both are set.
+     */
+    call?: Call;
+    /**
+     * Explicit remote MediaStream — highest precedence. Bypasses both `.call`
+     * and context. Useful for raw rendering with no SDK at all.
+     */
+    stream: MediaStream | null;
+    private _callState?;
+    private _devicesState?;
+    private _remoteStreamValue;
+    private _lastTrackSignature;
+    private _subscriptions;
+    private _resizeObserver?;
+    private _videoResizeHandler?;
+    private _windowResizeHandler?;
+    private _videoElement?;
+    private _paddingWrapper?;
+    connectedCallback(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private _setupDirectSubscriptions;
+    private _computeTrackSignature;
+    private _cleanupDirectSubscriptions;
+    private _applySinkId;
+    private _setupResizeObserver;
+    private _recalculateDimensions;
+    private _cleanupResizeObserver;
+    private _cleanupVideoElement;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-call-media': SwCallMedia;
+    }
+}
+//# sourceMappingURL=sw-call-media.d.ts.map

package/dist/components/sw-call-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-call-media.d.ts","sourceRoot":"","sources":["../../src/components/sw-call-media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAS9C,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAyDX;IAEF;;;OAGG;IACyB,IAAI,CAAC,EAAE,IAAI,CAAC;IAExC;;;OAGG;IAC6B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAQ;IAIlE,OAAO,CAAC,UAAU,CAAC,CAAY;IAI/B,OAAO,CAAC,aAAa,CAAC,CAAe;IAErC,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,mBAAmB,CAAM;IACjC,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,OAAO,CAAC,oBAAoB,CAAC,CAAa;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAmB;IACzC,OAAO,CAAC,eAAe,CAAC,CAAiB;IAIzC,iBAAiB;IASjB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA4ChE,oBAAoB;IAOpB,SAAS,CAAC,YAAY,IAAI,IAAI;IAW9B,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,sBAAsB;IA6D9B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,oBAAoB;IAO5B,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/sw-call-media.js

@@ -0,0 +1,220 @@
+import { LitElement as V, html as q, css as E } from "lit";
+import { property as b, state as g, customElement as M } from "lit/decorators.js";
+import { consume as w } from "@lit/context";
+import { callStateContext as W } from "../context/call-state-context.js";
+import { devicesContext as $ } from "../context/devices-context.js";
+import { debounce as j } from "../utils/debounce.js";
+import { attachMediaStream as _, waitForVideoReady as L, detachMediaStream as I } from "../utils/video.js";
+import { getLogger as A } from "@signalwire/js";
+var B = Object.defineProperty, X = Object.getOwnPropertyDescriptor, d = (t, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? X(e, s) : e, a = t.length - 1, r; a >= 0; a--)
+    (r = t[a]) && (i = (o ? r(e, s, i) : r(i)) || i);
+  return o && i && B(e, s, i), i;
+};
+const Y = A();
+let l = class extends V {
+  constructor() {
+    super(...arguments), this.stream = null, this._remoteStreamValue = null, this._lastTrackSignature = "", this._subscriptions = [];
+  }
+  // ── Lifecycle ──────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), !this.stream && this.call && this._setupDirectSubscriptions(), this.stream && (this._remoteStreamValue = this.stream, this._lastTrackSignature = this._computeTrackSignature(this.stream));
+  }
+  updated(t) {
+    var e, s, o, i, a;
+    if (super.updated(t), t.has("call") && (this._cleanupDirectSubscriptions(), !this.stream && this.call && this._setupDirectSubscriptions()), t.has("stream")) {
+      this._cleanupDirectSubscriptions();
+      const r = this.stream, n = this._computeTrackSignature(r);
+      if (r !== this._remoteStreamValue || n !== this._lastTrackSignature) {
+        this._remoteStreamValue = r, this._lastTrackSignature = n;
+        const c = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video.mcu-video");
+        c && _(c, r);
+      }
+    }
+    if (!this.stream && !this.call && t.has("_callState")) {
+      const r = ((s = this._callState) == null ? void 0 : s.remoteStream) ?? null, n = this._computeTrackSignature(r);
+      if (r !== this._remoteStreamValue || n !== this._lastTrackSignature) {
+        this._remoteStreamValue = r, this._lastTrackSignature = n;
+        const c = (o = this.shadowRoot) == null ? void 0 : o.querySelector("video.mcu-video");
+        c && _(c, r);
+      }
+    }
+    t.has("_devicesState") && this._applySinkId(((a = (i = this._devicesState) == null ? void 0 : i.selectedAudioOutput) == null ? void 0 : a.deviceId) ?? "");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cleanupDirectSubscriptions(), this._cleanupResizeObserver(), this._cleanupVideoElement();
+  }
+  firstUpdated() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video.mcu-video");
+    t && L(t).then(() => {
+      this.isConnected && this._setupResizeObserver();
+    });
+  }
+  // ── Direct call subscriptions (legacy / standalone) ────────────────
+  _setupDirectSubscriptions() {
+    this.call && this._subscriptions.push(
+      this.call.remoteStream$.subscribe((t) => {
+        var o;
+        const e = this._computeTrackSignature(t);
+        if (t === this._remoteStreamValue && e === this._lastTrackSignature)
+          return;
+        this._remoteStreamValue = t, this._lastTrackSignature = e, this.requestUpdate();
+        const s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("video.mcu-video");
+        s && _(s, t);
+      })
+    );
+  }
+  _computeTrackSignature(t) {
+    return t ? t.getTracks().map((e) => `${e.kind}:${e.id}`).sort().join("|") : "";
+  }
+  _cleanupDirectSubscriptions() {
+    this._subscriptions.forEach((t) => t.unsubscribe()), this._subscriptions = [];
+  }
+  // ── Audio output ───────────────────────────────────────────────────
+  _applySinkId(t) {
+    var s;
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("video.mcu-video");
+    e != null && e.setSinkId && e.setSinkId(t).catch((o) => {
+      Y.error("[SwCallMedia] Failed to set audio output device:", o);
+    });
+  }
+  // ── Resize / dimension management ──────────────────────────────────
+  _setupResizeObserver() {
+    var s, o;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("video.mcu-video"), e = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".padding-wrapper");
+    !t || !e || (this._videoElement = t, this._paddingWrapper = e, this._resizeObserver = new ResizeObserver(
+      j(() => this._recalculateDimensions(), 50)
+    ), this._resizeObserver.observe(this), this._videoResizeHandler = () => this._recalculateDimensions(), t.addEventListener("resize", this._videoResizeHandler), this._windowResizeHandler = () => {
+      requestAnimationFrame(() => this._recalculateDimensions());
+    }, window.addEventListener("resize", this._windowResizeHandler), this._recalculateDimensions());
+  }
+  _recalculateDimensions() {
+    const t = this._videoElement, e = this._paddingWrapper;
+    if (!t || !e) return;
+    if (!t.videoWidth || !t.videoHeight) {
+      e.style.width = "100%", e.style.height = "100%", e.style.paddingBottom = "0", e.style.transform = "none";
+      return;
+    }
+    const s = window.innerWidth, o = window.innerHeight, i = this.getBoundingClientRect(), a = i.width, r = i.height;
+    if (a <= 0 || r <= 0) return;
+    const n = Math.min(1, (s - i.left) / a), c = Math.min(1, (o - i.top) / r), f = Math.min(n, c), p = a * f, m = r * f;
+    if (p <= 0 || m <= 0) return;
+    const v = t.videoWidth / t.videoHeight, S = p / m;
+    let h, u;
+    v > S ? (h = p, u = h / v) : (u = m, h = u * v);
+    const y = Math.max(0, i.left), R = Math.max(0, i.top), z = Math.min(s, i.right), k = Math.min(o, i.bottom), x = (y + z) / 2, O = (R + k) / 2, H = i.left + a / 2, C = i.top + r / 2, T = x - H, D = O - C;
+    e.style.width = `${h}px`, e.style.height = `${u}px`, e.style.paddingBottom = "0", e.style.transform = `translate(${T}px, ${D}px)`;
+  }
+  _cleanupResizeObserver() {
+    var e;
+    this._resizeObserver && (this._resizeObserver.disconnect(), this._resizeObserver = void 0);
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video.mcu-video");
+    t && this._videoResizeHandler && (t.removeEventListener("resize", this._videoResizeHandler), this._videoResizeHandler = void 0), this._windowResizeHandler && (window.removeEventListener("resize", this._windowResizeHandler), this._windowResizeHandler = void 0);
+  }
+  _cleanupVideoElement() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video.mcu-video");
+    t && I(t);
+  }
+  // ── Render ─────────────────────────────────────────────────────────
+  render() {
+    return q`
+      <div class="mcu-content" part="container">
+        <div class="padding-wrapper">
+          <div class="mcu-wrapper">
+            <video
+              class="mcu-video"
+              part="video"
+              autoplay
+              playsinline
+              .srcObject=${this._remoteStreamValue}
+            ></video>
+          </div>
+          <div class="mcu-layers">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+l.styles = E`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .mcu-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--bg-page, #0e0e18);
+      overflow: hidden;
+    }
+
+    .padding-wrapper {
+      position: relative;
+      max-width: 100%;
+      max-height: 100%;
+      transition:
+        width 0.3s ease,
+        height 0.3s ease;
+    }
+
+    /* Outer rounding is owned by sw-ui-call-layout's :host border-radius +
+       overflow:hidden. Rounding here too carves a notch out of the right
+       edge of the video cell that exposes whatever sits behind the widget
+       (page / modal backdrop) as a black sliver in light mode. */
+    .mcu-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+
+    .mcu-video {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: contain;
+    }
+
+    .mcu-layers {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+  `;
+d([
+  b({ type: Object })
+], l.prototype, "call", 2);
+d([
+  b({ attribute: !1 })
+], l.prototype, "stream", 2);
+d([
+  w({ context: W, subscribe: !0 }),
+  g()
+], l.prototype, "_callState", 2);
+d([
+  w({ context: $, subscribe: !0 }),
+  g()
+], l.prototype, "_devicesState", 2);
+l = d([
+  M("sw-call-media")
+], l);
+export {
+  l as SwCallMedia
+};
+//# sourceMappingURL=sw-call-media.js.map