@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/slider/slider.js

@@ -0,0 +1,703 @@
+import { h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class IfxSlider {
+    /** Minimum value allowed for the slider. */
+    min = 0;
+    /** Maximum value allowed for the slider. */
+    max = 100;
+    /** Increment step when changing the value. */
+    step = 1;
+    /** Current value for a single-handle slider. */
+    value;
+    /** Initial value of the left handle for a double slider. */
+    minValueHandle;
+    /** Initial value of the right handle for a double slider. */
+    maxValueHandle;
+    /** If true, the slider is disabled and not interactive. */
+    disabled = false;
+    /** If true, the slider is read-only. */
+    readOnly = false;
+    /** If true, shows the current value as a percentage. */
+    showPercentage = false;
+    /** Optional icon displayed on the left side of the slider. */
+    leftIcon;
+    /** Optional icon displayed on the right side of the slider. */
+    rightIcon;
+    /** Optional text label shown on the left side of the slider. */
+    leftText;
+    /** Optional text label shown on the right side of the slider. */
+    rightText;
+    /** Slider type: single handle or double handle (range). */
+    type = "single";
+    /** Accessible label for screen readers. */
+    ariaLabelText;
+    /** Optional name used when submitting the slider in a form. */
+    name = "";
+    internalValue = 0;
+    percentage = 0;
+    internalMinValue = 0;
+    internalMaxValue = 100;
+    /** Fired when the slider value (or values) change. */
+    ifxChange;
+    el;
+    internals;
+    inputRef;
+    minInputRef;
+    maxInputRef;
+    hasInitializedSingleValue = false;
+    initialInternalValue = 0;
+    initialInternalMinValue = 0;
+    initialInternalMaxValue = 0;
+    getSafeMin() {
+        const parsedMin = Number(this.min);
+        return Number.isFinite(parsedMin) ? parsedMin : 0;
+    }
+    getSafeMax() {
+        const parsedMax = Number(this.max);
+        return Number.isFinite(parsedMax) ? parsedMax : this.getSafeMin();
+    }
+    normalizeSingleValue(value) {
+        const numericValue = Number(value);
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        if (!Number.isFinite(numericValue)) {
+            return safeMin;
+        }
+        return Math.max(safeMin, Math.min(safeMax, numericValue));
+    }
+    getSynchronizedSingleValue() {
+        const hasExternalValue = Number.isFinite(Number(this.value));
+        const sourceValue = hasExternalValue ? this.value : this.internalValue;
+        return this.normalizeSingleValue(sourceValue);
+    }
+    valueChanged(newValue) {
+        this.internalValue = this.normalizeSingleValue(newValue);
+        this.value = this.internalValue;
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    minValueChanged(newValue) {
+        this.internalMinValue = newValue;
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    maxValueChanged(newValue) {
+        this.internalMaxValue = newValue;
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    minChanged() {
+        this.reconcileBoundsChange();
+    }
+    maxChanged() {
+        this.reconcileBoundsChange();
+    }
+    reconcileBoundsChange() {
+        if (this.type !== "double" && !this.hasInitializedSingleValue) {
+            return;
+        }
+        this.internalValue = this.getSynchronizedSingleValue();
+        this.value = this.internalValue;
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    stepChanged() {
+        this.updateValuePercent();
+    }
+    updateFormValue() {
+        if (this.type === "double") {
+            this.internals.setFormValue(JSON.stringify({
+                min: this.internalMinValue,
+                max: this.internalMaxValue,
+            }));
+            return;
+        }
+        this.internals.setFormValue(String(this.internalValue));
+    }
+    getRangeSliderWrapper() {
+        const rangeSliderWrapper = this.el.shadowRoot.querySelector(".range-slider__wrapper");
+        return rangeSliderWrapper;
+    }
+    handleInputChangeOfRangeSlider(event) {
+        const target = event.target;
+        if (parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <=
+            0) {
+            if (target.id === "max-slider") {
+                this.maxInputRef.value = this.minInputRef.value;
+            }
+            else {
+                this.minInputRef.value = this.maxInputRef.value;
+            }
+        }
+        if (target.id === "max-slider") {
+            this.internalMaxValue = parseFloat(this.maxInputRef.value);
+        }
+        else {
+            this.internalMinValue = parseFloat(this.minInputRef.value);
+        }
+        this.ifxChange.emit({
+            minVal: this.internalMinValue,
+            maxVal: this.internalMaxValue,
+        });
+        this.updateFormValue();
+        this.updateValuePercent();
+        this.updateZIndexIfRangeSlider(target.id);
+    }
+    handleOnMouseLeaveOfRangeSlider(event) {
+        const target = event.target;
+        const sliderWrapper = this.getRangeSliderWrapper();
+        if (target.id === "max-slider") {
+            sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);
+        }
+        else {
+            sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);
+        }
+    }
+    calculatePercentageValue() {
+        const parsedInternalValue = Number(this.internalValue);
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        const den = safeMax - safeMin;
+        if (den <= 0 || !Number.isFinite(parsedInternalValue)) {
+            this.percentage = 0;
+            return;
+        }
+        const num = (parsedInternalValue - safeMin) * 1.0;
+        this.percentage = +parseFloat(String((num / den) * 100)).toFixed(2);
+    }
+    handleInputChange(event) {
+        const target = event.target;
+        this.internalValue = this.normalizeSingleValue(target.value);
+        this.value = this.internalValue;
+        this.ifxChange.emit(this.internalValue);
+        this.updateFormValue();
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+    }
+    roundToValidStep(value) {
+        const safeMin = this.getSafeMin();
+        const safeStep = Number.isFinite(Number(this.step)) && Number(this.step) > 0 ? Number(this.step) : 1;
+        const relativeValue = value - safeMin;
+        const remainder = relativeValue % safeStep;
+        if (remainder >= safeStep / 2) {
+            return safeMin + relativeValue + (safeStep - remainder);
+        }
+        else {
+            return safeMin + relativeValue - remainder;
+        }
+    }
+    updateValuePercent() {
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        const den = safeMax - safeMin;
+        if (den <= 0) {
+            if (this.inputRef) {
+                this.inputRef.style.setProperty("--value-percent", "0%");
+            }
+            return;
+        }
+        if (this.type === "double") {
+            if (this.minInputRef) {
+                const num = (this.roundToValidStep(this.internalMinValue) - safeMin) * 1.0;
+                const minPercent = (num / den) * 100;
+                this.minInputRef.parentElement.style.setProperty("--min-value-percent", `${minPercent}%`);
+            }
+            if (this.maxInputRef) {
+                const num = (this.roundToValidStep(this.internalMaxValue) - safeMin) * 1.0;
+                const maxPercent = (num / den) * 100;
+                this.maxInputRef.parentElement.style.setProperty("--max-value-percent", `${maxPercent}%`);
+            }
+        }
+        else {
+            if (this.inputRef) {
+                const num = (this.roundToValidStep(this.internalValue) - safeMin) * 1.0;
+                const percentage = (num / den) * 100;
+                this.inputRef.style.setProperty("--value-percent", `${percentage}%`);
+            }
+        }
+    }
+    // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping
+    // if min and max thumbs take the same value.
+    updateZIndexIfRangeSlider(targetId = "") {
+        if (targetId === "max-slider") {
+            this.minInputRef.style.zIndex = "1";
+            this.maxInputRef.style.zIndex = "2";
+        }
+        else {
+            this.minInputRef.style.zIndex = "2";
+            this.maxInputRef.style.zIndex = "1";
+        }
+    }
+    componentWillLoad() {
+        const safeMin = this.getSafeMin();
+        const safeMax = this.getSafeMax();
+        const midPoint = (safeMax - safeMin) / 2 + safeMin;
+        if (this.value === undefined || this.value === null) {
+            this.internalValue = this.normalizeSingleValue(midPoint);
+            this.value = this.internalValue;
+        }
+        else {
+            this.internalValue = this.normalizeSingleValue(this.value);
+            this.value = this.internalValue;
+        }
+        this.calculatePercentageValue();
+        if (this.minValueHandle !== undefined)
+            this.internalMinValue = this.minValueHandle;
+        else
+            this.internalMinValue = this.min;
+        if (this.maxValueHandle !== undefined)
+            this.internalMaxValue = this.maxValueHandle;
+        else
+            this.internalMaxValue = this.max;
+        this.initialInternalValue = this.internalValue;
+        this.initialInternalMinValue = this.internalMinValue;
+        this.initialInternalMaxValue = this.internalMaxValue;
+        this.hasInitializedSingleValue = true;
+        this.updateFormValue();
+    }
+    formResetCallback() {
+        this.internalValue = this.initialInternalValue;
+        this.internalMinValue = this.initialInternalMinValue;
+        this.internalMaxValue = this.initialInternalMaxValue;
+        this.calculatePercentageValue();
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (!state) {
+            return;
+        }
+        if (this.type === "double") {
+            try {
+                const parsedState = JSON.parse(state);
+                if (typeof parsedState.min === "number") {
+                    this.internalMinValue = parsedState.min;
+                }
+                if (typeof parsedState.max === "number") {
+                    this.internalMaxValue = parsedState.max;
+                }
+            }
+            catch {
+                // Ignore invalid state payloads restored by the browser.
+            }
+        }
+        else {
+            const parsedState = Number(state);
+            if (!Number.isNaN(parsedState)) {
+                this.internalValue = parsedState;
+                this.calculatePercentageValue();
+            }
+        }
+        this.updateValuePercent();
+        this.updateFormValue();
+    }
+    syncSingleValueState() {
+        if (this.type === "double") {
+            return false;
+        }
+        const normalizedValue = this.getSynchronizedSingleValue();
+        if (normalizedValue === this.internalValue) {
+            return false;
+        }
+        this.internalValue = normalizedValue;
+        this.value = normalizedValue;
+        this.calculatePercentageValue();
+        this.updateFormValue();
+        return true;
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-slider", await framework);
+        }
+        // Angular/ngModel can set `value` before custom-element upgrade.
+        // Re-sync once after load so internal state and displayed percentage match.
+        this.syncSingleValueState();
+        this.updateValuePercent();
+    }
+    render() {
+        return (h("div", { key: '69b0ba79ae35a00da66a06162eabf542ead36a09', class: `ifx-slider${this.readOnly ? ' readOnly' : this.disabled ? ' disabled' : ''}` }, this.leftText && h("span", { key: '4919cb4c735dfce9e1b7f2bade160afd5996af74', class: `left-text${this.readOnly || this.disabled ? ' disabled' : ''}` }, this.leftText), this.leftIcon && (h("ifx-icon", { key: '518d93b888d9059f8ea1bd8867d986300f0655e9', icon: this.leftIcon, class: `left-icon${this.readOnly || this.disabled ? " disabled" : ""}` })), this.type !== "double" ? (h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.readOnly || this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": "Slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalValue, "aria-disabled": this.readOnly || this.disabled ? "true" : "false", "aria-readonly": this.readOnly ? "true" : undefined })) : (h("div", { class: "range-slider__wrapper", "aria-label": this.ariaLabelText, role: "group" }, h("input", { id: "min-slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.readOnly || this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Minimum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMinValue, "aria-disabled": this.readOnly || this.disabled ? "true" : "false" }), h("input", { id: "max-slider", type: "range", min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.readOnly || this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Maximum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMaxValue, "aria-disabled": this.readOnly || this.disabled ? "true" : "false" }))), this.rightIcon && (h("ifx-icon", { key: 'f995442bfb4040b47b98d743af61363dbedc41d9', icon: this.rightIcon, class: `right-icon${this.readOnly || this.disabled ? " disabled" : ""}` })), this.rightText && (h("span", { key: 'c2d38e524ec44e35bea1811fa9ede43c1c813282', class: `right-text${this.readOnly || this.disabled ? " disabled" : ""}` }, this.rightText)), this.showPercentage && this.type !== "double" && (h("span", { key: '94155c2a4d2b14a9ec8e826a9fc9710d2b5ac228', class: `percentage-display${this.readOnly || this.disabled ? " disabled" : ""}` }, this.percentage, "%"))));
+    }
+    static get is() { return "ifx-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value allowed for the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value allowed for the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Increment step when changing the value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value for a single-handle slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "minValueHandle": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value of the left handle for a double slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-value-handle"
+            },
+            "maxValueHandle": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value of the right handle for a double slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-value-handle"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the slider is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the slider is read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "showPercentage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the current value as a percentage."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-percentage",
+                "defaultValue": "false"
+            },
+            "leftIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon displayed on the left side of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-icon"
+            },
+            "rightIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon displayed on the right side of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-icon"
+            },
+            "leftText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional text label shown on the left side of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-text"
+            },
+            "rightText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional text label shown on the right side of the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-text"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"single\" | \"double\"",
+                    "resolved": "\"double\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slider type: single handle or double handle (range)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"single\""
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional name used when submitting the slider in a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "percentage": {},
+            "internalMinValue": {},
+            "internalMaxValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the slider value (or values) change."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "minValueHandle",
+                "methodName": "minValueChanged"
+            }, {
+                "propName": "maxValueHandle",
+                "methodName": "maxValueChanged"
+            }, {
+                "propName": "min",
+                "methodName": "minChanged"
+            }, {
+                "propName": "max",
+                "methodName": "maxChanged"
+            }, {
+                "propName": "step",
+                "methodName": "stepChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}