smoothly 1.0.0-alpha.150 → 1.0.0-alpha.151

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

@@ -9365,7 +9365,7 @@ const SmoothlyInputDemo = class {
     console.log("smoothlyInput", event.detail);
   }
   render() {
-    return (index.h(index.Host, null, index.h("h2", null, "Range"), index.h("smoothly-form", null, index.h("smoothly-input-range", { step: 1 }, index.h("div", { slot: "label" }, "Select number in range"))), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+    return (index.h(index.Host, null, index.h("h2", null, "Range"), index.h("smoothly-form", null, index.h("smoothly-input-range", { step: 1, name: "range" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
         const duration = e.detail.duration;
         console.log("event duration", duration);
         this.duration = duration;
@@ -9471,7 +9471,7 @@ const MonthSelector = class {
 };
 MonthSelector.style = styleCss$G;
 
-const styleCss$F = ":host{display:flex;position:relative;flex-wrap:wrap;width:100%;justify-content:space-between}:host .output-container{width:100%;margin:0 1.2em;position:relative;height:2em}:host output{position:absolute;transform:translateX(-50%);font-weight:600;font-size:1.2em;left:var(--left-adjustment, 0)}:host ::slotted(div),:host label{margin-bottom:.5em;font-size:1.5em}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;height:3em}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:2em;width:2em;border-radius:50%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--smoothly-primary-contrast)) solid;cursor:pointer;margin-top:.5em;}input[type=range]::-moz-range-thumb{height:2em;width:2em;border-radius:50%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--smoothly-primary-contrast)) solid;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{padding:0 .6em;height:100%;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}input[type=range]::-moz-range-track{width:calc(100% + 1em);height:3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}.min,.max{display:inline-block;margin:0.5em .8em}.max{text-align:right}";
+const styleCss$F = ":host{position:relative;width:100%;justify-content:center;align-items:center;display:flex;padding-top:.8em}:host div{position:relative}:host output{display:block;min-width:3em;text-align:center;margin:0 1em}:host label{position:absolute;display:block;white-space:nowrap;text-align:center;top:-1.5em;font-size:.7em;left:.5em}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;height:2.5em;margin:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:1.5em;width:.8em;border-radius:20%;background-color:rgb(var(--smoothly-primary-contrast));border:1px #333 solid;cursor:pointer;margin-top:-.5em;}input[type=range]::-moz-range-thumb{height:1.5em;width:.8em;border-radius:20%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--text-color, var(--smoothly-color-contrast))) solid;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:.5em;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}input[type=range]::-moz-range-track{width:100%;height:.5em;cursor:pointer;background-color:rgb(var(--smoothly-primary-tint));border-radius:20px}";
 
 const SmoothlyInputRange = class {
   constructor(hostRef) {
@@ -9487,12 +9487,13 @@ const SmoothlyInputRange = class {
   valueChanged() {
     this.smoothlyInput.emit({ [this.name]: this.value });
   }
-  inputHandler(e) {
-    e.target instanceof HTMLInputElement &&
-      (this.value = this.step !== "any" ? e.target.valueAsNumber : Math.round(e.target.valueAsNumber * 100) / 100);
+  inputHandler(event) {
+    event.target instanceof HTMLInputElement &&
+      (this.value =
+        this.step !== "any" ? event.target.valueAsNumber : Math.round(event.target.valueAsNumber * 100) / 100);
   }
   render() {
-    return (index.h(index.Host, { style: { "--left-adjustment": `${(this.value / this.max) * 100}%` } }, index.h("slot", { name: "label" }, typeof this.labelText === "string" && index.h("label", { htmlFor: this.name }, this.labelText)), index.h("div", { class: "output-container" }, index.h("output", { htmlFor: this.name }, this.value)), index.h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: this.step, onInput: e => this.inputHandler(e), value: this.value }), index.h("p", { class: "min" }, this.min), index.h("p", { class: "max" }, this.max)));
+    return (index.h(index.Host, { style: { "--left-adjustment": `${(this.value / this.max) * 100}%` } }, index.h("div", null, index.h("output", { htmlFor: this.name }, this.value), index.h("label", { htmlFor: this.name }, index.h("slot", null))), index.h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: this.step, onInput: event => this.inputHandler(event), value: this.value })));
   }
   static get watchers() { return {
     "value": ["valueChanged"]