feat(dial pad): new composed component (VIV-1512)

apps/docs/_data/components.json

@@ -269,6 +269,11 @@
 		"title": "Audio Player",
 		"markdown": "./libs/components/src/lib/audio-player/README.md"
 	},
+	{
+		"title": "Dial Pad",
+		"status": "alpha",
+		"markdown": "./libs/components/src/lib/dial-pad/README.md"
+	},
 	{
 		"title": "Video Player",
 		"status": "alpha",

apps/vue-docs/docs/examples/components/dial-pad/BasicExample.vue

@@ -0,0 +1,7 @@
+<template>
+	<VDialPad />
+</template>
+
+<script setup lang="ts">
+import { VDialPad } from '@vonage/vivid-vue';
+</script>

apps/vue-docs/docs/examples/dial-pad.md

@@ -0,0 +1,22 @@
+# Dial Pad Examples
+
+## Basic
+
+<code-tab>
+<template #example>
+<BasicExample/>
+</template>
+<template #code>
+
+```vue
+<!--@include: ./components/dial-pad/BasicExample.vue-->
+```
+
+</template>
+</code-tab>
+
+<script setup lang="ts">
+import codeTab from '../custom/CodeTab.vue'; 
+import { defineClientComponent } from "vitepress"; 
+const BasicExample = defineClientComponent(() => import("./components/dial-pad/BasicExample.vue"));
+</script>

libs/components/src/lib/components.ts

@@ -17,6 +17,7 @@ export * from './combobox/definition';
 export * from './data-grid/definition';
 export * from './date-picker/definition';
 export * from './date-range-picker/definition';
+export * from './dial-pad/definition';
 export * from './dialog/definition';
 export * from './divider/definition';
 export * from './empty-state/definition';

libs/components/src/lib/dial-pad/README.md

@@ -0,0 +1,112 @@
+# Dial Pad
+
+This is a composed component that allows users to enter / dial telephone numbers.
+
+```js
+<script type="module">import '@vonage/vivid/dial-pad';</script>
+```
+
+```html preview
+<vwc-dial-pad></vwc-dial-pad>
+```
+
+## Members
+
+### Value
+
+To set the value of the input, use the `value` attribute to set the text displayed in the input.
+
+- Type: `string`
+- Default: `undefined`
+
+```html preview
+<vwc-dial-pad value="1234567890"></vwc-dial-pad>
+```
+
+### Helper Text
+
+To give extra context to the number that is being displayed, use the `helper-text` attribute to set the text displayed under the input.
+
+- Type: `string`
+- Default: `undefined`
+
+```html preview
+<vwc-dial-pad helper-text="58 Meeting Room - Extension"></vwc-dial-pad>
+```
+
+### Placeholder
+
+To give a hint to the user of what to enter in the input, use the `placeholder` attribute to set the text displayed in the input.
+
+- Type: `string`
+- Default: `undefined`
+
+```html preview
+<vwc-dial-pad placeholder="Enter a phone number"></vwc-dial-pad>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable the keypad, input and Call/End call buttons.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+<vwc-dial-pad disabled></vwc-dial-pad>
+```
+
+### Call Active
+
+Use the `call-active` attribute (or `callActive` property) to enable the `end call button` and disable the `dial button`.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+<vwc-dial-pad call-active></vwc-dial-pad>
+```
+
+### No Call
+
+Use the `no-call` attribute (or `noCall` property) to disable call/end call functionality and hide the call/end call button.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+<vwc-dial-pad no-call></vwc-dial-pad>
+```
+
+### Pattern
+
+Use the `pattern` attribute to set the regex string of allowed characters in the input.  
+Read more about [vwc-text-field validation](/components/text-field/#validation).  
+You can change the error text with the `error-text` attribute.
+
+- Type: `string`
+- Default: `^[0-9#*]*$` (key pad buttons)
+
+```html preview
+<vwc-dial-pad
+	placeholder="Only digits"
+	pattern="^[0-9]*$"
+	error-text="The input is invalid"
+></vwc-dial-pad>
+```
+
+## Events
+
+<div class="table-wrapper">
+
+| Name           | Description                                                                                             |
+| -------------- | ------------------------------------------------------------------------------------------------------- |
+| `dial`         | Emitted (with the value of the input) when the dial pad is submitted and there is a value in the input. |
+| `end-call`     | Emitted when the end call button is clicked.                                                            |
+| `keypad-click` | Emitted when a keypad button is clicked. The `detail` object holds the clicked button.                  |
+| `input`        | Emitted from the input element.                                                                         |
+| `change`       | Emitted from the input element.                                                                         |
+| `blur`         | Emitted from the input element.                                                                         |
+| `focus`        | Emitted from the input element.                                                                         |
+
+</div>

libs/components/src/lib/dial-pad/definition.ts

@@ -0,0 +1,30 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { registerFactory } from '../../shared/design-system';
+import { buttonRegistries } from '../button/definition';
+import { textFieldRegistries } from '../text-field/definition';
+import styles from './dial-pad.scss?inline';
+
+import { DialPad } from './dial-pad';
+import { DialPadTemplate as template } from './dial-pad.template';
+
+export const dialPadDefinition = DialPad.compose<FoundationElementDefinition>({
+	baseName: 'dial-pad',
+	template: template as any,
+	styles,
+});
+
+/**
+ * @internal
+ */
+export const dialPadRegistries = [
+	dialPadDefinition(),
+	...buttonRegistries,
+	...textFieldRegistries,
+];
+
+/**
+ * Registers the dial-pad element with the design system.
+ *
+ * @param prefix - the prefix to use for the component name
+ */
+export const registerDialPad = registerFactory(dialPadRegistries);

libs/components/src/lib/dial-pad/dial-pad.scss

@@ -0,0 +1,68 @@
+@use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
+@use '../../../../shared/src/lib/sass/mixins/border-radius' as
+	border-radius-variables;
+@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
+	$connotations: accent,
+	$shades: contrast soft pale fierce firm-all faint dim,
+	$default: accent
+);
+@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
+@use '../../../../shared/src/lib/sass/mixins/appearance/config' as
+	appearance-config with (
+	$appearances: duotone,
+	$states: idle hover disabled,
+	$default: duotone
+);
+@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
+
+$gap: 16px;
+
+:host {
+	display: inline-block;
+	margin: 16px;
+	inline-size: 230px;
+}
+
+.base {
+	display: grid;
+	box-sizing: border-box;
+	grid-template-rows: 80px 1fr auto;
+}
+
+.digits {
+	display: grid;
+	gap: $gap;
+	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 {
+	@include appearance.appearance;
+	@include connotation.connotation(dial-pad);
+
+	--vvd-button-accent-primary: var(#{appearance.get-appearance-token(text)});
+
+	display: flex;
+	overflow: hidden;
+	flex-direction: column;
+	border-radius: #{border-radius-variables.$border-radius-expanded};
+	box-shadow: 0 0 0 1px var(#{appearance.get-appearance-token(outline)});
+	inline-size: 100%;
+
+	&-num {
+		.digit-btn:not(.disabled) & {
+			color: var(#{constants.$vvd-color-canvas-text});
+		}
+	}
+}
+
+.call-btn {
+	margin-top: 32px;
+	grid-column: 1/-1;
+}