@vonage/vivid 5.15.1 → 5.17.0

package/dial-pad/definition.js

@@ -1,454 +1,3 @@
-import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
-import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { attr, observable, when, html, ref, repeat } from '@microsoft/fast-element';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames, keyEnter } from '@microsoft/fast-web-utilities';
-
-const styles = ":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 __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class DialPad extends Localized(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.helperText = null;
-    this.placeholder = null;
-    this.value = "";
-    this.pattern = "^[0-9#*]*$";
-    this.disabled = false;
-    this.pending = false;
-    this.callActive = false;
-    this.noCall = false;
-    this.noInput = false;
-    this.endCallButtonLabel = null;
-    this.callButtonLabel = null;
-    this.deleteAriaLabel = null;
-    /**
-     * Long-press handling for digit '0' to insert '+'
-     * @internal
-     */
-    this._longPressTimeoutId = null;
-    /**
-     * Suppresses the next click handler after a long press has already handled input
-     * @internal
-     */
-    this._suppressNextClick = false;
-    /**
-     * Tracks if long press completed for keyboard events
-     * @internal
-     */
-    this._keyboardLongPressCompleted = false;
-    /**
-     *
-     * @internal
-     */
-    this._onDial = () => {
-      const invalid = !this._textFieldEl.checkValidity();
-      if (invalid) {
-        this._announceValidationError(
-          this._textFieldEl.errorValidationMessage ?? ""
-        );
-      } else {
-        this._clearErrorAnnouncement();
-      }
-      this.callActive ? this.$emit("end-call") : this.$emit("dial");
-    };
-    this.autofocus = false;
-    this._errorAnnouncement = "";
-    /**
-     * @internal
-     */
-    this._forceAnnouncementToggle = false;
-  }
-  valueChanged(_oldValue, newValue) {
-    if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
-      this._textFieldEl.value = newValue;
-      this._textFieldEl.reportValidity();
-    }
-  }
-  /**
-   * @internal
-   */
-  _startLongPress(digit, event) {
-    if (this.disabled || this.callActive || digit !== "0") return;
-    this._clearLongPressTimer();
-    const target = event.currentTarget;
-    this._longPressTimeoutId = window.setTimeout(() => {
-      this._suppressNextClick = true;
-      this.value += "+";
-      this.$emit("keypad-click", target);
-      this.$emit("input");
-      this.$emit("change");
-    }, 600);
-  }
-  /**
-   * @internal
-   */
-  _startKeyboardLongPress() {
-    if (this.disabled || this.callActive) return;
-    if (this._longPressTimeoutId !== null) return;
-    this._keyboardLongPressCompleted = false;
-    this._longPressTimeoutId = window.setTimeout(() => {
-      this._keyboardLongPressCompleted = true;
-      this.value += "+";
-      this.$emit("input");
-      this.$emit("change");
-    }, 650);
-  }
-  /**
-   * @internal
-   */
-  _endLongPress() {
-    this._clearLongPressTimer();
-    window.setTimeout(() => {
-      if (this._suppressNextClick) {
-        this._suppressNextClick = false;
-      }
-    }, 0);
-  }
-  /**
-   * @internal
-   * @returns true if long press completed (timer fired), false otherwise
-   */
-  _endKeyboardLongPress() {
-    const wasLongPress = this._keyboardLongPressCompleted;
-    this._clearLongPressTimer();
-    window.setTimeout(() => {
-      this._keyboardLongPressCompleted = false;
-    }, 0);
-    return wasLongPress;
-  }
-  /**
-   * @internal
-   */
-  _cancelLongPress() {
-    this._clearLongPressTimer();
-  }
-  _clearLongPressTimer() {
-    if (this._longPressTimeoutId !== null) {
-      clearTimeout(this._longPressTimeoutId);
-      this._longPressTimeoutId = null;
-    }
-  }
-  /**
-   * Moves focus into the diapl-pad.
-   *
-   * @public
-   */
-  focus() {
-    const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
-    const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
-    firstFocusableEl?.focus();
-  }
-  /**
-   * @internal
-   */
-  _announceValidationError(message) {
-    this._errorAnnouncement = "";
-    window.queueMicrotask(() => {
-      if (message) {
-        this._forceAnnouncementToggle = !this._forceAnnouncementToggle;
-        this._errorAnnouncement = `${message}${this._forceAnnouncementToggle ? "​" : ""}`;
-      } else {
-        this._clearErrorAnnouncement();
-      }
-    });
-  }
-  /**
-   * @internal
-   */
-  _clearErrorAnnouncement() {
-    this._errorAnnouncement = "";
-    this._forceAnnouncementToggle = false;
-  }
-}
-__decorateClass([
-  attr({ attribute: "helper-text" })
-], DialPad.prototype, "helperText");
-__decorateClass([
-  attr
-], DialPad.prototype, "placeholder");
-__decorateClass([
-  attr({ mode: "fromView" })
-], DialPad.prototype, "value");
-__decorateClass([
-  attr({ mode: "fromView" })
-], DialPad.prototype, "pattern");
-__decorateClass([
-  attr({ mode: "boolean" })
-], DialPad.prototype, "disabled");
-__decorateClass([
-  attr({ mode: "boolean" })
-], DialPad.prototype, "pending");
-__decorateClass([
-  attr({ attribute: "call-active", mode: "boolean" })
-], DialPad.prototype, "callActive");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "no-call" })
-], DialPad.prototype, "noCall");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "no-input" })
-], DialPad.prototype, "noInput");
-__decorateClass([
-  attr({ attribute: "end-call-button-label" })
-], DialPad.prototype, "endCallButtonLabel");
-__decorateClass([
-  attr({ attribute: "call-button-label" })
-], DialPad.prototype, "callButtonLabel");
-__decorateClass([
-  attr({ attribute: "delete-aria-label" })
-], DialPad.prototype, "deleteAriaLabel");
-__decorateClass([
-  attr({ mode: "boolean" })
-], DialPad.prototype, "autofocus");
-__decorateClass([
-  observable
-], DialPad.prototype, "_errorAnnouncement");
-
-class DialPadButton {
-  constructor(value, label, ariaLabel, icon, id) {
-    this.value = value;
-    this.label = label;
-    this.ariaLabel = ariaLabel;
-    this.icon = icon;
-    this.id = id;
-  }
-}
-const DIAL_PAD_BUTTONS = [
-  new DialPadButton("1", " ", "digitOneLabel", "one-solid", "btn1"),
-  new DialPadButton("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
-  new DialPadButton("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
-  new DialPadButton("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
-  new DialPadButton("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
-  new DialPadButton("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
-  new DialPadButton("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
-  new DialPadButton("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
-  new DialPadButton("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
-  new DialPadButton(
-    "*",
-    null,
-    "digitAsteriskLabel",
-    "asterisk-2-solid",
-    "btnAsterisk"
-  ),
-  new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
-  new DialPadButton(
-    "#",
-    null,
-    "digitHashtagLabel",
-    "hashtag-solid",
-    "btnHashtag"
-  )
-];
-const getClasses = ({ noInput }) => classNames("base", ["no-input", Boolean(noInput)]);
-function handleKeyDown(x, e) {
-  if (e.key === keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
-    x._onDial();
-  } else if (e.key === " " || e.key === "Space") {
-    if (e.target instanceof HTMLInputElement) {
-      e.preventDefault();
-      if (!e.repeat) {
-        x._startKeyboardLongPress();
-      }
-    }
-  } else {
-    const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
-    if (elementIndex > -1) {
-      const digit = x.shadowRoot.querySelector(".digits").children[elementIndex];
-      if (digit) {
-        digit.active = true;
-        setTimeout(() => {
-          digit.active = false;
-        }, 200);
-      }
-    }
-  }
-  return true;
-}
-function handleKeyUp(x, e) {
-  if (e.key === " " || e.key === "Space") {
-    if (e.target instanceof HTMLInputElement) {
-      e.preventDefault();
-      const wasLongPress = x._endKeyboardLongPress();
-      if (!wasLongPress && !x.disabled && !x.callActive) {
-        x.value += " ";
-        x.$emit("input");
-        x.$emit("change");
-      }
-    }
-  }
-  return true;
-}
-function handleButtonKeyDown(digit, { parent: dialPad, event }) {
-  if ((event.key === " " || event.key === "Space") && digit.value === "0") {
-    event.preventDefault();
-    if (!event.repeat) {
-      dialPad._startKeyboardLongPress();
-    }
-  }
-  return true;
-}
-function handleButtonKeyUp(digit, { parent: dialPad, event }) {
-  if ((event.key === " " || event.key === "Space") && digit.value === "0") {
-    event.preventDefault();
-    const wasLongPress = dialPad._endKeyboardLongPress();
-    if (!wasLongPress && !dialPad.disabled && !dialPad.callActive) {
-      onDigitClick(digit, {
-        parent: dialPad,
-        event: new MouseEvent("click", { bubbles: true })
-      });
-    }
-  }
-  return true;
-}
-function syncFieldAndPadValues(x) {
-  x.value = x._textFieldEl.value;
-}
-function stopPropagation(_, { event: e }) {
-  e.stopImmediatePropagation();
-}
-function deleteLastCharacter(dialPad) {
-  dialPad.value = dialPad.value.slice(0, -1);
-  dialPad.$emit("input");
-  dialPad.$emit("change");
-  if (dialPad.value === "") {
-    dialPad._textFieldEl?.focus();
-  }
-}
-function renderTextField(textFieldTag, buttonTag) {
-  return html`<${textFieldTag} ${ref(
-    "_textFieldEl"
-  )} class="phone-field" internal-part type="tel"
-        value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
-            ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
-            aria-label="${(x) => x.locale.dialPad.inputLabel}"
-            @keydown="${(x, c) => handleKeyDown(x, c.event)}"
-            @keyup="${(x, c) => handleKeyUp(x, c.event)}"
-            @input="${syncFieldAndPadValues}"
-			@change="${syncFieldAndPadValues}"
-			@focus="${stopPropagation}"
-			@blur="${stopPropagation}"
-			?autofocus="${(x) => x.autofocus}"
-			>
-         ${when(
-    (x) => x.value && x.value.length && x.value.length > 0,
-    html`<${buttonTag}
-                slot="action-items"
-								size='super-condensed'
-								icon="backspace-line"
-								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteButtonLabel}"
-								appearance='ghost'
-								?disabled="${(x) => x.disabled || x.callActive}"
-								@click="${(x) => deleteLastCharacter(x)}">
-            </${buttonTag}>`
-  )}
-        </${textFieldTag}>`;
-}
-function onDigitClick(digit, { parent: dialPad, event }) {
-  if (dialPad._suppressNextClick) {
-    dialPad._suppressNextClick = false;
-    return;
-  }
-  dialPad.value += digit.value;
-  dialPad.$emit("keypad-click", event.currentTarget);
-  dialPad.$emit("input");
-  dialPad.$emit("change");
-}
-function renderDigits(buttonTag, iconTag) {
-  return html`
-		${repeat(
-    (_) => DIAL_PAD_BUTTONS,
-    html`
-			<${buttonTag}
-					  id="${(x) => x.id}"
-					  value="${(x) => x.value}"
-					  stacked
-					  appearance="ghost-light"
-					  shape="pill"
-					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
-					  size='condensed'
-					  class="digit-btn"
-						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
-					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
-					  ?disabled="${(_, c) => c.parent.disabled}"
-					  @pointerdown="${(x, c) => c.parent._startLongPress(x.value, c.event)}"
-					  @pointerup="${(_, c) => c.parent._endLongPress()}"
-					  @pointercancel="${(_, c) => c.parent._cancelLongPress()}"
-					  @pointerleave="${(_, c) => c.parent._cancelLongPress()}"
-					  @keydown="${(x, c) => handleButtonKeyDown(x, {
-      parent: c.parent,
-      event: c.event
-    })}"
-					  @keyup="${(x, c) => handleButtonKeyUp(x, {
-      parent: c.parent,
-      event: c.event
-    })}"
-					  @click="${onDigitClick}">
-					  	<${iconTag} slot="icon"
-									name="${(x) => x.icon}"
-									class="digit-btn-num"></${iconTag}>
-					</${buttonTag}>
-		`,
-    {
-      positioning: true
-    }
-  )}
-	`;
-}
-function renderDialButton(buttonTag) {
-  return html`<${buttonTag} class="call-btn"
-        size="expanded"
-        appearance="filled"
-        icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
-        connotation="${(x) => x.callActive ? "alert" : "cta"}"
-        ?disabled="${(x) => x.disabled}"
-		?pending="${(x) => x.pending}"
-        @click="${(x) => x._onDial()}"
-        label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
-    </${buttonTag}>`;
-}
-function renderErrorAnnouncement(visuallyHiddenTag) {
-  return html`<${visuallyHiddenTag} role="alert" aria-atomic="true">
-		${(x) => `${x.locale.dialPad.errorLabel} ${x._errorAnnouncement}`}
-	</${visuallyHiddenTag}>`;
-}
-const DialPadTemplate = (context) => {
-  const buttonTag = context.tagFor(Button);
-  const iconTag = context.tagFor(Icon);
-  const textFieldTag = context.tagFor(TextField);
-  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
-  return html` <div class="${getClasses}">
-		${when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
-		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
-		${when((x) => !x.noCall, renderDialButton(buttonTag))}
-		${renderErrorAnnouncement(visuallyHiddenTag)}
-	</div>`;
-};
-
-const dialPadDefinition = defineVividComponent(
-  "dial-pad",
-  DialPad,
-  DialPadTemplate,
-  [
-    buttonDefinition,
-    textFieldDefinition,
-    iconDefinition,
-    visuallyHiddenDefinition
-  ],
-  {
-    styles
-  }
-);
-const registerDialPad = createRegisterFunction(dialPadDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerDialPad, r as DialPad, t as dialPadDefinition } from "../unbundled/definition38.js";
 export { DialPad as VwcDialPadElement, dialPadDefinition, registerDialPad };

package/dial-pad/index.cjs

@@ -1,64 +1,65 @@
-"use strict";const b=require("../bundled/definition3.cjs"),h=require("../bundled/definition10.cjs"),o=require("../bundled/vivid-element.cjs"),f=require("../bundled/definition2.cjs"),g=require("../bundled/definition14.cjs"),$=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),L=require("../bundled/ref.cjs"),y=require("../bundled/repeat.cjs"),w=require("../bundled/class-names.cjs"),k=require("../bundled/key-codes.cjs"),P=":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 A=Object.defineProperty,i=(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&&A(t,e,s),s};class l extends $.Localized(o.VividElement){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())}_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)}_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&&(this._suppressNextClick=!1)},0)}_endKeyboardLongPress(){const t=this._keyboardLongPressCompleted;return this._clearLongPressTimer(),window.setTimeout(()=>{this._keyboardLongPressCompleted=!1},0),t}_cancelLongPress(){this._clearLongPressTimer()}_clearLongPressTimer(){this._longPressTimeoutId!==null&&(clearTimeout(this._longPressTimeoutId),this._longPressTimeoutId=null)}focus(){const t=this.shadowRoot?.querySelectorAll(".digits .digit-btn");(this._textFieldEl||t?.[0])?.focus()}_announceValidationError(t){this._errorAnnouncement="",window.queueMicrotask(()=>{t?(this._forceAnnouncementToggle=!this._forceAnnouncementToggle,this._errorAnnouncement=`${t}${this._forceAnnouncementToggle?"​":""}`):this._clearErrorAnnouncement()})}_clearErrorAnnouncement(){this._errorAnnouncement="",this._forceAnnouncementToggle=!1}}i([o.attr({attribute:"helper-text"})],l.prototype,"helperText");i([o.attr],l.prototype,"placeholder");i([o.attr({mode:"fromView"})],l.prototype,"value");i([o.attr({mode:"fromView"})],l.prototype,"pattern");i([o.attr({mode:"boolean"})],l.prototype,"disabled");i([o.attr({mode:"boolean"})],l.prototype,"pending");i([o.attr({attribute:"call-active",mode:"boolean"})],l.prototype,"callActive");i([o.attr({mode:"boolean",attribute:"no-call"})],l.prototype,"noCall");i([o.attr({mode:"boolean",attribute:"no-input"})],l.prototype,"noInput");i([o.attr({attribute:"end-call-button-label"})],l.prototype,"endCallButtonLabel");i([o.attr({attribute:"call-button-label"})],l.prototype,"callButtonLabel");i([o.attr({attribute:"delete-aria-label"})],l.prototype,"deleteAriaLabel");i([o.attr({mode:"boolean"})],l.prototype,"autofocus");i([o.observable],l.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}}const _=[new r("1","&nbsp;","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")],T=({noInput:n})=>w.classNames("base",["no-input",!!n]);function x(n,t){if(t.key===k.keyEnter&&!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=_.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 C(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 E(n,{parent:t,event:e}){return(e.key===" "||e.key==="Space")&&n.value==="0"&&(e.preventDefault(),e.repeat||t._startKeyboardLongPress()),!0}function D(n,{parent:t,event:e}){return(e.key===" "||e.key==="Space")&&n.value==="0"&&(e.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&m(n,{parent:t,event:new MouseEvent("click",{bubbles:!0})})),!0}function p(n){n.value=n._textFieldEl.value}function v(n,{event:t}){t.stopImmediatePropagation()}function F(n){n.value=n.value.slice(0,-1),n.$emit("input"),n.$emit("change"),n.value===""&&n._textFieldEl?.focus()}function I(n,t){return o.html`<${n} ${L.ref("_textFieldEl")} class="phone-field" internal-part type="tel"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/definition.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/class-names.cjs`);require(`../bundled/key-codes.cjs`);const l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition12.cjs`);var d=`: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-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}`,f=class extends e.t(t.t){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}};s.t([t.l({attribute:`helper-text`})],f.prototype,`helperText`,void 0),s.t([t.l],f.prototype,`placeholder`,void 0),s.t([t.l({mode:`fromView`})],f.prototype,`value`,void 0),s.t([t.l({mode:`fromView`})],f.prototype,`pattern`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`disabled`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`pending`,void 0),s.t([t.l({attribute:`call-active`,mode:`boolean`})],f.prototype,`callActive`,void 0),s.t([t.l({mode:`boolean`,attribute:`no-call`})],f.prototype,`noCall`,void 0),s.t([t.l({mode:`boolean`,attribute:`no-input`})],f.prototype,`noInput`,void 0),s.t([t.l],f.prototype,`size`,void 0),s.t([t.l({attribute:`end-call-button-label`})],f.prototype,`endCallButtonLabel`,void 0),s.t([t.l({attribute:`call-button-label`})],f.prototype,`callButtonLabel`,void 0),s.t([t.l({attribute:`delete-aria-label`})],f.prototype,`deleteAriaLabel`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`autofocus`,void 0),s.t([t.T],f.prototype,`_errorAnnouncement`,void 0);var p=class{constructor(e,t,n,r,i){this.value=e,this.label=t,this.ariaLabel=n,this.icon=r,this.id=i}},m=[new p(`1`,`&nbsp;`,`digitOneLabel`,`one-solid`,`btn1`),new p(`2`,`ABC`,`digitTwoLabel`,`two-solid`,`btn2`),new p(`3`,`DEF`,`digitThreeLabel`,`three-solid`,`btn3`),new p(`4`,`GHI`,`digitFourLabel`,`four-solid`,`btn4`),new p(`5`,`JKL`,`digitFiveLabel`,`five-solid`,`btn5`),new p(`6`,`MNO`,`digitSixLabel`,`six-solid`,`btn6`),new p(`7`,`PQRS`,`digitSevenLabel`,`seven-solid`,`btn7`),new p(`8`,`TUV`,`digitEightLabel`,`eight-solid`,`btn8`),new p(`9`,`WXYZ`,`digitNineLabel`,`nine-solid`,`btn9`),new p(`*`,null,`digitAsteriskLabel`,`asterisk-2-solid`,`btnAsterisk`),new p(`0`,`+`,`digitZeroLabel`,`zero-solid`,`btn0`),new p(`#`,null,`digitHashtagLabel`,`hashtag-solid`,`btnHashtag`)],h=({noInput:e,size:t})=>c.t(`base`,[`size-${t}`,!!t],[`no-input`,!!e]);function g(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`)t.target instanceof HTMLInputElement&&(t.preventDefault(),t.repeat||e._startKeyboardLongPress());else{let n=m.findIndex(e=>e.value===t.key);if(n>-1){let t=e.shadowRoot.querySelector(`.digits`).children[n];t&&(t.active=!0,setTimeout(()=>{t.active=!1},200))}}return!0}function _(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}function v(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),n.repeat||t._startKeyboardLongPress()),!0}function y(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&w(e,{parent:t,event:new MouseEvent(`click`,{bubbles:!0})})),!0}function b(e){e.value=e._textFieldEl.value}function x(e,{event:t}){t.stopImmediatePropagation()}function S(e){e.value=e.value.slice(0,-1),e.$emit(`input`),e.$emit(`change`),e.value===``&&e._textFieldEl?.focus()}function C(e,n){return t.d`<${e} ${r.t(`_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)=>x(e,a.event)}"
-            @keyup="${(e,a)=>C(e,a.event)}"
-            @input="${p}"
-			@change="${p}"
-			@focus="${v}"
-			@blur="${v}"
+            @keydown="${(e,t)=>g(e,t.event)}"
+            @keyup="${(e,t)=>_(e,t.event)}"
+            @input="${b}"
+			@change="${b}"
+			@focus="${x}"
+			@blur="${x}"
 			?autofocus="${e=>e.autofocus}"
+			scale="${e=>e.size===`condensed`?`condensed`:`normal`}">
 			>
-         ${d.when(e=>e.value&&e.value.length&&e.value.length>0,o.html`<${t}
+         ${i.t(e=>e.value&&e.value.length&&e.value.length>0,t.d`<${n}
                 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=>F(e)}">
-            </${t}>`)}
-        </${n}>`}function m(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 B(n,t){return o.html`
-		${y.repeat(e=>_,o.html`
-			<${n}
+								@click="${e=>S(e)}">
+            </${n}>`)}
+        </${e}>`}function w(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 T(e,r){return t.d`
+		${n.n(e=>m,t.d`
+			<${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)=>E(e,{parent:a.parent,event:a.event})}"
-					  @keyup="${(e,a)=>D(e,{parent:a.parent,event:a.event})}"
-					  @click="${m}">
-					  	<${t} slot="icon"
+						?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)=>v(e,{parent:t.parent,event:t.event})}"
+					  @keyup="${(e,t)=>y(e,{parent:t.parent,event:t.event})}"
+					  @click="${w}">
+					  	<${r} slot="icon"
 									name="${e=>e.icon}"
-									class="digit-btn-num"></${t}>
-					</${n}>
+									class="digit-btn-num"></${r}>
+					</${e}>
 		`,{positioning:!0})}
-	`}function q(n){return o.html`<${n} class="call-btn"
-        size="expanded"
+	`}function E(e){return t.d`<${e} class="call-btn"
+        size="${e=>e.size===`condensed`?`normal`:`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}>`}function K(n){return o.html`<${n} role="alert" aria-atomic="true">
-		${t=>`${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
-	</${n}>`}const N=n=>{const t=n.tagFor(b.Button),e=n.tagFor(f.Icon),a=n.tagFor(h.TextField),s=n.tagFor(g.VisuallyHidden);return o.html` <div class="${T}">
-		${d.when(c=>!c.noInput,I(a,t))}
-		<div class="digits">${B(t,e)}</div>
-		${d.when(c=>!c.noCall,q(t))}
-		${K(s)}
-	</div>`},z=o.defineVividComponent("dial-pad",l,N,[b.buttonDefinition,h.textFieldDefinition,f.iconDefinition,g.visuallyHiddenDefinition],{styles:P}),S=o.createRegisterFunction(z);S();
+        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 D(e){return t.d`<${e} role="alert" aria-atomic="true">
+		${e=>`${e.locale.dialPad.errorLabel} ${e._errorAnnouncement}`}
+	</${e}>`}var O=t.o(`dial-pad`,f,e=>{let n=e.tagFor(l.i),r=e.tagFor(o.r),s=e.tagFor(u.r),c=e.tagFor(a.r);return t.d` <div class="${h}">
+		${i.t(e=>!e.noInput,C(s,n))}
+		<div class="digits">${T(n,r)}</div>
+		${i.t(e=>!e.noCall,E(n))}
+		${D(c)}
+	</div>`},[l.t,u.n,o.t,a.n],{styles:d});t.s(O)();