@vonage/vivid 5.15.1 → 5.17.0

package/dial-pad/definition.cjs

@@ -1,460 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const button_definition = require('../unbundled/definition2.cjs');
-const textField_definition = require('../text-field/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const icon_definition = require('../icon/definition.cjs');
-const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const localized = require('../unbundled/localized.cjs');
-const fastWebUtilities = require('@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.Localized(vividElement.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([
-  fastElement.attr({ attribute: "helper-text" })
-], DialPad.prototype, "helperText");
-__decorateClass([
-  fastElement.attr
-], DialPad.prototype, "placeholder");
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], DialPad.prototype, "value");
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], DialPad.prototype, "pattern");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], DialPad.prototype, "disabled");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], DialPad.prototype, "pending");
-__decorateClass([
-  fastElement.attr({ attribute: "call-active", mode: "boolean" })
-], DialPad.prototype, "callActive");
-__decorateClass([
-  fastElement.attr({ mode: "boolean", attribute: "no-call" })
-], DialPad.prototype, "noCall");
-__decorateClass([
-  fastElement.attr({ mode: "boolean", attribute: "no-input" })
-], DialPad.prototype, "noInput");
-__decorateClass([
-  fastElement.attr({ attribute: "end-call-button-label" })
-], DialPad.prototype, "endCallButtonLabel");
-__decorateClass([
-  fastElement.attr({ attribute: "call-button-label" })
-], DialPad.prototype, "callButtonLabel");
-__decorateClass([
-  fastElement.attr({ attribute: "delete-aria-label" })
-], DialPad.prototype, "deleteAriaLabel");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], DialPad.prototype, "autofocus");
-__decorateClass([
-  fastElement.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 }) => fastWebUtilities.classNames("base", ["no-input", Boolean(noInput)]);
-function handleKeyDown(x, e) {
-  if (e.key === fastWebUtilities.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 fastElement.html`<${textFieldTag} ${fastElement.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}"
-			>
-         ${fastElement.when(
-    (x) => x.value && x.value.length && x.value.length > 0,
-    fastElement.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 fastElement.html`
-		${fastElement.repeat(
-    (_) => DIAL_PAD_BUTTONS,
-    fastElement.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 fastElement.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 fastElement.html`<${visuallyHiddenTag} role="alert" aria-atomic="true">
-		${(x) => `${x.locale.dialPad.errorLabel} ${x._errorAnnouncement}`}
-	</${visuallyHiddenTag}>`;
-}
-const DialPadTemplate = (context) => {
-  const buttonTag = context.tagFor(button_definition.Button);
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  const textFieldTag = context.tagFor(textField_definition.VwcTextFieldElement);
-  const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
-  return fastElement.html` <div class="${getClasses}">
-		${fastElement.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
-		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
-		${fastElement.when((x) => !x.noCall, renderDialButton(buttonTag))}
-		${renderErrorAnnouncement(visuallyHiddenTag)}
-	</div>`;
-};
-
-const dialPadDefinition = vividElement.defineVividComponent(
-  "dial-pad",
-  DialPad,
-  DialPadTemplate,
-  [
-    button_definition.buttonDefinition,
-    textField_definition.textFieldDefinition,
-    icon_definition.iconDefinition,
-    visuallyHidden_definition.visuallyHiddenDefinition
-  ],
-  {
-    styles
-  }
-);
-const registerDialPad = vividElement.createRegisterFunction(dialPadDefinition);
-
-exports.VwcDialPadElement = DialPad;
-exports.dialPadDefinition = dialPadDefinition;
-exports.registerDialPad = registerDialPad;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition38.cjs");
+exports.VwcDialPadElement = require_definition$1.DialPad;
+exports.dialPadDefinition = require_definition$1.dialPadDefinition;
+exports.registerDialPad = require_definition$1.registerDialPad;