@vonage/vivid-react 3.5.1 → 4.0.0

package/v3/VwcSelectableBox/index.js

@@ -66,16 +66,6 @@ Code in this file were generated using following JSON:
    "description": "Controls the checked state of the box",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "clickable",
-   "type": {
-    "text": "boolean"
-   },
-   "default": "false",
-   "privacy": "public",
-   "description": ""
-  },
   {
    "kind": "field",
    "name": "clickableBox",
@@ -104,6 +94,16 @@ Code in this file were generated using following JSON:
    "description": "The type of control the box should have: checkbox or radio.",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "controlPlacement",
+   "type": {
+    "text": "SelectableBoxControlPlacement"
+   },
+   "default": "'end-stacked'",
+   "description": "Defines where the control (checkbox or radio) should be located.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "tight",
@@ -173,14 +173,6 @@ Code in this file were generated using following JSON:
    "description": "Controls the checked state of the box",
    "fieldName": "checked"
   },
-  {
-   "name": "clickable",
-   "type": {
-    "text": "boolean"
-   },
-   "default": "false",
-   "fieldName": "clickable"
-  },
   {
    "name": "clickable-box",
    "type": {
@@ -206,6 +198,15 @@ Code in this file were generated using following JSON:
    "description": "The type of control the box should have: checkbox or radio.",
    "fieldName": "controlType"
   },
+  {
+   "name": "control-placement",
+   "type": {
+    "text": "SelectableBoxControlPlacement"
+   },
+   "default": "'end-stacked'",
+   "description": "Defines where the control (checkbox or radio) should be located.",
+   "fieldName": "controlPlacement"
+  },
   {
    "name": "tight",
    "type": {
@@ -229,6 +230,51 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "selectable-box"
+ },
+ "vividTesting": {
+  "selectors": [],
+  "actions": [
+   {
+    "name": "check",
+    "args": [
+     "check",
+     "#control"
+    ]
+   },
+   {
+    "name": "uncheck",
+    "args": [
+     "uncheck",
+     "#control"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "checked",
+    "args": [
+     "checked",
+     "true"
+    ]
+   },
+   {
+    "name": "unchecked",
+    "args": [
+     "checked",
+     "false"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "nestedShadow",
+     "[data-vvd-component].control",
+     "div.control"
+    ]
+   }
+  ]
  }
 }
 */
@@ -240,7 +286,7 @@ registerSelectableBox('vvd3')
 const VwcSelectableBox = wrapper(`vvd3-selectable-box`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['checked', 'clickable', 'clickableBox', 'connotation', 'controlType', 'tight', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['checked', 'clickableBox', 'connotation', 'controlType', 'controlPlacement', 'tight', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSelectableBox.displayName = 'VwcSelectableBox'

package/v3/VwcSelectableBox/package.json

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

package/v3/VwcSideDrawer/package.json

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

package/v3/VwcSimpleColorPicker/index.d.ts

@@ -0,0 +1,48 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** VwcSimpleColorPicker
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/simple-color-picker
+* @param {Placement | undefined} placement - Placement of the popup with color swatches **attribute** `placement`
+* @param {number} swatchesPerRow - Number of swatches per row for grid layout **attribute** `swatches-per-row`
+* @param {AnchorType | undefined} anchor - ID or direct reference to the component's anchor element. **attribute** `anchor`
+* @param {boolean} open - Indicates whether the popup is open **attribute** `open`
+* @param {ColorSwatch[]} swatches - List of color swatches, has to be an array of objects
+
+### Examples
+* @param {string | undefined} label - The label for the form element. **attribute** `label`
+* @param {string} value - The current value of the element. **attribute** `current-value`
+* @param  currentValue
+* @param {string} initialValue - The default value of the element. This value sets the `value` property
+only when the `value` property has not been explicitly set. **attribute** `value`
+* @param {boolean} disabled - Sets the element's disabled state. A disabled element will not be included during form submission. **attribute** `disabled`
+* @param {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name. **attribute** `name`
+* @param {boolean} required - Require the field to be completed prior to form submission. **attribute** `required`
+* @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
+It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
+* @param {string} componentName - Core component name, without prefix
+*/
+declare const VwcSimpleColorPicker: {
+    (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;
+        placement?: any;
+        swatchesPerRow?: number | undefined;
+        anchor?: any;
+        open?: boolean | undefined;
+        swatches?: any[] | undefined;
+        label?: string | undefined;
+        value?: string | undefined;
+        currentValue?: any;
+        initialValue?: string | undefined;
+        disabled?: boolean | undefined;
+        name?: string | undefined;
+        required?: boolean | undefined;
+        VIVID_VERSION?: string | undefined;
+        componentName?: string | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcSimpleColorPicker;

package/v3/VwcSimpleColorPicker/index.js

@@ -0,0 +1,500 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "",
+ "name": "SimpleColorPicker",
+ "slots": [
+  {
+   "description": "Slot for attaching the toggle button",
+   "name": "anchor"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "placement",
+   "type": {
+    "text": "Placement | undefined"
+   },
+   "default": "'top-start'",
+   "description": "Placement of the popup with color swatches",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "swatchesPerRow",
+   "type": {
+    "text": "number"
+   },
+   "default": "7",
+   "description": "Number of swatches per row for grid layout",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "anchor",
+   "type": {
+    "text": "AnchorType | undefined"
+   },
+   "description": "ID or direct reference to the component's anchor element.",
+   "privacy": "public",
+   "inheritedFrom": {
+    "name": "Anchored",
+    "module": "src/shared/patterns/anchored.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "#updateAnchorEl",
+   "privacy": "private",
+   "inheritedFrom": {
+    "name": "Anchored",
+    "module": "src/shared/patterns/anchored.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "#observer",
+   "privacy": "private",
+   "type": {
+    "text": "MutationObserver | undefined"
+   },
+   "inheritedFrom": {
+    "name": "Anchored",
+    "module": "src/shared/patterns/anchored.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "#observeMissingAnchor",
+   "privacy": "private",
+   "inheritedFrom": {
+    "name": "Anchored",
+    "module": "src/shared/patterns/anchored.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "#cleanupObserverIfNeeded",
+   "privacy": "private",
+   "inheritedFrom": {
+    "name": "Anchored",
+    "module": "src/shared/patterns/anchored.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "open",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates whether the popup is open",
+   "privacy": "public",
+   "inheritedFrom": {
+    "name": "BaseColorPicker",
+    "module": "src/shared/color-picker/base-color-picker.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "swatches",
+   "type": {
+    "text": "ColorSwatch[]"
+   },
+   "default": "[]",
+   "description": "List of color swatches, has to be an array of objects\n\n### Examples",
+   "privacy": "public",
+   "inheritedFrom": {
+    "name": "BaseColorPicker",
+    "module": "src/shared/color-picker/base-color-picker.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "label",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "The label for the form element.",
+   "inheritedFrom": {
+    "name": "FormElement",
+    "module": "src/shared/patterns/form-elements/form-element.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "#handleInvalidEvent",
+   "privacy": "private",
+   "inheritedFrom": {
+    "name": "FormElement",
+    "module": "src/shared/patterns/form-elements/form-element.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "validity",
+   "type": {
+    "text": "ValidityState"
+   },
+   "description": "Returns the validity state of the element",
+   "readonly": true,
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "form",
+   "type": {
+    "text": "HTMLFormElement | null"
+   },
+   "description": "Retrieve a reference to the associated form.\nReturns null if not associated to any form.",
+   "readonly": true,
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "validationMessage",
+   "type": {
+    "text": "string"
+   },
+   "description": "Retrieve the localized validation message,\nor custom validation message if set.",
+   "readonly": true,
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "willValidate",
+   "type": {
+    "text": "boolean"
+   },
+   "description": "Whether the element will be validated when the\nform is submitted",
+   "readonly": true,
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "labels",
+   "type": {
+    "text": "ReadonlyArray<Node>"
+   },
+   "description": "A reference to all associated label elements",
+   "readonly": true,
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "value",
+   "type": {
+    "text": "string"
+   },
+   "description": "The current value of the element.",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "currentValue",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "initialValue",
+   "type": {
+    "text": "string"
+   },
+   "description": "The default value of the element. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "disabled",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Sets the element's disabled state. A disabled element will not be included during form submission.",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "name",
+   "type": {
+    "text": "string"
+   },
+   "description": "The name of the element. This element's value will be surfaced during form submission under the provided name.",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "required",
+   "type": {
+    "text": "boolean"
+   },
+   "description": "Require the field to be completed prior to form submission.",
+   "default": "false",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "method",
+   "name": "checkValidity",
+   "return": {
+    "type": {
+     "text": "boolean"
+    }
+   },
+   "description": "Return the current validity of the element.",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "method",
+   "name": "reportValidity",
+   "return": {
+    "type": {
+     "text": "boolean"
+    }
+   },
+   "description": "Return the current validity of the element.\nIf false, fires an invalid event at the element.",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "VIVID_VERSION",
+   "static": true,
+   "default": "__PACKAGE_VERSION__",
+   "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+   "type": {
+    "text": "string"
+   },
+   "inheritedFrom": {
+    "name": "VividElement",
+    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "componentName",
+   "type": {
+    "text": "string"
+   },
+   "static": true,
+   "description": "Core component name, without prefix",
+   "inheritedFrom": {
+    "name": "VividElement",
+    "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+   }
+  }
+ ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires when the value changes",
+   "name": "change"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "placement",
+   "type": {
+    "text": "Placement | undefined"
+   },
+   "default": "'top-start'",
+   "description": "Placement of the popup with color swatches",
+   "fieldName": "placement"
+  },
+  {
+   "name": "swatches-per-row",
+   "type": {
+    "text": "number"
+   },
+   "default": "7",
+   "description": "Number of swatches per row for grid layout",
+   "fieldName": "swatchesPerRow"
+  },
+  {
+   "name": "anchor",
+   "type": {
+    "text": "AnchorType | undefined"
+   },
+   "description": "ID or direct reference to the component's anchor element.",
+   "fieldName": "anchor",
+   "inheritedFrom": {
+    "name": "Anchored",
+    "module": "src/shared/patterns/anchored.ts"
+   }
+  },
+  {
+   "name": "open",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates whether the popup is open",
+   "fieldName": "open",
+   "inheritedFrom": {
+    "name": "BaseColorPicker",
+    "module": "src/shared/color-picker/base-color-picker.ts"
+   }
+  },
+  {
+   "name": "label",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "The label for the form element.",
+   "fieldName": "label",
+   "inheritedFrom": {
+    "name": "FormElement",
+    "module": "src/shared/patterns/form-elements/form-element.ts"
+   }
+  },
+  {
+   "name": "current-value",
+   "type": {
+    "text": "string"
+   },
+   "description": "The current value of the element.",
+   "fieldName": "value",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "name": "value",
+   "type": {
+    "text": "string"
+   },
+   "description": "The default value of the element. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
+   "fieldName": "initialValue",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "name": "disabled",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Sets the element's disabled state. A disabled element will not be included during form submission.",
+   "fieldName": "disabled",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "name": "name",
+   "type": {
+    "text": "string"
+   },
+   "description": "The name of the element. This element's value will be surfaced during form submission under the provided name.",
+   "fieldName": "name",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  },
+  {
+   "name": "required",
+   "type": {
+    "text": "boolean"
+   },
+   "description": "Require the field to be completed prior to form submission.",
+   "default": "false",
+   "fieldName": "required",
+   "inheritedFrom": {
+    "name": "FormAssociated",
+    "module": "src/shared/foundation/form-associated/form-associated.ts"
+   }
+  }
+ ],
+ "mixins": [
+  {
+   "name": "Anchored",
+   "module": "/src/shared/patterns/anchored"
+  },
+  {
+   "name": "BaseColorPicker",
+   "module": "/src/shared/color-picker"
+  }
+ ],
+ "superclass": {
+  "name": "VividElement",
+  "module": "/src/shared/foundation/vivid-element/vivid-element"
+ },
+ "vividComponent": {
+  "public": true,
+  "name": "simple-color-picker",
+  "vueModels": [
+   {
+    "name": "modelValue",
+    "propName": "value",
+    "eventNames": [
+     "input"
+    ],
+    "valueMapping": "event.currentTarget.value"
+   }
+  ]
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerSimpleColorPicker } from '@vonage/vivid'
+
+registerSimpleColorPicker('vvd3')
+
+const VwcSimpleColorPicker = wrapper(`vvd3-simple-color-picker`,  {
+    events: [{"name":"change","propName":"onChange"}],
+    attributes: [],
+    properties: ['placement', 'swatchesPerRow', 'anchor', 'open', 'swatches', 'label', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+})
+
+VwcSimpleColorPicker.displayName = 'VwcSimpleColorPicker'
+
+export default VwcSimpleColorPicker