wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,575 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { forceUpdate } from "@stencil/core/internal";
+import { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from "../../utils/slider.utils";
+export class VdsBasicSliderContinuous {
+    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;
+        /** 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(this.value, this.maxValue, this.minValue);
+        this.setDefaultValues();
+    }
+    componentDidRender() {
+        this.setOutboundValues();
+    }
+    componentDidLoad() {
+        this.setInputValue();
+        this.setThumbPositionOnFirstLoad();
+    }
+    /**
+     * Sets the slider value to the specified value.
+     *
+     * @param {number} value - The new value for the slider.
+     * @returns {Promise<void>} A promise that resolves when the value is set.
+     */
+    setValue(value) {
+        this.value = value;
+        return Promise.resolve();
+    }
+    /**
+     * Clears the slider value by setting it to the minimum value.
+     *
+     * @returns {Promise<void>} A promise that resolves when the value is cleared.
+     */
+    clear() {
+        this.value = this.minValue;
+        return Promise.resolve();
+    }
+    /**
+     * Sets slider value, shownValue and internals value for forms.
+     * Calculates the thumb position based on the value.
+     * Sets the track fill percentage.
+     *
+     * @returns {void}
+     */
+    setInputValue() {
+        const stringValue = this.value.toString();
+        this.thumbPosition = this.getValuePosition();
+        this.shownValue = stringValue;
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(stringValue);
+        }
+        if (this.trackContainerEl && !this.customBackground) {
+            this.trackContainerEl.style.background = getTrackFillBasedOnValue(this.value, this.maxValue, this.minValue);
+        }
+        this.changeInput.emit(this.value);
+    }
+    /**
+     * Updates the thumb position and forces a component update on window resize.
+     *
+     * @private
+     * @ListensTo("resize", {target: "window"})
+     */
+    updateThumbAndTrackPosition() {
+        this.thumbPosition = this.getValuePosition();
+        forceUpdate(this);
+    }
+    /**
+     * Sets the initial value of the slider to the minimum value if no value is provided.
+     * When value is provided, shownValue gets set.
+     *
+     * @private
+     */
+    setDefaultValues() {
+        if (this.value === undefined || this.value === null) {
+            this.value = this.minValue;
+            this.shownValue = this.minValue.toString();
+        }
+        else {
+            this.shownValue = this.value.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.value < this.minValue || this.value > this.maxValue) {
+            this.value = this.minValue;
+            this.shownValue = this.minValue.toString();
+        }
+    }
+    /**
+     * 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.
+     * When it has value on the first load, the component need to be re-render (forceUpdate) since
+     * we need the width of the slider which is only available after the component finish the first render
+     *
+     * @private
+     * @returns {void}
+     */
+    setThumbPositionOnFirstLoad() {
+        if (this.value > this.minValue) {
+            this.updateThumbAndTrackPosition();
+        }
+    }
+    /**
+     * Sets the value of the slider to the specified in the event.
+     *
+     * @private
+     * @param {InputEvent} evt - The event emitted by the input.
+     * @returns {void}
+     */
+    handleInputChange(evt) {
+        const target = evt.target;
+        const value = Number(target.value);
+        this.setValue(value);
+    }
+    /**
+     * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.
+     *
+     * @private
+     * @returns {void}
+     */
+    handleInputMouseoverOrFocus() {
+        this.displayLabelShowValue = true;
+    }
+    /**
+     * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.
+     *
+     * @private
+     * @returns {void}
+     */
+    handleInputMouseleaveOrBlur() {
+        this.displayLabelShowValue = false;
+    }
+    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;
+    }
+    /**
+     * Calculates the CSS left position of the slider thumb based on the current value.
+     *
+     * @private
+     * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.
+     */
+    getValuePosition() {
+        return getPositionBasedOnValue(this.inputRangeEl, this.host, this.maxValue, this.minValue, this.value, this.size);
+    }
+    /**
+     * 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 = {};
+        this.customBackground = false;
+        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-thumb"] = `var(--${colors["Thumb"]})`;
+        }
+        if (colors && colors["Background"]) {
+            styles["--slider-background"] = `var(--${colors["Background"]})`;
+            this.customBackground = true;
+        }
+        return styles;
+    }
+    renderValueReferences() {
+        return (h("div", { class: "vds-slider__value-reference-container" }, h("div", { class: combineClasses("vds-slider__value-reference") }, h("span", null, this.minValue), h("span", null, this.maxValue))));
+    }
+    renderShownValue() {
+        return (h("div", { class: "vds-slider__value-container" }, h("div", { class: "vds-slider__value-content", style: { left: this.thumbPosition } }, h("div", { class: "vds-slider__value" }, h("div", { class: "vds__tooltip-container" }, h("span", { class: "vds__tooltip-container-text" }, this.shownValue)), this.orientation !== "vertical" && h("vds-icon", { class: "tooltip-arrow", svgIcon: "caret-down-filled" })))));
+    }
+    renderSlider() {
+        return (h("div", { class: "vds-slider__input" }, h("input", { ref: (el) => {
+                this.inputRangeEl = el;
+            }, class: combineClasses("vds-slider-input"), type: "range", step: this.step, onInput: (evt) => this.handleInputChange(evt), onMouseOver: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus(); } : null, onMouseLeave: this.displayLabel === "auto" ? () => { this.handleInputMouseleaveOrBlur(); } : null, onFocus: this.displayLabel === "auto" ? () => { this.handleInputMouseoverOrFocus(); } : null, onBlur: this.displayLabel === "auto" ? () => { this.handleInputMouseleaveOrBlur(); } : null, min: this.minValue, max: this.maxValue, value: this.value, disabled: this.disabled }), h("div", { class: `vds-slider__track`, ref: el => {
+                if (el)
+                    this.trackContainerEl = el;
+            } }), h("div", { class: "vds-slider__thumb", style: { left: this.thumbPosition } }, h("vds-icon", { svgIcon: this.icon, size: this.size === "medium" ? "1.25rem" : "1.5rem", class: "slider-thumb" })), this.getShowValue() && this.renderShownValue()));
+    }
+    render() {
+        return (h(Host, { key: 'b032a5d567e3aea02740c85d25091578f93f8e62', class: combineClasses("vds-slider", this.disabled ? "vds-slider--disabled" : "") }, h("div", { key: 'fbebac353490caf6a871600a61a38e8eb8375d1c', class: combineClasses("vds-slider-continuous__container", `vds-slider-continuous__container--${this.size}`, `vds-slider-continuous__container--orientation-${this.orientation}`, this.colors ? "vds-slider-continuous__container--custom-colors" : "vds-slider-continuous__container--colors", this.disabled ? "vds-slider-continuous__container--disabled" : "", this.displayLimits ? "vds-slider-continuous__container--display-limits" : ""), style: this.setColors() }, h("div", { key: 'c762dda59e0d73c0baeaa6a407e87f5c2b953936', class: combineClasses("vds-slider-continuous__content"), "aria-label": this.setAriaLabel }, this.renderSlider()), this.displayLimits && this.renderValueReferences())));
+    }
+    static get is() { return "vds-basic-slider-continuous"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-slider-continuous.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-slider-continuous.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the 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
+            },
+            "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": "changeInput",
+                "name": "changeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits updated input value"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": "- The new value for the slider."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the slider value to the specified value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value - The new value for the slider."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves when the value is set."
+                        }]
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the slider value by setting it to the minimum value.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise that resolves when the value is cleared."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "setInputValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "updateThumbAndTrackPosition",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-basic-slider-continuous.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-slider-continuous.js","sourceRoot":"","sources":["../../../src/components/slider-continuous/vds-basic-slider-continuous.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,WAAW,EAAsB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAChH,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAQ1G,MAAM,OAAO,wBAAwB;IANrC;QASE,mCAAmC;QAC3B,SAAI,GAAuB,QAAQ,CAAC;QAC5C,qCAAqC;QAC7B,gBAAW,GAA8B,YAAY,CAAC;QAC9D,yCAAyC;QACjC,aAAQ,GAAY,KAAK,CAAC;QAClC,8FAA8F;QACtF,aAAQ,GAAW,CAAC,CAAC;QAC7B,wCAAwC;QAChC,aAAQ,GAAW,GAAG,CAAC;QAK/B;;;;UAIE;QACM,iBAAY,GAA0B,IAAI,CAAC;QACnD,2DAA2D;QACnD,kBAAa,GAAY,IAAI,CAAC;QAQtC,0BAA0B;QAClB,SAAI,GAAW,OAAO,CAAC;KA2ThC;IAhTC,mBAAmB;QACjB,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAED;;;;;OAKG;IAEH,QAAQ,CAAC,KAAa;QACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IAEH,KAAK;QACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC3B,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAED;;;;;;OAMG;IAEH,aAAa;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC;QAC9B,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QAC3C,CAAC;QACD,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACpD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,UAAU,GAAG,wBAAwB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9G,CAAC;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IAEH,2BAA2B;QACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC7C,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAOD;;;;;OAKG;IACK,gBAAgB;QACtB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1C,CAAC;IACH,CAAC;IAED;;;;OAIG;IACO,iBAAiB;QACvB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC;IAEH;;;;;;;OAOG;IACK,2BAA2B;QACjC,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC/B,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrC,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACK,iBAAiB,CAAC,GAAe;QACvC,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED;;;;;OAKG;IACK,2BAA2B;QACjC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACK,2BAA2B;QACjC,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;IACrC,CAAC;IAEO,YAAY;QAClB,IAAI,QAAQ,GAAG,KAAK,CAAC;QAErB,QAAO,IAAI,CAAC,YAAY,EAAE,CAAC;YACzB,KAAK,KAAK;gBACR,QAAQ,GAAG,KAAK,CAAC;gBACjB,MAAM;YACR,KAAK,MAAM;gBACT,QAAQ,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBACtC,MAAM;YACR,KAAK,IAAI;gBACP,QAAQ,GAAG,IAAI,CAAC;gBAChB,MAAM;YACR;gBACE,QAAQ,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED;;;;;OAKG;IACK,gBAAgB;QACtB,OAAO,uBAAuB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpH,CAAC;IAED;;;;;;;;;;;OAWG;IACK,SAAS;QACf,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAEvF,IAAI,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;YAC9B,MAAM,CAAC,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QACzD,CAAC;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAClC,MAAM,CAAC,qBAAqB,CAAC,GAAG,SAAS,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC;QAClE,CAAC;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;YAC9B,MAAM,CAAC,sBAAsB,CAAC,GAAG,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QAC/D,CAAC;QAED,IAAI,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC;YACnC,MAAM,CAAC,qBAAqB,CAAC,GAAG,SAAS,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC;YACjE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC/B,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,qBAAqB;QAC7B,OAAO,CACN,WAAK,KAAK,EAAC,uCAAuC;YACjD,WACC,KAAK,EAAE,cAAc,CACpB,6BAA6B,CAC7B;gBAEI,gBAAO,IAAI,CAAC,QAAQ,CAAQ;gBAC5B,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC5B,CACD,CACN,CAAC;IACH,CAAC;IAEQ,gBAAgB;QACtB,OAAO,CACL,WAAK,KAAK,EAAE,6BAA6B;YACvC,WAAK,KAAK,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,EAAC;gBACtE,WAAK,KAAK,EAAC,mBAAmB;oBAC5B,WAAK,KAAK,EAAE,wBAAwB;wBAClC,YAAM,KAAK,EAAE,6BAA6B,IAAG,IAAI,CAAC,UAAU,CAAQ,CAChE;oBACL,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,gBAAU,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,mBAAmB,GAAa,CACzG,CACF,CACF,CACP,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC5B,aACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE;oBAChB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;gBACzB,CAAC,EACD,KAAK,EAAE,cAAc,CACnB,kBAAkB,CACnB,EACD,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,EACnD,WAAW,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,IAAI,CAAC,2BAA2B,EAAE,CAAA,CAAA,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7F,YAAY,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,IAAI,CAAC,2BAA2B,EAAE,CAAA,CAAA,CAAC,CAAC,CAAC,CAAC,IAAI,EAC9F,OAAO,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,IAAI,CAAC,2BAA2B,EAAE,CAAA,CAAA,CAAC,CAAC,CAAC,CAAC,IAAI,EACzF,MAAM,EAAE,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,IAAI,CAAC,2BAA2B,EAAE,CAAA,CAAA,CAAC,CAAC,CAAC,CAAC,IAAI,EACxF,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;YACF,WAAK,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,GAAG,IAAG,EAAE;oBAAE,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,CAAA,CAAC,GAAQ;YACzF,WAAK,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,EAAC;gBAChE,gBAAU,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAC,cAAc,GAAY,CAC/G;YACL,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAC3C,CACP,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;YACpF,4DACE,KAAK,EAAE,cAAc,CACnB,kCAAkC,EAClC,qCAAqC,IAAI,CAAC,IAAI,EAAE,EAChD,iDAAiD,IAAI,CAAC,WAAW,EAAE,EACnE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,0CAA0C,EAC5G,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,4CAA4C,CAAC,CAAC,CAAC,EAAE,EACjE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,kDAAkD,CAAC,CAAC,CAAC,EAAE,CAC7E,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE;gBAEvB,4DACE,KAAK,EAAE,cAAc,CACnB,gCAAgC,CACjC,gBACW,IAAI,CAAC,YAAY,IAE5B,IAAI,CAAC,YAAY,EAAE,CAChB;gBACL,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAC/C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}