Dial Pad

Dial Pad allows users to enter or dial phone numbers.

Usage

import { registerDialPad } from '@vonage/vivid-api';

registerDialPad('your-prefix');

Value

To set the value of the input, use the value attribute to set the text displayed in the input.

Pattern

Use the pattern attribute to set the regex string of allowed characters in the input.
Read more about vwc-text-field validation. It defaults to ^[0-9#*]*$ (key pad buttons).

API Reference

Properties

Property	Type	Description
autofocus	`boolean`	Indicates that an element should be focused on page load, or when the Dialog that it is part of is displayed. When `no-input` attribute is specified, it will be the first digit button. Otherwise, the text field will be focused.`
callActive	`boolean`	Controls the active state of the call
callButtonLabel	`string`	Controls the call button label
deleteAriaLabel	`string`	The aria-label for the delete button
disabled	`boolean`	Controls the disabled state of the dial pad
endCallButtonLabel	`string`	Controls the end call button label
helperText	`string`	Controls the helper text displayed below the phone input element
noCall	`boolean`	Removes the call button and functionality
noInput	`boolean`	Removes the phone input element
pattern	`string`	Regular expression to validate the value of the input element
pending	`boolean`	Controls the pending state
placeholder	`string`	Indicates the placeholder's text.
size	`'condensed' \| 'normal'`	Controls the vertical size of the dial pad
value (modelValue)	`string`	Value of the phone input element

Property	Type	Description
autofocus	`boolean`	Indicates that an element should be focused on page load, or when the Dialog that it is part of is displayed. When `no-input` attribute is specified, it will be the first digit button. Otherwise, the text field will be focused.`
call-active	`boolean`	Controls the active state of the call
call-button-label	`string`	Controls the call button label
delete-aria-label	`string`	The aria-label for the delete button
disabled	`boolean`	Controls the disabled state of the dial pad
end-call-button-label	`string`	Controls the end call button label
helper-text	`string`	Controls the helper text displayed below the phone input element
no-call	`boolean`	Removes the call button and functionality
no-input	`boolean`	Removes the phone input element
pattern	`string`	Regular expression to validate the value of the input element
pending	`boolean`	Controls the pending state
placeholder	`string`	Indicates the placeholder's text.
size	`'condensed' \| 'normal'`	Controls the vertical size of the dial pad
value	`string`	Value of the phone input element

Events

Name	Type	Description
blur	`CustomEvent<undefined>`	Emitted when the text field loses focus
change	`CustomEvent<undefined>`	Emitted when the text field value changes
dial	`CustomEvent<undefined>`	Emitted when the call button is clicked
end-call	`CustomEvent<undefined>`	Emitted when the end call button is clicked
focus	`CustomEvent<undefined>`	Emitted when the text field receives focus
input	`CustomEvent<undefined>`	Emitted when the text field value changes
keypad-click	`CustomEvent<HTMLElement>`	Emitted when a digit button is clicked

Name	Type	Description
blur	`CustomEvent<undefined>`	Emitted when the text field loses focus
change	`CustomEvent<undefined>`	Emitted when the text field value changes
dial	`CustomEvent<undefined>`	Emitted when the call button is clicked
end-call	`CustomEvent<undefined>`	Emitted when the end call button is clicked
focus	`CustomEvent<undefined>`	Emitted when the text field receives focus
input	`CustomEvent<undefined>`	Emitted when the text field value changes
keypad-click	`CustomEvent<HTMLElement>`	Emitted when a digit button is clicked

Methods

Name	Params	Returns	Description
focus		`void`	Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit button. Otherwise, the input field will be focused.
valueChanged	`_oldValue: string` `newValue: string`	`void`