@vonage/vivid-react 2.10.83 → 2.10.85

package/v3/VwcDatePicker/index.js

@@ -7,6 +7,12 @@ Code in this file were generated using following JSON:
  "kind": "class",
  "description": "Single date picker component.",
  "name": "DatePicker",
+ "slots": [
+  {
+   "description": "Describes how to use the date-picker. Alternative to the `helper-text` attribute.",
+   "name": "helper-text"
+  }
+ ],
  "members": [
   {
    "kind": "method",
@@ -236,6 +242,18 @@ Code in this file were generated using following JSON:
   "name": "DatePickerBase",
   "module": "/libs/components/src/shared/date-picker/date-picker-base"
  },
+ "vividComponent": {
+  "public": true,
+  "name": "date-picker",
+  "vueModels": [
+   {
+    "name": "modelValue",
+    "attributeName": "value",
+    "eventName": "input",
+    "valueMapping": "(event.target as HTMLInputElement).value"
+   }
+  ]
+ },
  "attributes": [
   {
    "type": {

package/v3/VwcDatePicker/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-date-picker",
-  "version": "3.50.1",
+  "version": "3.53.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.50.1"
+    "@vonage/vivid": "3.53.0"
   }
 }

package/v3/VwcDatePickerBase/index.js

@@ -12,6 +12,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-date-picker-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
   },
+  {
+   "name": "--vvd-date-picker-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
   {
    "name": "--vvd-date-picker-accent-faint",
    "default": "var(--vvd-color-neutral-50)"

package/v3/VwcDatePickerBase/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-date-picker-base",
-  "version": "3.50.1",
+  "version": "3.53.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.50.1"
+    "@vonage/vivid": "3.53.0"
   }
 }

package/v3/VwcDateRangePicker/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
-/** Base class for date-range-picker
+/** VwcDateRangePicker
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/date-range-picker
 * @param {string} initialStart - The initial start value. This value sets the `start` property
 only when the `start` property has not been explicitly set. **attribute** `start`

package/v3/VwcDateRangePicker/index.js

@@ -5,8 +5,14 @@
 Code in this file were generated using following JSON:
 {
  "kind": "class",
- "description": "Base class for date-range-picker",
+ "description": "",
  "name": "DateRangePicker",
+ "slots": [
+  {
+   "description": "Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.",
+   "name": "helper-text"
+  }
+ ],
  "members": [
   {
    "kind": "field",
@@ -412,6 +418,24 @@ Code in this file were generated using following JSON:
  "superclass": {
   "name": "DatePickerBase",
   "module": "/libs/components/src/shared/date-picker/date-picker-base"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "date-range-picker",
+  "vueModels": [
+   {
+    "name": "start",
+    "attributeName": "current-start",
+    "eventName": "input:start",
+    "valueMapping": "(event.target as any).start"
+   },
+   {
+    "name": "end",
+    "attributeName": "current-end",
+    "eventName": "input:end",
+    "valueMapping": "(event.target as any).end"
+   }
+  ]
  }
 }
 */

package/v3/VwcDateRangePicker/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-date-range-picker",
-  "version": "3.50.1",
+  "version": "3.53.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.50.1"
+    "@vonage/vivid": "3.53.0"
   }
 }

package/v3/VwcDialPad/index.d.ts

@@ -0,0 +1,106 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** Base class for dial-pad
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/dial-pad
+* @param {string | null} helperText - Indicates the helper-text's text. **attribute** `helper-text`
+* @param {string | null} placeholder - Indicates the placeholder's text. **attribute** `placeholder`
+* @param {string} value - Indicates the value's text. **attribute** `value`
+* @param {string} pattern - Indicates the dial pad's pattern. **attribute** `pattern`
+* @param {boolean} disabled - Indicates the disabled state of the dial-pad. **attribute** `disabled`
+* @param {boolean} callActive - Indicates the active state of the dial-pad. **attribute** `call-active`
+* @param {boolean} noCall - Indicates the no-call state of the dial-pad. **attribute** `no-call`
+*/
+declare const VwcDialPad: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
+        onInput?: ((event: SyntheticEvent) => void) | undefined;
+        onBlur?: ((event: SyntheticEvent) => void) | undefined;
+        onFocus?: ((event: SyntheticEvent) => void) | undefined;
+        onKeypadClick?: ((event: SyntheticEvent) => void) | undefined;
+        onDial?: ((event: SyntheticEvent) => void) | undefined;
+        onEndCall?: ((event: SyntheticEvent) => void) | undefined;
+        helperText?: string | null | undefined;
+        placeholder?: string | null | undefined;
+        value?: string | undefined;
+        pattern?: string | undefined;
+        disabled?: boolean | undefined;
+        callActive?: boolean | undefined;
+        noCall?: boolean | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcDialPad;
+/** Base class for dial-pad
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/dial-pad
+* @param {string | null} helperText - Indicates the helper-text's text. **attribute** `helper-text`
+* @param {string | null} placeholder - Indicates the placeholder's text. **attribute** `placeholder`
+* @param {string} value - Indicates the value's text. **attribute** `value`
+* @param {string} pattern - Indicates the dial pad's pattern. **attribute** `pattern`
+* @param {boolean} disabled - Indicates the disabled state of the dial-pad. **attribute** `disabled`
+* @param {boolean} callActive - Indicates the active state of the dial-pad. **attribute** `call-active`
+* @param {boolean} noCall - Indicates the no-call state of the dial-pad. **attribute** `no-call`
+*/
+declare const VwcDialPad: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
+        onInput?: ((event: SyntheticEvent) => void) | undefined;
+        onBlur?: ((event: SyntheticEvent) => void) | undefined;
+        onFocus?: ((event: SyntheticEvent) => void) | undefined;
+        onKeypadClick?: ((event: SyntheticEvent) => void) | undefined;
+        onDial?: ((event: SyntheticEvent) => void) | undefined;
+        onEndCall?: ((event: SyntheticEvent) => void) | undefined;
+        helperText?: string | null | undefined;
+        placeholder?: string | null | undefined;
+        value?: string | undefined;
+        pattern?: string | undefined;
+        disabled?: boolean | undefined;
+        callActive?: boolean | undefined;
+        noCall?: boolean | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcDialPad;
+/** Base class for dial-pad
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/dial-pad
+* @param {string | null} helperText - Indicates the helper-text's text. **attribute** `helper-text`
+* @param {string | null} placeholder - Indicates the placeholder's text. **attribute** `placeholder`
+* @param {string} value - Indicates the value's text. **attribute** `value`
+* @param {string} pattern - Indicates the dial pad's pattern. **attribute** `pattern`
+* @param {boolean} disabled - Indicates the disabled state of the dial-pad. **attribute** `disabled`
+* @param {boolean} callActive - Indicates the active state of the dial-pad. **attribute** `call-active`
+* @param {boolean} noCall - Indicates the no-call state of the dial-pad. **attribute** `no-call`
+*/
+declare const VwcDialPad: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
+        onInput?: ((event: SyntheticEvent) => void) | undefined;
+        onBlur?: ((event: SyntheticEvent) => void) | undefined;
+        onFocus?: ((event: SyntheticEvent) => void) | undefined;
+        onKeypadClick?: ((event: SyntheticEvent) => void) | undefined;
+        onDial?: ((event: SyntheticEvent) => void) | undefined;
+        onEndCall?: ((event: SyntheticEvent) => void) | undefined;
+        helperText?: string | null | undefined;
+        placeholder?: string | null | undefined;
+        value?: string | undefined;
+        pattern?: string | undefined;
+        disabled?: boolean | undefined;
+        callActive?: boolean | undefined;
+        noCall?: boolean | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcDialPad;

package/v3/VwcDialPad/index.js

@@ -0,0 +1,285 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for dial-pad",
+ "name": "DialPad",
+ "cssProperties": [
+  {
+   "name": "--vvd-dial-pad-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-dial-pad-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-dial-pad-accent-pale",
+   "default": "var(--vvd-color-neutral-300)"
+  },
+  {
+   "name": "--vvd-dial-pad-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-dial-pad-accent-firm-all",
+   "default": "var(--vvd-color-neutral-600)"
+  },
+  {
+   "name": "--vvd-dial-pad-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-dial-pad-accent-dim",
+   "default": "var(--vvd-color-neutral-200)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "helperText",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Indicates the helper-text's text.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "placeholder",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Indicates the placeholder's text.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "value",
+   "type": {
+    "text": "string"
+   },
+   "default": "''",
+   "description": "Indicates the value's text.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "valueChanged",
+   "parameters": [
+    {
+     "name": "_oldValue",
+     "type": {
+      "text": "string"
+     }
+    },
+    {
+     "name": "newValue",
+     "type": {
+      "text": "string"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "pattern",
+   "type": {
+    "text": "string"
+   },
+   "default": "'^[0-9#*]*
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerDialPad } from '@vonage/vivid'
+
+registerDialPad('vvd3')
+
+const VwcDialPad = wrapper(`vvd3-dial-pad`,  {
+    events: [{"name":"end-call","propName":"onEndCall"},{"name":"dial","propName":"onDial"},{"name":"keypad-click","propName":"onKeypadClick"},{"name":"focus","propName":"onFocus"},{"name":"blur","propName":"onBlur"},{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
+    attributes: [],
+    properties: ['helperText', 'placeholder', 'value', 'pattern', 'disabled', 'callActive', 'noCall']
+})
+
+VwcDialPad.displayName = 'VwcDialPad'
+
+export default VwcDialPad
+",
+   "description": "Indicates the dial pad's pattern.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "disabled",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the disabled state of the dial-pad.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "callActive",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the active state of the dial-pad.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "noCall",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the no-call state of the dial-pad.",
+   "privacy": "public"
+  }
+ ],
+ "events": [
+  {
+   "description": "Emitted when the text field value changes",
+   "name": "change"
+  },
+  {
+   "description": "Emitted when the text field value changes",
+   "name": "input"
+  },
+  {
+   "description": "Emitted when the text field loses focus",
+   "name": "blur"
+  },
+  {
+   "description": "Emitted when the text field receives focus",
+   "name": "focus"
+  },
+  {
+   "description": "Emitted when a digit button is clicked",
+   "name": "keypad-click"
+  },
+  {
+   "description": "Emitted when the call button is clicked",
+   "name": "dial"
+  },
+  {
+   "description": "Emitted when the end call button is clicked",
+   "name": "end-call"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "helper-text",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Indicates the helper-text's text.",
+   "fieldName": "helperText"
+  },
+  {
+   "name": "placeholder",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Indicates the placeholder's text.",
+   "fieldName": "placeholder"
+  },
+  {
+   "type": {
+    "text": "string"
+   },
+   "default": "''",
+   "description": "Indicates the value's text.",
+   "fieldName": "value"
+  },
+  {
+   "type": {
+    "text": "string"
+   },
+   "default": "'^[0-9#*]*
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerDialPad } from '@vonage/vivid'
+
+registerDialPad('vvd3')
+
+const VwcDialPad = wrapper(`vvd3-dial-pad`,  {
+    events: [{"name":"end-call","propName":"onEndCall"},{"name":"dial","propName":"onDial"},{"name":"keypad-click","propName":"onKeypadClick"},{"name":"focus","propName":"onFocus"},{"name":"blur","propName":"onBlur"},{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
+    attributes: [],
+    properties: ['helperText', 'placeholder', 'value', 'pattern', 'disabled', 'callActive', 'noCall']
+})
+
+VwcDialPad.displayName = 'VwcDialPad'
+
+export default VwcDialPad
+",
+   "description": "Indicates the dial pad's pattern.",
+   "fieldName": "pattern"
+  },
+  {
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the disabled state of the dial-pad.",
+   "fieldName": "disabled"
+  },
+  {
+   "name": "call-active",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the active state of the dial-pad.",
+   "fieldName": "callActive"
+  },
+  {
+   "name": "no-call",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the no-call state of the dial-pad.",
+   "fieldName": "noCall"
+  }
+ ],
+ "superclass": {
+  "name": "FoundationElement",
+  "package": "@microsoft/fast-foundation"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "dial-pad",
+  "vueModels": [
+   {
+    "name": "modelValue",
+    "attributeName": "value",
+    "eventName": "input",
+    "valueMapping": "(event.target as any).value"
+   }
+  ]
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerDialPad } from '@vonage/vivid'
+
+registerDialPad('vvd3')
+
+const VwcDialPad = wrapper(`vvd3-dial-pad`,  {
+    events: [{"name":"end-call","propName":"onEndCall"},{"name":"dial","propName":"onDial"},{"name":"keypad-click","propName":"onKeypadClick"},{"name":"focus","propName":"onFocus"},{"name":"blur","propName":"onBlur"},{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
+    attributes: [],
+    properties: ['helperText', 'placeholder', 'value', 'pattern', 'disabled', 'callActive', 'noCall']
+})
+
+VwcDialPad.displayName = 'VwcDialPad'
+
+export default VwcDialPad

package/v3/{VwcPopup → VwcDialPad}/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@vonage/vivid-react-vvd3-popup",
-  "version": "3.50.1",
+  "name": "@vonage/vivid-react-vvd3-dial-pad",
+  "version": "3.53.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.50.1"
+    "@vonage/vivid": "3.53.0"
   }
 }

package/v3/VwcDialog/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
-/** Base class for dialog
+/** VwcDialog
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/dialog
 * @param {boolean} open - Indicates dialog's state **attribute** `open`
 * @param {string | undefined} icon  **attribute** `icon`
@@ -8,7 +8,8 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {string | undefined} headline  **attribute** `headline`
 * @param {boolean} fullWidthBody  **attribute** `full-width-body`
 * @param {string | null} ariaLabel  **attribute** `aria-label`
-* @param {string | null} dismissButtonAriaLabel  **attribute** `dismiss-button-aria-label`
+* @param {| string
+        | null} dismissButtonAriaLabel  **attribute** `dismiss-button-aria-label`
 * @param {boolean} noLightDismiss  **attribute** `no-light-dismiss`
 * @param {string} returnValue
 */
@@ -27,7 +28,7 @@ declare const VwcDialog: {
         headline?: string | undefined;
         fullWidthBody?: boolean | undefined;
         ariaLabel?: string | null | undefined;
-        dismissButtonAriaLabel?: string | null | undefined;
+        dismissButtonAriaLabel?: any;
         noLightDismiss?: boolean | undefined;
         returnValue?: string | undefined;
     }): JSX.Element;

package/v3/VwcDialog/index.js

@@ -5,7 +5,7 @@
 Code in this file were generated using following JSON:
 {
  "kind": "class",
- "description": "Base class for dialog",
+ "description": "",
  "name": "Dialog",
  "slots": [
   {
@@ -88,7 +88,7 @@ Code in this file were generated using following JSON:
    "kind": "field",
    "name": "dismissButtonAriaLabel",
    "type": {
-    "text": "string | null"
+    "text": "| string\n\t\t| null"
    },
    "default": "null"
   },
@@ -227,7 +227,7 @@ Code in this file were generated using following JSON:
   {
    "name": "dismiss-button-aria-label",
    "type": {
-    "text": "string | null"
+    "text": "| string\n\t\t| null"
    },
    "default": "null",
    "fieldName": "dismissButtonAriaLabel"
@@ -244,6 +244,10 @@ Code in this file were generated using following JSON:
  "superclass": {
   "name": "FoundationElement",
   "package": "@microsoft/fast-foundation"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "dialog"
  }
 }
 */

package/v3/VwcDialog/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-dialog",
-  "version": "3.50.1",
+  "version": "3.53.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.50.1"
+    "@vonage/vivid": "3.53.0"
   }
 }

package/v3/VwcDivider/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-/** Base class for divider
+/** VwcDivider
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/divider
 
 */

package/v3/VwcDivider/index.js

@@ -5,11 +5,15 @@
 Code in this file were generated using following JSON:
 {
  "kind": "class",
- "description": "Base class for divider",
+ "description": "",
  "name": "Divider",
  "superclass": {
   "name": "FoundationDivider",
   "package": "@microsoft/fast-foundation"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "divider"
  }
 }
 */

package/v3/VwcDivider/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-divider",
-  "version": "3.50.1",
+  "version": "3.53.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.50.1"
+    "@vonage/vivid": "3.53.0"
   }
 }

package/v3/VwcElevation/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-/** Base class for elevation
+/** VwcElevation
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/elevation
 * @param {0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined} dp - Indicates the elevation's dp. **attribute** `dp`
 * @param {boolean | undefined} noShadow - toggles the elevation's shadow. **attribute** `no-shadow`