@vonage/vivid 5.15.1 → 5.16.0

package/dial-pad/index.js

@@ -1,325 +1,233 @@
-import { B as h, b as m } from "../bundled/definition3.js";
-import { T as _, t as $ } from "../bundled/definition10.js";
-import { V as L, a as i, o as y, h as d, c as k, d as w } from "../bundled/vivid-element.js";
-import { I as P, i as T } from "../bundled/definition2.js";
-import { V as A, v as x } from "../bundled/definition14.js";
-import { L as C } from "../bundled/localized.js";
-import { w as p } from "../bundled/when.js";
-import { r as E } from "../bundled/ref.js";
-import { r as D } from "../bundled/repeat.js";
-import { c as F } from "../bundled/class-names.js";
-import { f as I } from "../bundled/key-codes.js";
-const B = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media(hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
-var V = Object.defineProperty, l = (n, t, e, a) => {
-  for (var s = void 0, c = n.length - 1, u; c >= 0; c--)
-    (u = n[c]) && (s = u(t, e, s) || s);
-  return s && V(t, e, s), s;
+import { t as e } from "../bundled/localized.js";
+import { T as t, d as n, l as r, o as i, s as a, t as o } from "../bundled/vivid-element.js";
+import { n as s } from "../bundled/repeat.js";
+import { t as c } from "../bundled/ref.js";
+import { t as l } from "../bundled/when.js";
+import { n as u, r as d } from "../bundled/definition.js";
+import { r as f, t as p } from "../bundled/definition2.js";
+import { t as m } from "../bundled/decorate.js";
+import { t as h } from "../bundled/class-names.js";
+import "../bundled/key-codes.js";
+import { i as g, t as _ } from "../bundled/definition6.js";
+import { n as v, r as y } from "../bundled/definition15.js";
+//#region src/lib/dial-pad/dial-pad.scss?inline
+var b = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.call-btn{grid-column:1/-1;margin-top:32px}", x = class extends e(o) {
+	constructor(...e) {
+		super(...e), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._longPressTimeoutId = null, this._suppressNextClick = !1, this._keyboardLongPressCompleted = !1, this._onDial = () => {
+			this._textFieldEl.checkValidity() ? this._clearErrorAnnouncement() : this._announceValidationError(this._textFieldEl.errorValidationMessage ?? ""), this.callActive ? this.$emit("end-call") : this.$emit("dial");
+		}, this.autofocus = !1, this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
+	}
+	valueChanged(e, t) {
+		t != null && this._textFieldEl && t !== this._textFieldEl.value && (this._textFieldEl.value = t, this._textFieldEl.reportValidity());
+	}
+	_startLongPress(e, t) {
+		if (this.disabled || this.callActive || e !== "0") return;
+		this._clearLongPressTimer();
+		let n = t.currentTarget;
+		this._longPressTimeoutId = window.setTimeout(() => {
+			this._suppressNextClick = !0, this.value += "+", this.$emit("keypad-click", n), this.$emit("input"), this.$emit("change");
+		}, 600);
+	}
+	_startKeyboardLongPress() {
+		this.disabled || this.callActive || this._longPressTimeoutId === null && (this._keyboardLongPressCompleted = !1, this._longPressTimeoutId = window.setTimeout(() => {
+			this._keyboardLongPressCompleted = !0, this.value += "+", this.$emit("input"), this.$emit("change");
+		}, 650));
+	}
+	_endLongPress() {
+		this._clearLongPressTimer(), window.setTimeout(() => {
+			this._suppressNextClick &&= !1;
+		}, 0);
+	}
+	_endKeyboardLongPress() {
+		let e = this._keyboardLongPressCompleted;
+		return this._clearLongPressTimer(), window.setTimeout(() => {
+			this._keyboardLongPressCompleted = !1;
+		}, 0), e;
+	}
+	_cancelLongPress() {
+		this._clearLongPressTimer();
+	}
+	_clearLongPressTimer() {
+		this._longPressTimeoutId !== null && (clearTimeout(this._longPressTimeoutId), this._longPressTimeoutId = null);
+	}
+	focus() {
+		let e = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
+		(this._textFieldEl || e?.[0])?.focus();
+	}
+	_announceValidationError(e) {
+		this._errorAnnouncement = "", window.queueMicrotask(() => {
+			e ? (this._forceAnnouncementToggle = !this._forceAnnouncementToggle, this._errorAnnouncement = `${e}${this._forceAnnouncementToggle ? "​" : ""}`) : this._clearErrorAnnouncement();
+		});
+	}
+	_clearErrorAnnouncement() {
+		this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
+	}
 };
-class o extends C(L) {
-  constructor() {
-    super(...arguments), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._longPressTimeoutId = null, this._suppressNextClick = !1, this._keyboardLongPressCompleted = !1, this._onDial = () => {
-      !this._textFieldEl.checkValidity() ? this._announceValidationError(
-        this._textFieldEl.errorValidationMessage ?? ""
-      ) : this._clearErrorAnnouncement(), this.callActive ? this.$emit("end-call") : this.$emit("dial");
-    }, this.autofocus = !1, this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
-  }
-  valueChanged(t, e) {
-    e != null && this._textFieldEl && e !== this._textFieldEl.value && (this._textFieldEl.value = e, this._textFieldEl.reportValidity());
-  }
-  /**
-   * @internal
-   */
-  _startLongPress(t, e) {
-    if (this.disabled || this.callActive || t !== "0") return;
-    this._clearLongPressTimer();
-    const a = e.currentTarget;
-    this._longPressTimeoutId = window.setTimeout(() => {
-      this._suppressNextClick = !0, this.value += "+", this.$emit("keypad-click", a), this.$emit("input"), this.$emit("change");
-    }, 600);
-  }
-  /**
-   * @internal
-   */
-  _startKeyboardLongPress() {
-    this.disabled || this.callActive || this._longPressTimeoutId === null && (this._keyboardLongPressCompleted = !1, this._longPressTimeoutId = window.setTimeout(() => {
-      this._keyboardLongPressCompleted = !0, this.value += "+", this.$emit("input"), this.$emit("change");
-    }, 650));
-  }
-  /**
-   * @internal
-   */
-  _endLongPress() {
-    this._clearLongPressTimer(), window.setTimeout(() => {
-      this._suppressNextClick && (this._suppressNextClick = !1);
-    }, 0);
-  }
-  /**
-   * @internal
-   * @returns true if long press completed (timer fired), false otherwise
-   */
-  _endKeyboardLongPress() {
-    const t = this._keyboardLongPressCompleted;
-    return this._clearLongPressTimer(), window.setTimeout(() => {
-      this._keyboardLongPressCompleted = !1;
-    }, 0), t;
-  }
-  /**
-   * @internal
-   */
-  _cancelLongPress() {
-    this._clearLongPressTimer();
-  }
-  _clearLongPressTimer() {
-    this._longPressTimeoutId !== null && (clearTimeout(this._longPressTimeoutId), this._longPressTimeoutId = null);
-  }
-  /**
-   * Moves focus into the diapl-pad.
-   *
-   * @public
-   */
-  focus() {
-    const t = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
-    (this._textFieldEl || t?.[0])?.focus();
-  }
-  /**
-   * @internal
-   */
-  _announceValidationError(t) {
-    this._errorAnnouncement = "", window.queueMicrotask(() => {
-      t ? (this._forceAnnouncementToggle = !this._forceAnnouncementToggle, this._errorAnnouncement = `${t}${this._forceAnnouncementToggle ? "​" : ""}`) : this._clearErrorAnnouncement();
-    });
-  }
-  /**
-   * @internal
-   */
-  _clearErrorAnnouncement() {
-    this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
-  }
+m([r({ attribute: "helper-text" })], x.prototype, "helperText", void 0), m([r], x.prototype, "placeholder", void 0), m([r({ mode: "fromView" })], x.prototype, "value", void 0), m([r({ mode: "fromView" })], x.prototype, "pattern", void 0), m([r({ mode: "boolean" })], x.prototype, "disabled", void 0), m([r({ mode: "boolean" })], x.prototype, "pending", void 0), m([r({
+	attribute: "call-active",
+	mode: "boolean"
+})], x.prototype, "callActive", void 0), m([r({
+	mode: "boolean",
+	attribute: "no-call"
+})], x.prototype, "noCall", void 0), m([r({
+	mode: "boolean",
+	attribute: "no-input"
+})], x.prototype, "noInput", void 0), m([r({ attribute: "end-call-button-label" })], x.prototype, "endCallButtonLabel", void 0), m([r({ attribute: "call-button-label" })], x.prototype, "callButtonLabel", void 0), m([r({ attribute: "delete-aria-label" })], x.prototype, "deleteAriaLabel", void 0), m([r({ mode: "boolean" })], x.prototype, "autofocus", void 0), m([t], x.prototype, "_errorAnnouncement", void 0);
+//#endregion
+//#region src/lib/dial-pad/dial-pad.template.ts
+var S = class {
+	constructor(e, t, n, r, i) {
+		this.value = e, this.label = t, this.ariaLabel = n, this.icon = r, this.id = i;
+	}
+}, C = [
+	new S("1", " ", "digitOneLabel", "one-solid", "btn1"),
+	new S("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
+	new S("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
+	new S("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
+	new S("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
+	new S("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
+	new S("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
+	new S("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
+	new S("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
+	new S("*", null, "digitAsteriskLabel", "asterisk-2-solid", "btnAsterisk"),
+	new S("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
+	new S("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
+], w = ({ noInput: e }) => h("base", ["no-input", !!e]);
+function T(e, t) {
+	if (t.key === "Enter" && !e.pending && !e.disabled && !e.callActive && !e.noCall && e.value.length > 0 && t.target instanceof HTMLInputElement) e._onDial();
+	else if (t.key === " " || t.key === "Space")
+ /* v8 ignore else -- @preserve */
+	t.target instanceof HTMLInputElement && (t.preventDefault(), t.repeat || e._startKeyboardLongPress());
+	else {
+		let n = C.findIndex((e) => e.value === t.key);
+		if (n > -1) {
+			let t = e.shadowRoot.querySelector(".digits").children[n];
+			/* v8 ignore else -- @preserve */
+			t && (t.active = !0, setTimeout(() => {
+				t.active = !1;
+			}, 200));
+		}
+	}
+	return !0;
 }
-l([
-  i({ attribute: "helper-text" })
-], o.prototype, "helperText");
-l([
-  i
-], o.prototype, "placeholder");
-l([
-  i({ mode: "fromView" })
-], o.prototype, "value");
-l([
-  i({ mode: "fromView" })
-], o.prototype, "pattern");
-l([
-  i({ mode: "boolean" })
-], o.prototype, "disabled");
-l([
-  i({ mode: "boolean" })
-], o.prototype, "pending");
-l([
-  i({ attribute: "call-active", mode: "boolean" })
-], o.prototype, "callActive");
-l([
-  i({ mode: "boolean", attribute: "no-call" })
-], o.prototype, "noCall");
-l([
-  i({ mode: "boolean", attribute: "no-input" })
-], o.prototype, "noInput");
-l([
-  i({ attribute: "end-call-button-label" })
-], o.prototype, "endCallButtonLabel");
-l([
-  i({ attribute: "call-button-label" })
-], o.prototype, "callButtonLabel");
-l([
-  i({ attribute: "delete-aria-label" })
-], o.prototype, "deleteAriaLabel");
-l([
-  i({ mode: "boolean" })
-], o.prototype, "autofocus");
-l([
-  y
-], o.prototype, "_errorAnnouncement");
-class r {
-  constructor(t, e, a, s, c) {
-    this.value = t, this.label = e, this.ariaLabel = a, this.icon = s, this.id = c;
-  }
+function E(e, t) {
+	return (t.key === " " || t.key === "Space") && t.target instanceof HTMLInputElement && (t.preventDefault(), !e._endKeyboardLongPress() && !e.disabled && !e.callActive && (e.value += " ", e.$emit("input"), e.$emit("change"))), !0;
 }
-const b = [
-  new r("1", " ", "digitOneLabel", "one-solid", "btn1"),
-  new r("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
-  new r("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
-  new r("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
-  new r("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
-  new r("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
-  new r("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
-  new r("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
-  new r("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
-  new r(
-    "*",
-    null,
-    "digitAsteriskLabel",
-    "asterisk-2-solid",
-    "btnAsterisk"
-  ),
-  new r("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
-  new r(
-    "#",
-    null,
-    "digitHashtagLabel",
-    "hashtag-solid",
-    "btnHashtag"
-  )
-], K = ({ noInput: n }) => F("base", ["no-input", !!n]);
-function N(n, t) {
-  if (t.key === I && !n.pending && !n.disabled && !n.callActive && !n.noCall && n.value.length > 0 && t.target instanceof HTMLInputElement)
-    n._onDial();
-  else if (t.key === " " || t.key === "Space")
-    t.target instanceof HTMLInputElement && (t.preventDefault(), t.repeat || n._startKeyboardLongPress());
-  else {
-    const e = b.findIndex((a) => a.value === t.key);
-    if (e > -1) {
-      const a = n.shadowRoot.querySelector(".digits").children[e];
-      a && (a.active = !0, setTimeout(() => {
-        a.active = !1;
-      }, 200));
-    }
-  }
-  return !0;
+function D(e, { parent: t, event: n }) {
+	return (n.key === " " || n.key === "Space") && e.value === "0" && (n.preventDefault(), n.repeat || t._startKeyboardLongPress()), !0;
 }
-function S(n, t) {
-  return (t.key === " " || t.key === "Space") && t.target instanceof HTMLInputElement && (t.preventDefault(), !n._endKeyboardLongPress() && !n.disabled && !n.callActive && (n.value += " ", n.$emit("input"), n.$emit("change"))), !0;
+function O(e, { parent: t, event: n }) {
+	return (n.key === " " || n.key === "Space") && e.value === "0" && (n.preventDefault(), !t._endKeyboardLongPress() && !t.disabled && !t.callActive && N(e, {
+		parent: t,
+		event: new MouseEvent("click", { bubbles: !0 })
+	})), !0;
 }
-function z(n, { parent: t, event: e }) {
-  return (e.key === " " || e.key === "Space") && n.value === "0" && (e.preventDefault(), e.repeat || t._startKeyboardLongPress()), !0;
+function k(e) {
+	e.value = e._textFieldEl.value;
 }
-function H(n, { parent: t, event: e }) {
-  return (e.key === " " || e.key === "Space") && n.value === "0" && (e.preventDefault(), !t._endKeyboardLongPress() && !t.disabled && !t.callActive && g(n, {
-    parent: t,
-    event: new MouseEvent("click", { bubbles: !0 })
-  })), !0;
+function A(e, { event: t }) {
+	t.stopImmediatePropagation();
 }
-function v(n) {
-  n.value = n._textFieldEl.value;
+function j(e) {
+	e.value = e.value.slice(0, -1), e.$emit("input"), e.$emit("change"), e.value === "" && e._textFieldEl?.focus();
 }
-function f(n, { event: t }) {
-  t.stopImmediatePropagation();
-}
-function M(n) {
-  n.value = n.value.slice(0, -1), n.$emit("input"), n.$emit("change"), n.value === "" && n._textFieldEl?.focus();
-}
-function O(n, t) {
-  return d`<${n} ${E(
-    "_textFieldEl"
-  )} class="phone-field" internal-part type="tel"
+function M(e, t) {
+	return n`<${e} ${c("_textFieldEl")} class="phone-field" internal-part type="tel"
         value="${(e) => e.value}" placeholder="${(e) => e.placeholder}"
             ?disabled="${(e) => e.disabled}" helper-text="${(e) => e.helperText}" pattern="${(e) => e.pattern}"
             aria-label="${(e) => e.locale.dialPad.inputLabel}"
-            @keydown="${(e, a) => N(e, a.event)}"
-            @keyup="${(e, a) => S(e, a.event)}"
-            @input="${v}"
-			@change="${v}"
-			@focus="${f}"
-			@blur="${f}"
+            @keydown="${(e, t) => T(e, t.event)}"
+            @keyup="${(e, t) => E(e, t.event)}"
+            @input="${k}"
+			@change="${k}"
+			@focus="${A}"
+			@blur="${A}"
 			?autofocus="${(e) => e.autofocus}"
 			>
-         ${p(
-    (e) => e.value && e.value.length && e.value.length > 0,
-    d`<${t}
+         ${l((e) => e.value && e.value.length && e.value.length > 0, n`<${t}
                 slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
 								aria-label="${(e) => e.deleteAriaLabel || e.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(e) => e.disabled || e.callActive}"
-								@click="${(e) => M(e)}">
-            </${t}>`
-  )}
-        </${n}>`;
+								@click="${(e) => j(e)}">
+            </${t}>`)}
+        </${e}>`;
 }
-function g(n, { parent: t, event: e }) {
-  if (t._suppressNextClick) {
-    t._suppressNextClick = !1;
-    return;
-  }
-  t.value += n.value, t.$emit("keypad-click", e.currentTarget), t.$emit("input"), t.$emit("change");
+function N(e, { parent: t, event: n }) {
+	if (t._suppressNextClick) {
+		t._suppressNextClick = !1;
+		return;
+	}
+	t.value += e.value, t.$emit("keypad-click", n.currentTarget), t.$emit("input"), t.$emit("change");
 }
-function R(n, t) {
-  return d`
-		${D(
-    (e) => b,
-    d`
-			<${n}
+function P(e, t) {
+	return n`
+		${s((e) => C, n`
+			<${e}
 					  id="${(e) => e.id}"
 					  value="${(e) => e.value}"
 					  stacked
 					  appearance="ghost-light"
 					  shape="pill"
-					  label="${(e) => e.label === "&nbsp;" ? " " : e.label}"
+					  label="${(e) => e.label === "&nbsp;" ? "\xA0" : e.label}"
 					  size='condensed'
 					  class="digit-btn"
-						?autofocus="${(e, a) => a.parent.autofocus && a.parent.noInput && a.index === 0}"
-					  aria-label="${(e, a) => a.parent.locale.dialPad[e.ariaLabel]}"
-					  ?disabled="${(e, a) => a.parent.disabled}"
-					  @pointerdown="${(e, a) => a.parent._startLongPress(e.value, a.event)}"
-					  @pointerup="${(e, a) => a.parent._endLongPress()}"
-					  @pointercancel="${(e, a) => a.parent._cancelLongPress()}"
-					  @pointerleave="${(e, a) => a.parent._cancelLongPress()}"
-					  @keydown="${(e, a) => z(e, {
-      parent: a.parent,
-      event: a.event
-    })}"
-					  @keyup="${(e, a) => H(e, {
-      parent: a.parent,
-      event: a.event
-    })}"
-					  @click="${g}">
+						?autofocus="${(e, t) => t.parent.autofocus && t.parent.noInput && t.index === 0}"
+					  aria-label="${(e, t) => t.parent.locale.dialPad[e.ariaLabel]}"
+					  ?disabled="${(e, t) => t.parent.disabled}"
+					  @pointerdown="${(e, t) => t.parent._startLongPress(e.value, t.event)}"
+					  @pointerup="${(e, t) => t.parent._endLongPress()}"
+					  @pointercancel="${(e, t) => t.parent._cancelLongPress()}"
+					  @pointerleave="${(e, t) => t.parent._cancelLongPress()}"
+					  @keydown="${(e, t) => D(e, {
+		parent: t.parent,
+		event: t.event
+	})}"
+					  @keyup="${(e, t) => O(e, {
+		parent: t.parent,
+		event: t.event
+	})}"
+					  @click="${N}">
 					  	<${t} slot="icon"
 									name="${(e) => e.icon}"
 									class="digit-btn-num"></${t}>
-					</${n}>
-		`,
-    {
-      positioning: !0
-    }
-  )}
+					</${e}>
+		`, { positioning: !0 })}
 	`;
 }
-function U(n) {
-  return d`<${n} class="call-btn"
+function F(e) {
+	return n`<${e} class="call-btn"
         size="expanded"
         appearance="filled"
-        icon="${(t) => t.callActive ? "disable-call-line" : "call-line"}"
-        connotation="${(t) => t.callActive ? "alert" : "cta"}"
-        ?disabled="${(t) => t.disabled}"
-		?pending="${(t) => t.pending}"
-        @click="${(t) => t._onDial()}"
-        label="${(t) => t.callActive ? t.endCallButtonLabel || t.locale.dialPad.endCallButtonLabel : t.callButtonLabel || t.locale.dialPad.callButtonLabel}">
-    </${n}>`;
+        icon="${(e) => e.callActive ? "disable-call-line" : "call-line"}"
+        connotation="${(e) => e.callActive ? "alert" : "cta"}"
+        ?disabled="${(e) => e.disabled}"
+		?pending="${(e) => e.pending}"
+        @click="${(e) => e._onDial()}"
+        label="${(e) => e.callActive ? e.endCallButtonLabel || e.locale.dialPad.endCallButtonLabel : e.callButtonLabel || e.locale.dialPad.callButtonLabel}">
+    </${e}>`;
 }
-function q(n) {
-  return d`<${n} role="alert" aria-atomic="true">
-		${(t) => `${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
-	</${n}>`;
+function I(e) {
+	return n`<${e} role="alert" aria-atomic="true">
+		${(e) => `${e.locale.dialPad.errorLabel} ${e._errorAnnouncement}`}
+	</${e}>`;
 }
-const Z = (n) => {
-  const t = n.tagFor(h), e = n.tagFor(P), a = n.tagFor(_), s = n.tagFor(A);
-  return d` <div class="${K}">
-		${p((c) => !c.noInput, O(a, t))}
-		<div class="digits">${R(t, e)}</div>
-		${p((c) => !c.noCall, U(t))}
-		${q(s)}
+//#endregion
+//#region src/lib/dial-pad/index.ts
+a(i("dial-pad", x, (e) => {
+	let t = e.tagFor(g), r = e.tagFor(f), i = e.tagFor(y), a = e.tagFor(d);
+	return n` <div class="${w}">
+		${l((e) => !e.noInput, M(i, t))}
+		<div class="digits">${P(t, r)}</div>
+		${l((e) => !e.noCall, F(t))}
+		${I(a)}
 	</div>`;
-}, j = w(
-  "dial-pad",
-  o,
-  Z,
-  [
-    m,
-    $,
-    T,
-    x
-  ],
-  {
-    styles: B
-  }
-), G = k(j);
-G();
+}, [
+	_,
+	v,
+	p,
+	u
+], { styles: b }))();
+//#endregion