smoothly 1.0.0-alpha.162 → 1.0.0-alpha.163
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/smoothly-accordion_74.cjs.entry.js +5 -5
- package/dist/cjs/smoothly-accordion_74.cjs.entry.js.map +1 -1
- package/dist/collection/components/input/demo/index.js +2 -2
- package/dist/collection/components/input/demo/index.js.map +1 -1
- package/dist/collection/components/input/range/index.js +3 -3
- package/dist/collection/components/input/range/index.js.map +1 -1
- package/dist/collection/components/input/range/style.css +22 -21
- package/dist/custom-elements/index.js +5 -5
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/smoothly-accordion_74.entry.js +5 -5
- package/dist/esm/smoothly-accordion_74.entry.js.map +1 -1
- package/dist/smoothly/{p-2140e6f1.entry.js → p-5451aa8d.entry.js} +2 -2
- package/dist/smoothly/{p-2140e6f1.entry.js.map → p-5451aa8d.entry.js.map} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/package.json +1 -1
|
@@ -9489,7 +9489,7 @@ const SmoothlyInputDemo = class {
|
|
|
9489
9489
|
console.log("smoothlyInput", event.detail);
|
|
9490
9490
|
}
|
|
9491
9491
|
render() {
|
|
9492
|
-
return (index.h(index.Host, null, index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "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 => {
|
|
9492
|
+
return (index.h(index.Host, null, index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "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 => {
|
|
9493
9493
|
const duration = e.detail.duration;
|
|
9494
9494
|
console.log("event duration", duration);
|
|
9495
9495
|
this.duration = duration;
|
|
@@ -9497,7 +9497,7 @@ const SmoothlyInputDemo = class {
|
|
|
9497
9497
|
const duration = e.detail.duration;
|
|
9498
9498
|
console.log("event duration", duration);
|
|
9499
9499
|
this.duration = duration;
|
|
9500
|
-
} }, "Duration")), index.h("h2", null, "Transparent inputs"), index.h("smoothly-form", { looks: "transparent" }, index.h("smoothly-input-file", { name: "file" }, index.h("span", { slot: "label" }, "File"), index.h("smoothly-icon", { slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", null, index.h("span", { slot: "label" }, "Picker"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("smoothly-icon", { name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "square" }, index.h("smoothly-icon", { name: "square-outline" }))), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date-range", null, "Date Range"), index.h("smoothly-input-select", { name: "transport" }, index.h("smoothly-item", { value: "plane" }, index.h("smoothly-icon", { name: "airplane-outline" })), index.h("smoothly-item", { value: "car" }, index.h("smoothly-icon", { name: "car-outline" })), index.h("smoothly-item", { value: "bus", selected: true }, index.h("smoothly-icon", { name: "bus-outline" })))), index.h("h2", null, "Submit"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("h4", null, "Clear"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone" }, "Phone", index.h("smoothly-input-clear", { slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), index.h("h2", null, "Border"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), index.h("h2", null, "Grid"), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid", method: "GET", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, index.h("smoothly-input", { type: "text", name: "name.last" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first" }, "Last Name"), index.h("smoothly-input", { type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), index.h("smoothly-input", { type: "postal-code", name: "zip" }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "city" }, "City"), index.h("smoothly-input", { type: "text", name: "countryCode" }, "CountryCode"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Submit")), index.h("h4", null, "Card"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-submit", { size: "icon", slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle" })), index.h("smoothly-input", { type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.last" }, "Last Name")), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Random"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), index.h("smoothly-input", { type: "text", name: "testing" }, "TextTest"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input-date", { name: "some-date" }, "Calendar")), index.h("h2", null, "Line"), index.h("smoothly-form", { looks: "line", method: "POST", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h2", null, "Input Alternatives"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { placeholder: "test" }), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h4", null, "Smoothly checkboxes"), index.h("smoothly-form", null, index.h("div", null, index.h("smoothly-checkbox", null, "Check me", index.h("div", { slot: "expansion" }, "Some context"), index.h("div", { slot: "expansion" }, "Some more context")), index.h("smoothly-checkbox", null, "Label"), index.h("smoothly-checkbox", { disabled: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { name: "unavailable", value: true, disabled: true, unavailable: true, checked: true, onSmoothlyInput: e => console.log("unavailable", e.detail) }), index.h("smoothly-checkbox", { name: "unavailable", value: true, unavailable: true, checked: true, onSmoothlyInput: e => console.log("unavailable", e.detail) }))), index.h("h4", null, "Smoothly Radio Buttons"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-radio-button", { name: "radioButtonDemo", deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: "test" }, "Option 1", index.h("div", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, "Option 2", index.h("div", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, "Option 3", index.h("div", { slot: "expansion" }, "Some third description."))), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Radio List without button 1"), index.h("smoothly-form", null, index.h("smoothly-radio-button", { name: "RadioListWithoutButton" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, index.h("span", null, "Option 3"), index.h("span", { slot: "expansion" }, "Some third description."))), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Radio List without button 2"), index.h("smoothly-form", null, index.h("smoothly-radio", { name: "option", value: "1a", style: { width: "100%" } }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2a", checked: true, style: { width: "100%" } }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3a", style: { width: "100%" } }, "option 3")), index.h("h4", null, "Smoothly Accordion"), index.h("smoothly-form", null, index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1b" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2b", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3b" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1c" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2c" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3c" }, "b 3"))), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Smoothly Picker"), index.h("smoothly-picker-demo", null), index.h("smoothly-back-to-top", null), index.h("h4", null, "Smoothly Date"), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date", { showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-input-date-range", { name: "testing", start: getLanguage.Date.now(), end: getLanguage.Date.nextMonth(getLanguage.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "submit daterange")), index.h("smoothly-input-date-range", { looks: "grid", start: getLanguage.Date.now(), end: getLanguage.Date.nextMonth(getLanguage.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
|
|
9500
|
+
} }, "Duration")), index.h("h2", null, "Transparent inputs"), index.h("smoothly-form", { looks: "transparent" }, index.h("smoothly-input-file", { name: "file" }, index.h("span", { slot: "label" }, "File"), index.h("smoothly-icon", { slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", null, index.h("span", { slot: "label" }, "Picker"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("smoothly-icon", { name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "square" }, index.h("smoothly-icon", { name: "square-outline" }))), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date-range", null, "Date Range"), index.h("smoothly-input-select", { name: "transport" }, index.h("smoothly-item", { value: "plane" }, index.h("smoothly-icon", { name: "airplane-outline" })), index.h("smoothly-item", { value: "car" }, index.h("smoothly-icon", { name: "car-outline" })), index.h("smoothly-item", { value: "bus", selected: true }, index.h("smoothly-icon", { name: "bus-outline" })))), index.h("h2", null, "Submit"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "Submit")), index.h("h4", null, "Clear"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone" }, "Phone", index.h("smoothly-input-clear", { slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), index.h("h2", null, "Border"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), index.h("h2", null, "Grid"), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid", method: "GET", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, index.h("smoothly-input", { type: "text", name: "name.last" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first" }, "Last Name"), index.h("smoothly-input", { type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), index.h("smoothly-input", { type: "postal-code", name: "zip" }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "city" }, "City"), index.h("smoothly-input", { type: "text", name: "countryCode" }, "CountryCode"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Submit")), index.h("h4", null, "Card"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-submit", { size: "icon", slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "checkmark-circle" })), index.h("smoothly-input", { type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.last" }, "Last Name")), index.h("h4", null, "Contact"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Random"), index.h("smoothly-form", { looks: "grid" }, index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), index.h("smoothly-input", { type: "text", name: "testing" }, "TextTest"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input-date", { name: "some-date" }, "Calendar")), index.h("h2", null, "Line"), index.h("smoothly-form", { looks: "line", method: "POST", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h2", null, "Input Alternatives"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { placeholder: "test" }), index.h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h4", null, "Smoothly checkboxes"), index.h("smoothly-form", null, index.h("div", null, index.h("smoothly-checkbox", null, "Check me", index.h("div", { slot: "expansion" }, "Some context"), index.h("div", { slot: "expansion" }, "Some more context")), index.h("smoothly-checkbox", null, "Label"), index.h("smoothly-checkbox", { disabled: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { name: "unavailable", value: true, disabled: true, unavailable: true, checked: true, onSmoothlyInput: e => console.log("unavailable", e.detail) }), index.h("smoothly-checkbox", { name: "unavailable", value: true, unavailable: true, checked: true, onSmoothlyInput: e => console.log("unavailable", e.detail) }))), index.h("h4", null, "Smoothly Radio Buttons"), index.h("smoothly-form", { onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-radio-button", { name: "radioButtonDemo", deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: "test" }, "Option 1", index.h("div", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, "Option 2", index.h("div", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, "Option 3", index.h("div", { slot: "expansion" }, "Some third description."))), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Radio List without button 1"), index.h("smoothly-form", null, index.h("smoothly-radio-button", { name: "RadioListWithoutButton" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, index.h("span", null, "Option 3"), index.h("span", { slot: "expansion" }, "Some third description."))), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Radio List without button 2"), index.h("smoothly-form", null, index.h("smoothly-radio", { name: "option", value: "1a", style: { width: "100%" } }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2a", checked: true, style: { width: "100%" } }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3a", style: { width: "100%" } }, "option 3")), index.h("h4", null, "Smoothly Accordion"), index.h("smoothly-form", null, index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1b" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2b", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3b" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1c" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2c" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3c" }, "b 3"))), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Smoothly Picker"), index.h("smoothly-picker-demo", null), index.h("smoothly-back-to-top", null), index.h("h4", null, "Smoothly Date"), index.h("smoothly-input-date", null, "Date"), index.h("smoothly-input-date", { showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-input-date-range", { name: "testing", start: getLanguage.Date.now(), end: getLanguage.Date.nextMonth(getLanguage.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { slot: "submit" }, "submit daterange")), index.h("smoothly-input-date-range", { looks: "grid", start: getLanguage.Date.now(), end: getLanguage.Date.nextMonth(getLanguage.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
|
|
9501
9501
|
"--border-radius": "4px",
|
|
9502
9502
|
"--padding": "0 0.75em",
|
|
9503
9503
|
"--input-width": "12ch",
|
|
@@ -9595,7 +9595,7 @@ const MonthSelector = class {
|
|
|
9595
9595
|
};
|
|
9596
9596
|
MonthSelector.style = styleCss$G;
|
|
9597
9597
|
|
|
9598
|
-
const styleCss$F = ".sc-smoothly-input-range-h{box-sizing:border-box}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-range-h[looks=\"grid\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-range-h{border:none}[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within) input.sc-smoothly-input-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;
|
|
9598
|
+
const styleCss$F = ".sc-smoothly-input-range-h{box-sizing:border-box}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}.sc-smoothly-input-range-h[looks=\"grid\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"transparent\"].sc-smoothly-input-range-h{border:none}[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within) input.sc-smoothly-input-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;background-color:rgb(var(--background-color,var(--smoothly-color-shade)));padding:0 .4em}.sc-smoothly-input-range-h .sc-smoothly-input-range:nth-child(2){margin-left:0.2em}.sc-smoothly-input-range-h>div.sc-smoothly-input-range{position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding:1.1em 0 .1em 0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range{padding:0}.sc-smoothly-input-range-h output.sc-smoothly-input-range{min-width:4em;text-align:center;margin-left:.5em}.sc-smoothly-input-range-h label.sc-smoothly-input-range{position:absolute;display:block;white-space:nowrap;text-align:center;top:.5em;left:0;font-size:.6em}.output-side-right.sc-smoothly-input-range-h label.sc-smoothly-input-range{position:static;font-size:inherit;text-align:left;padding-right:.5em}.output-side-right.sc-smoothly-input-range-h output.sc-smoothly-input-range{order:3;margin:0}input[type=range].sc-smoothly-input-range{-webkit-appearance:none;width:100%;background:transparent;height:1.5em;padding:0 .4em}input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:1.2em;width:.7em;border-radius:20%;background-color:rgb(var(--smoothly-primary-contrast));border:1px rgb(var(--text-color, var(--smoothly-color-contrast))) solid;cursor:pointer;margin-top:-.45em}input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:1.2em;width:.7em;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].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h:not([value]) input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-tint))}.sc-smoothly-input-range-h:not([value]) input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}";
|
|
9599
9599
|
|
|
9600
9600
|
const SmoothlyInputRange = class {
|
|
9601
9601
|
constructor(hostRef) {
|
|
@@ -9606,7 +9606,7 @@ const SmoothlyInputRange = class {
|
|
|
9606
9606
|
this.value = undefined;
|
|
9607
9607
|
this.looks = "plain";
|
|
9608
9608
|
this.min = 0;
|
|
9609
|
-
this.max =
|
|
9609
|
+
this.max = 100000;
|
|
9610
9610
|
this.name = undefined;
|
|
9611
9611
|
this.labelText = undefined;
|
|
9612
9612
|
this.step = "any";
|
|
@@ -9632,7 +9632,7 @@ const SmoothlyInputRange = class {
|
|
|
9632
9632
|
}
|
|
9633
9633
|
render() {
|
|
9634
9634
|
var _a, _b;
|
|
9635
|
-
return (index.h(index.Host, { class: this.outputSide }, index.h("
|
|
9635
|
+
return (index.h(index.Host, { class: { "output-side-right": this.outputSide === "right" } }, index.h("slot", { name: "start" }), index.h("div", null, index.h("label", { htmlFor: this.name }, index.h("slot", null)), index.h("output", { htmlFor: this.name }, (_a = this.value) !== null && _a !== void 0 ? _a : "—"), 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: (_b = this.value) !== null && _b !== void 0 ? _b : this.min })), index.h("slot", { name: "end" })));
|
|
9636
9636
|
}
|
|
9637
9637
|
static get watchers() { return {
|
|
9638
9638
|
"value": ["valueChanged"]
|