@vonage/vivid-react/v3/VwcRangeSlider/index.js

Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings

/*
* 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"
    }
   ]
  },
  {
   "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": "pin",
   "type": {
    "text": "boolean"
   },
   "default": "false",
   "description": "Show current values on the thumbs.",
   "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": "method",
   "name": "#getThumbId",
   "return": {
    "type": {
     "text": "ThumbId"
    }
   },
   "parameters": [
    {
     "name": "thumb",
     "type": {
      "text": "HTMLElement"
     }
    }
   ]
  },
  {
   "kind": "method",
   "name": "#getThumbIdFromEvent",
   "return": {
    "type": {
     "text": "ThumbId"
    }
   },
   "parameters": [
    {
     "name": "e",
     "type": {
      "text": "Event"
     }
    }
   ]
  },
  {
   "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": "ThumbId"
     }
    },
    {
     "name": "value",
     "type": {
      "text": "number"
     }
    }
   ]
  },
  {
   "kind": "field",
   "name": "#isNonVisibleFocus",
   "privacy": "private",
   "type": {
    "text": "boolean"
   },
   "default": "false"
  },
  {
   "kind": "method",
   "name": "#focusThumbNonVisibly",
   "parameters": [
    {
     "name": "thumb",
     "type": {
      "text": "HTMLElement"
     }
    }
   ]
  },
  {
   "kind": "method",
   "name": "#registerThumbListeners"
  },
  {
   "kind": "method",
   "name": "#unregisterThumbListeners"
  },
  {
   "kind": "field",
   "name": "#onThumbFocus",
   "privacy": "private"
  },
  {
   "kind": "field",
   "name": "#onThumbBlur",
   "privacy": "private"
  },
  {
   "kind": "field",
   "name": "#onMouseOver",
   "privacy": "private"
  },
  {
   "kind": "field",
   "name": "#onMouseOut",
   "privacy": "private"
  },
  {
   "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": "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": "Event emitted when the start value changes",
   "name": "input:start"
  },
  {
   "type": {
    "text": "CustomEvent<undefined>"
   },
   "description": "Event emitted when the end value changes",
   "name": "input:end"
  },
  {
   "type": {
    "text": "CustomEvent<undefined>"
   },
   "description": "Event emitted when either the start or end value changes.",
   "name": "input"
  },
  {
   "type": {
    "text": "CustomEvent<undefined>"
   },
   "description": "Event emitted when either the start or end value changes.",
   "name": "change"
  }
 ],
 "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"
  },
  {
   "name": "min",
   "type": {
    "text": "number"
   },
   "default": "0",
   "description": "The minimum value of the range.",
   "fieldName": "min"
  },
  {
   "name": "max",
   "type": {
    "text": "number"
   },
   "default": "10",
   "description": "The maximum value of the range.",
   "fieldName": "max"
  },
  {
   "name": "step",
   "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"
  },
  {
   "name": "markers",
   "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"
  },
  {
   "name": "pin",
   "type": {
    "text": "boolean"
   },
   "default": "false",
   "description": "Show current values on the thumbs.",
   "fieldName": "pin"
  },
  {
   "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": "Localized",
   "module": "/src/shared/patterns"
  },
  {
   "name": "FormElement",
   "module": "/src/shared/patterns"
  },
  {
   "name": "FormAssociated",
   "module": "/src/shared/foundation/form-associated/form-associated"
  }
 ],
 "superclass": {
  "name": "VividElement",
  "module": "/src/shared/foundation/vivid-element/vivid-element"
 },
 "vividComponent": {
  "name": "range-slider",
  "public": true,
  "vueModels": [
   {
    "name": "start",
    "propName": "start",
    "eventNames": [
     "input:start"
    ],
    "valueMapping": "event.currentTarget.start"
   },
   {
    "name": "end",
    "propName": "end",
    "eventNames": [
     "input:end"
    ],
    "valueMapping": "event.currentTarget.end"
   },
   {
    "name": "startAsNumber",
    "propName": "startAsNumber",
    "eventNames": [
     "input:start"
    ],
    "valueMapping": "event.currentTarget.startAsNumber"
   },
   {
    "name": "endAsNumber",
    "propName": "endAsNumber",
    "eventNames": [
     "input:end"
    ],
    "valueMapping": "event.currentTarget.endAsNumber"
   }
  ]
 },
 "vividTesting": {
  "selectors": [
   {
    "name": "byLabel",
    "args": [
     "byLabel"
    ]
   }
  ],
  "actions": [
   {
    "name": "slideStartTo",
    "args": [
     "slideTo",
     "#track",
     "#startThumb"
    ]
   },
   {
    "name": "slideEndTo",
    "args": [
     "slideTo",
     "#track",
     "#endThumb"
    ]
   }
  ],
  "queries": [
   {
    "name": "range",
    "args": [
     "rangeAsNumber"
    ]
   }
  ],
  "refs": [
   {
    "name": "track",
    "args": [
     "shadow",
     ".control"
    ]
   },
   {
    "name": "startThumb",
    "args": [
     "shadow",
     "#start-thumb"
    ]
   },
   {
    "name": "endThumb",
    "args": [
     "shadow",
     "#end-thumb"
    ]
   }
  ]
 }
}
*/
import wrapper from '@vonage/vivid-react-wrapper'
import { registerRangeSlider } from '@vonage/vivid'

registerRangeSlider('vvd3')

const VwcRangeSlider = wrapper(`vvd3-range-slider`,  {
    events: [{"name":"change","propName":"onChange"},{"name":"input","propName":"onInput"},{"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', 'pin', 'valueTextFormatter', 'label', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
})

VwcRangeSlider.displayName = 'VwcRangeSlider'

export default VwcRangeSlider