wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,765 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { getPositionBasedOnValue, logWarnings } from "../../utils/slider.utils";
+import { forceUpdate } from "@stencil/core/internal";
+import { countDecimalPlaces } from "../../utils/number-utils";
+export class VdsBasicSliderRangeContinuous {
+    constructor() {
+        /** Sets the size of the slider. */
+        this.size = "medium";
+        /** Sets the slider’s orientation. */
+        this.orientation = "horizontal";
+        /** Sets the slider on disabled state. */
+        this.disabled = false;
+        /** Sets the min value of the slider (Min value should always be lower than the max value). */
+        this.minValue = 0;
+        /** Sets the max value of the slider..*/
+        this.maxValue = 100;
+        /** Sets the amount of advance of the slider. */
+        this.step = 1;
+        /** Toggles the value over the thumb in the slider
+        * on - Always shows value over the thumb.
+        * off - Do not show the value over the thumb.
+        * auto - Shows value over the thumb when mouse hover.
+        */
+        this.displayLabel = "on";
+        /** Toggles the limit value (min and max) of the slider .*/
+        this.displayLimits = true;
+        /** Sets the thumb icon */
+        this.icon = "thumb";
+    }
+    componentWillRender() {
+        logWarnings({ start: this.startValue, end: this.endValue }, this.maxValue, this.minValue);
+        this.setDefaultValues();
+    }
+    componentDidRender() {
+        this.setOutboundValues();
+    }
+    componentDidLoad() {
+        this.setInputStartValue();
+        this.setInputEndValue();
+        forceUpdate(this);
+    }
+    /**
+     * Sets the slider startValue and endValue to the specified value.
+     *
+     * @param { startValue: number; endValue: number } values - The new values for the slider.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    setValues({ startValue, endValue }) {
+        this.startValue = startValue;
+        this.endValue = endValue;
+        return Promise.resolve();
+    }
+    /**
+     * Gets the slider startValue and endValue.
+     *
+     * @returns {Promise<{ startValue: number; endValue: number }>} A promise that resolves the values.
+     */
+    getValues() {
+        return Promise.resolve({ startValue: this.startValue, endValue: this.endValue });
+    }
+    /**
+     * Clears the slider range values by setting it to the minimum and maximun value respectively.
+     *
+     * @returns {Promise<void>} A promise that resolves when the value is cleared.
+     */
+    clear() {
+        this.startValue = this.minValue;
+        this.endValue = this.maxValue;
+        return Promise.resolve();
+    }
+    /**
+     * Focus the slider range by focusing start slider.
+     *
+     * @returns {Promise<void>} A promise that resolves when the first slider is focused.
+     */
+    setFocus() {
+        this.startInputRangeEl.focus();
+        return Promise.resolve();
+    }
+    /**
+     * Sets slider startThumbPosition, startShownValue.
+     * Calculates the start thumb position based on the value.
+     * Emits changeRangeValue event
+     *
+     * @returns {void}
+     */
+    setInputStartValue() {
+        const stringValue = this.startValue.toString();
+        this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);
+        this.startShownValue = stringValue;
+        this.changeRangeValue.emit({ startValue: this.startValue, endValue: this.endValue });
+    }
+    /**
+     * Sets slider endThumbPosition, endShownValue.
+     * Calculates the end thumb position based on the value.
+     * Emits changeRangeValue event
+     *
+     * @returns {void}
+     */
+    setInputEndValue() {
+        const stringValue = this.endValue.toString();
+        this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);
+        this.endShownValue = stringValue;
+        this.changeRangeValue.emit({ startValue: this.startValue, endValue: this.endValue });
+    }
+    /**
+     * Updates the thumb position and forces a component update on window resize.
+     *
+     * @ListensTo("resize", {target: "window"})
+     */
+    updateThumbAndTrackPosition() {
+        this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);
+        this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);
+        forceUpdate(this);
+    }
+    /**
+     * Focus the first slider when displayLabel is set to auto.
+     *
+     * @ListensTo("focus")
+     */
+    setFocusOnDisplayLabelAuto() {
+        if (this.displayLabel === "auto") {
+            this.setFocus();
+        }
+    }
+    /**
+     * Sets the initial value of the slider to the minimum and maximum value when start and end value are not provided.
+     * When values are provided, shownValues get set.
+     *
+     * @private
+     */
+    setDefaultValues() {
+        if (this.startValue === undefined || this.startValue === null) {
+            this.startValue = this.minValue;
+            this.startShownValue = this.minValue.toString();
+        }
+        else {
+            this.startShownValue = this.startValue.toString();
+        }
+        if (this.endValue === undefined || this.endValue === null) {
+            this.endValue = this.maxValue;
+            this.endShownValue = this.maxValue.toString();
+        }
+        else {
+            this.endShownValue = this.endValue.toString();
+        }
+    }
+    /**
+     * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.
+     *
+     * @private
+     */
+    setOutboundValues() {
+        if (this.startValue < this.minValue) {
+            this.startValue = this.minValue;
+            this.startShownValue = this.minValue.toString();
+        }
+        if (this.endValue > this.maxValue) {
+            this.endValue = this.maxValue;
+            this.endShownValue = this.maxValue.toString();
+        }
+    }
+    /**
+     * Calculates the CSS left position of the slider thumb based on the current value.
+     *
+     * @private
+     * @params value - number
+     * @params inputRangeEl - HTMLInputElement
+     * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.
+     */
+    getValuePosition(value, inputRangeEl) {
+        return getPositionBasedOnValue(inputRangeEl, this.host, this.maxValue, this.minValue, value, this.size);
+    }
+    /**
+     * Sets the start/end value of the slider range to the specified in the event.
+     *
+     * @private
+     * @param {InputEvent} evt - The event emitted by the input.
+     * @param {SliderRangeValueType} rangeType - start | end slider.
+     * @returns {void}
+     */
+    handleInputRangeChange(evt, rangeType) {
+        const target = evt.target;
+        const rawValue = Number(target.value);
+        if (rangeType === "start" && rawValue >= this.minValue) {
+            const value = Math.min(rawValue, this.endValue);
+            this.startValue = value;
+            this.startInputRangeEl.value = value.toString();
+        }
+        if (rangeType === "end" && rawValue <= this.maxValue) {
+            const value = Math.max(rawValue, this.startValue);
+            this.endValue = value;
+            this.endInputRangeEl.value = value.toString();
+        }
+    }
+    /**
+     * Handles mouseover or focus events on the slider.
+     * Sets the `displayLabelShowValue` flag to `true` to indicate that the display label should show the value.
+     *
+     * @private
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end").
+     * @param {"mouseover" | "focus"} eventTrigger - The type of event that triggered this function.
+     * @returns {void}
+     */
+    handleInputMouseoverOrFocus(rangeType, eventTrigger) {
+        this.displayLabelShowValue = true;
+        if (rangeType === "start") {
+            this.displayLabelStartEventTriggerIn = eventTrigger;
+            setTimeout(() => {
+                this.startInputRangeEl.focus();
+            });
+        }
+        if (rangeType === "end") {
+            this.displayLabelEndEventTriggerIn = eventTrigger;
+            this.endInputRangeEl.focus();
+        }
+    }
+    /**
+     * Handles mouseleave or blur events on the slider.
+     * Sets the `displayLabelShowValue` flag to `false` to hide the value in the display label.
+     *
+     * @private
+     * @param {SliderRangeValueType} rangeType - The type of range (either "start" or "end").
+     * @returns {void}
+     */
+    handleInputMouseleaveOrBlur(rangeType) {
+        this.displayLabelShowValue = false;
+        if (rangeType === "start") {
+            this.displayLabelStartEventTriggerIn = undefined;
+        }
+        if (rangeType === "end") {
+            this.displayLabelEndEventTriggerIn = undefined;
+        }
+    }
+    /**
+     * Handles click events on the slider track.
+     * Calculates the corresponding value based on the click position and updates the slider's start or end value accordingly.
+     *
+     * @private
+     * @param {MouseEvent} evt - The mouse event object.
+     * @returns {void}
+     */
+    handleTrackClick(evt) {
+        if (!this.disabled) {
+            // Calc the related value to the pixel that was clicked.
+            let valueFromPixel = (evt.offsetX * (this.maxValue - this.minValue)) / this.trackContentContainerEl.offsetWidth + this.minValue;
+            const decimalPlaces = countDecimalPlaces(this.step);
+            valueFromPixel = decimalPlaces === 0 ? Math.round(valueFromPixel) : parseFloat(valueFromPixel.toFixed(decimalPlaces));
+            const closestValue = [this.startValue, this.endValue].reduce((a, b) => {
+                return Math.abs(b - valueFromPixel) < Math.abs(a - valueFromPixel) ? b : a;
+            });
+            switch (true) {
+                case closestValue === this.startValue && closestValue === this.endValue && valueFromPixel < closestValue:
+                    this.startValue = valueFromPixel;
+                    break;
+                case closestValue === this.startValue && closestValue === this.endValue && valueFromPixel > closestValue:
+                    this.endValue = valueFromPixel;
+                    break;
+                case closestValue === this.startValue:
+                    this.startValue = valueFromPixel;
+                    break;
+                case closestValue === this.endValue:
+                    this.endValue = valueFromPixel;
+                    break;
+            }
+        }
+    }
+    /**
+     * Determines whether the value should be displayed in the label based on the current displayLabel setting.
+     *
+     * @private
+     * @returns {boolean} - True if the value should be displayed, false otherwise.
+     */
+    getShowValue() {
+        let response = false;
+        switch (this.displayLabel) {
+            case "off":
+                response = false;
+                break;
+            case "auto":
+                response = this.displayLabelShowValue;
+                break;
+            case "on":
+                response = true;
+                break;
+            default:
+                response = false;
+        }
+        return response;
+    }
+    /**
+     * Sets the custom colors for the slider based on the colors property.
+     * This colors have to be css variables by preferences that work in both dark and light mode.
+     *
+     * Track - ThemeColors
+     * TrackFill - ThemeColors
+     * Thumb - ThemeColors
+     * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.
+     *
+     * @private
+     * @returns { [key: string]: string }
+     */
+    setColors() {
+        const styles = {};
+        const colors = typeof this.colors === "string" ? JSON.parse(this.colors) : this.colors;
+        if (colors && colors["Track"]) {
+            styles["--slider-track"] = `var(--${colors["Track"]})`;
+        }
+        if (colors && colors["TrackFill"]) {
+            styles["--slider-track-fill"] = `var(--${colors["TrackFill"]})`;
+        }
+        if (colors && colors["Thumb"]) {
+            styles["--slider-track-start-thumb"] = `var(--${colors["Thumb"]})`;
+            styles["--slider-track-end-thumb"] = `var(--${colors["Thumb"]})`;
+        }
+        if (colors && colors["Background"]) {
+            styles["--slider-background"] = `var(--${colors["Background"]})`;
+        }
+        return styles;
+    }
+    renderShownValue(rangeType) {
+        if (rangeType === "start") {
+            return (h("div", { class: "vds-slider-range__value-container" }, h("div", { class: "vds-slider-range__value-content", style: { left: this.startThumbPosition } }, h("div", { class: "vds-slider-range__value" }, h("div", { class: "vds__tooltip-container" }, h("span", { class: "vds__tooltip-container-text" }, this.startShownValue)), this.orientation !== "vertical" && h("vds-icon", { class: "tooltip-arrow", svgIcon: "caret-down-filled" })))));
+        }
+        if (rangeType === "end") {
+            return (h("div", { class: "vds-slider-range__value-container" }, h("div", { class: "vds-slider-range__value-content", style: { left: this.endThumbPosition } }, h("div", { class: "vds-slider-range__value" }, h("div", { class: "vds__tooltip-container" }, h("span", { class: "vds__tooltip-container-text" }, this.endShownValue)), this.orientation !== "vertical" && h("vds-icon", { class: "tooltip-arrow", svgIcon: "caret-down-filled" })))));
+        }
+    }
+    renderValueReferences() {
+        return (h("div", { class: "vds-slider-range__value-reference-container" }, h("div", { class: combineClasses("vds-slider-range__value-reference") }, h("span", null, this.minValue), h("span", null, this.maxValue))));
+    }
+    renderSliders() {
+        return (h("div", { class: "vds-slider-range-input__content" }, h("div", { class: "vds-slider-range", onClick: (evt) => this.handleTrackClick(evt), ref: (el) => {
+                if (el) {
+                    this.trackContentContainerEl = el;
+                }
+            } }, h("div", { class: "vds-slider-range__track" }), h("div", { class: "vds-slider-range__range", style: { width: `calc(${this.endThumbPosition} - ${this.startThumbPosition})`, left: `${this.startThumbPosition}` }, ref: (el) => {
+                this.trackRangeFillContainerEl = el;
+            } }), h("div", { class: "vds-slider-range__thumb vds-slider-range__thumb--start", style: { left: `${this.startThumbPosition}` } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb slider-start-thumb" })), h("div", { class: "vds-slider-range__thumb vds-slider-range__thumb--end", style: { left: `${this.endThumbPosition}` } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb slider-end-thumb" }))), h("input", { ref: (el) => {
+                if (el) {
+                    this.startInputRangeEl = el;
+                }
+            }, class: combineClasses("vds-slider-input", "vds-slider-start-input", this.disabled ? "vds-slider-input--disabled" : ""), type: "range", step: this.step, onInput: (evt) => this.handleInputRangeChange(evt, "start"), onMouseOver: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus("start", "mouseover"); } : null, onMouseLeave: this.displayLabel === "auto" && this.displayLabelStartEventTriggerIn === "mouseover" ? () => { this.handleInputMouseleaveOrBlur("start"); } : null, onFocus: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus("start", "focus"); } : null, onBlur: this.displayLabel === "auto" && this.displayLabelStartEventTriggerIn === "focus" ? () => { this.handleInputMouseleaveOrBlur("start"); } : null, min: this.minValue, max: this.maxValue, value: this.startValue, disabled: this.disabled }), h("input", { ref: (el) => {
+                if (el) {
+                    this.endInputRangeEl = el;
+                }
+            }, 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())));
+    }
+    static get is() { return "vds-basic-slider-range-continuous"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-slider-range-continuous.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-slider-range-continuous.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "startValue": {
+                "type": "number",
+                "attribute": "start-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the start value of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "endValue": {
+                "type": "number",
+                "attribute": "end-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the start value of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the size of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "orientation": {
+                "type": "string",
+                "attribute": "orientation",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the slider\u2019s orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"horizontal\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the slider on disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "minValue": {
+                "type": "number",
+                "attribute": "min-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the min value of the slider (Min value should always be lower than the max value)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "maxValue": {
+                "type": "number",
+                "attribute": "max-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the max value of the slider.."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "attribute": "step",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of advance of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "setAriaLabel": {
+                "type": "string",
+                "attribute": "set-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria label in slider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "displayLabel": {
+                "type": "string",
+                "attribute": "display-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"on\" | \"off\" | \"auto\"",
+                    "resolved": "\"auto\" | \"off\" | \"on\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the value over the thumb in the slider \non - Always shows value over the thumb.\noff - Do not show the value over the thumb.\nauto - Shows value over the thumb when mouse hover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"on\""
+            },
+            "displayLimits": {
+                "type": "boolean",
+                "attribute": "display-limits",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the limit value (min and max) of the slider ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "colors": {
+                "type": "string",
+                "attribute": "colors",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string } | string",
+                    "resolved": "string | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets colors of the slider.\nTrack - ThemeColors\nTrackFill - ThemeColors\nThumb - ThemeColors\nBackground - ThemeColors - When specified, trackfill and track won't work. It will only be one background display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the thumb icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"thumb\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayLabelShowValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeRangeValue",
+                "name": "changeRangeValue",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits updated input value"
+                },
+                "complexType": {
+                    "original": "{ startValue: number; endValue: number }",
+                    "resolved": "{ startValue: number; endValue: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValues": {
+                "complexType": {
+                    "signature": "({ startValue, endValue }: { startValue: number; endValue: number; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ startValue: number; endValue: number; }",
+                            "docs": ": number; endValue: number } values - The new values for the slider."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the slider startValue and endValue to the specified value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": " : number; endValue: number } values - The new values for the slider."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the value is set."
+                        }]
+                }
+            },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<{ startValue: number; endValue: number; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ startValue: number; endValue: number; }>"
+                },
+                "docs": {
+                    "text": "Gets the slider startValue and endValue.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves the values."
+                        }]
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the slider range values by setting it to the minimum and maximun value respectively.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the value is cleared."
+                        }]
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the slider range by focusing start slider.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the first slider is focused."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "startValue",
+                "methodName": "setInputStartValue"
+            }, {
+                "propName": "endValue",
+                "methodName": "setInputEndValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "updateThumbAndTrackPosition",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focus",
+                "method": "setFocusOnDisplayLabelAuto",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-basic-slider-range-continuous.js.map