wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

package/dist/collection/components/slider-continuous/vds-basic-slider-continuous.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-basic-slider-continuous.js","sourceRoot":"","sources":["../../../src/components/slider-continuous/vds-basic-slider-continuous.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Event, Method, Element } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { AttachInternals, forceUpdate, HTMLStencilElement, Listen, State, Watch } from '@stencil/core/internal';\nimport { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from '../../utils/slider.utils';\n\n@Component({\n  tag: 'vds-basic-slider-continuous',\n  styleUrl: 'vds-basic-slider-continuous.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicSliderContinuous {\n  /** Sets the value of the slider..*/\n  @Prop() value: number;\n  /** Sets the size of the slider. */\n  @Prop() size: \"medium\" | \"large\" = \"medium\";\n  /** Sets the slider’s orientation. */\n  @Prop() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n  /** Sets the slider on disabled state. */\n  @Prop() disabled: boolean = false;\n  /** Sets the min value of the slider (Min value should always be lower than the max value). */\n  @Prop() minValue: number = 0;\n  /** Sets the max value of the slider..*/\n  @Prop() maxValue: number = 100;\n  /** Sets the amount of advance of the slider. */\n  @Prop() step: number;\n  /** Sets the aria label in slider */\n  @Prop() setAriaLabel: string;\n  /** Toggles the value over the thumb in the slider \n  * on - Always shows value over the thumb.\n  * off - Do not show the value over the thumb.\n  * auto - Shows value over the thumb when mouse hover.\n  */\n  @Prop() displayLabel: \"on\" | \"off\" | \"auto\" = \"on\";\n  /** Toggles the limit value (min and max) of the slider .*/\n  @Prop() displayLimits: boolean = true;\n  /** Sets colors of the slider.\n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   */\n  @Prop() colors: { [key: string]: string } | string;\n  /** Sets the thumb icon */\n  @Prop() icon: string = \"thumb\";\n\n  /**  Emits updated input value */\n  @Event() changeInput: EventEmitter<number>;\n\n  @Element() host: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @State() displayLabelShowValue: boolean;\n\n  componentWillRender(): void {\n    logWarnings(this.value, this.maxValue, this.minValue);\n    this.setDefaultValues();\n  }\n\n  componentDidRender(): void {\n    this.setOutboundValues();\n  }\n\n  componentDidLoad(): void {\n    this.setInputValue();\n    this.setThumbPositionOnFirstLoad();\n  }\n\n  /**\n   * Sets the slider value to the specified value.\n   *\n   * @param {number} value - The new value for the slider.\n   * @returns {Promise<void>} A promise that resolves when the value is set.\n   */\n  @Method()\n  setValue(value: number): Promise<void> {\n    this.value = value;\n    return Promise.resolve();\n  }\n\n  /**\n   * Clears the slider value by setting it to the minimum value.\n   *\n   * @returns {Promise<void>} A promise that resolves when the value is cleared.\n   */\n  @Method()\n  clear(): Promise<void> {\n    this.value = this.minValue;\n    return Promise.resolve();\n  }\n\n  /**\n   * Sets slider value, shownValue and internals value for forms.\n   * Calculates the thumb position based on the value.\n   * Sets the track fill percentage.\n   * \n   * @returns {void}\n   */\n  @Watch(\"value\")\n  setInputValue(): void {\n    const stringValue = this.value.toString();\n    this.thumbPosition = this.getValuePosition();\n    this.shownValue = stringValue;\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(stringValue);\n    }\n    if (this.trackContainerEl && !this.customBackground) {\n      this.trackContainerEl.style.background = getTrackFillBasedOnValue(this.value, this.maxValue, this.minValue);\n    }\n    this.changeInput.emit(this.value);\n  }\n\n  /**\n   * Updates the thumb position and forces a component update on window resize.\n   *\n   * @private\n   * @ListensTo(\"resize\", {target: \"window\"})\n   */\n  @Listen(\"resize\", {target: \"window\"})\n  updateThumbAndTrackPosition(): void {\n    this.thumbPosition = this.getValuePosition();\n    forceUpdate(this);\n  }\n\n  private inputRangeEl: HTMLInputElement;\n  private trackContainerEl: HTMLElement;\n  private shownValue: string;\n  private thumbPosition: string;\n  private customBackground: boolean;\n  /**\n   * Sets the initial value of the slider to the minimum value if no value is provided.\n   * When value is provided, shownValue gets set.\n   *\n   * @private\n   */\n  private setDefaultValues(): void {\n    if (this.value === undefined || this.value === null) {\n      this.value = this.minValue;\n      this.shownValue = this.minValue.toString();\n    } else {\n      this.shownValue = this.value.toString();\n    }\n  }\n\n  /**\n   * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.\n   *\n   * @private\n   */\n    private setOutboundValues(): void {\n      if (this.value < this.minValue || this.value > this.maxValue) {\n        this.value = this.minValue;\n        this.shownValue = this.minValue.toString();\n      }\n    }\n\n  /** \n   * This is necessary to avoid converting thumbPosition into a State variable. When Thumb is State, it will render the component twice on every value change.\n   * When it has value on the first load, the component need to be re-render (forceUpdate) since \n   * we need the width of the slider which is only available after the component finish the first render\n   * \n   * @private\n   * @returns {void}\n   */\n  private setThumbPositionOnFirstLoad(): void {\n    if (this.value > this.minValue) {\n      this.updateThumbAndTrackPosition();\n    }\n  }\n\n  /**\n   * Sets the value of the slider to the specified in the event.\n   *\n   * @private\n   * @param {InputEvent} evt - The event emitted by the input.\n   * @returns {void}\n   */\n  private handleInputChange(evt: InputEvent): void {\n    const target = evt.target as HTMLInputElement; \n    const value = Number(target.value);\n    this.setValue(value);\n  }\n\n  /**\n   * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.\n   *\n   * @private\n   * @returns {void}\n   */\n  private handleInputMouseoverOrFocus() {\n    this.displayLabelShowValue = true;\n  }\n\n  /**\n   * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.\n   *\n   * @private\n   * @returns {void}\n   */\n  private handleInputMouseleaveOrBlur(): void {\n    this.displayLabelShowValue = false;\n  }\n\n  private getShowValue(): boolean {\n    let response = false;\n\n    switch(this.displayLabel) {\n      case \"off\":\n        response = false;\n        break;\n      case \"auto\":\n        response = this.displayLabelShowValue;\n        break;\n      case \"on\":\n        response = true;\n        break;\n      default:\n        response = false;\n    }\n\n    return response;\n  }\n\n  /**\n   * Calculates the CSS left position of the slider thumb based on the current value.\n   *\n   * @private\n   * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.\n   */\n  private getValuePosition(): string {\n    return getPositionBasedOnValue(this.inputRangeEl, this.host, this.maxValue, this.minValue, this.value, this.size);\n  }\n\n  /**\n   * Sets the custom colors for the slider based on the colors property.\n   * This colors have to be css variables by preferences that work in both dark and light mode.\n   * \n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   *\n   * @private\n   * @returns { [key: string]: string }\n   */\n  private setColors(): { [key: string]: string } {\n    const styles = {};\n    this.customBackground = false;\n    const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n\n    if (colors && colors[\"Track\"]) {\n      styles[\"--slider-track\"] = `var(--${colors[\"Track\"]})`;\n    }\n\n    if (colors && colors[\"TrackFill\"]) {\n      styles[\"--slider-track-fill\"] = `var(--${colors[\"TrackFill\"]})`;\n    }\n\n    if (colors && colors[\"Thumb\"]) {\n      styles[\"--slider-track-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n    }\n\n    if (colors && colors[\"Background\"]) {\n      styles[\"--slider-background\"] = `var(--${colors[\"Background\"]})`;\n      this.customBackground = true;\n    }\n\n    return styles;\n  }\n\n  private renderValueReferences(): HTMLStencilElement {\n\t\treturn (\n\t\t\t<div class=\"vds-slider__value-reference-container\">\n\t\t\t\t<div\n\t\t\t\t\tclass={combineClasses(\n\t\t\t\t\t\t\"vds-slider__value-reference\"\n\t\t\t\t\t)}\n\t\t\t\t>\n          <span>{this.minValue}</span>\n          <span>{this.maxValue}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n  private renderShownValue(): HTMLStencilElement {\n    return (\n      <div class={\"vds-slider__value-container\"}>\n        <div class=\"vds-slider__value-content\" style={{left: this.thumbPosition}}>\n          <div class=\"vds-slider__value\">\n            <div class={\"vds__tooltip-container\"}>\n              <span class={\"vds__tooltip-container-text\"}>{this.shownValue}</span>\n            </div>\n            {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderSlider() {\n    return (\n      <div class=\"vds-slider__input\">\n        <input\n          ref={(el): void => {\n            this.inputRangeEl = el;\n          }}\n          class={combineClasses(\n            \"vds-slider-input\"\n          )}\n          type=\"range\"\n          step={this.step}\n          onInput={(evt): void => this.handleInputChange(evt)}\n          onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n          onMouseLeave={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n          onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n          onBlur={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n          min={this.minValue}\n          max={this.maxValue}\n          value={this.value}\n          disabled={this.disabled}\n        />\n        <div class={`vds-slider__track`} ref={el => { if(el) this.trackContainerEl = el;}}></div>\n        <div class={\"vds-slider__thumb\"} style={{left: this.thumbPosition}}>\n          <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb\"></vds-icon>\n        </div>\n        {this.getShowValue() && this.renderShownValue()}\n      </div>\n    )\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(\"vds-slider\", this.disabled ? \"vds-slider--disabled\" : \"\")}>\n        <div \n          class={combineClasses(\n            \"vds-slider-continuous__container\",\n            `vds-slider-continuous__container--${this.size}`,\n            `vds-slider-continuous__container--orientation-${this.orientation}`,\n            this.colors ? \"vds-slider-continuous__container--custom-colors\" : \"vds-slider-continuous__container--colors\",\n            this.disabled ? \"vds-slider-continuous__container--disabled\" : \"\",\n            this.displayLimits ? \"vds-slider-continuous__container--display-limits\" : \"\"\n          )}\n          style={this.setColors()}\n        >\n          <div \n            class={combineClasses(\n              \"vds-slider-continuous__content\"\n            )}\n            aria-label={this.setAriaLabel}\n          >\n            {this.renderSlider()}\n          </div>\n          {this.displayLimits && this.renderValueReferences()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-basic-slider-continuous.js","sourceRoot":"","sources":["../../../src/components/slider-continuous/vds-basic-slider-continuous.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Event, Method, Element } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { AttachInternals, forceUpdate, HTMLStencilElement, Listen, State, Watch } from '@stencil/core/internal';\nimport { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from '../../utils/slider.utils';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-slider-continuous',\n  styleUrl: 'vds-basic-slider-continuous.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicSliderContinuous {\n  /** Sets the value of the slider..*/\n  @Prop() value: number;\n  /** Sets the size of the slider. */\n  @Prop() size: \"medium\" | \"large\" = \"medium\";\n  /** Sets the slider’s orientation. */\n  @Prop() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n  /** Sets the slider on disabled state. */\n  @Prop() disabled: boolean = false;\n  /** Sets the min value of the slider (Min value should always be lower than the max value). */\n  @Prop() minValue: number = 0;\n  /** Sets the max value of the slider..*/\n  @Prop() maxValue: number = 100;\n  /** Sets the amount of advance of the slider. */\n  @Prop() step: number;\n  /** Sets the aria label in slider */\n  @Prop() setAriaLabel: string;\n  /** Toggles the value over the thumb in the slider \n  * on - Always shows value over the thumb.\n  * off - Do not show the value over the thumb.\n  * auto - Shows value over the thumb when mouse hover.\n  */\n  @Prop() displayLabel: \"on\" | \"off\" | \"auto\" = \"on\";\n  /** Toggles the limit value (min and max) of the slider .*/\n  @Prop() displayLimits: boolean = true;\n  /** Sets colors of the slider.\n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   */\n  @Prop() colors: { [key: string]: string } | string;\n  /** Sets the thumb icon */\n  @Prop() icon: string = \"thumb\";\n\n  /**  Emits updated input value */\n  @Event() changeInput: EventEmitter<number>;\n\n  @Element() host: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @State() displayLabelShowValue: boolean;\n\n  componentWillRender(): void {\n    logWarnings(this.value, this.maxValue, this.minValue);\n    this.setDefaultValues();\n  }\n\n  componentDidRender(): void {\n    this.setOutboundValues();\n  }\n\n  componentDidLoad(): void {\n    this.setInputValue();\n    this.setThumbPositionOnFirstLoad();\n  }\n\n  /**\n   * Sets the slider value to the specified value.\n   *\n   * @param {number} value - The new value for the slider.\n   * @returns {Promise<void>} A promise that resolves when the value is set.\n   */\n  @Method()\n  setValue(value: number): Promise<void> {\n    this.value = value;\n    return Promise.resolve();\n  }\n\n  /**\n   * Clears the slider value by setting it to the minimum value.\n   *\n   * @returns {Promise<void>} A promise that resolves when the value is cleared.\n   */\n  @Method()\n  clear(): Promise<void> {\n    this.value = this.minValue;\n    return Promise.resolve();\n  }\n\n  /**\n   * Sets slider value, shownValue and internals value for forms.\n   * Calculates the thumb position based on the value.\n   * Sets the track fill percentage.\n   * \n   * @returns {void}\n   */\n  @Watch(\"value\")\n  setInputValue(): void {\n    if (this.value === null || this.value === undefined || isNaN(this.value)) {\n      this.value = this.minValue;\n    }\n\n    const stringValue = this.value.toString();\n    this.thumbPosition = this.getValuePosition();\n    this.shownValue = stringValue;\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(stringValue);\n    }\n    if (this.trackContainerEl && !this.customBackground) {\n      this.trackContainerEl.style.background = getTrackFillBasedOnValue(this.value, this.maxValue, this.minValue);\n    }\n    emitInputEvent(this.host, this.value.toString());\n    this.changeInput.emit(this.value);\n  }\n\n  /**\n   * Updates the thumb position and forces a component update on window resize.\n   *\n   * @private\n   * @ListensTo(\"resize\", {target: \"window\"})\n   */\n  @Listen(\"resize\", {target: \"window\"})\n  updateThumbAndTrackPosition(): void {\n    this.thumbPosition = this.getValuePosition();\n    forceUpdate(this);\n  }\n\n  private inputRangeEl: HTMLInputElement;\n  private trackContainerEl: HTMLElement;\n  private shownValue: string;\n  private thumbPosition: string;\n  private customBackground: boolean;\n  /**\n   * Sets the initial value of the slider to the minimum value if no value is provided.\n   * When value is provided, shownValue gets set.\n   *\n   * @private\n   */\n  private setDefaultValues(): void {\n    if (this.value === undefined || this.value === null) {\n      this.value = this.minValue;\n      this.shownValue = this.minValue.toString();\n    } else {\n      this.shownValue = this.value.toString();\n    }\n  }\n\n  /**\n   * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.\n   *\n   * @private\n   */\n    private setOutboundValues(): void {\n      if (this.value < this.minValue || this.value > this.maxValue) {\n        this.value = this.minValue;\n        this.shownValue = this.minValue.toString();\n      }\n    }\n\n  /** \n   * This is necessary to avoid converting thumbPosition into a State variable. When Thumb is State, it will render the component twice on every value change.\n   * When it has value on the first load, the component need to be re-render (forceUpdate) since \n   * we need the width of the slider which is only available after the component finish the first render\n   * \n   * @private\n   * @returns {void}\n   */\n  private setThumbPositionOnFirstLoad(): void {\n    if (this.value > this.minValue) {\n      this.updateThumbAndTrackPosition();\n    }\n  }\n\n  /**\n   * Sets the value of the slider to the specified in the event.\n   *\n   * @private\n   * @param {InputEvent} evt - The event emitted by the input.\n   * @returns {void}\n   */\n  private handleInputChange(evt: InputEvent): void {\n    const target = evt.target as HTMLInputElement; \n    const value = Number(target.value);\n    this.setValue(value);\n  }\n\n  /**\n   * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.\n   *\n   * @private\n   * @returns {void}\n   */\n  private handleInputMouseoverOrFocus() {\n    this.displayLabelShowValue = true;\n  }\n\n  /**\n   * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.\n   *\n   * @private\n   * @returns {void}\n   */\n  private handleInputMouseleaveOrBlur(): void {\n    this.displayLabelShowValue = false;\n  }\n\n  private getShowValue(): boolean {\n    let response = false;\n\n    switch(this.displayLabel) {\n      case \"off\":\n        response = false;\n        break;\n      case \"auto\":\n        response = this.displayLabelShowValue;\n        break;\n      case \"on\":\n        response = true;\n        break;\n      default:\n        response = false;\n    }\n\n    return response;\n  }\n\n  /**\n   * Calculates the CSS left position of the slider thumb based on the current value.\n   *\n   * @private\n   * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.\n   */\n  private getValuePosition(): string {\n    return getPositionBasedOnValue(this.inputRangeEl, this.host, this.maxValue, this.minValue, this.value, this.size);\n  }\n\n  /**\n   * Sets the custom colors for the slider based on the colors property.\n   * This colors have to be css variables by preferences that work in both dark and light mode.\n   * \n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   *\n   * @private\n   * @returns { [key: string]: string }\n   */\n  private setColors(): { [key: string]: string } {\n    const styles = {};\n    this.customBackground = false;\n    const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n\n    if (colors && colors[\"Track\"]) {\n      styles[\"--slider-track\"] = `var(--${colors[\"Track\"]})`;\n    }\n\n    if (colors && colors[\"TrackFill\"]) {\n      styles[\"--slider-track-fill\"] = `var(--${colors[\"TrackFill\"]})`;\n    }\n\n    if (colors && colors[\"Thumb\"]) {\n      styles[\"--slider-track-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n    }\n\n    if (colors && colors[\"Background\"]) {\n      styles[\"--slider-background\"] = `var(--${colors[\"Background\"]})`;\n      this.customBackground = true;\n    }\n\n    return styles;\n  }\n\n  private renderValueReferences(): HTMLStencilElement {\n\t\treturn (\n\t\t\t<div class=\"vds-slider__value-reference-container\">\n\t\t\t\t<div\n\t\t\t\t\tclass={combineClasses(\n\t\t\t\t\t\t\"vds-slider__value-reference\"\n\t\t\t\t\t)}\n\t\t\t\t>\n          <span>{this.minValue}</span>\n          <span>{this.maxValue}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n  private renderShownValue(): HTMLStencilElement {\n    return (\n      <div class={\"vds-slider__value-container\"}>\n        <div class=\"vds-slider__value-content\" style={{left: this.thumbPosition}}>\n          <div class=\"vds-slider__value\">\n            <div class={\"vds__tooltip-container\"}>\n              <span class={\"vds__tooltip-container-text\"}>{this.shownValue}</span>\n            </div>\n            {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderSlider() {\n    return (\n      <div class=\"vds-slider__input\">\n        <input\n          ref={(el): void => {\n            this.inputRangeEl = el;\n          }}\n          class={combineClasses(\n            \"vds-slider-input\"\n          )}\n          type=\"range\"\n          step={this.step}\n          onInput={(evt): void => this.handleInputChange(evt)}\n          onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n          onMouseLeave={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n          onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n          onBlur={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n          min={this.minValue}\n          max={this.maxValue}\n          value={this.value}\n          disabled={this.disabled}\n        />\n        <div class={`vds-slider__track`} ref={el => { if(el) this.trackContainerEl = el;}}></div>\n        <div class={\"vds-slider__thumb\"} style={{left: this.thumbPosition}}>\n          <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb\"></vds-icon>\n        </div>\n        {this.getShowValue() && this.renderShownValue()}\n      </div>\n    )\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(\"vds-slider\", this.disabled ? \"vds-slider--disabled\" : \"\")}>\n        <div \n          class={combineClasses(\n            \"vds-slider-continuous__container\",\n            `vds-slider-continuous__container--${this.size}`,\n            `vds-slider-continuous__container--orientation-${this.orientation}`,\n            this.colors ? \"vds-slider-continuous__container--custom-colors\" : \"vds-slider-continuous__container--colors\",\n            this.disabled ? \"vds-slider-continuous__container--disabled\" : \"\",\n            this.displayLimits ? \"vds-slider-continuous__container--display-limits\" : \"\"\n          )}\n          style={this.setColors()}\n        >\n          <div \n            class={combineClasses(\n              \"vds-slider-continuous__content\"\n            )}\n            aria-label={this.setAriaLabel}\n          >\n            {this.renderSlider()}\n          </div>\n          {this.displayLimits && this.renderValueReferences()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/slider-range-continuous/vds-basic-slider-range-continuous.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);

package/dist/collection/components/slider-range-continuous/vds-basic-slider-range-continuous.js

@@ -348,7 +348,7 @@ export class VdsBasicSliderRangeContinuous {
             }, class: combineClasses("vds-slider-input", "vds-slider-end-input", this.disabled ? "vds-slider-input--disabled" : ""), type: "range", step: this.step, onInput: (evt) => this.handleInputRangeChange(evt, "end"), onMouseOver: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus("end", "mouseover"); } : null, onMouseLeave: this.displayLabel === "auto" && this.displayLabelEndEventTriggerIn === "mouseover" ? () => { this.handleInputMouseleaveOrBlur("end"); } : null, onFocus: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus("end", "focus"); } : null, onBlur: this.displayLabel === "auto" && this.displayLabelEndEventTriggerIn === "focus" ? () => { this.handleInputMouseleaveOrBlur("end"); } : null, min: this.minValue, max: this.maxValue, value: this.endValue, disabled: this.disabled })));
     }
     render() {
-        return (h(Host, { key: '1a36c7b7b940839390060831def1cc9ce1b508fa', class: this.disabled ? "vds-slider-range--disabled" : "" }, h("div", { key: 'e347611a2df950b13b8e9b3677cad4624d7b98b1', class: combineClasses("vds-slider-range__container", `vds-slider-range__container--${this.size}`, `vds-slider-range__container--orientation-${this.orientation}`, this.colors ? "vds-slider-range__container--custom-colors" : "vds-slider-range__container--colors", this.disabled ? "vds-slider-range__container--disabled" : "", this.displayLimits ? "vds-slider-range__container--display-limits" : ""), style: this.setColors() }, h("div", { key: '84db23e3f322b84617f4a9feed861425f37d1883', class: "vds-slider-range__content", "aria-label": this.setAriaLabel }, this.getShowValue() && this.renderShownValue("start"), this.getShowValue() && this.renderShownValue("end"), this.renderSliders()), this.displayLimits && this.renderValueReferences())));
+        return (h(Host, { key: 'a65408aa36c076e182eb11cfa3703fa3457f576e', class: this.disabled ? "vds-slider-range--disabled" : "" }, h("div", { key: '4312632b2fe4a15ff74087a0e98eaf4ecc5c0c33', class: combineClasses("vds-slider-range__container", `vds-slider-range__container--${this.size}`, `vds-slider-range__container--orientation-${this.orientation}`, this.colors ? "vds-slider-range__container--custom-colors" : "vds-slider-range__container--colors", this.disabled ? "vds-slider-range__container--disabled" : "", this.displayLimits ? "vds-slider-range__container--display-limits" : ""), style: this.setColors() }, h("div", { key: '22efb23ad6a32ec6794463a02e3ea9a736807a6a', class: "vds-slider-range__content", "aria-label": this.setAriaLabel }, this.getShowValue() && this.renderShownValue("start"), this.getShowValue() && this.renderShownValue("end"), this.renderSliders()), this.displayLimits && this.renderValueReferences())));
     }
     static get is() { return "vds-basic-slider-range-continuous"; }
     static get encapsulation() { return "shadow"; }
@@ -366,7 +366,6 @@ export class VdsBasicSliderRangeContinuous {
         return {
             "startValue": {
                 "type": "number",
-                "attribute": "start-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -381,11 +380,11 @@ export class VdsBasicSliderRangeContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "start-value"
             },
             "endValue": {
                 "type": "number",
-                "attribute": "end-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -400,11 +399,11 @@ export class VdsBasicSliderRangeContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "end-value"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"medium\" | \"large\"",
@@ -420,11 +419,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "orientation": {
                 "type": "string",
-                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "\"horizontal\" | \"vertical\"",
@@ -440,11 +439,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "\"horizontal\""
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -460,11 +459,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "minValue": {
                 "type": "number",
-                "attribute": "min-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -480,11 +479,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "min-value",
                 "defaultValue": "0"
             },
             "maxValue": {
                 "type": "number",
-                "attribute": "max-value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -500,11 +499,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-value",
                 "defaultValue": "100"
             },
             "step": {
                 "type": "number",
-                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -520,11 +519,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "step",
                 "defaultValue": "1"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -539,11 +538,11 @@ export class VdsBasicSliderRangeContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             },
             "displayLabel": {
                 "type": "string",
-                "attribute": "display-label",
                 "mutable": false,
                 "complexType": {
                     "original": "\"on\" | \"off\" | \"auto\"",
@@ -559,11 +558,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-label",
                 "defaultValue": "\"on\""
             },
             "displayLimits": {
                 "type": "boolean",
-                "attribute": "display-limits",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -579,11 +578,11 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-limits",
                 "defaultValue": "true"
             },
             "colors": {
                 "type": "string",
-                "attribute": "colors",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string } | string",
@@ -598,11 +597,11 @@ export class VdsBasicSliderRangeContinuous {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "colors"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -618,6 +617,7 @@ export class VdsBasicSliderRangeContinuous {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon",
                 "defaultValue": "\"thumb\""
             }
         };