@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1,439 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Host, } from "@stencil/core";
+import { a11yHostAttributes } from "../utils/a11y";
+import { OnListener } from "../utils/listener";
+import { makeRef } from "../utils/make-ref";
+function between(min, value, max) {
+    if (value < min) {
+        return min;
+    }
+    else if (value > max) {
+        return max;
+    }
+    else {
+        return value;
+    }
+}
+/**
+ * @since 2.0.0
+ *
+ * @slot label-start - Element will be displayed at the start of the slider
+ * @slot label-end - Element will be displayed at the end of the slider
+ */
+export class Slider {
+    constructor() {
+        /**
+         * Legal number intervals
+         *
+         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step
+         */
+        this.step = 1;
+        /**
+         * Minimum slider value
+         */
+        this.min = 0;
+        /**
+         * Maximum slider value
+         */
+        this.max = 100;
+        /**
+         * Current value of the slider
+         */
+        this.value = 0;
+        /**
+         * Show a trace line
+         */
+        this.trace = false;
+        /**
+         * Define the start point of the trace line
+         */
+        this.traceReference = 0;
+        /**
+         * Show control as disabled
+         */
+        this.disabled = false;
+        this.rangeInput = 0;
+        this.rangeMin = 0;
+        this.rangeMax = 100;
+        this.rangeTraceReference = 0;
+        this.showTooltip = false;
+        this.thumbRef = makeRef();
+        this.tooltipRef = makeRef();
+    }
+    get tooltip() {
+        return this.tooltipRef.current;
+    }
+    get pseudoThumb() {
+        return this.thumbRef.current;
+    }
+    get slider() {
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('slider');
+    }
+    onShowTooltipChange() {
+        var _a, _b;
+        if (this.showTooltip) {
+            (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTooltip(this.pseudoThumb);
+            return;
+        }
+        (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
+    }
+    componentWillLoad() {
+        this.a11yAttributes = a11yHostAttributes(this.hostElement, [
+            'role',
+            'aria-valuemin',
+            'aria-valuemax',
+            'aria-valuenow',
+        ]);
+        this.updateRangeVariables();
+    }
+    updateRangeVariables() {
+        this.rangeInput = between(this.min, this.value, this.max);
+        this.rangeTraceReference = between(this.min, this.traceReference, this.max);
+        this.rangeMin = Math.min(this.min, this.max);
+        this.rangeMax = Math.max(this.min, this.max);
+    }
+    onInput(event) {
+        event.stopPropagation();
+        const value = parseFloat(this.slider.value);
+        if (!isNaN(value)) {
+            const oldValue = this.rangeInput;
+            this.rangeInput = value;
+            const { defaultPrevented } = this.emitInputEvent();
+            if (defaultPrevented) {
+                this.rangeInput = oldValue;
+                this.slider.value = oldValue.toString();
+            }
+        }
+    }
+    emitInputEvent() {
+        return this.valueChange.emit(this.rangeInput);
+    }
+    isMarkerActive(markerValue) {
+        const start = Math.min(this.traceReference, this.rangeInput);
+        const end = Math.max(this.traceReference, this.rangeInput);
+        const value = markerValue;
+        return value >= start && value <= end;
+    }
+    // Listen globally on window because sometimes the event listener
+    // of the DOM element input itself is not called if the release
+    // click is not inside the element anymore
+    onPointerUp() {
+        this.showTooltip = false;
+    }
+    render() {
+        const range = this.rangeMax - this.rangeMin;
+        let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
+        let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
+        const distance = valueInPercentage - traceReferenceInPercentage;
+        let traceStart = traceReferenceInPercentage;
+        let traceEnd = valueInPercentage;
+        if (distance <= 0) {
+            traceStart = valueInPercentage;
+            traceEnd = traceReferenceInPercentage;
+        }
+        return (h(Host, { key: '568077c2ec218ec59fcc8c5b71ee995f67b81c50', class: {
+                disabled: this.disabled,
+                error: !!this.error,
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: '5d90d4707432d082c643226572ba0df57fb31ecb', class: "slider" }, h("div", { key: '6fa7862803ce7f774e33088866ffede29ec30ef8', class: "track" }, h("div", { key: 'c24021f42964edbb0fcba1b722ef1ad8bb1bfcfb', ref: this.thumbRef, class: "thumb", style: {
+                left: `calc(${valueInPercentage} * 100% - 8px)`,
+            } }), h("div", { key: '610aaa115ad035cd656dfc92140c5b9219146396', class: "ticks" }, this.marker
+            ? this.marker.map((markerValue) => {
+                if (markerValue > this.max || markerValue < this.min) {
+                    return;
+                }
+                let left = (markerValue - this.rangeMin) / range;
+                return (h("div", { class: {
+                        tick: true,
+                        'tick-active': this.isMarkerActive(markerValue) && this.trace,
+                    }, style: {
+                        '--tick-value': `${left}`,
+                    } }));
+            })
+            : null)), h("input", Object.assign({ key: '6bccbc2d6f5fcea8b5d0e4f99a2e3839d01d5013', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+                '--value': `${valueInPercentage}`,
+                '--trace-reference': `${traceReferenceInPercentage}`,
+                '--trace-start': `${traceStart}`,
+                '--trace-end': `${traceEnd}`,
+            }, class: {
+                trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+                'hide-trace-reference': this.trace &&
+                    (this.traceReference <= this.min ||
+                        this.traceReference >= this.max),
+            }, onFocus: () => {
+                this.showTooltip = true;
+            }, onBlur: () => {
+                this.showTooltip = false;
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: 'b948f1c61df20d1b091b8cd398cf3d6abff256d9', ref: this.tooltipRef, class: {
+                'hide-tooltip': !this.showTooltip,
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), h("div", { key: '491a6efb7dbdc1c6df81571f45d1a3b6ec8e43ce', class: "label" }, h("div", { key: 'eceecfa340c3d7b1a7bf586935355ba21af71beb', class: "label-start" }, h("slot", { key: 'f29a5cccc390e0d16e125bf81e01ba0b9df93849', name: "label-start" })), h("div", { key: '7998cbb60c5a97ba20f23353bf34a661a8ff8198', class: "label-end" }, h("slot", { key: '70e919a1b865884929945807fd3b36155e6da8b4', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', textColor: "alarm" }, this.error)) : null));
+    }
+    static get is() { return "ix-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step"
+                        }],
+                    "text": "Legal number intervals"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum slider value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum slider value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value of the slider"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "marker": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SliderMarker",
+                    "resolved": "number[]",
+                    "references": {
+                        "SliderMarker": {
+                            "location": "local",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/slider/slider.tsx",
+                            "id": "src/components/slider/slider.tsx::SliderMarker"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define tick marker on the slider. Marker has to be within slider min/max"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "trace": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a trace line"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trace",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "traceReference": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the start point of the trace line"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trace-reference",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show control as disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show error state and message"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rangeInput": {},
+            "rangeMin": {},
+            "rangeMax": {},
+            "rangeTraceReference": {},
+            "showTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "showTooltip",
+                "methodName": "onShowTooltipChange"
+            }, {
+                "propName": "value",
+                "methodName": "updateRangeVariables"
+            }, {
+                "propName": "max",
+                "methodName": "updateRangeVariables"
+            }, {
+                "propName": "min",
+                "methodName": "updateRangeVariables"
+            }, {
+                "propName": "traceReference",
+                "methodName": "updateRangeVariables"
+            }];
+    }
+}
+__decorate([
+    OnListener('pointerup', (self) => self.showTooltip)
+], Slider.prototype, "onPointerUp", null);
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAkB,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAI5C,SAAS,OAAO,CAAC,GAAW,EAAE,KAAa,EAAE,GAAW;IACtD,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;QAChB,OAAO,GAAG,CAAC;IACb,CAAC;SAAM,IAAI,KAAK,GAAG,GAAG,EAAE,CAAC;QACvB,OAAO,GAAG,CAAC;IACb,CAAC;SAAM,CAAC;QACN,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC;AAED;;;;;GAKG;AAMH,MAAM,OAAO,MAAM;IALnB;QAQE;;;;WAIG;QACK,SAAI,GAAW,CAAC,CAAC;QAEzB;;WAEG;QACK,QAAG,GAAG,CAAC,CAAC;QAEhB;;WAEG;QACK,QAAG,GAAG,GAAG,CAAC;QAElB;;WAEG;QACK,UAAK,GAAG,CAAC,CAAC;QAOlB;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACK,mBAAc,GAAG,CAAC,CAAC;QAE3B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAYhB,eAAU,GAAG,CAAC,CAAC;QACf,aAAQ,GAAG,CAAC,CAAC;QACb,aAAQ,GAAG,GAAG,CAAC;QACf,wBAAmB,GAAG,CAAC,CAAC;QACxB,gBAAW,GAAG,KAAK,CAAC;QAIZ,aAAQ,GAAG,OAAO,EAAkB,CAAC;QACrC,eAAU,GAAG,OAAO,EAAwB,CAAC;KAiN/D;IA/MC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;IACjC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,cAAc,CAChD,QAAQ,CACW,CAAC;IACxB,CAAC;IAGD,mBAAmB;;QACjB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5C,OAAO;QACT,CAAC;QAED,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW,EAAE,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YACzD,MAAM;YACN,eAAe;YACf,eAAe;YACf,eAAe;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAMO,oBAAoB;QAC1B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1D,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAEO,OAAO,CAAC,KAAiB;QAC/B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;YACjC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YAExB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAEnD,IAAI,gBAAgB,EAAE,CAAC;gBACrB,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC;YAC1C,CAAC;QACH,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC;IAEO,cAAc,CAAC,WAAmB;QACxC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3D,MAAM,KAAK,GAAG,WAAW,CAAC;QAE1B,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC;IACxC,CAAC;IAED,iEAAiE;IACjE,+DAA+D;IAC/D,0CAA0C;IAE1C,WAAW;QACT,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE5C,IAAI,0BAA0B,GAC5B,CAAC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;QAErD,IAAI,iBAAiB,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;QAElE,MAAM,QAAQ,GAAG,iBAAiB,GAAG,0BAA0B,CAAC;QAEhE,IAAI,UAAU,GAAG,0BAA0B,CAAC;QAC5C,IAAI,QAAQ,GAAG,iBAAiB,CAAC;QAEjC,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;YAClB,UAAU,GAAG,iBAAiB,CAAC;YAC/B,QAAQ,GAAG,0BAA0B,CAAC;QACxC,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;aACpB,EACD,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;YAEhE,4DAAK,KAAK,EAAC,QAAQ;gBACjB,4DAAK,KAAK,EAAC,OAAO;oBAChB,4DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE;4BACL,IAAI,EAAE,QAAQ,iBAAiB,gBAAgB;yBAChD,GACI;oBACP,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,MAAM;wBACV,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;4BAC9B,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gCACrD,OAAO;4BACT,CAAC;4BAED,IAAI,IAAI,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;4BAEjD,OAAO,CACL,WACE,KAAK,EAAE;oCACL,IAAI,EAAE,IAAI;oCACV,aAAa,EACX,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,KAAK;iCACjD,EACD,KAAK,EAAE;oCACL,cAAc,EAAE,GAAG,IAAI,EAAE;iCAC1B,GACI,CACR,CAAC;wBACJ,CAAC,CAAC;wBACJ,CAAC,CAAC,IAAI,CACJ,CACF;gBAEN,4EACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACvC,KAAK,EAAE;wBACL,SAAS,EAAE,GAAG,iBAAiB,EAAE;wBACjC,mBAAmB,EAAE,GAAG,0BAA0B,EAAE;wBACpD,eAAe,EAAE,GAAG,UAAU,EAAE;wBAChC,aAAa,EAAE,GAAG,QAAQ,EAAE;qBAC7B,EACD,KAAK,EAAE;wBACL,KAAK,EACH,IAAI,CAAC,KAAK,IAAI,0BAA0B,KAAK,iBAAiB;wBAChE,sBAAsB,EACpB,IAAI,CAAC,KAAK;4BACV,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,GAAG;gCAC9B,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,GAAG,CAAC;qBACrC,EACD,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;oBAC1B,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;oBAC3B,CAAC,EACD,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,UAAU,mBACf,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IACnB,IAAI,CAAC,cAAc,EACvB;gBAEF,mEACE,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,KAAK,EAAE;wBACL,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;qBAClC,EACD,cAAc,EAAE,IAAI,EACpB,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,IAElC,IAAI,CAAC,UAAU,CACL,CACT;YACN,4DAAK,KAAK,EAAC,OAAO;gBAChB,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;gBACN,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACF;YACL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,qBAAe,KAAK,EAAE,aAAa,EAAE,SAAS,EAAC,OAAO,IACnD,IAAI,CAAC,KAAK,CACG,CACjB,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAjIC;IADC,UAAU,CAAS,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC;yCAG3D","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\nimport { makeRef } from '../utils/make-ref';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class Slider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker?: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error?: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange!: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes?: A11yAttributes;\n\n  private readonly thumbRef = makeRef<HTMLDivElement>();\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  get tooltip() {\n    return this.tooltipRef.current;\n  }\n\n  get pseudoThumb() {\n    return this.thumbRef.current;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot?.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip?.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip?.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseFloat(this.slider.value);\n\n    if (!isNaN(value)) {\n      const oldValue = this.rangeInput;\n      this.rangeInput = value;\n\n      const { defaultPrevented } = this.emitInputEvent();\n\n      if (defaultPrevented) {\n        this.rangeInput = oldValue;\n        this.slider.value = oldValue.toString();\n      }\n    }\n  }\n\n  private emitInputEvent() {\n    return this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              ref={this.thumbRef}\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n              'hide-trace-reference':\n                this.trace &&\n                (this.traceReference <= this.min ||\n                  this.traceReference >= this.max),\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            ref={this.tooltipRef}\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n            for={this.thumbRef.waitForCurrent()}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} textColor=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+import { regressionTest } from "../../../tests/utils/test/index";
+regressionTest('renders', async ({ page, mount }) => {
+    await mount(`<ix-slider></ix-slider>`);
+    const slider = page.locator('ix-slider');
+    await expect(slider).toHaveClass(/hydrated/);
+});
+regressionTest('should show tooltip by focus', async ({ page, mount }) => {
+    var _a, _b;
+    await mount(`<ix-slider value="20"></ix-slider>`);
+    const slider = page.locator('ix-slider');
+    await expect(slider).toHaveClass(/hydrated/);
+    const input = slider.locator('input');
+    const tooltip = slider.locator('ix-tooltip');
+    await input.focus();
+    await expect(tooltip).toHaveClass(/visible/);
+    const left = (_a = (await tooltip.locator('dialog').boundingBox())) === null || _a === void 0 ? void 0 : _a.x;
+    if (!left) {
+        throw new Error('Tooltip bounding box is x is undefined.');
+    }
+    await input.press('ArrowRight');
+    await input.press('ArrowRight');
+    await page.waitForTimeout(500);
+    await expect(tooltip).toHaveClass(/visible/);
+    const leftAfterKeyboardNavigation = (_b = (await tooltip.locator('dialog').boundingBox())) === null || _b === void 0 ? void 0 : _b.x;
+    expect(leftAfterKeyboardNavigation).toBeGreaterThan(left);
+    await input.blur();
+    await page.waitForTimeout(500);
+    await expect(tooltip).not.toHaveClass(/visible/);
+});
+regressionTest('should show tooltip while mouse drags slider handle', async ({ page, mount }) => {
+    await mount(`<ix-slider value="20"></ix-slider>`);
+    const slider = page.locator('ix-slider');
+    await expect(slider).toHaveClass(/hydrated/);
+    const tooltip = slider.locator('ix-tooltip');
+    await expect(tooltip).not.toHaveClass(/visible/);
+    const box = await slider.boundingBox();
+    if (box) {
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.mouse.move(box.x + box.width / 3, box.y + box.height / 3);
+        await expect(tooltip).toHaveClass(/visible/);
+    }
+    else {
+        throw new Error('Slider bounding box is null.');
+    }
+    await page.mouse.up();
+    await expect(tooltip).not.toHaveClass(/visible/);
+});
+regressionTest('should not change value - prevent default', async ({ page, mount }) => {
+    await mount(`<ix-slider value="20"></ix-slider>`);
+    const slider = page.locator('ix-slider');
+    await slider.evaluate((s) => s.addEventListener('valueChange', (e) => e.preventDefault()));
+    await page.mouse.click(100, 16);
+    await expect(slider).toHaveAttribute('value', '20');
+});
+//# sourceMappingURL=slider.ct.js.map

package/dist/collection/components/slider/test/slider.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.ct.js","sourceRoot":"","sources":["../../../../src/components/slider/test/slider.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('renders', async ({ page, mount }) => {\n  await mount(`<ix-slider></ix-slider>`);\n\n  const slider = page.locator('ix-slider');\n  await expect(slider).toHaveClass(/hydrated/);\n});\n\nregressionTest('should show tooltip by focus', async ({ page, mount }) => {\n  await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n  const slider = page.locator('ix-slider');\n  await expect(slider).toHaveClass(/hydrated/);\n\n  const input = slider.locator('input');\n\n  const tooltip = slider.locator('ix-tooltip');\n  await input.focus();\n  await expect(tooltip).toHaveClass(/visible/);\n  const left = (await tooltip.locator('dialog').boundingBox())?.x;\n\n  if (!left) {\n    throw new Error('Tooltip bounding box is x is undefined.');\n  }\n\n  await input.press('ArrowRight');\n  await input.press('ArrowRight');\n\n  await page.waitForTimeout(500);\n  await expect(tooltip).toHaveClass(/visible/);\n  const leftAfterKeyboardNavigation = (\n    await tooltip.locator('dialog').boundingBox()\n  )?.x;\n\n  expect(leftAfterKeyboardNavigation).toBeGreaterThan(left);\n\n  await input.blur();\n  await page.waitForTimeout(500);\n  await expect(tooltip).not.toHaveClass(/visible/);\n});\n\nregressionTest(\n  'should show tooltip while mouse drags slider handle',\n  async ({ page, mount }) => {\n    await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n    const slider = page.locator('ix-slider');\n    await expect(slider).toHaveClass(/hydrated/);\n\n    const tooltip = slider.locator('ix-tooltip');\n\n    await expect(tooltip).not.toHaveClass(/visible/);\n\n    const box = await slider.boundingBox();\n\n    if (box) {\n      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);\n      await page.mouse.down();\n      await page.mouse.move(box.x + box.width / 3, box.y + box.height / 3);\n      await expect(tooltip).toHaveClass(/visible/);\n    } else {\n      throw new Error('Slider bounding box is null.');\n    }\n\n    await page.mouse.up();\n    await expect(tooltip).not.toHaveClass(/visible/);\n  }\n);\n\nregressionTest(\n  'should not change value - prevent default',\n  async ({ page, mount }) => {\n    await mount(`<ix-slider value=\"20\"></ix-slider>`);\n    const slider = page.locator('ix-slider');\n    await slider.evaluate((s) =>\n      s.addEventListener('valueChange', (e) => e.preventDefault())\n    );\n    await page.mouse.click(100, 16);\n    await expect(slider).toHaveAttribute('value', '20');\n  }\n);\n"]}