smoothly 1.119.0 → 1.121.0

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

@@ -1,12 +1,15 @@
 import { h, Host, } from "@stencil/core";
 import { Editable } from "../Editable";
 import { Input } from "../Input";
+import { Range } from "./Range";
 export class SmoothlyInputRange {
     constructor() {
         this.isDifferentFromInitial = false;
         this.observer = Editable.Observer.create(this);
         this.initialValue = undefined;
+        this.sliding = false;
         this.value = undefined;
+        this.dual = false;
         this.defined = false;
         this.readonly = false;
         this.type = "text";
@@ -18,11 +21,16 @@ export class SmoothlyInputRange {
     }
     componentWillLoad() {
         this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), (this.color = color)); });
-        this.smoothlyInput.emit({ [this.name]: this.value });
         this.smoothlyInputLoad.emit(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        this.value && (this.initialValue = this.value);
-        this.valueChanged();
+        if (this.dual && !Range.is(this.value)) {
+            this.initialValue = { start: this.min, end: this.max };
+            this.value = this.initialValue;
+        }
+        else {
+            this.value && (this.initialValue = this.value);
+            this.valueChanged();
+        }
     }
     smoothlyInputLoadHandler(event) {
         Input.registerSubAction(this, event);
@@ -67,20 +75,24 @@ export class SmoothlyInputRange {
         this.valueChanged();
     }
     valueChanged() {
-        var _a, _b;
-        const decimals = !this.step ? undefined : ((_b = (_a = this.step.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
-        this.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals);
-        this.isDifferentFromInitial = this.initialValue != this.value;
-        this.defined = typeof this.value == "number";
-        this.observer.publish();
-        this.smoothlyInput.emit({ [this.name]: this.value });
+        const normalized = Range.normalize(this.value, this.step);
+        if (!Range.equals(normalized, this.value)) {
+            this.value = normalized;
+            return;
+        }
+        this.isDifferentFromInitial = !Range.equals(this.initialValue, this.value);
+        this.defined = Range.defined(this.value);
+        if (!this.sliding) {
+            this.observer.publish();
+            this.smoothlyInput.emit({ [this.name]: this.value });
+        }
     }
     watchingReadonly() {
         this.observer.publish();
     }
     setValue(value) {
         var _a;
-        if (value == undefined) {
+        if (value == undefined || Number.isNaN(value)) {
             this.value = undefined;
         }
         else if (value < this.min) {
@@ -94,20 +106,84 @@ export class SmoothlyInputRange {
         }
         this.input && (this.input.value = this.type == "text" ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() : this.value);
     }
-    render() {
+    setRange(part, value) {
+        const current = Range.is(this.value) ? this.value : { start: this.min, end: this.max };
+        const resolved = value == undefined || Number.isNaN(value) ? (part == "start" ? this.min : this.max) : value;
+        const next = Range.setPart(current, part, resolved, this.min, this.max);
+        if (Range.equals(next, this.value)) {
+            return;
+        }
+        this.value = next;
+        const field = part == "start" ? this.startInput : this.endInput;
+        const bound = next[part];
+        field && (field.value = this.type == "text" ? bound.toString() : bound);
+        !this.sliding && this.smoothlyUserInput.emit({ name: this.name, value: this.value });
+    }
+    async commitField(part) {
+        const field = part == "start" ? this.startInput : this.endInput;
+        this.setRange(part, field ? Number(await field.getValue()) : undefined);
+        const bound = Range.is(this.value) ? this.value[part] : undefined;
+        field === null || field === void 0 ? void 0 : field.setValue(this.type == "text" ? bound === null || bound === void 0 ? void 0 : bound.toString() : bound);
+    }
+    renderSingle() {
         var _a, _b, _c;
-        return (h(Host, { key: '5156fee6f8e0d7a3a14c11bc6476424935972d46', class: {
-                "output-side-right": this.outputSide === "right",
-                "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '85ba263c778cec6970979f819a815a98088a8dae', name: "start" }), h("div", { key: 'd1e281cc39cfd5b442c298659ddad32927f83a7e' }, h("label", { key: 'fbe971c908c237c3f2497e8c5c4d858abf031be6', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'a123e5a35b4524d8d3f200f31dea6586947e2a3e', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
-                this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
-                e.stopPropagation();
-                this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '8d3df2b1b5899cfe814bb70754ca586af4a5de25', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '819a42fa4da5e95b804260f99197524fa2aaf90d', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+        return [
+            h("smoothly-input", { ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+                    this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+                    e.stopPropagation();
+                    this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
+                }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label),
+            h("smoothly-display", { label: (this.type == "percent" ? this.min * 100 : this.min).toString() }),
+            h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+                    event.stopPropagation();
+                    this.sliding = true;
+                    this.setValue(event.target.valueAsNumber);
+                }, onChange: event => {
+                    event.stopPropagation();
+                    this.sliding = false;
+                    this.observer.publish();
+                    this.smoothlyInput.emit({ [this.name]: this.value });
+                    this.smoothlyUserInput.emit({ name: this.name, value: this.value });
+                }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }),
+            h("smoothly-display", { label: (this.type == "percent" ? this.max * 100 : this.max).toString() }),
+        ];
+    }
+    renderDual() {
+        const range = Range.is(this.value) ? this.value : { start: this.min, end: this.max };
+        const left = Range.percent(range.start, this.min, this.max);
+        const right = 100 - Range.percent(range.end, this.min, this.max);
+        return [
+            this.renderField("start", range.start),
+            h("div", { class: "track", part: "track" }, h("div", { class: "fill", part: "fill", style: { left: `${left}%`, right: `${right}%` } }), this.renderRangeInput("start", range.start), this.renderRangeInput("end", range.end)),
+            this.renderField("end", range.end),
+        ];
+    }
+    renderField(part, value) {
+        return (h("smoothly-input", { ref: e => (part == "start" ? (this.startInput = e) : (this.endInput = e)), class: part, color: this.color, name: `${this.name}-${part}`, showLabel: true, type: this.type, onSmoothlyBlur: e => (e.stopPropagation(), this.commitField(part)), onSmoothlyKeydown: e => void (e.detail.key == "Enter" && this.commitField(part)), onSmoothlyInput: e => e.stopPropagation(), onSmoothlyUserInput: e => e.stopPropagation(), value: this.type == "percent" ? value : value === null || value === void 0 ? void 0 : value.toString(), readonly: this.readonly, disabled: this.disabled, right: part == "start" }, part == "start" ? "From" : "To"));
+    }
+    renderRangeInput(part, value) {
+        var _a;
+        return (h("input", { part: part == "start" ? "range range-start" : "range range-end", type: "range", min: this.min, max: this.max, step: (_a = this.step) !== null && _a !== void 0 ? _a : "any", disabled: this.readonly || this.disabled, onInput: event => {
+                const input = event.target;
+                event.stopPropagation();
+                this.sliding = true;
+                this.setRange(part, input.valueAsNumber);
+                const bound = Range.is(this.value) ? this.value[part] : undefined;
+                bound != undefined && (input.value = String(bound));
+            }, onChange: event => {
                 event.stopPropagation();
-                this.setValue(event.target.valueAsNumber);
+                this.sliding = false;
+                this.observer.publish();
+                this.smoothlyInput.emit({ [this.name]: this.value });
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'f0d1d8872a42854cf442f996de63ffcf584995cf', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'e3e904b4883dbceda975cd4d74cd526b77c5d471', name: "end" })));
+            }, value: value !== null && value !== void 0 ? value : (part == "start" ? this.min : this.max) }));
+    }
+    render() {
+        return (h(Host, { key: '93a4e9afcd01c8eda143e413360f20e14bcaa920', class: {
+                "output-side-right": this.outputSide === "right",
+                "show-label": this.outputSide === "left" && !!this.label,
+                dual: this.dual,
+            } }, h("slot", { key: '72711b5578bab0320901dbd513bb312b54b3ff40', name: "start" }), h("div", { key: 'be83442baeb8cd97fd650ac17717a0e4d703976e' }, h("label", { key: '17c0d638d8a9550c01de699efae66f55e1b27b8c', htmlFor: this.name }, this.label), this.dual ? this.renderDual() : this.renderSingle()), h("slot", { key: '1162b21a65fdd05c5703ff547201765b28858554', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }
@@ -127,9 +203,16 @@ export class SmoothlyInputRange {
                 "type": "number",
                 "mutable": true,
                 "complexType": {
-                    "original": "number | undefined",
-                    "resolved": "number | undefined",
-                    "references": {}
+                    "original": "Range.Value | undefined",
+                    "resolved": "number | undefined | { start: number; end: number; }",
+                    "references": {
+                        "Range": {
+                            "location": "import",
+                            "path": "./Range",
+                            "id": "src/components/input/range/Range.ts::Range",
+                            "referenceLocation": "Range"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -143,6 +226,26 @@ export class SmoothlyInputRange {
                 "attribute": "value",
                 "defaultValue": "undefined"
             },
+            "dual": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dual",
+                "defaultValue": "false"
+            },
             "looks": {
                 "type": "string",
                 "mutable": true,
@@ -558,15 +661,21 @@ export class SmoothlyInputRange {
             },
             "getValue": {
                 "complexType": {
-                    "signature": "() => Promise<number | undefined>",
+                    "signature": "() => Promise<Range.Value | undefined>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Range": {
+                            "location": "import",
+                            "path": "./Range",
+                            "id": "src/components/input/range/Range.ts::Range",
+                            "referenceLocation": "Range"
                         }
                     },
-                    "return": "Promise<number | undefined>"
+                    "return": "Promise<Value | undefined>"
                 },
                 "docs": {
                     "text": "",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/range/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EAEL,KAAK,GACL,MAAM,eAAe,CAAA;AAItB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAQhC,MAAM,OAAO,kBAAkB;IAL/B;QAOC,2BAAsB,GAAG,KAAK,CAAA;QACtB,aAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEzC,iBAAY,GAAuB,SAAS,CAAA;QAE3B,UAAK,GAAuB,SAAS,CAAA;QAGrC,YAAO,GAAG,KAAK,CAAA;QACA,aAAQ,GAAG,KAAK,CAAA;QAEhD,SAAI,GAA6C,MAAM,CAAA;QACvD,QAAG,GAAG,CAAC,CAAA;QACP,QAAG,GAAG,GAAG,CAAA;QACQ,SAAI,GAAG,OAAO,CAAA;QAE/B,eAAU,GAAqB,MAAM,CAAA;QAEpC,cAAS,GAAG,KAAK,CAAA;KAoJ1B;IA9IA,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,WAAC,OAAA,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA,EAAA,CAAC,CAAA;QAC1G,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;QACpD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAA;QAC7D,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAA;QACvF,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9C,IAAI,CAAC,YAAY,EAAE,CAAA;IACpB,CAAC;IAED,wBAAwB,CAAC,KAAwD;QAChF,KAAK,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,yBAAyB,CAAC,KAA0C;QACnE,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClC,KAAK,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC;IACF,CAAC;IACD,KAAK,CAAC,oBAAoB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YAC/B,MAAM,IAAI,CAAC,UAAU,EAAE,CAAA;QACxB,CAAC;IACF,CAAC;IAED,UAAU,CAAC,CAAqB,EAAE,OAA2B;QAC5D,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IAChC,CAAC;IAED,KAAK,CAAC,QAAQ;QACb,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACpB,CAAC;IAED,KAAK,CAAC,UAAU;QACf,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,QAAQ;QACb,OAAO,IAAI,CAAC,KAAK,CAAA;IAClB,CAAC;IAED,KAAK,CAAC,KAAK;QACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,QAAoC;QAChD,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;IAClC,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,QAAiB;QAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAA;IAC1B,CAAC;IAED,KAAK,CAAC,KAAK;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAA;IAC/B,CAAC;IAED,KAAK,CAAC,eAAe;QACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAA;QACnC,IAAI,CAAC,YAAY,EAAE,CAAA;IACpB,CAAC;IAED,YAAY;;QACX,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,0CAAE,MAAM,mCAAI,CAAC,CAAC,CAAA;QAC3F,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QAC5G,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAA;QAC7D,IAAI,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAA;QAC5C,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IACrD,CAAC;IAGD,gBAAgB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;IACxB,CAAC;IACD,QAAQ,CAAC,KAAyB;;QACjC,IAAI,KAAK,IAAI,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACvB,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAA;QACtB,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAA;QACtB,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACnB,CAAC;QACD,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC7F,CAAC;IAED,MAAM;;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE;gBACN,mBAAmB,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO;gBAChD,YAAY,EAAE,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;aACxD;YACD,6DAAM,IAAI,EAAC,OAAO,GAAG;YACrB;gBACC,8DAAO,OAAO,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAS;gBAC/C,uEACC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAC1B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,mBAAmB,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE,CAAC,CAC/B,CAAC,CAAC,eAAe,EAAE;wBACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACzF,EACD,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACxC,eAAe,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;wBAC1B,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;oBAC1F,CAAC,EACD,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,EACnE,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACtB,IAAI,CAAC,KAAK,CACK;gBACjB,yEAAkB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAI;gBAC5F,8DACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,KAAK,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,KAAK,CAAC,EAAE;wBAChB,KAAK,CAAC,eAAe,EAAE,CAAA;wBACvB,IAAI,CAAC,QAAQ,CAAE,KAAK,CAAC,MAA2B,CAAC,aAAa,CAAC,CAAA;wBAC/D,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;oBACpE,CAAC,EACD,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,GAAG,GAC5B;gBACF,yEAAkB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAI,CACvF;YACN,6DAAM,IAAI,EAAC,KAAK,GAAG,CACb,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { tidily } from \"tidily\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRange implements Input, Clearable, Editable, ComponentWillLoad {\n\tparent: Editable | undefined\n\tisDifferentFromInitial = false\n\tprivate observer = Editable.Observer.create(this)\n\tprivate input?: HTMLSmoothlyInputElement\n\tprivate initialValue: number | undefined = undefined\n\t@Element() element: HTMLSmoothlyInputRangeElement\n\t@Prop({ mutable: true }) value: number | undefined = undefined\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) defined = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ reflect: true }) disabled?: boolean\n\t@Prop() type: Extract<tidily.Type, \"text\" | \"percent\"> = \"text\"\n\t@Prop() min = 0\n\t@Prop() max = 100\n\t@Prop({ reflect: true }) name = \"range\"\n\t@Prop() step?: number\n\t@Prop() outputSide: \"right\" | \"left\" = \"left\"\n\t@Prop() label: string\n\t@State() showInput = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyUserInput: EventEmitter<Input.UserInput>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = this.looks ?? looks), (this.color = color)))\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.value && (this.initialValue = this.value)\n\t\tthis.valueChanged()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputRange) => void>) {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void {\n\t\tif (event.target != this.element) {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected) {\n\t\t\tawait this.unregister()\n\t\t}\n\t}\n\t@Watch(\"name\")\n\tnameChange(_: string | undefined, oldName: string | undefined) {\n\t\tInput.formRename(this, oldName)\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync getValue(): Promise<number | undefined> {\n\t\treturn this.value\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Method()\n\tasync listen(listener: Editable.Observer.Listener): Promise<void> {\n\t\tthis.observer.subscribe(listener)\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.isDifferentFromInitial = false\n\t\tthis.valueChanged()\n\t}\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tconst decimals = !this.step ? undefined : (this.step.toString().split(\".\")[1]?.length ?? 0)\n\t\tthis.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals)\n\t\tthis.isDifferentFromInitial = this.initialValue != this.value\n\t\tthis.defined = typeof this.value == \"number\"\n\t\tthis.observer.publish()\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t}\n\t@Watch(\"disabled\")\n\t@Watch(\"readonly\")\n\twatchingReadonly(): void {\n\t\tthis.observer.publish()\n\t}\n\tsetValue(value: number | undefined): void {\n\t\tif (value == undefined) {\n\t\t\tthis.value = undefined\n\t\t} else if (value < this.min) {\n\t\t\tthis.value = this.min\n\t\t} else if (value > this.max) {\n\t\t\tthis.value = this.max\n\t\t} else {\n\t\t\tthis.value = value\n\t\t}\n\t\tthis.input && (this.input.value = this.type == \"text\" ? this.value?.toString() : this.value)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t\"output-side-right\": this.outputSide === \"right\",\n\t\t\t\t\t\"show-label\": this.outputSide === \"left\" && !!this.label,\n\t\t\t\t}}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label htmlFor={this.name}>{this.label}</label>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tref={e => (this.input = e)}\n\t\t\t\t\t\tlooks={undefined}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tshowLabel={this.outputSide === \"left\" && !!this.label}\n\t\t\t\t\t\ttype={this.type}\n\t\t\t\t\t\tonSmoothlyInputLoad={async e => (\n\t\t\t\t\t\t\te.stopPropagation(),\n\t\t\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={this.type == \"percent\" ? this.value : this.value?.toString()}\n\t\t\t\t\t\tplaceholder={this.outputSide === \"right\" ? \"-\" : undefined}\n\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\tdisabled={this.disabled}>\n\t\t\t\t\t\t{this.label}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.min * 100 : this.min).toString()} />\n\t\t\t\t\t<input\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tpart=\"range\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tstep={this.step ?? \"any\"}\n\t\t\t\t\t\tdisabled={this.readonly || this.disabled}\n\t\t\t\t\t\tonInput={event => {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\tthis.setValue((event.target as HTMLInputElement).valueAsNumber)\n\t\t\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.value })\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={this.value ?? this.min}\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.max * 100 : this.max).toString()} />\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"end\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { tidily } from \"tidily\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\nimport { Range } from \"./Range\"\n\n@Component({\n\ttag: \"smoothly-input-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRange implements Input, Clearable, Editable, ComponentWillLoad {\n\tparent: Editable | undefined\n\tisDifferentFromInitial = false\n\tprivate observer = Editable.Observer.create(this)\n\tprivate input?: HTMLSmoothlyInputElement\n\tprivate startInput?: HTMLSmoothlyInputElement\n\tprivate endInput?: HTMLSmoothlyInputElement\n\tprivate initialValue: Range.Value | undefined = undefined\n\tprivate sliding = false\n\t@Element() element: HTMLSmoothlyInputRangeElement\n\t@Prop({ mutable: true }) value: Range.Value | undefined = undefined\n\t@Prop() dual = false\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) defined = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ reflect: true }) disabled?: boolean\n\t@Prop() type: Extract<tidily.Type, \"text\" | \"percent\"> = \"text\"\n\t@Prop() min = 0\n\t@Prop() max = 100\n\t@Prop({ reflect: true }) name = \"range\"\n\t@Prop() step?: number\n\t@Prop() outputSide: \"right\" | \"left\" = \"left\"\n\t@Prop() label: string\n\t@State() showInput = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyUserInput: EventEmitter<Input.UserInput>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = this.looks ?? looks), (this.color = color)))\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tif (this.dual && !Range.is(this.value)) {\n\t\t\tthis.initialValue = { start: this.min, end: this.max }\n\t\t\tthis.value = this.initialValue\n\t\t} else {\n\t\t\tthis.value && (this.initialValue = this.value)\n\t\t\tthis.valueChanged()\n\t\t}\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInputRange) => void>) {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void {\n\t\tif (event.target != this.element) {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected) {\n\t\t\tawait this.unregister()\n\t\t}\n\t}\n\t@Watch(\"name\")\n\tnameChange(_: string | undefined, oldName: string | undefined) {\n\t\tInput.formRename(this, oldName)\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync getValue(): Promise<Range.Value | undefined> {\n\t\treturn this.value\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Method()\n\tasync listen(listener: Editable.Observer.Listener): Promise<void> {\n\t\tthis.observer.subscribe(listener)\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.isDifferentFromInitial = false\n\t\tthis.valueChanged()\n\t}\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tconst normalized = Range.normalize(this.value, this.step)\n\t\tif (!Range.equals(normalized, this.value)) {\n\t\t\tthis.value = normalized\n\t\t\treturn\n\t\t}\n\t\tthis.isDifferentFromInitial = !Range.equals(this.initialValue, this.value)\n\t\tthis.defined = Range.defined(this.value)\n\t\tif (!this.sliding) {\n\t\t\tthis.observer.publish()\n\t\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\t}\n\t}\n\t@Watch(\"disabled\")\n\t@Watch(\"readonly\")\n\twatchingReadonly(): void {\n\t\tthis.observer.publish()\n\t}\n\tsetValue(value: number | undefined): void {\n\t\tif (value == undefined || Number.isNaN(value)) {\n\t\t\tthis.value = undefined\n\t\t} else if (value < this.min) {\n\t\t\tthis.value = this.min\n\t\t} else if (value > this.max) {\n\t\t\tthis.value = this.max\n\t\t} else {\n\t\t\tthis.value = value\n\t\t}\n\t\tthis.input && (this.input.value = this.type == \"text\" ? (this.value as number)?.toString() : (this.value as number))\n\t}\n\tsetRange(part: \"start\" | \"end\", value: number | undefined): void {\n\t\tconst current = Range.is(this.value) ? this.value : { start: this.min, end: this.max }\n\t\tconst resolved = value == undefined || Number.isNaN(value) ? (part == \"start\" ? this.min : this.max) : value\n\t\tconst next = Range.setPart(current, part, resolved, this.min, this.max)\n\t\tif (Range.equals(next, this.value)) {\n\t\t\treturn\n\t\t}\n\t\tthis.value = next\n\t\tconst field = part == \"start\" ? this.startInput : this.endInput\n\t\tconst bound = next[part]\n\t\tfield && (field.value = this.type == \"text\" ? bound.toString() : bound)\n\t\t!this.sliding && this.smoothlyUserInput.emit({ name: this.name, value: this.value })\n\t}\n\tprivate async commitField(part: \"start\" | \"end\"): Promise<void> {\n\t\tconst field = part == \"start\" ? this.startInput : this.endInput\n\t\tthis.setRange(part, field ? Number(await field.getValue()) : undefined)\n\t\tconst bound = Range.is(this.value) ? this.value[part] : undefined\n\t\tfield?.setValue(this.type == \"text\" ? bound?.toString() : bound)\n\t}\n\n\tprivate renderSingle(): VNode[] {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tref={e => (this.input = e)}\n\t\t\t\tlooks={undefined}\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={this.name}\n\t\t\t\tshowLabel={this.outputSide === \"left\" && !!this.label}\n\t\t\t\ttype={this.type}\n\t\t\t\tonSmoothlyInputLoad={async e => (\n\t\t\t\t\te.stopPropagation(),\n\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t)}\n\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t}}\n\t\t\t\tvalue={this.type == \"percent\" ? (this.value as number) : (this.value as number)?.toString()}\n\t\t\t\tplaceholder={this.outputSide === \"right\" ? \"-\" : undefined}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tdisabled={this.disabled}>\n\t\t\t\t{this.label}\n\t\t\t</smoothly-input>,\n\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.min * 100 : this.min).toString()} />,\n\t\t\t<input\n\t\t\t\tname={this.name}\n\t\t\t\tpart=\"range\"\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={this.min}\n\t\t\t\tmax={this.max}\n\t\t\t\tstep={this.step ?? \"any\"}\n\t\t\t\tdisabled={this.readonly || this.disabled}\n\t\t\t\tonInput={event => {\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\tthis.sliding = true\n\t\t\t\t\tthis.setValue((event.target as HTMLInputElement).valueAsNumber)\n\t\t\t\t}}\n\t\t\t\tonChange={event => {\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\tthis.sliding = false\n\t\t\t\t\tthis.observer.publish()\n\t\t\t\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.value })\n\t\t\t\t}}\n\t\t\t\tvalue={(this.value as number) ?? this.min}\n\t\t\t/>,\n\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.max * 100 : this.max).toString()} />,\n\t\t]\n\t}\n\tprivate renderDual(): VNode[] {\n\t\tconst range = Range.is(this.value) ? this.value : { start: this.min, end: this.max }\n\t\tconst left = Range.percent(range.start, this.min, this.max)\n\t\tconst right = 100 - Range.percent(range.end, this.min, this.max)\n\t\treturn [\n\t\t\tthis.renderField(\"start\", range.start),\n\t\t\t<div class=\"track\" part=\"track\">\n\t\t\t\t<div class=\"fill\" part=\"fill\" style={{ left: `${left}%`, right: `${right}%` }} />\n\t\t\t\t{this.renderRangeInput(\"start\", range.start)}\n\t\t\t\t{this.renderRangeInput(\"end\", range.end)}\n\t\t\t</div>,\n\t\t\tthis.renderField(\"end\", range.end),\n\t\t]\n\t}\n\tprivate renderField(part: \"start\" | \"end\", value: number): VNode {\n\t\treturn (\n\t\t\t<smoothly-input\n\t\t\t\tref={e => (part == \"start\" ? (this.startInput = e) : (this.endInput = e))}\n\t\t\t\tclass={part}\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={`${this.name}-${part}`}\n\t\t\t\tshowLabel={true}\n\t\t\t\ttype={this.type}\n\t\t\t\tonSmoothlyBlur={e => (e.stopPropagation(), this.commitField(part))}\n\t\t\t\tonSmoothlyKeydown={e => void (e.detail.key == \"Enter\" && this.commitField(part))}\n\t\t\t\tonSmoothlyInput={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyUserInput={e => e.stopPropagation()}\n\t\t\t\tvalue={this.type == \"percent\" ? value : value?.toString()}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\tright={part == \"start\"}>\n\t\t\t\t{part == \"start\" ? \"From\" : \"To\"}\n\t\t\t</smoothly-input>\n\t\t)\n\t}\n\tprivate renderRangeInput(part: \"start\" | \"end\", value: number): VNode {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tpart={part == \"start\" ? \"range range-start\" : \"range range-end\"}\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={this.min}\n\t\t\t\tmax={this.max}\n\t\t\t\tstep={this.step ?? \"any\"}\n\t\t\t\tdisabled={this.readonly || this.disabled}\n\t\t\t\tonInput={event => {\n\t\t\t\t\tconst input = event.target as HTMLInputElement\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\tthis.sliding = true\n\t\t\t\t\tthis.setRange(part, input.valueAsNumber)\n\t\t\t\t\tconst bound = Range.is(this.value) ? this.value[part] : undefined\n\t\t\t\t\tbound != undefined && (input.value = String(bound))\n\t\t\t\t}}\n\t\t\t\tonChange={event => {\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\tthis.sliding = false\n\t\t\t\t\tthis.observer.publish()\n\t\t\t\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\t\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.value })\n\t\t\t\t}}\n\t\t\t\tvalue={value ?? (part == \"start\" ? this.min : this.max)}\n\t\t\t/>\n\t\t)\n\t}\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t\"output-side-right\": this.outputSide === \"right\",\n\t\t\t\t\t\"show-label\": this.outputSide === \"left\" && !!this.label,\n\t\t\t\t\tdual: this.dual,\n\t\t\t\t}}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label htmlFor={this.name}>{this.label}</label>\n\t\t\t\t\t{this.dual ? this.renderDual() : this.renderSingle()}\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"end\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/range/style.css

@@ -87,6 +87,9 @@
 	transform-origin: top left;
 	transition: transform 100ms ease;
 }
+:host[right] .label {
+	transform-origin: top right;
+}
 
 :host.floating-label ::slotted([slot=label]),
 :host.has-value ::slotted([slot=label]),
@@ -146,7 +149,7 @@
 	margin-left: var(--input-padding-side);
 	border: none;
 	box-sizing: border-box;
-	width: 5em;
+	width: 6rem;
 	order: 3;
 	margin: 0;
 }
@@ -253,3 +256,100 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+/*--------------------DUAL MODE------------------ */
+:host(.dual)>div>smoothly-input {
+	width: 6rem;
+	flex: 0 0 auto;
+}
+:host(.dual) .track {
+	position: relative;
+	flex: 1;
+	height: 1.5em;
+	display: flex;
+	align-items: center;
+}
+/* Shared visible track line */
+:host(.dual) .track::before {
+	content: "";
+	position: absolute;
+	left: .4em;
+	right: .4em;
+	height: .3rem;
+	border-radius: 20px;
+	background-color: rgb(var(--smoothly-input-foreground));
+}
+:host(.dual) .fill {
+	position: absolute;
+	height: .3rem;
+	border-radius: 20px;
+	background-color: rgb(var(--smoothly-primary-color));
+	pointer-events: none;
+}
+/* Match the single range: the active fill drops to the foreground color when readonly/disabled. */
+:host(.dual[readonly]) .fill,
+:host(.dual[disabled]) .fill {
+	background-color: rgb(var(--smoothly-input-foreground));
+}
+/* Both range inputs occupy the same box; only their thumbs receive pointer events */
+:host(.dual) .track > input[type=range] {
+	position: absolute;
+	left: 0;
+	right: 0;
+	width: 100%;
+	margin: 0;
+	background: transparent;
+	pointer-events: none;
+}
+:host(.dual) .track > input[type=range]::-webkit-slider-runnable-track {
+	background: transparent;
+}
+:host(.dual) .track > input[type=range]::-moz-range-track {
+	background: transparent;
+}
+:host(.dual) .track > input[type=range]::-webkit-slider-thumb {
+	pointer-events: auto;
+}
+:host(.dual) .track > input[type=range]::-moz-range-thumb {
+	pointer-events: auto;
+}
+
+/*--------------------DUAL MODE THUMBS------------------ */
+/* Single-mode thumb rules only match the direct-child :host>div>input, not the nested dual inputs, so replicate them here. */
+:host(.dual) .track > input[type=range] {
+	-webkit-appearance: none;
+}
+:host(.dual) .track > input[type=range]::-webkit-slider-runnable-track {
+	height: .3rem;
+}
+:host(.dual) .track > input[type=range]::-moz-range-track {
+	height: .3rem;
+}
+:host(.dual) .track > input[type=range]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	height: 0.8em;
+	width: 0.8em;
+	margin-top: -.25em;
+	border-radius: 100%;
+	border: none;
+	background-color: rgb(var(--smoothly-input-foreground));
+}
+:host(.dual):not([disabled]):not([readonly]) .track > input[type=range]::-webkit-slider-thumb {
+	background-color: rgb(var(--smoothly-primary-color));
+	cursor: pointer;
+}
+:host(.dual) .track > input[type=range]::-moz-range-thumb {
+	height: 0.8em;
+	width: 0.8em;
+	border-radius: 100%;
+	border: none;
+	background-color: rgb(var(--smoothly-input-foreground));
+}
+:host(.dual):not([disabled]):not([readonly]) .track > input[type=range]::-moz-range-thumb {
+	background-color: rgb(var(--smoothly-primary-color));
+	cursor: pointer;
+}
+:host(.dual)[disabled] .track > input[type=range]::-webkit-slider-thumb,
+:host(.dual)[disabled] .track > input[type=range]::-moz-range-thumb {
+	cursor: not-allowed;
+}

package/dist/collection/components/input/reset/index.js

@@ -41,7 +41,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f69a407428454170f461cee5d8e6b8ece33f682f', title: this.tooltip }, h("smoothly-button", { key: '21fed26fa5cb6c8dc32af427f492cb5879682d3c', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: 'ed9f01c4274c9b5b59c6cd27c2cdd62e3a7bb259' }), h("smoothly-icon", { key: '0ddd9963d333449a5d029b6c29f532ca8d2b3423', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '29a3490c49e3b9d9e5f308b151c1fe4f6767cba0', title: this.tooltip }, h("smoothly-button", { key: '7c6c4f6ddf30a5118731012f645fc40fdc0ecde7', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: '515048d8827b4be6d52c9b094f501a9face42bb3' }), h("smoothly-icon", { key: '6f20b342b2606118bca317997a6c54fe11a8f1ca', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-reset"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/select/index.js

@@ -12,6 +12,7 @@ export class SmoothlyInputSelect {
         this.initialValueHandled = false;
         this.observer = Editable.Observer.create(this);
         this.items = [];
+        this.displaySeparator = '<span style="display:inline-block;width:0.8rem"></span>';
         this.invalid = false;
         this.name = "selected";
         this.showLabel = true;
@@ -183,7 +184,15 @@ export class SmoothlyInputSelect {
         return selected.length === initialValue.length && initialValue.every(value => selected.includes(value));
     }
     displaySelected() {
-        this.display = this.selected.map(option => option.innerHTML);
+        this.display = this.selected.map(option => {
+            const clone = option.cloneNode(true);
+            clone.querySelectorAll("smoothly-icon").forEach(icon => {
+                const style = icon.style;
+                style.display = "inline-flex";
+                style.verticalAlign = "middle";
+            });
+            return clone.innerHTML;
+        });
     }
     onKeyDown(event) {
         event.stopPropagation();
@@ -278,11 +287,11 @@ export class SmoothlyInputSelect {
         }
     }
     render() {
-        return (h(Host, { key: '65a7d8d8f4e241d01e6e5862cb399cbc575f561b', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: 'ac6e093f04b7ab37032aad27f1c82a02d255def9', class: "select-display" }, this.display.length > 0 ? h("div", { innerHTML: this.display.join(", ") }) : this.placeholder), h("div", { key: 'b80e14fcd129d7abf5836055f4a2e28a4ed16d0f', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: '32de16a9eab82526f2f38dfaedc737cdd12f6d92', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'af50968ee2c894126b83d7813c82a0d0402cf7a9', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '0c0f8945582eae4e322f0e17a997995d4f4bd02c', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '1d4c5b7cc174c6ef6e10f4556b1d2387b4150619', name: "label" }), h("div", { key: '45417fef3b11e8e1da9347f60ef03e6fc0a5a421', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'b6556702655db2d495fc5a4e6ecca75886739c77', class: "search" }, h("smoothly-icon", { key: 'a638f9dffd30ed31bad8dadfe521402ce4133623', name: "search-outline", size: "small" }), h("input", { key: 'ee2c1fc1595145211c41d249ec734aabc97d9a00', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: '10d79827edb6792f0ff65a8f91102a8bdc33ea0f', name: "backspace-outline", size: "small", onClick: () => {
+        return (h(Host, { key: '1cfb5cdaeee4ecebbef19ba89e81ce750b748fd5', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: '8b70e7ed56604f4bdc9efea35f7ab030ae71ef28', class: "select-display" }, this.display.length > 0 ? (h("div", { class: "value", innerHTML: this.display.join(this.displaySeparator) })) : (this.placeholder)), h("div", { key: '61c7ed152c3a0e190a0acba91f0b16d868326d5a', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: 'ad06e05c043692038e51e785414597de4d9fbb7a', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '53d7011004fe7e76514b5a25cb93643b64115713', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '59cf62f39652ac58e42854e5552d7f097e8c031b', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '83b8024bc79bc83f7f75a20cc324d4555c683818', name: "label" }), h("div", { key: 'b03bb76da9b2e55d4111a958cf48c10611fbaf02', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: '3aa51b8ad250108d83da3741e4d9e0f684d1e2e0', class: "search" }, h("smoothly-icon", { key: 'b759aa93d460e8eae8e0bea32e77222b9fad12a5', name: "search-outline", size: "small" }), h("input", { key: '2089730dd304e16e38b09bb4c90aa0932031588d', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: '1ec0ce82744829f004b19fdbddfc39fc3e667754', name: "backspace-outline", size: "small", onClick: () => {
                 var _a;
                 this.resetFilter();
                 (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
-            } }), this.mutable && h("smoothly-icon", { key: 'c9845fdf253eb126f440178a7667a0c1839086d1', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: 'c2decc722e32db1d3fcdcf734b6cc57867618a7a', class: "menu", hidden: !this.open }, h("slot", { key: '8e6e54b0dd4a7f1951fdfc312dd1573d43f0bdec' }), this.addedItems))));
+            } }), this.mutable && h("smoothly-icon", { key: '8a4c8af59466704939254337b0f8bae842631ab5', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: '756d18dc29cdb02499b693fd25f5bf5b5e3799dd', class: "menu", hidden: !this.open }, h("slot", { key: '04471237e2fc63ae6b07d140a3dac4f4bfb6b16a' }), this.addedItems))));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }