smoothly 1.2.1-alpha.28 → 1.2.1-alpha.29

package/dist/cjs/smoothly-app_107.cjs.entry.js

@@ -8150,7 +8150,7 @@ var Input;
             color: Scrollable.Color.type.optional(),
             name: TimeZone.string(),
             invalid: TimeZone.boolean().optional(),
-            looks: Looks.type,
+            looks: Looks.type.optional(),
             defined: TimeZone.boolean().optional(),
             binary: Scrollable.islyFunction().optional(),
         });
@@ -9638,7 +9638,7 @@ const SmoothlyInputDemoStandard = class {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (index.h(index.Host, { key: '4719fdbb2328badf8f020fb6b0efa634bb3852c1', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'dd3ea15780cbb44dd4230404b9d76ab76222bc4a', class: "description" }, index.h("h2", { key: '201180d47584d7a37d3a6e2637c51306c84f1f2a' }, "Input Standard"), index.h("p", { key: 'a63a5ee74970647f25a468b74660a582c3103dc4' }, "Height of input should be ", index.h("code", { key: '972fbd77c1efadbf176e69f1db14c5d9462394a5' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '5c801aa407bc7a35ae23531603497e74edc356f8', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '1a48cc1afaefcac85d94004e7fe2155a34cfdee2', name: "looks" }, index.h("span", { key: '992d54cdac53aceaf9c2831cdfc5af70044af196', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '63b7d971224f64e0b1808866b516fd26448a1275', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'ddf2534c6ca5d761052ee42fe9214de7e702c0bf', name: "color" }, index.h("span", { key: '7fefb42a32f3440b5c36f897a8faa5ac8a6de602', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '7c05aa6b3d22cc5c58478281fa1d27312987dfc2', slot: "end" })), index.h("smoothly-input-checkbox", { key: '09fdf07734f0c1475c812242133bc20c12cff029', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '0e7f5a06add851c0bdc35cf918020573bbf55cc2', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: 'a90802f03b3fc0ad71506a8cf70b909061da7258', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '28b69b453b3759c81e96fc858535a83c1ec33047', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '39d3d462f1daa47ba8c401ca9d88fdde91223675', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '87d5bca2ef878a79ddca03fada7969da305b55b2', class: "width" }, "100%"), index.h("div", { key: '6e357e9a3c0614d90169132187a71be5574705f9', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '49739b4eac9e5915ca9df59949c70cbb5b4e6e6d', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'aa1eef8fedf8ce4efd226d7de7ab72b4d4d46e37' }, "Text"), index.h("smoothly-input-clear", { key: '3f33759a6afd6a2d6d6d8c1da9c001332ae7137d', slot: "end" })), index.h("div", { key: '93e02b23909be172432f9942b03de09a578c30f0', class: "height" }), index.h("smoothly-input-select", { key: '999f786805780537e683ce89b1c674d596e69ebb', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '63d4a3e37ebb68442bcdaa40d66debab489ba3df', slot: "label" }, "Select"), index.h("smoothly-item", { key: '72d2eed6c3403910f8906924f0bd9f62da609b27', value: "1" }, "January"), index.h("smoothly-item", { key: '16834bfa537737854dc7ed042c188aec22c0d47d', value: "2" }, "February"), index.h("smoothly-item", { key: '5241bb5951cced61e5eec6e32e2de79fb08f0a4e', value: "3" }, "March"), index.h("smoothly-item", { key: 'bcf3b5d9c1595e76d10fc21204042602c61d9c3b', value: "4" }, "April"), index.h("smoothly-item", { key: 'ef13dcbbe10a90b86d9b90e5f47aefba0128577c', value: "5" }, "May"), index.h("smoothly-item", { key: 'af3da8c0909d13417835e6dafc302bef70821199', value: "6" }, "June"), index.h("smoothly-item", { key: '8974c5f449e9807d2ecd5699eeb4418ecb619a16', value: "7" }, "July"), index.h("smoothly-item", { key: '1fe441ffd10bbc20dbb86cd8e5ebf4b41e17a813', value: "8" }, "August"), index.h("smoothly-item", { key: '6b8f1f7d1d300b659ea33fcd93ff70048c51ca2a', value: "9" }, "September"), index.h("smoothly-item", { key: 'c9270e8a74d20e51e7752854d84591bc48ed3337', value: "10" }, "October"), index.h("smoothly-item", { key: 'd27392d73235db46f1dad164b1e7f105a30ad550', value: "11" }, "November"), index.h("smoothly-item", { key: 'c6384e32911143860f619f5c64169155782c5c09', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'ac566355d23456c3c2763256e32dad7e31d9fcc6', slot: "end" })), index.h("div", { key: '3dada69303d1e58aa79b986eeca821c02fcf09cd', class: "height" }), index.h("smoothly-input-checkbox", { key: 'f84c1253de429dcf4bae20f897b0f3345f312034', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '3b5b54c42663986b9b776fd1a7eb8f345c87b17c', class: "height" }), index.h("smoothly-input-radio", { key: 'f91581d99517c537ad37742334e81fee60667b66', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '3b9cd65dc7898304a468f4d9868b51f6948be746', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '985cfe9ea20ba640110dea9fd489b045eb5518c4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '8d1db72d9737c384fad3a9e234449cdf5919c1ee', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '0d062c78a15c2477892604a3df64eb1b63595b42', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a4c2e8e84f7f582cf33b6330b322cee7d9ecf7c6', slot: "end" })), index.h("div", { key: '6240cbbc5f6219f6a2a04ac5f19236a02df6ce96', class: "height" }), index.h("smoothly-input-file", { key: '316475974c81711b670d3f25c224d350df502091', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '9bd629ef27e7dc2a797b313b62f2a69a5dd3d445', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '883607ff5f3be75e109c635e8620ebccbcbfff14', slot: "end" })), index.h("div", { key: '923a93813b3a28992c966bc1b75a4d8aea0a9390', class: "height" }), index.h("smoothly-input-range", { key: '7848094bc9e9f18a10199a890c4eb81ff5f2ece0', label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: '09a5fcee0abf8f4c3fb3e298c3b7bc669aa2213f', slot: "end" })), index.h("div", { key: 'bcf0bdea85e48891d76163e2095cea1380eca0c2', class: "height" }), index.h("smoothly-input-color", { key: '88753464871d76ee53d5cb9bd7551bc79a6a8daf', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '3e6d5fc474652d05000353aba7eac67de9dae495' }, "Color"), index.h("smoothly-input-clear", { key: 'a20ee52948e70983c7e5ff9a312b1dcdcbd20a5f', slot: "end" })), index.h("div", { key: '1b858fedf1d7d17455248c6752dc5835c5015d47', class: "height" }), index.h("smoothly-input-date", { key: '69bd6abda9a5452fe585a9ff6bd3c3a4b2d240f3', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'cf6776345185d11d1b36fc7f1e3926ccf6610f78' }, "Date"), index.h("smoothly-input-clear", { key: '870cca26a43bfdc30a2d69669bfb4cd245dcec9f', slot: "end" })), index.h("div", { key: '871b1fc789dd2348df5cf7ec96449ea1cb37cfcd', class: "height" }), index.h("smoothly-input-date-range", { key: '26573c69d62f0035006002be2c97da8fab1c4763', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'c62cd91d6caacd7f7808e284a83d6de5ea68cec3' }, "Date Range"), index.h("smoothly-input-clear", { key: '1c48d9b517a6fde72b6852b17f60ad13fee8b72c', slot: "end" })), index.h("div", { key: '6b563e48b361cab8fb294ec9dadc285a89398bec', class: "height" }), index.h("div", { key: 'b1eb602fb2b71c054411bd0853ef4cf079fd28dc', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (index.h(index.Host, { key: '4719fdbb2328badf8f020fb6b0efa634bb3852c1', class: { vertical: !!this.options.vertical } }, index.h("div", { key: 'dd3ea15780cbb44dd4230404b9d76ab76222bc4a', class: "description" }, index.h("h2", { key: '201180d47584d7a37d3a6e2637c51306c84f1f2a' }, "Input Standard"), index.h("p", { key: 'a63a5ee74970647f25a468b74660a582c3103dc4' }, "Height of input should be ", index.h("code", { key: '972fbd77c1efadbf176e69f1db14c5d9462394a5' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), index.h("smoothly-form", { key: '5c801aa407bc7a35ae23531603497e74edc356f8', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, index.h("smoothly-input-select", { key: '1a48cc1afaefcac85d94004e7fe2155a34cfdee2', name: "looks" }, index.h("span", { key: '992d54cdac53aceaf9c2831cdfc5af70044af196', slot: "label" }, "Looks"), Looks.types.map(l => (index.h("smoothly-item", { value: l }, l)))), index.h("smoothly-input-checkbox", { key: '63b7d971224f64e0b1808866b516fd26448a1275', name: "readonly" }, "Readonly"), index.h("smoothly-input-select", { key: 'ddf2534c6ca5d761052ee42fe9214de7e702c0bf', name: "color" }, index.h("span", { key: '7fefb42a32f3440b5c36f897a8faa5ac8a6de602', slot: "label" }, "Color"), Scrollable.Color.types.map(c => (index.h("smoothly-item", { value: c }, index.h("span", { color: c }, c)))), index.h("smoothly-input-clear", { key: '7c05aa6b3d22cc5c58478281fa1d27312987dfc2', slot: "end" })), index.h("smoothly-input-checkbox", { key: '09fdf07734f0c1475c812242133bc20c12cff029', name: "vertical" }, "Vertical Layout"), index.h("smoothly-input-checkbox", { key: '0e7f5a06add851c0bdc35cf918020573bbf55cc2', name: "showLabel", checked: this.options.showLabel }, "Show Label"), index.h("smoothly-input-checkbox", { key: 'a90802f03b3fc0ad71506a8cf70b909061da7258', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), index.h("smoothly-input-range", { key: '28b69b453b3759c81e96fc858535a83c1ec33047', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), index.h("div", { key: '39d3d462f1daa47ba8c401ca9d88fdde91223675', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, index.h("div", { key: '87d5bca2ef878a79ddca03fada7969da305b55b2', class: "width" }, "100%"), index.h("div", { key: '6e357e9a3c0614d90169132187a71be5574705f9', class: "left-padding" }, "0.5rem - left padding"), index.h("smoothly-input", { key: '49739b4eac9e5915ca9df59949c70cbb5b4e6e6d', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: 'aa1eef8fedf8ce4efd226d7de7ab72b4d4d46e37' }, "Text"), index.h("smoothly-input-clear", { key: '3f33759a6afd6a2d6d6d8c1da9c001332ae7137d', slot: "end" })), index.h("div", { key: '93e02b23909be172432f9942b03de09a578c30f0', class: "height" }), index.h("smoothly-input-select", { key: '999f786805780537e683ce89b1c674d596e69ebb', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && index.h("label", { key: '63d4a3e37ebb68442bcdaa40d66debab489ba3df', slot: "label" }, "Select"), index.h("smoothly-item", { key: '72d2eed6c3403910f8906924f0bd9f62da609b27', value: "1" }, "January"), index.h("smoothly-item", { key: '16834bfa537737854dc7ed042c188aec22c0d47d', value: "2" }, "February"), index.h("smoothly-item", { key: '5241bb5951cced61e5eec6e32e2de79fb08f0a4e', value: "3" }, "March"), index.h("smoothly-item", { key: 'bcf3b5d9c1595e76d10fc21204042602c61d9c3b', value: "4" }, "April"), index.h("smoothly-item", { key: 'ef13dcbbe10a90b86d9b90e5f47aefba0128577c', value: "5" }, "May"), index.h("smoothly-item", { key: 'af3da8c0909d13417835e6dafc302bef70821199', value: "6" }, "June"), index.h("smoothly-item", { key: '8974c5f449e9807d2ecd5699eeb4418ecb619a16', value: "7" }, "July"), index.h("smoothly-item", { key: '1fe441ffd10bbc20dbb86cd8e5ebf4b41e17a813', value: "8" }, "August"), index.h("smoothly-item", { key: '6b8f1f7d1d300b659ea33fcd93ff70048c51ca2a', value: "9" }, "September"), index.h("smoothly-item", { key: 'c9270e8a74d20e51e7752854d84591bc48ed3337', value: "10" }, "October"), index.h("smoothly-item", { key: 'd27392d73235db46f1dad164b1e7f105a30ad550', value: "11" }, "November"), index.h("smoothly-item", { key: 'c6384e32911143860f619f5c64169155782c5c09', value: "12" }, "December"), index.h("smoothly-input-clear", { key: 'ac566355d23456c3c2763256e32dad7e31d9fcc6', slot: "end" })), index.h("div", { key: '3dada69303d1e58aa79b986eeca821c02fcf09cd', class: "height" }), index.h("smoothly-input-checkbox", { key: 'f84c1253de429dcf4bae20f897b0f3345f312034', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), index.h("div", { key: '3b5b54c42663986b9b776fd1a7eb8f345c87b17c', class: "height" }), index.h("smoothly-input-radio", { key: 'f91581d99517c537ad37742334e81fee60667b66', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("label", { key: '3b9cd65dc7898304a468f4d9868b51f6948be746', slot: "label" }, "Radio"), index.h("smoothly-input-radio-item", { key: '985cfe9ea20ba640110dea9fd489b045eb5518c4', value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '8d1db72d9737c384fad3a9e234449cdf5919c1ee', selected: true, value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '0d062c78a15c2477892604a3df64eb1b63595b42', value: "third" }, "Label 3"), index.h("smoothly-input-clear", { key: 'a4c2e8e84f7f582cf33b6330b322cee7d9ecf7c6', slot: "end" })), index.h("div", { key: '6240cbbc5f6219f6a2a04ac5f19236a02df6ce96', class: "height" }), index.h("smoothly-input-file", { key: '316475974c81711b670d3f25c224d350df502091', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '9bd629ef27e7dc2a797b313b62f2a69a5dd3d445', slot: "label" }, "File"), index.h("smoothly-input-clear", { key: '883607ff5f3be75e109c635e8620ebccbcbfff14', slot: "end" })), index.h("div", { key: '923a93813b3a28992c966bc1b75a4d8aea0a9390', class: "height" }), index.h("smoothly-input-range", { key: '31e9715073909d1ca11f946970ec3d76545b70ff', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, index.h("smoothly-input-clear", { key: 'cbb6f780158aab6ba6bd7dce2f178f96ceeda322', slot: "end" })), index.h("div", { key: 'b14b43af7674d2bd13dd305f4226a68dd4198870', class: "height" }), index.h("smoothly-input-color", { key: '9a5cd02ba8dbc24129bbf5dffc328c9bbcd03cc5', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '618d1451e7e7fcd00583e8ceddc38dd6bc6b8d3e' }, "Color"), index.h("smoothly-input-clear", { key: '5238442e41846556334216472c680365779e57da', slot: "end" })), index.h("div", { key: '883c8d0ce9069cce8c22074cd78133f9fbd6dfcd', class: "height" }), index.h("smoothly-input-date", { key: '2f375e6e70d6bc9a3c66648eaaddf98d5748a531', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '0fad1deee27a6468badb75fc3e4e7b54a433796d' }, "Date"), index.h("smoothly-input-clear", { key: '94fa813d6e599ab0932e5f5e1f3fabdd46e10626', slot: "end" })), index.h("div", { key: 'fcd1dcd38e1237fd34189d55c27b7551e73675ad', class: "height" }), index.h("smoothly-input-date-range", { key: '63c4b2a8ec672210bccf9223db656eaa3dc909d5', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && index.h("span", { key: '8ec49c06f4a8e6b15e228c96e66ad2bf47b1464e' }, "Date Range"), index.h("smoothly-input-clear", { key: 'c7135c49de3110aced9a04bf08384a70bb333463', slot: "end" })), index.h("div", { key: 'ed090b049a9640dbb04ae25534a1e706d44a432c', class: "height" }), index.h("div", { key: '4d3f1e839b1018869e0917170f64e84528e6bc37', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return index.getElement(this); }
 };
@@ -10167,10 +10167,8 @@ const SmoothlyInputRange = class {
         (_d = (_c = this.listener).changed) === null || _d === void 0 ? void 0 : _d.call(_c, this);
         this.smoothlyInput.emit({ [this.name]: this.value });
     }
-    inputHandler(event) {
+    setValue(value) {
         var _a;
-        event.stopPropagation();
-        const value = !event ? this.value : event.target && "value" in event.target ? Number(event.target.value) : undefined;
         if (value == undefined)
             this.value = undefined;
         else if (value < this.min)
@@ -10183,10 +10181,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'e201283fd4c8eb8ebb97a85e8d6ca1afa03c8a0e', class: {
+        return (index.h(index.Host, { key: '1ce2c2104db6d9ede8b0d4ecdb8b55bdea8991b5', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '0cf4878842ca0022b743cb99cb98c85dcb209dbc', name: "start" }), index.h("div", { key: '8afdf2be2d1c268eebd819bb45848401ddc3e6a4' }, index.h("label", { key: '37a18d8834ee6cd40316a777c2fbe549fa14e0d6', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '3d6989856fab7ca80a86cbf6127a15aab9fab414', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => e.stopPropagation(), 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 }, this.label), index.h("smoothly-display", { key: 'c96cad703ae7952134efb3e161c97daa77bfd1f2', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '73a4661a453b5e306303bf190da7e9c510eecd43', 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, onInput: event => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'c9c0e2a671e868b986b89bc69c17f90fb61b3e81', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '4190db4628cb1ea3ea45464e922895ae2d3d4b65', name: "end" })));
+            } }, index.h("slot", { key: 'd3bd884a5fff7b16d8ceade8a218797553f650dc', name: "start" }), index.h("div", { key: '69b6e1b02a7340aace4b877d69fab56d39dd8800' }, index.h("label", { key: '0c258913aef0492c4010872a4835657e49af34b5', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'dd06f046bc9497c6b4b4686010ef24e4f30320f8', 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 }, this.label), index.h("smoothly-display", { key: 'a92231dcb3c785b370001b12d83c62e606328ae5', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'd2652c0063b3cf9c4eb851a7e3c078456a31fc0f', 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, onInput: event => {
+                event.stopPropagation();
+                this.setValue(event.target.valueAsNumber);
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'ce71f3afa224e3377999bb746e48d3512f3c3d8a', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'fecefbabd8986602931012316fc79dfc7ffac47c', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {