@vonage/vivid 5.4.0 → 5.5.0

package/dial-pad/definition.js

@@ -33,6 +33,21 @@ class DialPad extends Localized(VividElement) {
     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
@@ -61,6 +76,70 @@ class DialPad extends Localized(VividElement) {
       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.
    *
@@ -175,6 +254,13 @@ const getClasses = ({ noInput }) => classNames("base", ["no-input", Boolean(noIn
 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) {
@@ -189,6 +275,42 @@ function handleKeyDown(x, e) {
   }
   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;
 }
@@ -211,6 +333,7 @@ function renderTextField(textFieldTag, buttonTag) {
             ?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}"
@@ -232,6 +355,10 @@ function renderTextField(textFieldTag, 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");
@@ -254,6 +381,18 @@ function renderDigits(buttonTag, iconTag) {
 						?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}"

package/dial-pad/index.cjs

@@ -1,26 +1,27 @@
-"use strict";const b=require("../bundled/definition3.cjs"),f=require("../bundled/definition10.cjs"),n=require("../bundled/vivid-element.cjs"),h=require("../bundled/definition2.cjs"),g=require("../bundled/definition13.cjs"),_=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),$=require("../bundled/repeat.cjs"),y=require("../bundled/ref.cjs"),A=require("../bundled/class-names.cjs"),L=require("../bundled/key-codes.cjs"),w=":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(--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 x=Object.defineProperty,i=(a,t,e,l)=>{for(var c=void 0,s=a.length-1,u;s>=0;s--)(u=a[s])&&(c=u(t,e,c)||c);return c&&x(t,e,c),c};class o extends _.Localized(n.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._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())}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([n.attr({attribute:"helper-text"})],o.prototype,"helperText");i([n.attr],o.prototype,"placeholder");i([n.attr({mode:"fromView"})],o.prototype,"value");i([n.attr({mode:"fromView"})],o.prototype,"pattern");i([n.attr({mode:"boolean"})],o.prototype,"disabled");i([n.attr({mode:"boolean"})],o.prototype,"pending");i([n.attr({attribute:"call-active",mode:"boolean"})],o.prototype,"callActive");i([n.attr({mode:"boolean",attribute:"no-call"})],o.prototype,"noCall");i([n.attr({mode:"boolean",attribute:"no-input"})],o.prototype,"noInput");i([n.attr({attribute:"end-call-button-label"})],o.prototype,"endCallButtonLabel");i([n.attr({attribute:"call-button-label"})],o.prototype,"callButtonLabel");i([n.attr({attribute:"delete-aria-label"})],o.prototype,"deleteAriaLabel");i([n.attr({mode:"boolean"})],o.prototype,"autofocus");i([n.observable],o.prototype,"_errorAnnouncement");class r{constructor(t,e,l,c,s){this.value=t,this.label=e,this.ariaLabel=l,this.icon=c,this.id=s}}const m=[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")],E=({noInput:a})=>A.classNames("base",["no-input",!!a]);function F(a,t){if(t.key===L.keyEnter&&!a.pending&&!a.disabled&&!a.callActive&&!a.noCall&&a.value.length>0&&t.target instanceof HTMLInputElement)a._onDial();else{const e=m.findIndex(l=>l.value===t.key);if(e>-1){const l=a.shadowRoot.querySelector(".digits").children[e];l&&(l.active=!0,setTimeout(()=>{l.active=!1},200))}}return!0}function p(a){a.value=a._textFieldEl.value}function v(a,{event:t}){t.stopImmediatePropagation()}function k(a){a.value=a.value.slice(0,-1),a.$emit("input"),a.$emit("change"),a.value===""&&a._textFieldEl?.focus()}function D(a,t){return n.html`<${a} ${y.ref("_textFieldEl")} class="phone-field" internal-part type="tel"
+"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/repeat.cjs"),y=require("../bundled/ref.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(--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} ${y.ref("_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,l)=>F(e,l.event)}"
+            @keydown="${(e,a)=>x(e,a.event)}"
+            @keyup="${(e,a)=>C(e,a.event)}"
             @input="${p}"
 			@change="${p}"
 			@focus="${v}"
 			@blur="${v}"
 			?autofocus="${e=>e.autofocus}"
 			>
-         ${d.when(e=>e.value&&e.value.length&&e.value.length>0,n.html`<${t}
+         ${d.when(e=>e.value&&e.value.length&&e.value.length>0,o.html`<${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=>k(e)}">
+								@click="${e=>F(e)}">
             </${t}>`)}
-        </${a}>`}function C(a,{parent:t,event:e}){t.value+=a.value,t.$emit("keypad-click",e.currentTarget),t.$emit("input"),t.$emit("change")}function T(a,t){return n.html`
-		${$.repeat(e=>m,n.html`
-			<${a}
+        </${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`
+		${L.repeat(e=>_,o.html`
+			<${n}
 					  id="${e=>e.id}"
 					  value="${e=>e.value}"
 					  stacked
@@ -29,16 +30,22 @@
 					  label="${e=>e.label==="&nbsp;"?" ":e.label}"
 					  size='condensed'
 					  class="digit-btn"
-						?autofocus="${(e,l)=>l.parent.autofocus&&l.parent.noInput&&l.index===0}"
-					  aria-label="${(e,l)=>l.parent.locale.dialPad[e.ariaLabel]}"
-					  ?disabled="${(e,l)=>l.parent.disabled}"
-					  @click="${C}">
+						?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"
 									name="${e=>e.icon}"
 									class="digit-btn-num"></${t}>
-					</${a}>
+					</${n}>
 		`,{positioning:!0})}
-	`}function B(a){return n.html`<${a} class="call-btn"
+	`}function q(n){return o.html`<${n} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${t=>t.callActive?"disable-call-line":"call-line"}"
@@ -47,11 +54,11 @@
 		?pending="${t=>t.pending}"
         @click="${t=>t._onDial()}"
         label="${t=>t.callActive?t.endCallButtonLabel||t.locale.dialPad.endCallButtonLabel:t.callButtonLabel||t.locale.dialPad.callButtonLabel}">
-    </${a}>`}function q(a){return n.html`<${a} role="alert" aria-atomic="true">
+    </${n}>`}function K(n){return o.html`<${n} role="alert" aria-atomic="true">
 		${t=>`${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
-	</${a}>`}const I=a=>{const t=a.tagFor(b.Button),e=a.tagFor(h.Icon),l=a.tagFor(f.TextField),c=a.tagFor(g.VisuallyHidden);return n.html` <div class="${E}">
-		${d.when(s=>!s.noInput,D(l,t))}
-		<div class="digits">${T(t,e)}</div>
-		${d.when(s=>!s.noCall,B(t))}
-		${q(c)}
-	</div>`},z=n.defineVividComponent("dial-pad",o,I,[b.buttonDefinition,f.textFieldDefinition,h.iconDefinition,g.visuallyHiddenDefinition],{styles:w}),P=n.createRegisterFunction(z);P();
+	</${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();