@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition21.js

@@ -1,15 +1,16 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { E as Elevation, e as elevationDefinition } from './definition62.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { T as TextField, t as textFieldDefinition } from './definition57.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { L as Localized } from './localized.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
+import { r as repeat } from './repeat.js';
+import { r as ref } from './ref.js';
+import { k as keyEnter } from './key-codes.js';
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+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)}.digit-btn:where(.hover,: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:where(.disabled,: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)}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,314 +21,227 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Dialog extends VividElement {
+class DialPad extends VividElement {
   constructor() {
     super(...arguments);
-    this.open = false;
-    this.fullWidthBody = false;
-    this.ariaLabel = null;
-    this.dismissButtonAriaLabel = null;
-    this.noLightDismiss = false;
-    this.noDismissOnEsc = false;
-    this.noDismissButton = false;
-    this.nonDismissible = false;
-    this.modal = false;
-    this._openedAsModal = false;
-    this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
-        return;
-      }
-      const rect = this.#dialog.getBoundingClientRect();
-      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      if (!clickedInDialog) {
-        this._handleCloseRequest();
-      }
+    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;
+    /**
+     *
+     * @internal
+     */
+    this._onDial = () => {
+      this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
-    this.#handleInternalFormSubmit = (event) => {
-      if (event.target.method !== "dialog") {
-        return;
-      }
-      this.open = false;
-    };
-  }
-  /**
-   * @internal
-   */
-  modalChanged(_, newValue) {
-    if (this.open) {
-      this._openedAsModal = newValue;
-      if (this.$fastController.isConnected) {
-        this.#closeDialog();
-        this.#showDialog();
-      }
-    }
-  }
-  set returnValue(value) {
-    if (this.#dialog) {
-      this.#dialog.returnValue = value;
-    }
-  }
-  get returnValue() {
-    return this.#dialog?.returnValue;
-  }
-  #dialogElement;
-  get #dialog() {
-    if (!this.#dialogElement) {
-      this.#dialogElement = this.shadowRoot.querySelector(
-        "dialog"
-      );
-    }
-    return this.#dialogElement;
-  }
-  /**
-   * @internal
-   */
-  openChanged(oldValue, newValue) {
-    if (oldValue === void 0) {
-      return;
-    }
-    if (!newValue) {
-      this._openedAsModal = false;
-      if (this.$fastController.isConnected) {
-        this.#closeDialog();
-      }
-      this.$emit("close", this.returnValue, { bubbles: false });
-    } else {
-      this._openedAsModal = this._openedAsModal || this.modal;
-      if (this.$fastController.isConnected) {
-        this.#showDialog();
-      }
-      this.$emit("open", void 0, { bubbles: false });
-    }
-  }
-  get _showDismissButton() {
-    return this.#isDismissibleVia("dismiss-button");
-  }
-  #isDismissibleVia(method) {
-    if (this.nonDismissible) {
-      return false;
-    }
-    switch (method) {
-      case "escape":
-        return !this.noDismissOnEsc;
-      case "dismiss-button":
-        return !this.noDismissButton;
-      case "light-dismiss":
-        return !this.noLightDismiss;
-    }
-  }
-  #handleScrimClick;
-  #handleInternalFormSubmit;
-  /**
-   * @internal
-   */
-  _onKeyDown(event) {
-    if (handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
-      if (this.#isDismissibleVia("escape")) {
-        this._handleCloseRequest();
-      }
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    if (this.$emit("cancel", void 0, {
-      bubbles: false,
-      cancelable: true
-    })) {
-      this.open = false;
-    }
-  }
-  close() {
-    this.open = false;
-  }
-  show() {
-    if (this._openedAsModal && !this.modal) {
-      throw new DOMException(
-        "Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.",
-        "InvalidStateError"
-      );
-    }
-    this.open = true;
-  }
-  showModal() {
-    if (this.open && !this._openedAsModal) {
-      throw new DOMException(
-        "Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.",
-        "InvalidStateError"
-      );
-    }
-    this._openedAsModal = true;
-    this.open = true;
-  }
-  #closeDialog() {
-    this.#dialog.close();
   }
-  #showDialog() {
-    if (this._openedAsModal) {
-      this.#dialog.showModal();
-    } else {
-      this.#dialog.show();
+  valueChanged(_oldValue, newValue) {
+    if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
+      this._textFieldEl.value = newValue;
+      this._textFieldEl.reportValidity();
     }
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.open) {
-      this.#showDialog();
-    }
-    this.#dialog.addEventListener("mousedown", this.#handleScrimClick);
-    this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.open) {
-      this.#closeDialog();
-    }
-    this.#dialog.removeEventListener("mousedown", this.#handleScrimClick);
-    this.#dialog.removeEventListener("submit", this.#handleInternalFormSubmit);
-  }
 }
 __decorateClass([
-  attr({ mode: "boolean" })
-], Dialog.prototype, "open");
+  attr({ attribute: "helper-text" })
+], DialPad.prototype, "helperText");
 __decorateClass([
   attr
-], Dialog.prototype, "icon");
+], DialPad.prototype, "placeholder");
 __decorateClass([
-  attr({ attribute: "icon-placement" })
-], Dialog.prototype, "iconPlacement");
-__decorateClass([
-  attr
-], Dialog.prototype, "subtitle");
-__decorateClass([
-  attr
-], Dialog.prototype, "headline");
+  attr({ mode: "fromView" })
+], DialPad.prototype, "value");
 __decorateClass([
-  attr({ attribute: "full-width-body", mode: "boolean" })
-], Dialog.prototype, "fullWidthBody");
+  attr({ mode: "fromView" })
+], DialPad.prototype, "pattern");
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], Dialog.prototype, "ariaLabel");
-__decorateClass([
-  attr({ attribute: "dismiss-button-aria-label" })
-], Dialog.prototype, "dismissButtonAriaLabel");
-__decorateClass([
-  attr({ attribute: "no-light-dismiss", mode: "boolean" })
-], Dialog.prototype, "noLightDismiss");
-__decorateClass([
-  attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
-], Dialog.prototype, "noDismissOnEsc");
-__decorateClass([
-  attr({ attribute: "no-dismiss-button", mode: "boolean" })
-], Dialog.prototype, "noDismissButton");
-__decorateClass([
-  attr({ attribute: "non-dismissible", mode: "boolean" })
-], Dialog.prototype, "nonDismissible");
+  attr({ mode: "boolean" })
+], DialPad.prototype, "disabled");
 __decorateClass([
   attr({ mode: "boolean" })
-], Dialog.prototype, "modal");
+], DialPad.prototype, "pending");
 __decorateClass([
-  observable
-], Dialog.prototype, "_openedAsModal");
+  attr({ attribute: "call-active", mode: "boolean" })
+], DialPad.prototype, "callActive");
 __decorateClass([
-  observable
-], Dialog.prototype, "bodySlottedContent");
+  attr({ mode: "boolean", attribute: "no-call" })
+], DialPad.prototype, "noCall");
 __decorateClass([
-  observable
-], Dialog.prototype, "footerSlottedContent");
+  attr({ mode: "boolean", attribute: "no-input" })
+], DialPad.prototype, "noInput");
 __decorateClass([
-  observable
-], Dialog.prototype, "actionItemsSlottedContent");
-applyMixins(Dialog, Localized);
+  attr({ attribute: "end-call-button-label" })
+], DialPad.prototype, "endCallButtonLabel");
+__decorateClass([
+  attr({ attribute: "call-button-label" })
+], DialPad.prototype, "callButtonLabel");
+applyMixins(DialPad, Localized);
 
-const getClasses = ({
-  iconPlacement,
-  bodySlottedContent,
-  footerSlottedContent,
-  actionItemsSlottedContent,
-  _openedAsModal
-}) => classNames(
-  "base",
-  [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
-  ["hide-body", !bodySlottedContent?.length],
-  [
-    "hide-footer",
-    !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
-  ],
-  ["modal", _openedAsModal]
-);
-function icon(iconTag) {
-  return html`
-		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
-	`;
+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", "&nbsp;", "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 {
+    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 syncFieldAndPadValues(x) {
+  x.value = x._textFieldEl.value;
 }
-function headline() {
-  return html` <div class="headline">${(x) => x.headline}</div> `;
+function stopPropagation(_, { event: e }) {
+  e.stopImmediatePropagation();
 }
-function subtitle() {
-  return html` <div class="subtitle">${(x) => x.subtitle}</div> `;
+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)}"
+            @input="${syncFieldAndPadValues}"
+			@change="${syncFieldAndPadValues}"
+			@focus="${stopPropagation}"
+			@blur="${stopPropagation}"
+			>
+         ${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.deleteLabel}"
+								appearance='ghost'
+								?disabled="${(x) => x.disabled || x.callActive}"
+								@click="${(x) => deleteLastCharacter(x)}">
+            </${buttonTag}>`
+  )}
+        </${textFieldTag}>`;
 }
-function renderDismissButton(buttonTag) {
+function onDigitClick(digit, { parent: dialPad, event }) {
+  dialPad.value += digit.value;
+  dialPad.$emit("keypad-click", event.currentTarget);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+}
+function renderDigits(buttonTag, iconTag) {
   return html`
-	<${buttonTag}
-		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.dialog.dismissButtonLabel}"
-		size="condensed"
-		class="dismiss-button"
-		icon="close-line"
-		@click="${(x) => x._handleCloseRequest()}"
-	></${buttonTag}>`;
+		${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"
+					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
+					  ?disabled="${(_, c) => c.parent.disabled}"
+					  @click="${onDigitClick}">
+					  	<${iconTag} slot="icon"
+									name="${(x) => x.icon}"
+									class="digit-btn-num"></${iconTag}>
+					</${buttonTag}>
+		`
+  )}
+	`;
 }
-const DialogTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
+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}>`;
+}
+const DialPadTemplate = (context) => {
   const buttonTag = context.tagFor(Button);
-  return html`
-	<${elevationTag} dp="8" not-relative>
-		<dialog class="${getClasses}"
-				@keydown="${(x, c) => x._onKeyDown(c.event)}"
-				@cancel="${(_, c) => c.event.preventDefault()}"
-				aria-label="${(x) => x.ariaLabel}"
-				?aria-modal="${(x) => x._openedAsModal}"
-		>
-			<slot name="main">
-				<div class="main-wrapper">
-					<div class="header ${(x) => x.subtitle ? "border" : ""}">
-							<slot name="graphic">
-								${when((x) => x.icon, icon(iconTag))}
-							</slot>
-							${when((x) => x.headline, headline())}
-							${when((x) => x.subtitle, subtitle())}
-							${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
-					</div>
-					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
-						<slot name="body" ${slotted("bodySlottedContent")}></slot>
-					</div>
-					<div class="footer">
-						<div>
-							<slot name="footer" ${slotted("footerSlottedContent")}></slot>
-						</div>
-						<div class="actions">
-							<slot name="action-items" ${slotted("actionItemsSlottedContent")}></slot>
-						</div>
-					</div>
-				</div>
-			</slot>
-		</dialog>
-	</${elevationTag}>`;
+  const iconTag = context.tagFor(Icon);
+  const textFieldTag = context.tagFor(TextField);
+  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))}
+	</div>`;
 };
 
-const dialogDefinition = defineVividComponent(
-  "dialog",
-  Dialog,
-  DialogTemplate,
-  [iconDefinition, buttonDefinition, elevationDefinition],
+const dialPadDefinition = defineVividComponent(
+  "dial-pad",
+  DialPad,
+  DialPadTemplate,
+  [buttonDefinition, textFieldDefinition, iconDefinition],
   {
     styles
   }
 );
-const registerDialog = createRegisterFunction(dialogDefinition);
+const registerDialPad = createRegisterFunction(dialPadDefinition);
 
-export { dialogDefinition as d, registerDialog as r };
+export { DialPad as D, dialPadDefinition as d, registerDialPad as r };