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

package/dist/components/UI/controls/sw-ui-control-bar.d.ts

@@ -0,0 +1,114 @@
+import { LitElement } from 'lit';
+import type { DropUpItem } from './sw-ui-dropup';
+export interface MicToggleDetail {
+    muted: boolean;
+}
+export interface CameraToggleDetail {
+    muted: boolean;
+}
+export interface SpeakerToggleDetail {
+    muted: boolean;
+}
+export interface DeviceChangeDetail {
+    kind: 'mic' | 'camera' | 'speaker';
+    deviceId: string;
+    label: string;
+}
+export interface FullscreenToggleDetail {
+    fullscreen: boolean;
+}
+export interface ScreenShareToggleDetail {
+    active: boolean;
+}
+export interface HandRaiseToggleDetail {
+    raised: boolean;
+}
+export interface SettingsChangeDetail {
+    settingId: string;
+}
+export interface SwUiControlBarEventMap {
+    'sw-mic-toggle': CustomEvent<MicToggleDetail>;
+    'sw-camera-toggle': CustomEvent<CameraToggleDetail>;
+    'sw-speaker-toggle': CustomEvent<SpeakerToggleDetail>;
+    'sw-device-change': CustomEvent<DeviceChangeDetail>;
+    'sw-fullscreen-toggle': CustomEvent<FullscreenToggleDetail>;
+    'sw-screen-share-toggle': CustomEvent<ScreenShareToggleDetail>;
+    'sw-hand-raise-toggle': CustomEvent<HandRaiseToggleDetail>;
+    'sw-transcript-toggle': CustomEvent<void>;
+    'sw-settings-change': CustomEvent<SettingsChangeDetail>;
+    'sw-call-hangup': CustomEvent<void>;
+}
+/**
+ * Call controls bar.
+ *
+ * Buttons rendered (left to right): mic, camera, speaker, screen share,
+ * hand raise, transcript, fullscreen, hang-up. Optional buttons are hidden
+ * when their `show*` property is false.
+ *
+ * @fires sw-mic-toggle          - Mic toggled. Detail: `{ muted: boolean }`.
+ * @fires sw-camera-toggle       - Camera toggled. Detail: `{ muted: boolean }`.
+ * @fires sw-speaker-toggle      - Speaker toggled. Detail: `{ muted: boolean }`.
+ * @fires sw-device-change       - Device picked from a chevron menu. Detail: `{ kind, deviceId, label }`.
+ * @fires sw-fullscreen-toggle   - Fullscreen toggled. Detail: `{ fullscreen: boolean }`.
+ * @fires sw-screen-share-toggle - Screen share toggled. Detail: `{ active: boolean }`.
+ * @fires sw-hand-raise-toggle   - Hand raise toggled. Detail: `{ raised: boolean }`.
+ * @fires sw-transcript-toggle   - Transcript button clicked. No detail.
+ * @fires sw-settings-change     - Settings menu item picked. Detail: `{ settingId: string }`.
+ * @fires sw-call-hangup         - Hang-up button clicked. No detail.
+ *
+ * @cssprop --sw-control-bar-bg       [transparent]             - bar background
+ * @cssprop --sw-control-bar-padding  [8px 16px]                - bar padding
+ * @cssprop --sw-control-bar-gap      [8px]                     - gap between buttons
+ * @cssprop --sw-control-bar-radius   [0]                       - bar border-radius
+ *
+ * @cssprop --sw-split-button-size     [44px]                    - button width & height
+ * @cssprop --sw-split-button-bg       [rgba(255,255,255,0.12)]  - button background
+ * @cssprop --sw-split-button-bg-hover [rgba(255,255,255,0.22)]  - button hover bg
+ * @cssprop --sw-split-button-color    [#fff]                    - icon colour
+ * @cssprop --sw-split-button-radius   [9999px]                  - button border-radius
+ *
+ * @cssprop --sw-control-bar-hangup-bg       - hang-up background       (falls back to --interactive-button-destructive-bg)
+ * @cssprop --sw-control-bar-hangup-bg-hover - hang-up hover bg          (falls back to --interactive-button-destructive-hover)
+ * @cssprop --sw-control-bar-hangup-color    - hang-up icon colour       (defaults to #fff)
+ *
+ * The active-toggle variant uses --interactive-button-primary-{bg,hover,text} from the design tokens.
+ */
+export declare class SwUiControlBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    micMuted: boolean;
+    cameraMuted: boolean;
+    speakerMuted: boolean;
+    fullscreen: boolean;
+    screenSharing: boolean;
+    handRaised: boolean;
+    transcriptActive: boolean;
+    showScreenShare: boolean;
+    showHandRaise: boolean;
+    showTranscript: boolean;
+    showSettings: boolean;
+    showFullscreen: boolean;
+    micDevices: DropUpItem[];
+    cameraDevices: DropUpItem[];
+    speakerDevices: DropUpItem[];
+    settingsItems: DropUpItem[];
+    private _dispatch;
+    private _onMicToggle;
+    private _onCameraToggle;
+    private _onSpeakerToggle;
+    private _onDeviceSelect;
+    private _onFullscreenToggle;
+    private _onScreenShareToggle;
+    private _onHandRaiseToggle;
+    private _onTranscriptToggle;
+    private _onSettingsSelect;
+    private _onHangUp;
+    private _overflowItems;
+    private _onOverflowSelect;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-control-bar': SwUiControlBar;
+    }
+}
+//# sourceMappingURL=sw-ui-control-bar.d.ts.map

package/dist/components/UI/controls/sw-ui-control-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-control-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/controls/sw-ui-control-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,MAAM,WAAW,eAAe;IAAG,KAAK,EAAE,OAAO,CAAA;CAAE;AACnD,MAAM,WAAW,kBAAkB;IAAG,KAAK,EAAE,OAAO,CAAA;CAAE;AACtD,MAAM,WAAW,mBAAmB;IAAG,KAAK,EAAE,OAAO,CAAA;CAAE;AACvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,sBAAsB;IAAG,UAAU,EAAE,OAAO,CAAA;CAAE;AAC/D,MAAM,WAAW,uBAAuB;IAAG,MAAM,EAAE,OAAO,CAAA;CAAE;AAC5D,MAAM,WAAW,qBAAqB;IAAG,MAAM,EAAE,OAAO,CAAA;CAAE;AAC1D,MAAM,WAAW,oBAAoB;IAAG,SAAS,EAAE,MAAM,CAAA;CAAE;AAI3D,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,mBAAmB,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACtD,kBAAkB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpD,sBAAsB,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAC5D,wBAAwB,EAAE,WAAW,CAAC,uBAAuB,CAAC,CAAC;IAC/D,sBAAsB,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAC3D,sBAAsB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1C,oBAAoB,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC;IACxD,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CACrC;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,0BA2EX;IAKF,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,YAAY,UAAS;IAGrB,UAAU,UAAS;IAGnB,aAAa,UAAS;IAGtB,UAAU,UAAS;IAGnB,gBAAgB,UAAS;IAKzB,eAAe,UAAS;IAGxB,aAAa,UAAS;IAGtB,cAAc,UAAS;IAGvB,YAAY,UAAS;IAGrB,cAAc,UAAQ;IAKtB,UAAU,EAAE,UAAU,EAAE,CAAM;IAG9B,aAAa,EAAE,UAAU,EAAE,CAAM;IAGjC,cAAc,EAAE,UAAU,EAAE,CAAM;IAGlC,aAAa,EAAE,UAAU,EAAE,CAAM;IAIjC,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAoCtB,OAAO,CAAC,iBAAiB;IAqBzB,MAAM;CAsHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,cAAc,CAAC;KACrC;CACF"}

package/dist/components/UI/controls/sw-ui-control-bar.js

@@ -0,0 +1,324 @@
+import { LitElement as h, nothing as r, html as a, css as w } from "lit";
+import { property as i, customElement as d } from "lit/decorators.js";
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, n, c, l) => {
+  for (var o = l > 1 ? void 0 : l ? b(n, c) : n, p = t.length - 1, u; p >= 0; p--)
+    (u = t[p]) && (o = (l ? u(n, c, o) : u(o)) || o);
+  return l && o && g(n, c, o), o;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.micMuted = !1, this.cameraMuted = !1, this.speakerMuted = !1, this.fullscreen = !1, this.screenSharing = !1, this.handRaised = !1, this.transcriptActive = !1, this.showScreenShare = !1, this.showHandRaise = !1, this.showTranscript = !1, this.showSettings = !1, this.showFullscreen = !0, this.micDevices = [], this.cameraDevices = [], this.speakerDevices = [], this.settingsItems = [];
+  }
+  // ── Dispatchers ───────────────────────────────────────────────────────────
+  _dispatch(t, n) {
+    this.dispatchEvent(new CustomEvent(t, { detail: n, bubbles: !0, composed: !0 }));
+  }
+  _onMicToggle() {
+    this.micMuted = !this.micMuted, this._dispatch("sw-mic-toggle", { muted: this.micMuted });
+  }
+  _onCameraToggle() {
+    this.cameraMuted = !this.cameraMuted, this._dispatch("sw-camera-toggle", { muted: this.cameraMuted });
+  }
+  _onSpeakerToggle() {
+    this.speakerMuted = !this.speakerMuted, this._dispatch("sw-speaker-toggle", { muted: this.speakerMuted });
+  }
+  _onDeviceSelect(t, n) {
+    this._dispatch("sw-device-change", { kind: t, deviceId: n.id, label: n.label });
+  }
+  _onFullscreenToggle() {
+    this.fullscreen = !this.fullscreen, this._dispatch("sw-fullscreen-toggle", { fullscreen: this.fullscreen });
+  }
+  _onScreenShareToggle() {
+    this.screenSharing = !this.screenSharing, this._dispatch("sw-screen-share-toggle", { active: this.screenSharing });
+  }
+  _onHandRaiseToggle() {
+    this.handRaised = !this.handRaised, this._dispatch("sw-hand-raise-toggle", { raised: this.handRaised });
+  }
+  _onTranscriptToggle() {
+    this.transcriptActive = !this.transcriptActive, this._dispatch("sw-transcript-toggle", void 0);
+  }
+  _onSettingsSelect(t) {
+    this._dispatch("sw-settings-change", { settingId: t.detail.id });
+  }
+  _onHangUp() {
+    this._dispatch("sw-call-hangup", void 0);
+  }
+  _overflowItems() {
+    const t = [];
+    return this.showScreenShare && t.push({
+      id: "__overflow:screen-share",
+      label: this.screenSharing ? "Stop sharing" : "Share screen",
+      selected: this.screenSharing
+    }), this.showHandRaise && t.push({
+      id: "__overflow:hand-raise",
+      label: this.handRaised ? "Lower hand" : "Raise hand",
+      selected: this.handRaised
+    }), this.showTranscript && t.push({
+      id: "__overflow:transcript",
+      label: "Transcript",
+      selected: this.transcriptActive
+    }), this.showSettings && t.push(...this.settingsItems), this.showFullscreen && t.push({
+      id: "__overflow:fullscreen",
+      label: this.fullscreen ? "Exit fullscreen" : "Fullscreen",
+      selected: this.fullscreen
+    }), t;
+  }
+  _onOverflowSelect(t) {
+    switch (t.detail.id) {
+      case "__overflow:screen-share":
+        this._onScreenShareToggle();
+        return;
+      case "__overflow:hand-raise":
+        this._onHandRaiseToggle();
+        return;
+      case "__overflow:transcript":
+        this._onTranscriptToggle();
+        return;
+      case "__overflow:fullscreen":
+        this._onFullscreenToggle();
+        return;
+      default:
+        this._dispatch("sw-settings-change", { settingId: t.detail.id });
+    }
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    return a`
+      <div class="bar" part="bar">
+        <!-- SignalWire logo -->
+        <span class="sw-logo" part="logo" aria-hidden="true">
+          <sw-ui-icon name="sw-logo" size="20"></sw-ui-icon>
+        </span>
+
+        <!-- Mic -->
+        <sw-ui-split-button
+          .active=${!this.micMuted}
+          .items=${this.micDevices}
+          @sw-split-button-toggle=${this._onMicToggle}
+          @sw-dropup-select=${(t) => this._onDeviceSelect("mic", t.detail)}
+        >
+          <sw-ui-icon slot="active" name="mic-on"></sw-ui-icon>
+          <sw-ui-icon slot="inactive" name="mic-off"></sw-ui-icon>
+        </sw-ui-split-button>
+
+        <!-- Camera -->
+        <sw-ui-split-button
+          .active=${!this.cameraMuted}
+          .items=${this.cameraDevices}
+          @sw-split-button-toggle=${this._onCameraToggle}
+          @sw-dropup-select=${(t) => this._onDeviceSelect("camera", t.detail)}
+        >
+          <sw-ui-icon slot="active" name="camera-on"></sw-ui-icon>
+          <sw-ui-icon slot="inactive" name="camera-off"></sw-ui-icon>
+        </sw-ui-split-button>
+
+        <!-- Speaker -->
+        <sw-ui-split-button
+          .active=${!this.speakerMuted}
+          .items=${this.speakerDevices}
+          @sw-split-button-toggle=${this._onSpeakerToggle}
+          @sw-dropup-select=${(t) => this._onDeviceSelect("speaker", t.detail)}
+        >
+          <sw-ui-icon slot="active" name="speaker-on"></sw-ui-icon>
+          <sw-ui-icon slot="inactive" name="speaker-off"></sw-ui-icon>
+        </sw-ui-split-button>
+
+        <!-- Screen share (optional) -->
+        ${this.showScreenShare ? a`
+              <sw-ui-split-button
+                class="optional ${this.screenSharing ? "active-toggle" : ""}"
+                @sw-split-button-click=${this._onScreenShareToggle}
+              >
+                <sw-ui-icon name=${this.screenSharing ? "screen-share-off" : "screen-share"}></sw-ui-icon>
+              </sw-ui-split-button>
+            ` : r}
+
+        <!-- Hand raise (optional) -->
+        ${this.showHandRaise ? a`
+              <sw-ui-split-button
+                class="optional ${this.handRaised ? "active-toggle" : ""}"
+                @sw-split-button-click=${this._onHandRaiseToggle}
+              >
+                <sw-ui-icon name="hand-raise"></sw-ui-icon>
+              </sw-ui-split-button>
+            ` : r}
+
+        <!-- Transcript (optional) -->
+        ${this.showTranscript ? a`
+              <sw-ui-split-button
+                class="optional ${this.transcriptActive ? "active-toggle" : ""}"
+                @sw-split-button-click=${this._onTranscriptToggle}
+              >
+                <sw-ui-icon name="transcript"></sw-ui-icon>
+              </sw-ui-split-button>
+            ` : r}
+
+        <!-- Settings (optional) -->
+        ${this.showSettings ? a`
+              <sw-ui-split-button
+                class="optional"
+                .items=${this.settingsItems}
+                @sw-dropup-select=${this._onSettingsSelect}
+              >
+                <sw-ui-icon name="settings"></sw-ui-icon>
+              </sw-ui-split-button>
+            ` : r}
+
+        <!-- Fullscreen (optional) -->
+        ${this.showFullscreen ? a`
+              <sw-ui-split-button class="optional" @sw-split-button-click=${this._onFullscreenToggle}>
+                <sw-ui-icon name=${this.fullscreen ? "fullscreen-exit" : "fullscreen"}></sw-ui-icon>
+              </sw-ui-split-button>
+            ` : r}
+
+        <!-- Overflow menu (shown on narrow containers) -->
+        <sw-ui-split-button
+          class="overflow"
+          .items=${this._overflowItems()}
+          @sw-dropup-select=${this._onOverflowSelect}
+        >
+          <sw-ui-icon name="settings"></sw-ui-icon>
+        </sw-ui-split-button>
+
+        <!-- Hang up -->
+        <sw-ui-split-button class="hangup" @sw-split-button-click=${this._onHangUp}>
+          <sw-ui-icon name="phone-end"></sw-ui-icon>
+        </sw-ui-split-button>
+
+        <!-- Spacer to balance the logo and keep buttons centered -->
+        <span class="bar-spacer" aria-hidden="true"></span>
+      </div>
+    `;
+  }
+};
+e.styles = w`
+    :host {
+      display: block;
+      background: var(--sw-control-bar-bg, transparent);
+      border-radius: var(--sw-control-bar-radius, 0);
+      container-type: inline-size;
+    }
+
+    .bar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sw-control-bar-gap, 8px);
+      padding: var(--sw-control-bar-padding, 8px 16px);
+    }
+
+    .sw-logo {
+      display: inline-flex;
+      align-items: center;
+      color: var(--fg-default);
+      opacity: 0.5;
+      flex-shrink: 0;
+      pointer-events: none;
+      margin-right: auto;
+    }
+
+    .bar-spacer {
+      margin-left: auto;
+      width: 20px;
+      flex-shrink: 0;
+    }
+
+    .hangup {
+      --sw-split-button-bg: var(--sw-control-bar-hangup-bg, var(--interactive-button-destructive-bg));
+      --sw-split-button-bg-hover: var(--sw-control-bar-hangup-bg-hover, var(--interactive-button-destructive-hover));
+      --sw-split-button-color: var(--sw-control-bar-hangup-color, #fff);
+    }
+
+    .active-toggle {
+      --sw-split-button-bg: var(--interactive-button-primary-bg);
+      --sw-split-button-bg-hover: var(--interactive-button-primary-hover);
+      --sw-split-button-color: var(--interactive-button-primary-text);
+    }
+
+    /* Overflow menu hidden by default (wide containers) */
+    sw-ui-split-button.overflow { display: none; }
+
+    /* Collapse optional/secondary buttons into an overflow menu on narrow containers */
+    @container (max-width: 720px) {
+      sw-ui-split-button.optional { display: none !important; }
+      sw-ui-split-button.overflow { display: inline-flex; }
+    }
+
+    /* Shrink buttons on very narrow containers */
+    @container (max-width: 540px) {
+      .bar {
+        --sw-split-button-size: 34px;
+        --sw-split-button-width: 42px;
+        --sw-split-button-height: 28px;
+        gap: 4px;
+        padding: 4px 8px;
+      }
+      .sw-logo, .bar-spacer { display: none; }
+    }
+
+    /* Further shrink for very small phones to prevent clipping */
+    @container (max-width: 360px) {
+      .bar {
+        --sw-split-button-size: 28px;
+        --sw-split-button-width: 34px;
+        --sw-split-button-height: 24px;
+        gap: 2px;
+        padding: 2px 4px;
+      }
+    }
+  `;
+s([
+  i({ type: Boolean, reflect: !0, attribute: "mic-muted" })
+], e.prototype, "micMuted", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "camera-muted" })
+], e.prototype, "cameraMuted", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "speaker-muted" })
+], e.prototype, "speakerMuted", 2);
+s([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "fullscreen", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "screen-sharing" })
+], e.prototype, "screenSharing", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "hand-raised" })
+], e.prototype, "handRaised", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "transcript-active" })
+], e.prototype, "transcriptActive", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "show-screen-share" })
+], e.prototype, "showScreenShare", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "show-hand-raise" })
+], e.prototype, "showHandRaise", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "show-transcript" })
+], e.prototype, "showTranscript", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "show-settings" })
+], e.prototype, "showSettings", 2);
+s([
+  i({ type: Boolean, reflect: !0, attribute: "show-fullscreen" })
+], e.prototype, "showFullscreen", 2);
+s([
+  i({ attribute: !1 })
+], e.prototype, "micDevices", 2);
+s([
+  i({ attribute: !1 })
+], e.prototype, "cameraDevices", 2);
+s([
+  i({ attribute: !1 })
+], e.prototype, "speakerDevices", 2);
+s([
+  i({ attribute: !1 })
+], e.prototype, "settingsItems", 2);
+e = s([
+  d("sw-ui-control-bar")
+], e);
+export {
+  e as SwUiControlBar
+};
+//# sourceMappingURL=sw-ui-control-bar.js.map

package/dist/components/UI/controls/sw-ui-control-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-control-bar.js","sources":["../../../../src/components/UI/controls/sw-ui-control-bar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { DropUpItem } from './sw-ui-dropup';\n\n// ── Event detail types ────────────────────────────────────────────────────────\n\nexport interface MicToggleDetail { muted: boolean }\nexport interface CameraToggleDetail { muted: boolean }\nexport interface SpeakerToggleDetail { muted: boolean }\nexport interface DeviceChangeDetail {\n  kind: 'mic' | 'camera' | 'speaker';\n  deviceId: string;\n  label: string;\n}\nexport interface FullscreenToggleDetail { fullscreen: boolean }\nexport interface ScreenShareToggleDetail { active: boolean }\nexport interface HandRaiseToggleDetail { raised: boolean }\nexport interface SettingsChangeDetail { settingId: string }\n\n// ── Event map ─────────────────────────────────────────────────────────────────\n\nexport interface SwUiControlBarEventMap {\n  'sw-mic-toggle': CustomEvent<MicToggleDetail>;\n  'sw-camera-toggle': CustomEvent<CameraToggleDetail>;\n  'sw-speaker-toggle': CustomEvent<SpeakerToggleDetail>;\n  'sw-device-change': CustomEvent<DeviceChangeDetail>;\n  'sw-fullscreen-toggle': CustomEvent<FullscreenToggleDetail>;\n  'sw-screen-share-toggle': CustomEvent<ScreenShareToggleDetail>;\n  'sw-hand-raise-toggle': CustomEvent<HandRaiseToggleDetail>;\n  'sw-transcript-toggle': CustomEvent<void>;\n  'sw-settings-change': CustomEvent<SettingsChangeDetail>;\n  'sw-call-hangup': CustomEvent<void>;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\n/**\n * Call controls bar.\n *\n * Buttons rendered (left to right): mic, camera, speaker, screen share,\n * hand raise, transcript, fullscreen, hang-up. Optional buttons are hidden\n * when their `show*` property is false.\n *\n * @fires sw-mic-toggle          - Mic toggled. Detail: `{ muted: boolean }`.\n * @fires sw-camera-toggle       - Camera toggled. Detail: `{ muted: boolean }`.\n * @fires sw-speaker-toggle      - Speaker toggled. Detail: `{ muted: boolean }`.\n * @fires sw-device-change       - Device picked from a chevron menu. Detail: `{ kind, deviceId, label }`.\n * @fires sw-fullscreen-toggle   - Fullscreen toggled. Detail: `{ fullscreen: boolean }`.\n * @fires sw-screen-share-toggle - Screen share toggled. Detail: `{ active: boolean }`.\n * @fires sw-hand-raise-toggle   - Hand raise toggled. Detail: `{ raised: boolean }`.\n * @fires sw-transcript-toggle   - Transcript button clicked. No detail.\n * @fires sw-settings-change     - Settings menu item picked. Detail: `{ settingId: string }`.\n * @fires sw-call-hangup         - Hang-up button clicked. No detail.\n *\n * @cssprop --sw-control-bar-bg       [transparent]             - bar background\n * @cssprop --sw-control-bar-padding  [8px 16px]                - bar padding\n * @cssprop --sw-control-bar-gap      [8px]                     - gap between buttons\n * @cssprop --sw-control-bar-radius   [0]                       - bar border-radius\n *\n * @cssprop --sw-split-button-size     [44px]                    - button width & height\n * @cssprop --sw-split-button-bg       [rgba(255,255,255,0.12)]  - button background\n * @cssprop --sw-split-button-bg-hover [rgba(255,255,255,0.22)]  - button hover bg\n * @cssprop --sw-split-button-color    [#fff]                    - icon colour\n * @cssprop --sw-split-button-radius   [9999px]                  - button border-radius\n *\n * @cssprop --sw-control-bar-hangup-bg       - hang-up background       (falls back to --interactive-button-destructive-bg)\n * @cssprop --sw-control-bar-hangup-bg-hover - hang-up hover bg          (falls back to --interactive-button-destructive-hover)\n * @cssprop --sw-control-bar-hangup-color    - hang-up icon colour       (defaults to #fff)\n *\n * The active-toggle variant uses --interactive-button-primary-{bg,hover,text} from the design tokens.\n */\n@customElement('sw-ui-control-bar')\nexport class SwUiControlBar extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      background: var(--sw-control-bar-bg, transparent);\n      border-radius: var(--sw-control-bar-radius, 0);\n      container-type: inline-size;\n    }\n\n    .bar {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--sw-control-bar-gap, 8px);\n      padding: var(--sw-control-bar-padding, 8px 16px);\n    }\n\n    .sw-logo {\n      display: inline-flex;\n      align-items: center;\n      color: var(--fg-default);\n      opacity: 0.5;\n      flex-shrink: 0;\n      pointer-events: none;\n      margin-right: auto;\n    }\n\n    .bar-spacer {\n      margin-left: auto;\n      width: 20px;\n      flex-shrink: 0;\n    }\n\n    .hangup {\n      --sw-split-button-bg: var(--sw-control-bar-hangup-bg, var(--interactive-button-destructive-bg));\n      --sw-split-button-bg-hover: var(--sw-control-bar-hangup-bg-hover, var(--interactive-button-destructive-hover));\n      --sw-split-button-color: var(--sw-control-bar-hangup-color, #fff);\n    }\n\n    .active-toggle {\n      --sw-split-button-bg: var(--interactive-button-primary-bg);\n      --sw-split-button-bg-hover: var(--interactive-button-primary-hover);\n      --sw-split-button-color: var(--interactive-button-primary-text);\n    }\n\n    /* Overflow menu hidden by default (wide containers) */\n    sw-ui-split-button.overflow { display: none; }\n\n    /* Collapse optional/secondary buttons into an overflow menu on narrow containers */\n    @container (max-width: 720px) {\n      sw-ui-split-button.optional { display: none !important; }\n      sw-ui-split-button.overflow { display: inline-flex; }\n    }\n\n    /* Shrink buttons on very narrow containers */\n    @container (max-width: 540px) {\n      .bar {\n        --sw-split-button-size: 34px;\n        --sw-split-button-width: 42px;\n        --sw-split-button-height: 28px;\n        gap: 4px;\n        padding: 4px 8px;\n      }\n      .sw-logo, .bar-spacer { display: none; }\n    }\n\n    /* Further shrink for very small phones to prevent clipping */\n    @container (max-width: 360px) {\n      .bar {\n        --sw-split-button-size: 28px;\n        --sw-split-button-width: 34px;\n        --sw-split-button-height: 24px;\n        gap: 2px;\n        padding: 2px 4px;\n      }\n    }\n  `;\n\n  // ── Media toggle state ─────────────────────────────────────────────\n\n  @property({ type: Boolean, reflect: true, attribute: 'mic-muted' })\n  micMuted = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'camera-muted' })\n  cameraMuted = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'speaker-muted' })\n  speakerMuted = false;\n\n  @property({ type: Boolean, reflect: true })\n  fullscreen = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'screen-sharing' })\n  screenSharing = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hand-raised' })\n  handRaised = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'transcript-active' })\n  transcriptActive = false;\n\n  // ── Visibility flags ───────────────────────────────────────────────\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-screen-share' })\n  showScreenShare = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-hand-raise' })\n  showHandRaise = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-transcript' })\n  showTranscript = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-settings' })\n  showSettings = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-fullscreen' })\n  showFullscreen = true;\n\n  // ── Device lists ───────────────────────────────────────────────────\n\n  @property({ attribute: false })\n  micDevices: DropUpItem[] = [];\n\n  @property({ attribute: false })\n  cameraDevices: DropUpItem[] = [];\n\n  @property({ attribute: false })\n  speakerDevices: DropUpItem[] = [];\n\n  @property({ attribute: false })\n  settingsItems: DropUpItem[] = [];\n\n  // ── Dispatchers ───────────────────────────────────────────────────────────\n\n  private _dispatch<K extends keyof SwUiControlBarEventMap>(\n    type: K,\n    detail: SwUiControlBarEventMap[K] extends CustomEvent<infer D> ? D : never\n  ) {\n    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));\n  }\n\n  private _onMicToggle() {\n    this.micMuted = !this.micMuted;\n    this._dispatch('sw-mic-toggle', { muted: this.micMuted });\n  }\n\n  private _onCameraToggle() {\n    this.cameraMuted = !this.cameraMuted;\n    this._dispatch('sw-camera-toggle', { muted: this.cameraMuted });\n  }\n\n  private _onSpeakerToggle() {\n    this.speakerMuted = !this.speakerMuted;\n    this._dispatch('sw-speaker-toggle', { muted: this.speakerMuted });\n  }\n\n  private _onDeviceSelect(kind: 'mic' | 'camera' | 'speaker', item: DropUpItem) {\n    this._dispatch('sw-device-change', { kind, deviceId: item.id, label: item.label });\n  }\n\n  private _onFullscreenToggle() {\n    this.fullscreen = !this.fullscreen;\n    this._dispatch('sw-fullscreen-toggle', { fullscreen: this.fullscreen });\n  }\n\n  private _onScreenShareToggle() {\n    this.screenSharing = !this.screenSharing;\n    this._dispatch('sw-screen-share-toggle', { active: this.screenSharing });\n  }\n\n  private _onHandRaiseToggle() {\n    this.handRaised = !this.handRaised;\n    this._dispatch('sw-hand-raise-toggle', { raised: this.handRaised });\n  }\n\n  private _onTranscriptToggle() {\n    this.transcriptActive = !this.transcriptActive;\n    this._dispatch('sw-transcript-toggle', undefined as never);\n  }\n\n  private _onSettingsSelect(e: CustomEvent<DropUpItem>) {\n    this._dispatch('sw-settings-change', { settingId: e.detail.id });\n  }\n\n  private _onHangUp() {\n    this._dispatch('sw-call-hangup', undefined as never);\n  }\n\n  private _overflowItems(): DropUpItem[] {\n    const items: DropUpItem[] = [];\n    if (this.showScreenShare) {\n      items.push({\n        id: '__overflow:screen-share',\n        label: this.screenSharing ? 'Stop sharing' : 'Share screen',\n        selected: this.screenSharing,\n      });\n    }\n    if (this.showHandRaise) {\n      items.push({\n        id: '__overflow:hand-raise',\n        label: this.handRaised ? 'Lower hand' : 'Raise hand',\n        selected: this.handRaised,\n      });\n    }\n    if (this.showTranscript) {\n      items.push({\n        id: '__overflow:transcript',\n        label: 'Transcript',\n        selected: this.transcriptActive,\n      });\n    }\n    if (this.showSettings) {\n      items.push(...this.settingsItems);\n    }\n    if (this.showFullscreen) {\n      items.push({\n        id: '__overflow:fullscreen',\n        label: this.fullscreen ? 'Exit fullscreen' : 'Fullscreen',\n        selected: this.fullscreen,\n      });\n    }\n    return items;\n  }\n\n  private _onOverflowSelect(e: CustomEvent<DropUpItem>) {\n    switch (e.detail.id) {\n      case '__overflow:screen-share':\n        this._onScreenShareToggle();\n        return;\n      case '__overflow:hand-raise':\n        this._onHandRaiseToggle();\n        return;\n      case '__overflow:transcript':\n        this._onTranscriptToggle();\n        return;\n      case '__overflow:fullscreen':\n        this._onFullscreenToggle();\n        return;\n      default:\n        this._dispatch('sw-settings-change', { settingId: e.detail.id });\n    }\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  render() {\n    return html`\n      <div class=\"bar\" part=\"bar\">\n        <!-- SignalWire logo -->\n        <span class=\"sw-logo\" part=\"logo\" aria-hidden=\"true\">\n          <sw-ui-icon name=\"sw-logo\" size=\"20\"></sw-ui-icon>\n        </span>\n\n        <!-- Mic -->\n        <sw-ui-split-button\n          .active=${!this.micMuted}\n          .items=${this.micDevices}\n          @sw-split-button-toggle=${this._onMicToggle}\n          @sw-dropup-select=${(e: CustomEvent<DropUpItem>) => this._onDeviceSelect('mic', e.detail)}\n        >\n          <sw-ui-icon slot=\"active\" name=\"mic-on\"></sw-ui-icon>\n          <sw-ui-icon slot=\"inactive\" name=\"mic-off\"></sw-ui-icon>\n        </sw-ui-split-button>\n\n        <!-- Camera -->\n        <sw-ui-split-button\n          .active=${!this.cameraMuted}\n          .items=${this.cameraDevices}\n          @sw-split-button-toggle=${this._onCameraToggle}\n          @sw-dropup-select=${(e: CustomEvent<DropUpItem>) => this._onDeviceSelect('camera', e.detail)}\n        >\n          <sw-ui-icon slot=\"active\" name=\"camera-on\"></sw-ui-icon>\n          <sw-ui-icon slot=\"inactive\" name=\"camera-off\"></sw-ui-icon>\n        </sw-ui-split-button>\n\n        <!-- Speaker -->\n        <sw-ui-split-button\n          .active=${!this.speakerMuted}\n          .items=${this.speakerDevices}\n          @sw-split-button-toggle=${this._onSpeakerToggle}\n          @sw-dropup-select=${(e: CustomEvent<DropUpItem>) => this._onDeviceSelect('speaker', e.detail)}\n        >\n          <sw-ui-icon slot=\"active\" name=\"speaker-on\"></sw-ui-icon>\n          <sw-ui-icon slot=\"inactive\" name=\"speaker-off\"></sw-ui-icon>\n        </sw-ui-split-button>\n\n        <!-- Screen share (optional) -->\n        ${this.showScreenShare\n          ? html`\n              <sw-ui-split-button\n                class=\"optional ${this.screenSharing ? 'active-toggle' : ''}\"\n                @sw-split-button-click=${this._onScreenShareToggle}\n              >\n                <sw-ui-icon name=${this.screenSharing ? 'screen-share-off' : 'screen-share'}></sw-ui-icon>\n              </sw-ui-split-button>\n            `\n          : nothing}\n\n        <!-- Hand raise (optional) -->\n        ${this.showHandRaise\n          ? html`\n              <sw-ui-split-button\n                class=\"optional ${this.handRaised ? 'active-toggle' : ''}\"\n                @sw-split-button-click=${this._onHandRaiseToggle}\n              >\n                <sw-ui-icon name=\"hand-raise\"></sw-ui-icon>\n              </sw-ui-split-button>\n            `\n          : nothing}\n\n        <!-- Transcript (optional) -->\n        ${this.showTranscript\n          ? html`\n              <sw-ui-split-button\n                class=\"optional ${this.transcriptActive ? 'active-toggle' : ''}\"\n                @sw-split-button-click=${this._onTranscriptToggle}\n              >\n                <sw-ui-icon name=\"transcript\"></sw-ui-icon>\n              </sw-ui-split-button>\n            `\n          : nothing}\n\n        <!-- Settings (optional) -->\n        ${this.showSettings\n          ? html`\n              <sw-ui-split-button\n                class=\"optional\"\n                .items=${this.settingsItems}\n                @sw-dropup-select=${this._onSettingsSelect}\n              >\n                <sw-ui-icon name=\"settings\"></sw-ui-icon>\n              </sw-ui-split-button>\n            `\n          : nothing}\n\n        <!-- Fullscreen (optional) -->\n        ${this.showFullscreen\n          ? html`\n              <sw-ui-split-button class=\"optional\" @sw-split-button-click=${this._onFullscreenToggle}>\n                <sw-ui-icon name=${this.fullscreen ? 'fullscreen-exit' : 'fullscreen'}></sw-ui-icon>\n              </sw-ui-split-button>\n            `\n          : nothing}\n\n        <!-- Overflow menu (shown on narrow containers) -->\n        <sw-ui-split-button\n          class=\"overflow\"\n          .items=${this._overflowItems()}\n          @sw-dropup-select=${this._onOverflowSelect}\n        >\n          <sw-ui-icon name=\"settings\"></sw-ui-icon>\n        </sw-ui-split-button>\n\n        <!-- Hang up -->\n        <sw-ui-split-button class=\"hangup\" @sw-split-button-click=${this._onHangUp}>\n          <sw-ui-icon name=\"phone-end\"></sw-ui-icon>\n        </sw-ui-split-button>\n\n        <!-- Spacer to balance the logo and keep buttons centered -->\n        <span class=\"bar-spacer\" aria-hidden=\"true\"></span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-control-bar': SwUiControlBar;\n  }\n}\n"],"names":["SwUiControlBar","LitElement","type","detail","kind","item","e","items","html","nothing","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/UI/controls/sw-ui-dialpad.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Dialpad Component
+ *
+ * A 12-key telephone keypad (0-9, *, #) for entering phone numbers
+ * and sending DTMF tones during active calls. Pure UI component — no
+ * call logic. Use `sw-call-dialpad` for a version that integrates with
+ * a call context.
+ *
+ * @example
+ * ```html
+ * <sw-dialpad show-call-button></sw-dialpad>
+ * ```
+ *
+ * Long-press behavior:
+ * - Long-press the `0` key → inserts `+` (international prefix).
+ * - Long-press the backspace button → clears the entire buffer.
+ *
+ * @fires sw-digit-press       - Fired when a digit button is pressed. Detail: `{ digit: string, digits: string }`
+ * @fires sw-dialpad-backspace - Fired when the backspace button is pressed (or long-pressed to clear). Detail: `{ digits: string }`
+ * @fires sw-dial              - Fired when the call button is pressed. Detail: `{ digits: string }`
+ * @fires sw-dialpad-input     - Fired when free-text input changes (only when `allow-text` is set). Detail: `{ digits: string }`
+ *
+ * @cssprop [--interactive-button-primary-bg=#044ef4] - Primary accent color.
+ * @cssprop [--interactive-button-primary-hover=#0342cf] - Primary color on hover.
+ * @cssprop [--interactive-status-success=#22c55e] - Success/call button color.
+ * @cssprop [--interactive-button-destructive-bg=#dc2626] - Danger/hangup button color.
+ * @cssprop [--bg-surface=#181a28] - Component background.
+ * @cssprop [--fg-default=#f0f0f4] - Text color.
+ * @cssprop [--fg-muted=#a0a0aa] - Muted text color.
+ * @cssprop [--border-default=rgba(255,255,255,0.12)] - Border color.
+ */
+import { LitElement } from 'lit';
+import '../icons/sw-ui-icon.js';
+export declare class SwUiDialpad extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** 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). Keypad buttons still append DTMF digits. */
+    allowText: boolean;
+    /** Placeholder text shown in the digit display input. */
+    placeholder: string;
+    private digits;
+    private pressedKey;
+    private _longPressTimer;
+    private _longPressFired;
+    private _startLongPress;
+    private _cancelLongPress;
+    disconnectedCallback(): void;
+    private _clearAll;
+    private _pressDigit;
+    private _backspace;
+    private _dial;
+    /**
+     * Handle keyboard input on the display field.
+     * We intercept all keys and manage state ourselves to prevent the browser
+     * from accumulating non-DTMF characters in the input value.
+     */
+    private _onKeyDown;
+    private _onInput;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-dialpad': SwUiDialpad;
+    }
+}
+//# sourceMappingURL=sw-ui-dialpad.d.ts.map

package/dist/components/UI/controls/sw-ui-dialpad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-dialpad.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/controls/sw-ui-dialpad.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,wBAAwB,CAAC;AAuBhC,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAoKX;IAEF,2DAA2D;IAE3D,cAAc,EAAE,OAAO,CAAS;IAEhC,4HAA4H;IAE5H,SAAS,EAAE,OAAO,CAAS;IAE3B,yDAAyD;IAEzD,WAAW,EAAE,MAAM,CAAkB;IAE5B,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,UAAU,CAAuB;IAElD,OAAO,CAAC,eAAe,CAA8C;IACrE,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,gBAAgB;IAOf,oBAAoB;IAK7B,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,KAAK;IAWb;;;;OAIG;IACH,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,QAAQ;IAahB,MAAM;CAyEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}