@signalwire/web-components 1.0.0-dev-20260428141127 → 1.0.0-dev-20260428183200

package/dist/components/dialpad.js

@@ -1,372 +0,0 @@
-import { LitElement as u, html as c, css as h } from "lit";
-import { property as d, state as p, customElement as g } from "lit/decorators.js";
-import { consume as b } from "@lit/context";
-import { callContext as w } from "../context/call-context.js";
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? v(t, a) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (r = (i ? n(t, a, r) : n(r)) || r);
-  return i && r && f(t, a, r), r;
-};
-const m = [
-  { digit: "1", letters: "" },
-  { digit: "2", letters: "ABC" },
-  { digit: "3", letters: "DEF" },
-  { digit: "4", letters: "GHI" },
-  { digit: "5", letters: "JKL" },
-  { digit: "6", letters: "MNO" },
-  { digit: "7", letters: "PQRS" },
-  { digit: "8", letters: "TUV" },
-  { digit: "9", letters: "WXYZ" },
-  { digit: "*", letters: "" },
-  { digit: "0", letters: "+" },
-  { digit: "#", letters: "" }
-];
-let s = class extends u {
-  constructor() {
-    super(...arguments), this.call = null, this.digits = "", this.pressedKey = null, this.showCallButton = !1, this.placeholder = "Enter number";
-  }
-  get activeCall() {
-    return this.call || this.contextCall || null;
-  }
-  handleKeyPress(e) {
-    var t;
-    this.digits += e, this.pressedKey = e, (t = this.activeCall) != null && t.sendDigits && this.activeCall.sendDigits(e).catch((a) => {
-      console.error("Failed to send DTMF:", a);
-    }), this.dispatchEvent(
-      new CustomEvent("sw-digit-press", {
-        detail: { digit: e, digits: this.digits },
-        bubbles: !0,
-        composed: !0
-      })
-    ), setTimeout(() => {
-      this.pressedKey = null;
-    }, 100);
-  }
-  handleBackspace() {
-    this.digits.length > 0 && (this.digits = this.digits.slice(0, -1), this.dispatchEvent(
-      new CustomEvent("sw-backspace", {
-        detail: { digits: this.digits },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  handleCall() {
-    this.digits.length > 0 && this.dispatchEvent(
-      new CustomEvent("sw-dial", {
-        detail: { digits: this.digits },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleInputChange(e) {
-    const t = e.target;
-    this.digits = t.value.replace(/[^0-9*#]/g, "");
-  }
-  handleKeyDown(e) {
-    const t = e.key;
-    /^[0-9*#]$/.test(t) ? this.handleKeyPress(t) : t === "Backspace" ? this.handleBackspace() : t === "Enter" && this.showCallButton && this.handleCall();
-  }
-  render() {
-    return c`
-      <div class="container" part="container">
-        <div class="display" part="display">
-          <input
-            type="tel"
-            class="display-input"
-            .value=${this.digits}
-            placeholder=${this.placeholder}
-            @input=${this.handleInputChange}
-            @keydown=${this.handleKeyDown}
-            aria-label="Phone number input"
-          />
-          <button
-            class="backspace-button"
-            @click=${this.handleBackspace}
-            ?disabled=${this.digits.length === 0}
-            aria-label="Delete last digit"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
-              <line x1="18" y1="9" x2="12" y2="15"></line>
-              <line x1="12" y1="9" x2="18" y2="15"></line>
-            </svg>
-          </button>
-        </div>
-
-        <div class="keypad" part="keypad" role="group" aria-label="Telephone keypad">
-          ${m.map(
-      (e) => c`
-              <button
-                class="key ${this.pressedKey === e.digit ? "pressed" : ""}"
-                part="key ${this.pressedKey === e.digit ? "key-pressed" : ""}"
-                @click=${() => this.handleKeyPress(e.digit)}
-                aria-label="${e.digit}${e.letters ? `, ${e.letters}` : ""}"
-              >
-                <span class="key-digit">${e.digit}</span>
-                <span class="key-letters">${e.letters}</span>
-              </button>
-            `
-    )}
-        </div>
-
-        ${this.showCallButton ? c`
-              <button
-                class="call-button"
-                part="call-button"
-                @click=${this.handleCall}
-                ?disabled=${this.digits.length === 0}
-                aria-label="Call ${this.digits}"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                  <path
-                    d="M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
-                  />
-                </svg>
-                Call
-              </button>
-            ` : null}
-      </div>
-    `;
-  }
-};
-s.styles = h`
-    :host {
-      /* CSS Custom Properties for theming */
-      --sw-color-primary: #044cf6;
-      --sw-color-primary-hover: #0339c4;
-      --sw-color-primary-active: #022b92;
-      --sw-color-success: #10b981;
-      --sw-color-danger: #ef4444;
-      --sw-color-text: #1f2937;
-      --sw-color-text-muted: #6b7280;
-      --sw-color-border: #e5e7eb;
-      --sw-color-background: #ffffff;
-      --sw-color-background-hover: #f3f4f6;
-      --sw-color-background-active: #e5e7eb;
-      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      --sw-font-size-sm: 12px;
-      --sw-font-size-base: 16px;
-      --sw-font-size-lg: 24px;
-      --sw-font-size-xl: 32px;
-      --sw-space-1: 4px;
-      --sw-space-2: 8px;
-      --sw-space-3: 12px;
-      --sw-space-4: 16px;
-      --sw-border-radius: 8px;
-      --sw-border-radius-full: 9999px;
-
-      display: block;
-      font-family: var(--sw-font-family);
-    }
-
-    /* Dark mode support */
-    :host([data-theme='dark']) {
-      --sw-color-text: #f9fafb;
-      --sw-color-text-muted: #9ca3af;
-      --sw-color-border: #374151;
-      --sw-color-background: #1f2937;
-      --sw-color-background-hover: #374151;
-      --sw-color-background-active: #4b5563;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      :host(:not([data-theme='light'])) {
-        --sw-color-text: #f9fafb;
-        --sw-color-text-muted: #9ca3af;
-        --sw-color-border: #374151;
-        --sw-color-background: #1f2937;
-        --sw-color-background-hover: #374151;
-        --sw-color-background-active: #4b5563;
-      }
-    }
-
-    .container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sw-space-3);
-      padding: var(--sw-space-4);
-      max-width: 280px;
-      background: var(--sw-color-background);
-      border-radius: var(--sw-border-radius);
-    }
-
-    .display {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--sw-space-3) var(--sw-space-4);
-      background: var(--sw-color-background-hover);
-      border-radius: var(--sw-border-radius);
-      min-height: 48px;
-    }
-
-    .display-input {
-      flex: 1;
-      font-size: var(--sw-font-size-xl);
-      font-weight: 500;
-      font-family: var(--sw-font-family);
-      color: var(--sw-color-text);
-      background: transparent;
-      border: none;
-      outline: none;
-      letter-spacing: 2px;
-      text-align: center;
-    }
-
-    .display-input::placeholder {
-      color: var(--sw-color-text-muted);
-      font-size: var(--sw-font-size-base);
-      letter-spacing: normal;
-    }
-
-    .backspace-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      background: transparent;
-      border: none;
-      border-radius: var(--sw-border-radius);
-      cursor: pointer;
-      color: var(--sw-color-text-muted);
-      transition:
-        background-color 0.15s ease,
-        color 0.15s ease;
-    }
-
-    .backspace-button:hover {
-      background: var(--sw-color-background-active);
-      color: var(--sw-color-text);
-    }
-
-    .backspace-button:disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
-
-    .keypad {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--sw-space-2);
-    }
-
-    .key {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 72px;
-      height: 72px;
-      background: var(--sw-color-background);
-      border: 1px solid var(--sw-color-border);
-      border-radius: var(--sw-border-radius-full);
-      cursor: pointer;
-      transition:
-        background-color 0.1s ease,
-        transform 0.1s ease;
-      user-select: none;
-      -webkit-user-select: none;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    .key:hover {
-      background: var(--sw-color-background-hover);
-    }
-
-    .key:active,
-    .key.pressed {
-      background: var(--sw-color-background-active);
-      transform: scale(0.95);
-    }
-
-    .key-digit {
-      font-size: var(--sw-font-size-lg);
-      font-weight: 500;
-      color: var(--sw-color-text);
-      line-height: 1;
-    }
-
-    .key-letters {
-      font-size: var(--sw-font-size-sm);
-      color: var(--sw-color-text-muted);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-top: 2px;
-      min-height: 14px;
-    }
-
-    .call-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 56px;
-      background: var(--sw-color-success);
-      border: none;
-      border-radius: var(--sw-border-radius);
-      cursor: pointer;
-      color: white;
-      font-size: var(--sw-font-size-base);
-      font-weight: 600;
-      font-family: var(--sw-font-family);
-      transition: background-color 0.15s ease;
-      gap: var(--sw-space-2);
-    }
-
-    .call-button:hover {
-      background: #0ea472;
-    }
-
-    .call-button:active {
-      background: #0d9668;
-    }
-
-    .call-button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .call-button svg {
-      width: 20px;
-      height: 20px;
-    }
-  `;
-o([
-  d({ attribute: !1 })
-], s.prototype, "call", 2);
-o([
-  b({ context: w, subscribe: !0 }),
-  p()
-], s.prototype, "contextCall", 2);
-o([
-  p()
-], s.prototype, "digits", 2);
-o([
-  p()
-], s.prototype, "pressedKey", 2);
-o([
-  d({ type: Boolean, attribute: "show-call-button" })
-], s.prototype, "showCallButton", 2);
-o([
-  d({ type: String })
-], s.prototype, "placeholder", 2);
-s = o([
-  g("sw-dialpad")
-], s);
-export {
-  s as DialpadComponent
-};
-//# sourceMappingURL=dialpad.js.map

package/dist/components/dialpad.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialpad.js","sources":["../../src/components/dialpad.ts"],"sourcesContent":["/**\n * Dialpad Component\n *\n * A 12-key telephone keypad (0-9, *, #) for entering phone numbers\n * and sending DTMF tones during active calls.\n *\n * @example\n * ```html\n * <sw-dialpad .call=${call}></sw-dialpad>\n * ```\n *\n * @fires sw-digit-press - Fired when a digit button is pressed. Detail: `{ digit: string }`\n * @fires sw-backspace - Fired when the backspace button is pressed.\n * @fires sw-dial - Fired when the call button is pressed. Detail: `{ number: string }`\n *\n * @cssprop [--sw-color-primary=#044cf6] - Primary accent color.\n * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover.\n * @cssprop [--sw-color-success=#10b981] - Success/call button color.\n * @cssprop [--sw-color-danger=#ef4444] - Danger/hangup button color.\n * @cssprop [--sw-color-background=#1a1a1a] - Component background.\n * @cssprop [--sw-color-surface=#2a2a2a] - Button surface color.\n * @cssprop [--sw-color-surface-hover=#3a3a3a] - Button surface on hover.\n * @cssprop [--sw-color-text=#ffffff] - Text color.\n * @cssprop [--sw-color-text-muted=#a0a0a0] - Muted text color.\n * @cssprop [--sw-color-border=#404040] - Border color.\n * @cssprop [--sw-border-radius=8px] - Border radius.\n * @cssprop [--sw-font-size-sm=12px] - Small font size.\n * @cssprop [--sw-font-size-base=14px] - Base font size.\n * @cssprop [--sw-font-size-lg=16px] - Large font size.\n * @cssprop [--sw-font-size-xl=20px] - Extra-large font size for digit display.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\nimport type { Observable } from 'rxjs';\nimport { callContext } from '../context/index.js';\n\n/**\n * Call interface for dialpad component\n */\nexport interface DialpadCall {\n  sendDigits?(dtmf: string): Promise<void>;\n  status$?: Observable<string>;\n}\n\n/**\n * Key layout for standard telephone keypad\n */\nconst KEYS = [\n  { digit: '1', letters: '' },\n  { digit: '2', letters: 'ABC' },\n  { digit: '3', letters: 'DEF' },\n  { digit: '4', letters: 'GHI' },\n  { digit: '5', letters: 'JKL' },\n  { digit: '6', letters: 'MNO' },\n  { digit: '7', letters: 'PQRS' },\n  { digit: '8', letters: 'TUV' },\n  { digit: '9', letters: 'WXYZ' },\n  { digit: '*', letters: '' },\n  { digit: '0', letters: '+' },\n  { digit: '#', letters: '' }\n];\n\n@customElement('sw-dialpad')\nexport class DialpadComponent 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-primary-active: #022b92;\n      --sw-color-success: #10b981;\n      --sw-color-danger: #ef4444;\n      --sw-color-text: #1f2937;\n      --sw-color-text-muted: #6b7280;\n      --sw-color-border: #e5e7eb;\n      --sw-color-background: #ffffff;\n      --sw-color-background-hover: #f3f4f6;\n      --sw-color-background-active: #e5e7eb;\n      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      --sw-font-size-sm: 12px;\n      --sw-font-size-base: 16px;\n      --sw-font-size-lg: 24px;\n      --sw-font-size-xl: 32px;\n      --sw-space-1: 4px;\n      --sw-space-2: 8px;\n      --sw-space-3: 12px;\n      --sw-space-4: 16px;\n      --sw-border-radius: 8px;\n      --sw-border-radius-full: 9999px;\n\n      display: block;\n      font-family: var(--sw-font-family);\n    }\n\n    /* Dark mode support */\n    :host([data-theme='dark']) {\n      --sw-color-text: #f9fafb;\n      --sw-color-text-muted: #9ca3af;\n      --sw-color-border: #374151;\n      --sw-color-background: #1f2937;\n      --sw-color-background-hover: #374151;\n      --sw-color-background-active: #4b5563;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      :host(:not([data-theme='light'])) {\n        --sw-color-text: #f9fafb;\n        --sw-color-text-muted: #9ca3af;\n        --sw-color-border: #374151;\n        --sw-color-background: #1f2937;\n        --sw-color-background-hover: #374151;\n        --sw-color-background-active: #4b5563;\n      }\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--sw-space-3);\n      padding: var(--sw-space-4);\n      max-width: 280px;\n      background: var(--sw-color-background);\n      border-radius: var(--sw-border-radius);\n    }\n\n    .display {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--sw-space-3) var(--sw-space-4);\n      background: var(--sw-color-background-hover);\n      border-radius: var(--sw-border-radius);\n      min-height: 48px;\n    }\n\n    .display-input {\n      flex: 1;\n      font-size: var(--sw-font-size-xl);\n      font-weight: 500;\n      font-family: var(--sw-font-family);\n      color: var(--sw-color-text);\n      background: transparent;\n      border: none;\n      outline: none;\n      letter-spacing: 2px;\n      text-align: center;\n    }\n\n    .display-input::placeholder {\n      color: var(--sw-color-text-muted);\n      font-size: var(--sw-font-size-base);\n      letter-spacing: normal;\n    }\n\n    .backspace-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 40px;\n      background: transparent;\n      border: none;\n      border-radius: var(--sw-border-radius);\n      cursor: pointer;\n      color: var(--sw-color-text-muted);\n      transition:\n        background-color 0.15s ease,\n        color 0.15s ease;\n    }\n\n    .backspace-button:hover {\n      background: var(--sw-color-background-active);\n      color: var(--sw-color-text);\n    }\n\n    .backspace-button:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n\n    .keypad {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: var(--sw-space-2);\n    }\n\n    .key {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 72px;\n      height: 72px;\n      background: var(--sw-color-background);\n      border: 1px solid var(--sw-color-border);\n      border-radius: var(--sw-border-radius-full);\n      cursor: pointer;\n      transition:\n        background-color 0.1s ease,\n        transform 0.1s ease;\n      user-select: none;\n      -webkit-user-select: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .key:hover {\n      background: var(--sw-color-background-hover);\n    }\n\n    .key:active,\n    .key.pressed {\n      background: var(--sw-color-background-active);\n      transform: scale(0.95);\n    }\n\n    .key-digit {\n      font-size: var(--sw-font-size-lg);\n      font-weight: 500;\n      color: var(--sw-color-text);\n      line-height: 1;\n    }\n\n    .key-letters {\n      font-size: var(--sw-font-size-sm);\n      color: var(--sw-color-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-top: 2px;\n      min-height: 14px;\n    }\n\n    .call-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 56px;\n      background: var(--sw-color-success);\n      border: none;\n      border-radius: var(--sw-border-radius);\n      cursor: pointer;\n      color: white;\n      font-size: var(--sw-font-size-base);\n      font-weight: 600;\n      font-family: var(--sw-font-family);\n      transition: background-color 0.15s ease;\n      gap: var(--sw-space-2);\n    }\n\n    .call-button:hover {\n      background: #0ea472;\n    }\n\n    .call-button:active {\n      background: #0d9668;\n    }\n\n    .call-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .call-button svg {\n      width: 20px;\n      height: 20px;\n    }\n  `;\n\n  /** Call object providing the sendDigits method for DTMF tones. */\n  @property({ attribute: false })\n  call: DialpadCall | null = null;\n\n  /**\n   * Call from context (if nested in sw-call-media)\n   */\n  @consume({ context: callContext, subscribe: true })\n  @state()\n  private contextCall?: DialpadCall;\n\n  /**\n   * Current digits entered\n   */\n  @state()\n  private digits: string = '';\n\n  /**\n   * Currently pressed key (for visual feedback)\n   */\n  @state()\n  private pressedKey: string | null = null;\n\n  /** Whether to display the call button below the keypad. */\n  @property({ type: Boolean, attribute: 'show-call-button' })\n  showCallButton: boolean = false;\n\n  /** Placeholder text shown in the digit display input. */\n  @property({ type: String })\n  placeholder: string = 'Enter number';\n\n  private get activeCall(): DialpadCall | null {\n    return this.call || this.contextCall || null;\n  }\n\n  private handleKeyPress(digit: string) {\n    this.digits += digit;\n    this.pressedKey = digit;\n\n    // Send DTMF if call is active\n    if (this.activeCall?.sendDigits) {\n      this.activeCall.sendDigits(digit).catch((err) => {\n        console.error('Failed to send DTMF:', err);\n      });\n    }\n\n    // Dispatch event\n    this.dispatchEvent(\n      new CustomEvent('sw-digit-press', {\n        detail: { digit, digits: this.digits },\n        bubbles: true,\n        composed: true\n      })\n    );\n\n    // Reset pressed state after animation\n    setTimeout(() => {\n      this.pressedKey = null;\n    }, 100);\n  }\n\n  private handleBackspace() {\n    if (this.digits.length > 0) {\n      this.digits = this.digits.slice(0, -1);\n      this.dispatchEvent(\n        new CustomEvent('sw-backspace', {\n          detail: { digits: this.digits },\n          bubbles: true,\n          composed: true\n        })\n      );\n    }\n  }\n\n  private handleCall() {\n    if (this.digits.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent('sw-dial', {\n          detail: { digits: this.digits },\n          bubbles: true,\n          composed: true\n        })\n      );\n    }\n  }\n\n  private handleInputChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    // Only allow valid DTMF characters\n    this.digits = input.value.replace(/[^0-9*#]/g, '');\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    const key = e.key;\n    // Handle keyboard input for digits\n    if (/^[0-9*#]$/.test(key)) {\n      this.handleKeyPress(key);\n    } else if (key === 'Backspace') {\n      this.handleBackspace();\n    } else if (key === 'Enter' && this.showCallButton) {\n      this.handleCall();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"display\" part=\"display\">\n          <input\n            type=\"tel\"\n            class=\"display-input\"\n            .value=${this.digits}\n            placeholder=${this.placeholder}\n            @input=${this.handleInputChange}\n            @keydown=${this.handleKeyDown}\n            aria-label=\"Phone number input\"\n          />\n          <button\n            class=\"backspace-button\"\n            @click=${this.handleBackspace}\n            ?disabled=${this.digits.length === 0}\n            aria-label=\"Delete last digit\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z\"></path>\n              <line x1=\"18\" y1=\"9\" x2=\"12\" y2=\"15\"></line>\n              <line x1=\"12\" y1=\"9\" x2=\"18\" y2=\"15\"></line>\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"keypad\" part=\"keypad\" role=\"group\" aria-label=\"Telephone keypad\">\n          ${KEYS.map(\n            (key) => html`\n              <button\n                class=\"key ${this.pressedKey === key.digit ? 'pressed' : ''}\"\n                part=\"key ${this.pressedKey === key.digit ? 'key-pressed' : ''}\"\n                @click=${() => this.handleKeyPress(key.digit)}\n                aria-label=\"${key.digit}${key.letters ? `, ${key.letters}` : ''}\"\n              >\n                <span class=\"key-digit\">${key.digit}</span>\n                <span class=\"key-letters\">${key.letters}</span>\n              </button>\n            `\n          )}\n        </div>\n\n        ${this.showCallButton\n          ? html`\n              <button\n                class=\"call-button\"\n                part=\"call-button\"\n                @click=${this.handleCall}\n                ?disabled=${this.digits.length === 0}\n                aria-label=\"Call ${this.digits}\"\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path\n                    d=\"M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z\"\n                  />\n                </svg>\n                Call\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-dialpad': DialpadComponent;\n  }\n}\n"],"names":["KEYS","DialpadComponent","LitElement","digit","_a","err","input","key","html","css","__decorateClass","property","consume","callContext","state","customElement"],"mappings":"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"}

package/dist/components/example-button.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * An example button component built with Lit
- *
- * @fires sw-click - Fired when the button is clicked (and not disabled). Detail: `{ originalEvent: MouseEvent }`
- * @slot - Default slot for button content
- * @csspart button - The button element
- */
-export declare class ExampleButton extends LitElement {
-    static styles: import("lit").CSSResult;
-    disabled: boolean;
-    variant: 'primary' | 'secondary';
-    private _handleClick;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sw-example-button': ExampleButton;
-    }
-}
-//# sourceMappingURL=example-button.d.ts.map

package/dist/components/example-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"example-button.d.ts","sourceRoot":"","sources":["../../src/components/example-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;GAMG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BA4BX;IAGF,QAAQ,UAAS;IAGjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAE7C,OAAO,CAAC,YAAY;IAgBpB,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}

package/dist/components/example-button.js

@@ -1,74 +0,0 @@
-import { LitElement as d, html as p, css as u } from "lit";
-import { property as c, customElement as b } from "lit/decorators.js";
-var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, i = (o, e, s, n) => {
-  for (var t = n > 1 ? void 0 : n ? h(e, s) : e, l = o.length - 1, a; l >= 0; l--)
-    (a = o[l]) && (t = (n ? a(e, s, t) : a(t)) || t);
-  return n && t && m(e, s, t), t;
-};
-let r = class extends d {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.variant = "primary";
-  }
-  _handleClick(o) {
-    if (this.disabled) {
-      o.preventDefault(), o.stopPropagation();
-      return;
-    }
-    this.dispatchEvent(
-      new CustomEvent("sw-click", {
-        detail: { originalEvent: o },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    return p`
-      <button part="button" ?disabled=${this.disabled} @click=${this._handleClick}>
-        <slot></slot>
-      </button>
-    `;
-  }
-};
-r.styles = u`
-    :host {
-      display: inline-block;
-    }
-
-    button {
-      padding: 0.5rem 1rem;
-      font-size: 1rem;
-      border: none;
-      border-radius: 4px;
-      background-color: #0066cc;
-      color: white;
-      cursor: pointer;
-      transition: background-color 0.2s;
-    }
-
-    button:hover {
-      background-color: #0052a3;
-    }
-
-    button:active {
-      background-color: #003d7a;
-    }
-
-    button:disabled {
-      background-color: #cccccc;
-      cursor: not-allowed;
-    }
-  `;
-i([
-  c({ type: Boolean })
-], r.prototype, "disabled", 2);
-i([
-  c({ type: String })
-], r.prototype, "variant", 2);
-r = i([
-  b("sw-example-button")
-], r);
-export {
-  r as ExampleButton
-};
-//# sourceMappingURL=example-button.js.map

package/dist/components/example-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"example-button.js","sources":["../../src/components/example-button.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * An example button component built with Lit\n *\n * @fires sw-click - Fired when the button is clicked (and not disabled). Detail: `{ originalEvent: MouseEvent }`\n * @slot - Default slot for button content\n * @csspart button - The button element\n */\n@customElement('sw-example-button')\nexport class ExampleButton extends LitElement {\n  static styles = css`\n    :host {\n      display: inline-block;\n    }\n\n    button {\n      padding: 0.5rem 1rem;\n      font-size: 1rem;\n      border: none;\n      border-radius: 4px;\n      background-color: #0066cc;\n      color: white;\n      cursor: pointer;\n      transition: background-color 0.2s;\n    }\n\n    button:hover {\n      background-color: #0052a3;\n    }\n\n    button:active {\n      background-color: #003d7a;\n    }\n\n    button:disabled {\n      background-color: #cccccc;\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  variant: 'primary' | 'secondary' = 'primary';\n\n  private _handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('sw-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=${this.disabled} @click=${this._handleClick}>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-example-button': ExampleButton;\n  }\n}\n"],"names":["ExampleButton","LitElement","e","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAWO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgCL,KAAA,WAAW,IAGX,KAAA,UAAmC;AAAA,EAAA;AAAA,EAE3B,aAAaC,GAAe;AAClC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAE,eAAeA,EAAA;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,wCAC6B,KAAK,QAAQ,WAAW,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI/E;AACF;AA5DaH,EACJ,SAASI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA/BhBN,EAgCX,WAAA,YAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfN,EAmCX,WAAA,WAAA,CAAA;AAnCWA,IAANK,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBP,CAAA;"}