@zanichelli/albe-web-components 19.3.0-rc1 → 19.3.0

package/dist/collection/components/z-input-range/index.js

@@ -0,0 +1,438 @@
+import { Host, h, } from "@stencil/core";
+import { Orientation, PopoverPosition } from "../../beans";
+import { randomId } from "../../utils/utils";
+/**
+ * Input range component.
+ */
+export class ZInputRange {
+    constructor() {
+        /** Whether the input range is disabled. */
+        this.disabled = false;
+        /** ID of the input range. */
+        this.htmlId = `z-input-range-${randomId()}`;
+        /** The greatest value in the range of permitted values. */
+        this.max = 100;
+        /** The lowest value in the range of permitted values. */
+        this.min = 0;
+        /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */
+        this.showEdges = false;
+        /** The step value for the input range. */
+        this.step = 1;
+        /** The value of the input range. */
+        this.value = 0;
+        /** The current value of the input range synchronized with the native input element. */
+        this.currentValue = this.value;
+        /**
+         * Whether to show the tooltip displaying the current value.
+         * The tooltip is shown only when the input range is focused or while the user is changing the value.
+         */
+        this.showValueTooltip = false;
+        /**
+         * Whether the native input value needs to be synced with the component state.
+         * This is necessary when the `step` prop changes, as the browser may round the value,
+         * so we need to update the component state accordingly.
+         */
+        this.needsNativeValueSync = false;
+    }
+    get ariaLabel() {
+        var _a;
+        return (_a = this.htmlAriaLabel) !== null && _a !== void 0 ? _a : (this.orientation === Orientation.VERTICAL ? this.label : undefined);
+    }
+    get tooltipPosition() {
+        var _a;
+        return ((_a = this.valuePosition) !== null && _a !== void 0 ? _a : (this.orientation === Orientation.VERTICAL ? PopoverPosition.LEFT : PopoverPosition.TOP));
+    }
+    updateCurrentValue(nextValue) {
+        if (Number.isNaN(nextValue) || nextValue === this.currentValue) {
+            return;
+        }
+        this.currentValue = nextValue;
+        this.internals.setFormValue(this.currentValue.toString());
+    }
+    /** Calculates the current ratio of the input range value. */
+    getCurrentRatio() {
+        const range = this.max - this.min;
+        if (range <= 0) {
+            return 0;
+        }
+        const ratio = (this.currentValue - this.min) / range;
+        return Math.min(1, Math.max(0, ratio));
+    }
+    /** Updates the CSS variables used to color the track progress and tooltip guide position. */
+    updateProgress() {
+        var _a, _b;
+        const ratio = this.getCurrentRatio();
+        const progress = ratio * 100;
+        (_a = this.host) === null || _a === void 0 ? void 0 : _a.style.setProperty("--progress-ratio", `${ratio}`);
+        (_b = this.host) === null || _b === void 0 ? void 0 : _b.style.setProperty("--progress", `${progress}%`);
+    }
+    /**
+     * Syncs current value from native input after render-time browser coercions:
+     * when `step` changes, the browser may round the value, so we need to update the component state accordingly.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step
+     */
+    syncCurrentValueFromNativeInput() {
+        if (!this.inputRef) {
+            return;
+        }
+        this.updateCurrentValue(this.inputRef.valueAsNumber);
+        this.updateProgress();
+    }
+    onInput(event) {
+        event.stopPropagation();
+        this.syncCurrentValueFromNativeInput();
+        this.rangeInput.emit(this.currentValue);
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.syncCurrentValueFromNativeInput();
+        this.rangeChange.emit(this.currentValue);
+    }
+    onConstraintsChange() {
+        this.needsNativeValueSync = true;
+    }
+    componentDidLoad() {
+        this.needsNativeValueSync = true;
+        this.syncCurrentValueFromNativeInput();
+    }
+    componentDidRender() {
+        if (!this.needsNativeValueSync) {
+            return;
+        }
+        this.syncCurrentValueFromNativeInput();
+        this.needsNativeValueSync = false;
+    }
+    render() {
+        return (h(Host, { key: '4297a1ce9ebf313882a70733661321a2f5bde38d' }, this.label && (h("label", { key: '933af2d529a852f226e0fe9eb18109fc5b7feccd', class: "z-label", htmlFor: this.htmlId }, this.label)), h("div", { key: '5a6a44ec7bc2fe7a292474027c1f39fc6d7cb9aa', class: "input-container body-3" }, h("input", { key: '2759d81abdf6106cd29a261081b2d60495d2fe8d', ref: (el) => (this.inputRef = el), type: "range", "aria-label": this.ariaLabel, id: this.htmlId, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.currentValue, onInput: (event) => this.onInput(event), onChange: (event) => this.onChange(event), onFocus: () => (this.showValueTooltip = true), onBlur: () => (this.showValueTooltip = false) }), h("div", { key: '252ee3a382b279cf6bb397d066300dd97cca2537', class: "tooltip-guide", ref: (el) => (this.tooltipGuideRef = el) }), h("z-tooltip", { key: 'e8795cd4df104297809f79f13fdf5317cbb20ec1', position: this.tooltipPosition, bindTo: this.tooltipGuideRef, open: this.showValueTooltip, closable: false }, h("div", { key: '92186a95ac641beaff9afdd95537f85161ab7186', class: "current-value" }, this.currentValue))), this.showEdges && (h("div", { key: 'd09e29dc8bef5b376a5d04d138f70c5c43f8bebe', class: "edges body-3" }, h("span", { key: 'fea33d9d289b5f31da1b0c756b347fa25892940f', class: "min" }, this.min), h("span", { key: '602ac1fc4957b2262bb2bb2c802898c6296e31f6', class: "max" }, this.max)))));
+    }
+    static get is() { return "z-input-range"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css", "../../tokens/typography.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css", "../../tokens/typography.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input range is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "htmlAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria label of the input range. for accessibility.\nNot necessary if the `label` prop is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
+            },
+            "htmlId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the input range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-id",
+                "defaultValue": "`z-input-range-${randomId()}`"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the input range.\nWhen `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The greatest value in the range of permitted values."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The lowest value in the range of permitted values."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "0"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "Orientation.HORIZONTAL | Orientation.VERTICAL",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of the input range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation"
+            },
+            "showEdges": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-edges",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ControlSize.BIG",
+                    "resolved": "ControlSize.BIG",
+                    "references": {
+                        "ControlSize": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input range. Default: `ControlSize.BIG`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The step value for the input range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "valuePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT",
+                    "resolved": "PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT | PopoverPosition.TOP",
+                    "references": {
+                        "PopoverPosition": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the tooltip displaying the current value.\nDefaults to `top` for horizontal orientation and `left` for vertical orientation.\nMay be necessary to adjust this prop when the input range is close to the edges of the screen,\nto prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.\nFor example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-position"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentValue": {},
+            "showValueTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rangeInput",
+                "name": "rangeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value of the input range is being changed (`input` native event)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "rangeChange",
+                "name": "rangeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value of the input range has changed (`change` native event)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "min",
+                "methodName": "onConstraintsChange"
+            }, {
+                "propName": "max",
+                "methodName": "onConstraintsChange"
+            }, {
+                "propName": "step",
+                "methodName": "onConstraintsChange"
+            }, {
+                "propName": "value",
+                "methodName": "onConstraintsChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-input-range/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-input-range/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,SAAS,EAET,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,WAAW,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C;;GAEG;AAOH,MAAM,OAAO,WAAW;IANxB;QAWE,2CAA2C;QAE3C,aAAQ,GAAG,KAAK,CAAC;QASjB,6BAA6B;QAE7B,WAAM,GAAG,iBAAiB,QAAQ,EAAE,EAAE,CAAC;QASvC,2DAA2D;QAE3D,QAAG,GAAG,GAAG,CAAC;QAEV,yDAAyD;QAEzD,QAAG,GAAG,CAAC,CAAC;QAMR,iHAAiH;QAEjH,cAAS,GAAG,KAAK,CAAC;QAMlB,0CAA0C;QAE1C,SAAI,GAAG,CAAC,CAAC;QAET,oCAAoC;QAEpC,UAAK,GAAG,CAAC,CAAC;QAoBV,uFAAuF;QAEvF,iBAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1B;;;WAGG;QAEH,qBAAgB,GAAG,KAAK,CAAC;QAEzB;;;;WAIG;QACK,yBAAoB,GAAG,KAAK,CAAC;KA+ItC;IAzIC,IAAY,SAAS;;QACnB,OAAO,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACpG,CAAC;IAED,IAAY,eAAe;;QACzB,OAAO,CACL,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAC/G,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,SAAiB;QAC1C,IAAI,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,SAAS,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,6DAA6D;IACrD,eAAe;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACf,OAAO,CAAC,CAAC;QACX,CAAC;QAED,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QAErD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,6FAA6F;IACrF,cAAc;;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,QAAQ,GAAG,KAAK,GAAG,GAAG,CAAC;QAE7B,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QAC7D,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC;IAC7D,CAAC;IAED;;;;OAIG;IACK,+BAA+B;QACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,OAAO,CAAC,KAAiB;QAC/B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,+BAA+B,EAAE,CAAC;QACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAEO,QAAQ,CAAC,KAAY;QAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,+BAA+B,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC;IAMD,mBAAmB;QACjB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,+BAA+B,EAAE,CAAC;IACzC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,+BAA+B,EAAE,CAAC;QACvC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,CACb,8DACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,MAAM,IAEnB,IAAI,CAAC,KAAK,CACL,CACT;YACD,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,SAAS,EAC1B,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,GAC7C;gBACF,4DACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,GACnC;gBACP,kEACE,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,QAAQ,EAAE,KAAK;oBAEf,4DAAK,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAO,CAC1C,CACR;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,cAAc;gBACvB,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;gBACnC,6DAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ,CAC/B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ControlSize, Orientation, PopoverPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * Input range component.\n */\n@Component({\n  tag: \"z-input-range\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n  formAssociated: true,\n})\nexport class ZInputRange implements ComponentInterface {\n  @Element() host: HTMLZInputRangeElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Whether the input range is disabled. */\n  @Prop()\n  disabled = false;\n\n  /**\n   * The aria label of the input range. for accessibility.\n   * Not necessary if the `label` prop is set.\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /** ID of the input range. */\n  @Prop()\n  htmlId = `z-input-range-${randomId()}`;\n\n  /**\n   * The label of the input range.\n   * When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.\n   */\n  @Prop()\n  label: string;\n\n  /** The greatest value in the range of permitted values. */\n  @Prop()\n  max = 100;\n\n  /** The lowest value in the range of permitted values. */\n  @Prop()\n  min = 0;\n\n  /** The orientation of the input range. */\n  @Prop({reflect: true})\n  orientation: Orientation;\n\n  /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */\n  @Prop()\n  showEdges = false;\n\n  /** The size of the input range. Default: `ControlSize.BIG` */\n  @Prop({reflect: true})\n  size: ControlSize.BIG;\n\n  /** The step value for the input range. */\n  @Prop()\n  step = 1;\n\n  /** The value of the input range. */\n  @Prop()\n  value = 0;\n\n  /**\n   * The position of the tooltip displaying the current value.\n   * Defaults to `top` for horizontal orientation and `left` for vertical orientation.\n   * May be necessary to adjust this prop when the input range is close to the edges of the screen,\n   * to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.\n   * For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.\n   */\n  @Prop()\n  valuePosition: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;\n\n  /** Emitted when the value of the input range is being changed (`input` native event). */\n  @Event()\n  rangeInput: EventEmitter<number>;\n\n  /** Emitted when the value of the input range has changed (`change` native event). */\n  @Event()\n  rangeChange: EventEmitter<number>;\n\n  /** The current value of the input range synchronized with the native input element. */\n  @State()\n  currentValue = this.value;\n\n  /**\n   * Whether to show the tooltip displaying the current value.\n   * The tooltip is shown only when the input range is focused or while the user is changing the value.\n   */\n  @State()\n  showValueTooltip = false;\n\n  /**\n   * Whether the native input value needs to be synced with the component state.\n   * This is necessary when the `step` prop changes, as the browser may round the value,\n   * so we need to update the component state accordingly.\n   */\n  private needsNativeValueSync = false;\n\n  private inputRef: HTMLInputElement;\n\n  private tooltipGuideRef: HTMLSpanElement;\n\n  private get ariaLabel(): string | undefined {\n    return this.htmlAriaLabel ?? (this.orientation === Orientation.VERTICAL ? this.label : undefined);\n  }\n\n  private get tooltipPosition(): typeof this.valuePosition {\n    return (\n      this.valuePosition ?? (this.orientation === Orientation.VERTICAL ? PopoverPosition.LEFT : PopoverPosition.TOP)\n    );\n  }\n\n  private updateCurrentValue(nextValue: number): void {\n    if (Number.isNaN(nextValue) || nextValue === this.currentValue) {\n      return;\n    }\n\n    this.currentValue = nextValue;\n    this.internals.setFormValue(this.currentValue.toString());\n  }\n\n  /** Calculates the current ratio of the input range value. */\n  private getCurrentRatio(): number {\n    const range = this.max - this.min;\n    if (range <= 0) {\n      return 0;\n    }\n\n    const ratio = (this.currentValue - this.min) / range;\n\n    return Math.min(1, Math.max(0, ratio));\n  }\n\n  /** Updates the CSS variables used to color the track progress and tooltip guide position. */\n  private updateProgress(): void {\n    const ratio = this.getCurrentRatio();\n    const progress = ratio * 100;\n\n    this.host?.style.setProperty(\"--progress-ratio\", `${ratio}`);\n    this.host?.style.setProperty(\"--progress\", `${progress}%`);\n  }\n\n  /**\n   * Syncs current value from native input after render-time browser coercions:\n   * when `step` changes, the browser may round the value, so we need to update the component state accordingly.\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step\n   */\n  private syncCurrentValueFromNativeInput(): void {\n    if (!this.inputRef) {\n      return;\n    }\n\n    this.updateCurrentValue(this.inputRef.valueAsNumber);\n    this.updateProgress();\n  }\n\n  private onInput(event: InputEvent): void {\n    event.stopPropagation();\n    this.syncCurrentValueFromNativeInput();\n    this.rangeInput.emit(this.currentValue);\n  }\n\n  private onChange(event: Event): void {\n    event.stopPropagation();\n    this.syncCurrentValueFromNativeInput();\n    this.rangeChange.emit(this.currentValue);\n  }\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  @Watch(\"step\")\n  @Watch(\"value\")\n  onConstraintsChange(): void {\n    this.needsNativeValueSync = true;\n  }\n\n  componentDidLoad() {\n    this.needsNativeValueSync = true;\n    this.syncCurrentValueFromNativeInput();\n  }\n\n  componentDidRender() {\n    if (!this.needsNativeValueSync) {\n      return;\n    }\n\n    this.syncCurrentValueFromNativeInput();\n    this.needsNativeValueSync = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label\n            class=\"z-label\"\n            htmlFor={this.htmlId}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class=\"input-container body-3\">\n          <input\n            ref={(el) => (this.inputRef = el)}\n            type=\"range\"\n            aria-label={this.ariaLabel}\n            id={this.htmlId}\n            disabled={this.disabled}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.currentValue}\n            onInput={(event) => this.onInput(event)}\n            onChange={(event) => this.onChange(event)}\n            onFocus={() => (this.showValueTooltip = true)}\n            onBlur={() => (this.showValueTooltip = false)}\n          />\n          <div\n            class=\"tooltip-guide\"\n            ref={(el) => (this.tooltipGuideRef = el)}\n          ></div>\n          <z-tooltip\n            position={this.tooltipPosition}\n            bindTo={this.tooltipGuideRef}\n            open={this.showValueTooltip}\n            closable={false}\n          >\n            <div class=\"current-value\">{this.currentValue}</div>\n          </z-tooltip>\n        </div>\n        {this.showEdges && (\n          <div class=\"edges body-3\">\n            <span class=\"min\">{this.min}</span>\n            <span class=\"max\">{this.max}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}