@vonage/vivid-react 2.10.84 → 2.10.86

package/v3/VwcRangeSlider/index.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** Base class for range-slider
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/range-slider
+* @param {string} start - The start value of the range.
+* @param {| string
+        | undefined} initialStart - The initial start value. This value sets the `start` property
+only when the `start` property has not been explicitly set. **attribute** `start`
+* @param {string} currentStart - The current start value of the element. This property serves as a mechanism
+to set the `start` property through both property assignment and the
+.setAttribute() method. This is useful for setting the field's value
+in UI libraries that bind data through the .setAttribute() API
+and don't support IDL attribute binding. **attribute** `current-start`
+* @param {number} startAsNumber - The start property, typed as a number.
+* @param {string} end - The end value of the range.
+* @param {string | undefined} initialEnd - The initial end value. This value sets the `end` property
+only when the `end` property has not been explicitly set. **attribute** `end`
+* @param {string} currentEnd - The current end value of the element. This property serves as a mechanism
+to set the `end` property through both property assignment and the
+.setAttribute() method. This is useful for setting the field's value
+in UI libraries that bind data through the .setAttribute() API
+and don't support IDL attribute binding. **attribute** `current-end`
+* @param  endAsNumber - The end property, typed as a number.
+* @param {number} min - The minimum value of the range. **attribute** `min`
+* @param {number} max - The maximum value of the range. **attribute** `max`
+* @param {number} step - Value to increment or decrement via arrow keys, mouse click or drag. **attribute** `step`
+* @param {Orientation} orientation - The orientation of the slider. **attribute** `orientation`
+* @param {string | null} ariaStartLabel - Aria label for the start thumb **attribute** `aria-start-label`
+* @param {string | null} ariaEndLabel - Aria label for the end thumb **attribute** `aria-end-label`
+* @param {boolean} markers - Display markers on/off **attribute** `markers`
+* @param {RangeSliderConnotation | undefined} connotation - The connotation of the component **attribute** `connotation`
+* @param {(value: string) => string} valueTextFormatter - Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+* @param  proxy
+*/
+declare const VwcRangeSlider: {
+    (props: {
+        (event: SyntheticEvent): void;
+        (event: SyntheticEvent): void;
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onInput: start | null;
+        start?: string | undefined;
+        initialStart?: any;
+        currentStart?: string | undefined;
+        startAsNumber?: number | undefined;
+        end?: string | undefined;
+        initialEnd?: string | undefined;
+        currentEnd?: string | undefined;
+        endAsNumber?: any;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+        orientation?: any;
+        ariaStartLabel?: string | null | undefined;
+        ariaEndLabel?: string | null | undefined;
+        markers?: boolean | undefined;
+        connotation?: any;
+        valueTextFormatter?: any;
+        proxy?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcRangeSlider;

package/v3/VwcRangeSlider/index.js

@@ -0,0 +1,486 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for range-slider",
+ "name": "RangeSlider",
+ "cssProperties": [
+  {
+   "name": "--vvd-slider-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-slider-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "#isInternalValueUpdate",
+   "privacy": "private",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false"
+  },
+  {
+   "kind": "field",
+   "name": "start",
+   "type": {
+    "text": "string"
+   },
+   "default": "''",
+   "description": "The start value of the range."
+  },
+  {
+   "kind": "field",
+   "name": "initialStart",
+   "type": {
+    "text": "| string\n\t\t| undefined"
+   },
+   "description": "The initial start value. This value sets the `start` property\nonly when the `start` property has not been explicitly set."
+  },
+  {
+   "kind": "field",
+   "name": "currentStart",
+   "type": {
+    "text": "string"
+   },
+   "description": "The current start value of the element. This property serves as a mechanism\nto set the `start` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding."
+  },
+  {
+   "kind": "field",
+   "name": "startAsNumber",
+   "type": {
+    "text": "number"
+   },
+   "description": "The start property, typed as a number.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "end",
+   "type": {
+    "text": "string"
+   },
+   "default": "''",
+   "description": "The end value of the range."
+  },
+  {
+   "kind": "field",
+   "name": "initialEnd",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "The initial end value. This value sets the `end` property\nonly when the `end` property has not been explicitly set."
+  },
+  {
+   "kind": "field",
+   "name": "currentEnd",
+   "type": {
+    "text": "string"
+   },
+   "description": "The current end value of the element. This property serves as a mechanism\nto set the `end` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding."
+  },
+  {
+   "kind": "field",
+   "name": "endAsNumber",
+   "description": "The end property, typed as a number.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "#updateValues",
+   "parameters": [
+    {
+     "name": "{ start, end }",
+     "type": {
+      "text": "{ start?: string; end?: string }"
+     }
+    },
+    {
+     "name": "emitEvents",
+     "default": "true",
+     "type": {
+      "text": "boolean"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "min",
+   "type": {
+    "text": "number"
+   },
+   "default": "0",
+   "description": "The minimum value of the range.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "max",
+   "type": {
+    "text": "number"
+   },
+   "default": "10",
+   "description": "The maximum value of the range.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "step",
+   "type": {
+    "text": "number"
+   },
+   "default": "1",
+   "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "#applyStep",
+   "parameters": [
+    {
+     "name": "thumb",
+     "type": {
+      "text": "'start' | 'end'"
+     }
+    },
+    {
+     "name": "direction",
+     "type": {
+      "text": "Direction"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "orientation",
+   "type": {
+    "text": "Orientation"
+   },
+   "description": "The orientation of the slider.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "ariaStartLabel",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Aria label for the start thumb",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "ariaEndLabel",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Aria label for the end thumb",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "markers",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Display markers on/off",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "connotation",
+   "type": {
+    "text": "RangeSliderConnotation | undefined"
+   },
+   "description": "The connotation of the component",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "valueTextFormatter",
+   "type": {
+    "text": "(value: string) => string"
+   },
+   "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
+   "privacy": "public"
+  },
+  {
+   "kind": "method",
+   "name": "#updateFormValue"
+  },
+  {
+   "kind": "method",
+   "name": "formResetCallback"
+  },
+  {
+   "kind": "field",
+   "name": "#thumbs",
+   "privacy": "private",
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "#thumbConstraints",
+   "privacy": "private",
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "#draggingThumb",
+   "privacy": "private",
+   "type": {
+    "text": "false | 'start' | 'end'"
+   },
+   "default": "false"
+  },
+  {
+   "kind": "method",
+   "name": "#updateThumbPositions"
+  },
+  {
+   "kind": "method",
+   "name": "#thumbTrackEndOffset",
+   "parameters": [
+    {
+     "name": "value",
+     "type": {
+      "text": "number"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#calculateValueFromMouseEvent",
+   "parameters": [
+    {
+     "name": "e",
+     "type": {
+      "text": "Pick<MouseEvent, 'pageX' | 'pageY'>"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#roundToNearestStep",
+   "parameters": [
+    {
+     "name": "thumb",
+     "type": {
+      "text": "'start' | 'end'"
+     }
+    },
+    {
+     "name": "value",
+     "type": {
+      "text": "number"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "#registerThumbListeners"
+  },
+  {
+   "kind": "method",
+   "name": "#unregisterThumbListeners"
+  },
+  {
+   "kind": "field",
+   "name": "#onThumbMousedown",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "#onThumbKeydown",
+   "privacy": "private"
+  },
+  {
+   "kind": "method",
+   "name": "#registerDragHandlers"
+  },
+  {
+   "kind": "method",
+   "name": "#unregisterDragListeners"
+  },
+  {
+   "kind": "field",
+   "name": "#onDragMove",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "#onDragEnd",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "proxy",
+   "inheritedFrom": {
+    "name": "FormAssociatedRangeSlider",
+    "module": "libs/components/src/lib/range-slider/range-slider.form-associated.ts"
+   }
+  }
+ ],
+ "events": [
+  {
+   "description": "Event emitted when the start value changes",
+   "name": "input:start"
+  },
+  {
+   "description": "Event emitted when the end value changes",
+   "name": "input:end"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "start",
+   "type": {
+    "text": "| string\n\t\t| undefined"
+   },
+   "description": "The initial start value. This value sets the `start` property\nonly when the `start` property has not been explicitly set.",
+   "fieldName": "initialStart"
+  },
+  {
+   "name": "current-start",
+   "type": {
+    "text": "string"
+   },
+   "description": "The current start value of the element. This property serves as a mechanism\nto set the `start` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding.",
+   "fieldName": "currentStart"
+  },
+  {
+   "name": "end",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "The initial end value. This value sets the `end` property\nonly when the `end` property has not been explicitly set.",
+   "fieldName": "initialEnd"
+  },
+  {
+   "name": "current-end",
+   "type": {
+    "text": "string"
+   },
+   "description": "The current end value of the element. This property serves as a mechanism\nto set the `end` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding.",
+   "fieldName": "currentEnd"
+  },
+  {
+   "type": {
+    "text": "number"
+   },
+   "default": "0",
+   "description": "The minimum value of the range.",
+   "fieldName": "min"
+  },
+  {
+   "type": {
+    "text": "number"
+   },
+   "default": "10",
+   "description": "The maximum value of the range.",
+   "fieldName": "max"
+  },
+  {
+   "type": {
+    "text": "number"
+   },
+   "default": "1",
+   "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+   "fieldName": "step"
+  },
+  {
+   "name": "orientation",
+   "type": {
+    "text": "Orientation"
+   },
+   "description": "The orientation of the slider.",
+   "fieldName": "orientation"
+  },
+  {
+   "name": "aria-start-label",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Aria label for the start thumb",
+   "fieldName": "ariaStartLabel"
+  },
+  {
+   "name": "aria-end-label",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "description": "Aria label for the end thumb",
+   "fieldName": "ariaEndLabel"
+  },
+  {
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Display markers on/off",
+   "fieldName": "markers"
+  },
+  {
+   "name": "connotation",
+   "type": {
+    "text": "RangeSliderConnotation | undefined"
+   },
+   "description": "The connotation of the component",
+   "fieldName": "connotation"
+  }
+ ],
+ "superclass": {
+  "name": "FormAssociatedRangeSlider",
+  "module": "/libs/components/src/lib/range-slider/range-slider.form-associated"
+ },
+ "vividComponent": {
+  "name": "range-slider",
+  "public": true,
+  "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"
+   }
+  ]
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerRangeSlider } from '@vonage/vivid'
+
+registerRangeSlider('vvd3')
+
+const VwcRangeSlider = wrapper(`vvd3-range-slider`,  {
+    events: [{"name":"input:end","propName":"onInput:end"},{"name":"input:start","propName":"onInput:start"}],
+    attributes: [],
+    properties: ['start', 'initialStart', 'currentStart', 'startAsNumber', 'end', 'initialEnd', 'currentEnd', 'endAsNumber', 'min', 'max', 'step', 'orientation', 'ariaStartLabel', 'ariaEndLabel', 'markers', 'connotation', 'valueTextFormatter', 'proxy']
+})
+
+VwcRangeSlider.displayName = 'VwcRangeSlider'
+
+export default VwcRangeSlider

package/v3/{VwcFocus → VwcRangeSlider}/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@vonage/vivid-react-vvd3-focus",
-  "version": "3.50.1",
+  "name": "@vonage/vivid-react-vvd3-range-slider",
+  "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/VwcSelect/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
-/** Base class for select
+/** VwcSelect
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/select
 * @param {SelectAppearance | undefined} appearance - The appearance attribute. **attribute** `appearance`
 * @param {SelectShape | undefined} shape - The shape attribute. **attribute** `shape`

package/v3/VwcSelect/index.js

@@ -5,7 +5,7 @@
 Code in this file were generated using following JSON:
 {
  "kind": "class",
- "description": "Base class for select",
+ "description": "",
  "name": "Select",
  "cssProperties": [
   {
@@ -45,6 +45,10 @@ Code in this file were generated using following JSON:
   {
    "description": "Slot to add meta content to the select control.",
    "name": "meta"
+  },
+  {
+   "description": "Describes how to use the select. Alternative to the `helper-text` attribute.",
+   "name": "helper-text"
   }
  ],
  "members": [
@@ -141,6 +145,18 @@ Code in this file were generated using following JSON:
  "superclass": {
   "name": "FoundationSelect",
   "package": "@microsoft/fast-foundation"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "select",
+  "vueModels": [
+   {
+    "name": "modelValue",
+    "attributeName": "current-value",
+    "eventName": "input",
+    "valueMapping": "(event.target as HTMLInputElement).value"
+   }
+  ]
  }
 }
 */

package/v3/VwcSelect/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-select",
-  "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/VwcSelectableBox/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
-/** Base class for selectable-box
+/** VwcSelectableBox
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/selectable-box
 * @param {string | null} ariaLabel  **attribute** `aria-label`
 * @param {boolean} checked - Controls the checked state of the box **attribute** `checked`

package/v3/VwcSelectableBox/index.js

@@ -5,11 +5,11 @@
 Code in this file were generated using following JSON:
 {
  "kind": "class",
- "description": "Base class for selectable-box",
+ "description": "",
  "name": "SelectableBox",
  "cssProperties": [
   {
-   "name": "--vvd-selectable-box-cta-firm",
+   "name": "--vvd-selectable-box-cta-firm-all",
    "default": "var(--vvd-color-cta-600)"
   },
   {
@@ -29,8 +29,8 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-cta-100)"
   },
   {
-   "name": "--vvd-selectable-box-accent-firm",
-   "default": "var(--vvd-color-canvas-text)"
+   "name": "--vvd-selectable-box-accent-firm-all",
+   "default": "var(--vvd-color-neutral-600)"
   },
   {
    "name": "--vvd-selectable-box-accent-pale",
@@ -191,6 +191,10 @@ Code in this file were generated using following JSON:
  "superclass": {
   "name": "FoundationElement",
   "package": "@microsoft/fast-foundation"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "selectable-box"
  }
 }
 */

package/v3/VwcSelectableBox/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-selectable-box",
-  "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/VwcSideDrawer/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
-/** Base class for side-drawer
+/** VwcSideDrawer
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/side-drawer
 * @param {boolean} alternate - applies scheme alternate region **attribute** `alternate`
 * @param {boolean} modal - sets the side drawer's type to modal **attribute** `modal`