smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -1,71 +1,31 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputDemo {
-  handleSelectionChanged(event) {
-    console.log("selectionChanged", event.detail);
+  constructor() {
+    this.duration = { hours: 8 };
   }
   render() {
-    return [
-      h("h2", null, "Submit"),
-      h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "Submit")),
-      h("h4", null, "Clear"),
-      h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "First Name" }, "First name"), h("smoothly-input", { name: "Last name" }, "Last name", h("smoothly-input-clear", { slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone" }, "Phone", h("smoothly-input-clear", { slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")),
-      h("h2", null, "Border"),
-      h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-submit", { slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")),
-      h("h2", null, "Grid"),
-      h("h4", null, "Contact"),
-      h("smoothly-form", { looks: "grid", method: "GET", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, h("smoothly-input", { type: "text", name: "name.last" }, "First Name"), h("smoothly-input", { type: "text", name: "name.first" }, "Last Name"), h("smoothly-input", { type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), h("smoothly-input", { type: "postal-code", name: "zip" }, "ZipCode"), h("smoothly-input", { type: "text", name: "city" }, "City"), h("smoothly-input", { type: "text", name: "countryCode" }, "CountryCode"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Submit")),
-      h("h4", null, "Card"),
-      h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-submit", { size: "icon", slot: "submit", color: "success", fill: "solid" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input", { type: "card-expires", name: "expires" }, "Expires"), h("smoothly-input", { type: "card-csc", name: "csc" }, "CVV/CVC"), h("smoothly-input", { type: "text", name: "name.first" }, "First Name"), h("smoothly-input", { type: "text", name: "name.last" }, "Last Name")),
-      h("h4", null, "Contact"),
-      h("smoothly-form", { looks: "grid" }, h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle" }))),
-      h("h4", null, "Random"),
-      h("smoothly-form", { looks: "grid" }, h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), h("smoothly-input", { type: "text", name: "testing" }, "TextTest"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input-date", { name: "some-date" }, "Calendar")),
-      h("h2", null, "Line"),
-      h("smoothly-form", { looks: "line" }, h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")),
-      h("h2", null, "Input Alternatives"),
-      h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), h("smoothly-input", { type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), h("smoothly-input", { placeholder: "test" }), h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")),
-      h("h4", null, "Smoothly checkboxes"),
-      h("smoothly-form", null, h("div", null, h("smoothly-checkbox", null, "Check me", h("div", { slot: "expansion" }, "Some context")), h("smoothly-checkbox", null, "Label"), h("smoothly-checkbox", { disabled: true }))),
-      h("h4", null, "Smoothly Radio Buttons"),
-      h("smoothly-form", { onSmoothlyFormSubmit: e => console.log(e.detail) }, h("smoothly-radio-button", { name: "radioButtonDemo", deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: "test" }, "Option 1", h("div", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, "Option 2", h("div", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, "Option 3", h("div", { slot: "expansion" }, "Some third description."))), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle" }))),
-      h("h4", null, "Radio List without button 1"),
-      h("smoothly-form", null, h("smoothly-radio-button", { name: "RadioListWithoutButton" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"), h("span", { slot: "expansion" }, "Some third description."))), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle" }))),
-      h("h4", null, "Radio List without button 2"),
-      h("smoothly-form", null, h("smoothly-radio", { name: "option", value: "1a", style: { width: "100%" } }, "option 1"), h("smoothly-radio", { name: "option", value: "2a", checked: true, style: { width: "100%" } }, "option 2"), h("smoothly-radio", { name: "option", value: "3a", style: { width: "100%" } }, "option 3")),
-      h("h4", null, "Smoothly Accordion"),
-      h("smoothly-form", null, h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1b" }, "a 1"), h("smoothly-radio", { name: "a", value: "2b", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3b" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1c" }, "b 1"), h("smoothly-radio", { name: "b", value: "2c" }, "b 2"), h("smoothly-radio", { name: "b", value: "3c" }, "b 3"))), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle" }))),
-      h("h4", null, "Smoothly Picker"),
-      h("smoothly-picker-demo", null),
-      h("smoothly-back-to-top", null),
-      h("h4", null, "Smoothly Date"),
-      h("smoothly-input-date", null, "Date"),
-      h("smoothly-input-date", { showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
-      h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, h("smoothly-input-date-range", { name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "submit daterange")),
-      h("smoothly-input-date-range", { looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
-          "--border-radius": "4px",
-          "--padding": "0 0.75em",
-          "--input-width": "12ch",
-        } }),
-      h("br", null),
-      h("h4", null, "Smoothly Selector"),
-      h("smoothly-input-select", { looks: "line", initialPrompt: "Select...", ref: (element) => (this.selectElement = element) }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
-      h("button", { onClick: async () => this.selectElement.reset() }, "Reset select"),
-      h("br", null),
-      h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log("Submitted", e.detail) }, h("smoothly-input", { type: "text", name: "text" }, "Text"), h("div", null, h("smoothly-input-file", { placeholder: "Select or drag a file here", name: "file" }, h("span", { slot: "label" }, "Testing file input"), h("smoothly-icon", { slot: "button", name: "folder-outline" }))), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "Submit")),
-      h("br", null),
-      h("smoothly-form", { looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, h("smoothly-input", { name: "text" }, "Input"), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-picker", { name: "picker" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-input-select", { name: "select", initialPrompt: "Select...", ref: (element) => (this.selectElement = element) }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-date-range", { name: "date-range", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
-          "--border-radius": "4px",
-          "--padding": "0 0.75em",
-          "--input-width": "12ch",
-        } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))),
-      h("h4", null, "Form with spinner showcase"),
-      h("smoothly-form", { looks: "line", processing: true, onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, h("smoothly-input", { name: "text" }, "Input"), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-picker", { name: "picker" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-input-select", { name: "select", initialPrompt: "Select...", ref: (element) => (this.selectElement = element) }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-date-range", { name: "date-range", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
-          "--border-radius": "4px",
-          "--padding": "0 0.75em",
-          "--input-width": "12ch",
-        } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))),
-    ];
+    return (h(Host, null, h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with reset button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, 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;
+      } }, "Duration"), h("smoothly-input", { name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+        const duration = e.detail.duration;
+        console.log("event duration", duration);
+        this.duration = duration;
+      } }, "Duration")), h("h2", null, "Transparent inputs"), h("smoothly-form", { looks: "transparent" }, h("smoothly-input-file", { name: "file" }, h("span", { slot: "label" }, "File"), h("smoothly-icon", { slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-picker", null, h("span", { slot: "label" }, "Picker"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("smoothly-icon", { name: "ellipse-outline" })), h("smoothly-picker-option", { value: "square" }, h("smoothly-icon", { name: "square-outline" }))), h("smoothly-input-date", null, "Date"), h("smoothly-input-date-range", null, "Date Range"), h("smoothly-input-select", { name: "transport" }, h("smoothly-item", { value: "plane" }, h("smoothly-icon", { name: "airplane-outline" })), h("smoothly-item", { value: "car" }, h("smoothly-icon", { name: "car-outline" })), h("smoothly-item", { value: "bus", selected: true }, h("smoothly-icon", { name: "bus-outline" })))), h("h2", null, "Submit"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "Submit")), h("h2", null, "Prices"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "price", name: "no" }, "No currency"), h("smoothly-input", { type: "price", name: "crowns", currency: "SEK" }, "SEK"), h("smoothly-input", { type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "Submit")), h("h4", null, "Clear"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone" }, "Phone", h("smoothly-input-clear", { slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), h("h2", null, "Identifier"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "identifier-code" }, "Code"), h("smoothly-input", { type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { type: "identifier-snake" }, "Snake"), h("smoothly-input", { type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { type: "identifier-camel" }, "Camel")), h("h2", null, "Border"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-submit", { slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), h("h2", null, "Grid"), h("h4", null, "Contact"), h("smoothly-form", { looks: "grid", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, h("smoothly-input", { type: "text", name: "name.last" }, "First Name"), h("smoothly-input", { type: "text", name: "name.first" }, "Last Name"), h("smoothly-input", { type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), h("smoothly-input", { type: "postal-code", name: "zip" }, "ZipCode"), h("smoothly-input", { type: "text", name: "city" }, "City"), h("smoothly-input", { type: "text", name: "countryCode" }, "CountryCode"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Submit")), h("h4", null, "Card"), h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-submit", { size: "icon", slot: "submit", color: "success", fill: "solid" }, h("smoothly-icon", { name: "checkmark-circle" })), h("smoothly-input", { type: "card-expires", name: "expires" }, "Expires"), h("smoothly-input", { type: "card-csc", name: "csc" }, "CVV/CVC"), h("smoothly-input", { type: "text", name: "name.first" }, "First Name"), h("smoothly-input", { type: "text", name: "name.last" }, "Last Name")), h("h4", null, "Contact"), h("smoothly-form", { looks: "grid" }, h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle" }))), h("h4", null, "Random"), h("smoothly-form", { looks: "grid" }, h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), h("smoothly-input", { type: "text", name: "testing" }, "TextTest"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input-date", { name: "some-date" }, "Calendar")), h("h2", null, "Line"), h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), h("h2", null, "Input Alternatives"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), h("smoothly-input", { type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { name: "checkmark-circle", slot: "end" })), h("smoothly-input", { placeholder: "test" }), h("smoothly-submit", { slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), h("h4", null, "Smoothly checkboxes"), h("smoothly-form", null, h("div", { class: "checkbox-group" }, h("smoothly-input-checkbox", { disabled: true, name: "first-checkbox" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { name: "second-checkbox", checked: true }, h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-checkbox", { name: "third-checkbox" }, "3rd"))), h("h4", null, "Smoothly Radio Buttons"), h("smoothly-form", { onSmoothlyFormSubmit: e => console.log(e.detail), looks: "border" }, h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" })), h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-radio", { name: "radioSecondInput" }, h("p", { slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3"), h("smoothly-input-radio-item", { slot: "options", value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { slot: "options", value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { slot: "options", value: "sixth" }, "Label 6"))), h("h4", null, "Smoothly Picker"), h("smoothly-picker-demo", null), h("smoothly-back-to-top", null), h("h4", null, "Smoothly Date"), h("smoothly-input-date", null, "Date"), h("smoothly-input-date", { showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, h("smoothly-input-date-range", { name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "submit daterange")), h("smoothly-input-date-range", { looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        "--border-radius": "4px",
+        "--padding": "0 0.75em",
+        "--input-width": "12ch",
+      } }), h("smoothly-form", { looks: "grid", onSmoothlyFormSubmit: e => console.log("Submitted", e.detail) }, h("smoothly-input", { type: "text", name: "text" }, "Text"), h("div", null, h("smoothly-input-file", { placeholder: "Select or drag a file here", name: "file" }, h("span", { slot: "label" }, "Testing file input"), h("smoothly-icon", { slot: "button", name: "folder-outline" }))), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-input-clear", { type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), h("smoothly-submit", { slot: "submit" }, "Submit")), h("br", null), h("smoothly-form", { looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, h("smoothly-input", { name: "text" }, "Input"), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-picker", { name: "picker" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-input-select", { name: "select", placeholder: "Select...", menuHeight: "7.5items" }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-date-range", { name: "date-range", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        "--border-radius": "4px",
+        "--padding": "0 0.75em",
+        "--input-width": "12ch",
+      } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), h("h4", null, "Form with spinner showcase"), h("smoothly-form", { looks: "line", processing: true, onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, h("smoothly-input", { name: "text" }, "Input"), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-picker", { name: "picker" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-input-select", { name: "select", placeholder: "Select..." }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-date-range", { name: "date-range", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        "--border-radius": "4px",
+        "--padding": "0 0.75em",
+        "--input-width": "12ch",
+      } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" })))));
   }
   static get is() { return "smoothly-input-demo"; }
   static get originalStyleUrls() {
@@ -78,14 +38,10 @@ export class SmoothlyInputDemo {
       "$": ["style.css"]
     };
   }
-  static get listeners() {
-    return [{
-        "name": "selectionChanged",
-        "method": "handleSelectionChanged",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
+  static get states() {
+    return {
+      "duration": {}
+    };
   }
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n@Component({\n\ttag: \"smoothly-input-demo\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyInputDemo {\n\tprivate selectElement: HTMLSmoothlyInputSelectElement\n\n\t@Listen(\"selectionChanged\")\n\thandleSelectionChanged(event: CustomEvent<{ identifier: string; value: string }>) {\n\t\tconsole.log(\"selectionChanged\", event.detail)\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<h2>Submit</h2>,\n\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\tEmail\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\tPassword\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input-clear fill=\"default\" type=\"form\" color=\"danger\" slot=\"clear\">\n\t\t\t\t\tClear\n\t\t\t\t</smoothly-input-clear>\n\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t</smoothly-form>,\n\n\t\t\t<h4>Clear</h4>,\n\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t<smoothly-input name=\"First Name\">First name</smoothly-input>\n\t\t\t\t<smoothly-input name=\"Last name\">\n\t\t\t\t\tLast name\n\t\t\t\t\t<smoothly-input-clear slot=\"end\">\n\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"phone\" name=\"Phone\">\n\t\t\t\t\tPhone\n\t\t\t\t\t<smoothly-input-clear slot=\"end\">\n\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input-clear fill=\"default\" type=\"form\" color=\"danger\" slot=\"submit\">\n\t\t\t\t\tClear\n\t\t\t\t</smoothly-input-clear>\n\t\t\t</smoothly-form>,\n\n\t\t\t<h2>Border</h2>,\n\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\tEmail\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\tPassword\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-submit slot=\"submit\" onSubmit={(e: Event) => alert(e)} color=\"success\" fill=\"solid\">\n\t\t\t\t\tSend\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h2>Grid</h2>,\n\t\t\t<h4>Contact</h4>,\n\t\t\t<smoothly-form looks=\"grid\" method=\"GET\" action=\"https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe\">\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\">\n\t\t\t\t\tFirst Name\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\">\n\t\t\t\t\tLast Name\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"street\" value=\"Torgny Segerstedts Allé 87\">\n\t\t\t\t\tStreet\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"postal-code\" name=\"zip\">\n\t\t\t\t\tZipCode\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"city\">\n\t\t\t\t\tCity\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"countryCode\">\n\t\t\t\t\tCountryCode\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"phone\" name=\"phone\">\n\t\t\t\t\tPhone\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\tEmail\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\tSubmit\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Card</h4>,\n\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormSubmit={(e: CustomEvent) => alert(JSON.stringify(e.detail))}>\n\t\t\t\t<smoothly-input type=\"card-number\" name=\"card\">\n\t\t\t\t\tCard #\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\" color=\"success\" fill=\"solid\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t</smoothly-submit>\n\t\t\t\t<smoothly-input type=\"card-expires\" name=\"expires\">\n\t\t\t\t\tExpires\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"card-csc\" name=\"csc\">\n\t\t\t\t\tCVV/CVC\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\">\n\t\t\t\t\tFirst Name\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\">\n\t\t\t\t\tLast Name\n\t\t\t\t</smoothly-input>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Contact</h4>,\n\t\t\t<smoothly-form looks=\"grid\">\n\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\tEmail\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\tPassword\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"price\" currency=\"SEK\" name=\"price\">\n\t\t\t\t\tPrice\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"percent\" name=\"percent\">\n\t\t\t\t\tPercent\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Random</h4>,\n\t\t\t<smoothly-form looks=\"grid\">\n\t\t\t\t<smoothly-input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tname=\"name\"\n\t\t\t\t\treadonly={true}\n\t\t\t\t\tvalue={\"Readonly\"}\n\t\t\t\t\tonSmoothlyBlur={() => console.log(\"smoothly blur\")}\n\t\t\t\t\tstyle={{ width: \"100%\" }}>\n\t\t\t\t\tReadonly\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"testing\">\n\t\t\t\t\tTextTest\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"date-time\" name=\"date-time\">\n\t\t\t\t\tDate-Time\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"divisor\" name=\"divisor\">\n\t\t\t\t\tDivisor\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"date\" name=\"date\">\n\t\t\t\t\tDate\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input-date name=\"some-date\">Calendar</smoothly-input-date>\n\t\t\t</smoothly-form>,\n\t\t\t<h2>Line</h2>,\n\t\t\t<smoothly-form looks=\"line\">\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\tFirst Name\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\tLast Name\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-submit slot=\"submit\" fill=\"solid\" onSubmit={(e: Event) => alert(e)} color=\"success\">\n\t\t\t\t\tSend\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h2>Input Alternatives</h2>,\n\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\tFirst Name\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\tLast Name\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tname=\"name.first\"\n\t\t\t\t\tplaceholder=\"Smith\"\n\t\t\t\t\tonSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\tLast Name\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t</smoothly-input>\n\t\t\t\t<smoothly-input placeholder=\"test\"></smoothly-input>\n\t\t\t\t<smoothly-submit slot=\"submit\" fill=\"solid\" onSubmit={(e: Event) => alert(e)} color=\"success\">\n\t\t\t\t\tSend\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Smoothly checkboxes</h4>,\n\t\t\t<smoothly-form>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-checkbox>\n\t\t\t\t\t\tCheck me\n\t\t\t\t\t\t<div slot=\"expansion\">Some context</div>\n\t\t\t\t\t</smoothly-checkbox>\n\t\t\t\t\t<smoothly-checkbox>Label</smoothly-checkbox>\n\t\t\t\t\t<smoothly-checkbox disabled={true} />\n\t\t\t\t</div>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Smoothly Radio Buttons</h4>,\n\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(e.detail)}>\n\t\t\t\t<smoothly-radio-button name=\"radioButtonDemo\" deselectable decoration=\"button\">\n\t\t\t\t\t<smoothly-radio-button-item value={\"test\"}>\n\t\t\t\t\t\tOption 1<div slot=\"expansion\">Some description.</div>\n\t\t\t\t\t</smoothly-radio-button-item>\n\t\t\t\t\t<smoothly-radio-button-item value={{ some: \"thing\", yes: \"miss\" }}>\n\t\t\t\t\t\tOption 2<div slot=\"expansion\">Some other description.</div>\n\t\t\t\t\t</smoothly-radio-button-item>\n\t\t\t\t\t<smoothly-radio-button-item value={{ some: \"one\", yes: \"kid\" }}>\n\t\t\t\t\t\tOption 3<div slot=\"expansion\">Some third description.</div>\n\t\t\t\t\t</smoothly-radio-button-item>\n\t\t\t\t</smoothly-radio-button>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Radio List without button 1</h4>,\n\t\t\t<smoothly-form>\n\t\t\t\t<smoothly-radio-button name=\"RadioListWithoutButton\">\n\t\t\t\t\t<smoothly-radio-button-item value={{ some: \"content\", yes: \"sir\" }} selected color=\"light\">\n\t\t\t\t\t\t<span>Option 1</span>\n\t\t\t\t\t\t<span slot=\"expansion\">Some description.</span>\n\t\t\t\t\t</smoothly-radio-button-item>\n\t\t\t\t\t<smoothly-radio-button-item value={{ some: \"thing\", yes: \"miss\" }} color=\"light\">\n\t\t\t\t\t\t<span>Option 2</span>\n\t\t\t\t\t\t<span slot=\"expansion\">Some other description.</span>\n\t\t\t\t\t</smoothly-radio-button-item>\n\t\t\t\t\t<smoothly-radio-button-item value={{ some: \"one\", yes: \"kid\" }} color=\"light\">\n\t\t\t\t\t\t<span>Option 3</span>\n\t\t\t\t\t\t<span slot=\"expansion\">Some third description.</span>\n\t\t\t\t\t</smoothly-radio-button-item>\n\t\t\t\t</smoothly-radio-button>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Radio List without button 2</h4>,\n\t\t\t<smoothly-form>\n\t\t\t\t<smoothly-radio name=\"option\" value=\"1a\" style={{ width: \"100%\" }}>\n\t\t\t\t\toption 1\n\t\t\t\t</smoothly-radio>\n\t\t\t\t<smoothly-radio name=\"option\" value=\"2a\" checked style={{ width: \"100%\" }}>\n\t\t\t\t\toption 2\n\t\t\t\t</smoothly-radio>\n\t\t\t\t<smoothly-radio name=\"option\" value=\"3a\" style={{ width: \"100%\" }}>\n\t\t\t\t\toption 3\n\t\t\t\t</smoothly-radio>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Smoothly Accordion</h4>,\n\t\t\t<smoothly-form>\n\t\t\t\t<smoothly-accordion>\n\t\t\t\t\t<smoothly-accordion-item name=\"A\" open>\n\t\t\t\t\t\t<smoothly-radio name=\"a\" value=\"1b\">\n\t\t\t\t\t\t\ta 1\n\t\t\t\t\t\t</smoothly-radio>\n\t\t\t\t\t\t<smoothly-radio name=\"a\" value=\"2b\" checked>\n\t\t\t\t\t\t\ta 2\n\t\t\t\t\t\t</smoothly-radio>\n\t\t\t\t\t\t<smoothly-radio name=\"a\" value=\"3b\">\n\t\t\t\t\t\t\ta 3\n\t\t\t\t\t\t</smoothly-radio>\n\t\t\t\t\t</smoothly-accordion-item>\n\t\t\t\t\t<smoothly-accordion-item name=\"B\">\n\t\t\t\t\t\t<smoothly-radio name=\"b\" value=\"1c\">\n\t\t\t\t\t\t\tb 1\n\t\t\t\t\t\t</smoothly-radio>\n\t\t\t\t\t\t<smoothly-radio name=\"b\" value=\"2c\">\n\t\t\t\t\t\t\tb 2\n\t\t\t\t\t\t</smoothly-radio>\n\t\t\t\t\t\t<smoothly-radio name=\"b\" value=\"3c\">\n\t\t\t\t\t\t\tb 3\n\t\t\t\t\t\t</smoothly-radio>\n\t\t\t\t\t</smoothly-accordion-item>\n\t\t\t\t</smoothly-accordion>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Smoothly Picker</h4>,\n\t\t\t<smoothly-picker-demo />,\n\n\t\t\t<smoothly-back-to-top />,\n\t\t\t<h4>Smoothly Date</h4>,\n\t\t\t<smoothly-input-date>Date</smoothly-input-date>,\n\t\t\t<smoothly-input-date showLabel={false} value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\tDate\n\t\t\t</smoothly-input-date>,\n\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormSubmit={e => console.log(e.detail)}>\n\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\tname=\"testing\"\n\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\tmax=\"2024-12-30\"></smoothly-input-date-range>\n\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\tClear\n\t\t\t\t</smoothly-input-clear>\n\t\t\t\t<smoothly-submit slot=\"submit\">submit daterange</smoothly-submit>\n\t\t\t</smoothly-form>,\n\n\t\t\t<smoothly-input-date-range\n\t\t\t\tlooks=\"grid\"\n\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\tshowLabel={false}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t}}></smoothly-input-date-range>,\n\t\t\t<br />,\n\t\t\t<h4>Smoothly Selector</h4>,\n\t\t\t<smoothly-input-select\n\t\t\t\tlooks=\"line\"\n\t\t\t\tinitialPrompt=\"Select...\"\n\t\t\t\tref={(element: HTMLSmoothlyInputSelectElement) => (this.selectElement = element)}>\n\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t</smoothly-input-select>,\n\t\t\t<button onClick={async () => this.selectElement.reset()}>Reset select</button>,\n\t\t\t<br />,\n\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormSubmit={e => console.log(\"Submitted\", e.detail)}>\n\t\t\t\t<smoothly-input type=\"text\" name=\"text\">\n\t\t\t\t\tText\n\t\t\t\t</smoothly-input>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-input-file placeholder=\"Select or drag a file here\" name=\"file\">\n\t\t\t\t\t\t<span slot=\"label\">Testing file input</span>\n\t\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"folder-outline\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t</div>\n\t\t\t\t<smoothly-input-file camera=\"back\" placeholder=\"Capture a photo\" name=\"image\">\n\t\t\t\t\t<span slot=\"label\">Testing camera photo</span>\n\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"camera-outline\" />\n\t\t\t\t</smoothly-input-file>\n\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\tClear\n\t\t\t\t</smoothly-input-clear>\n\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<br />,\n\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormSubmit={e => console.log(\"form input\", e.detail)}>\n\t\t\t\t<smoothly-input name=\"text\">Input</smoothly-input>\n\t\t\t\t<smoothly-input-file camera=\"back\" placeholder=\"Capture a photo\" name=\"image\">\n\t\t\t\t\t<span slot=\"label\">Testing camera photo</span>\n\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"camera-outline\" />\n\t\t\t\t</smoothly-input-file>\n\t\t\t\t<smoothly-picker name=\"picker\">\n\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t</smoothly-picker>\n\t\t\t\t<smoothly-input-select\n\t\t\t\t\tname=\"select\"\n\t\t\t\t\tinitialPrompt=\"Select...\"\n\t\t\t\t\tref={(element: HTMLSmoothlyInputSelectElement) => (this.selectElement = element)}>\n\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t</smoothly-input-select>\n\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\tname=\"date-range\"\n\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\tshowLabel={false}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<smoothly-input-date name=\"date\" value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\tDate\n\t\t\t\t</smoothly-input-date>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" fill=\"solid\" size=\"medium\" />\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t\t<h4>Form with spinner showcase</h4>,\n\t\t\t<smoothly-form looks=\"line\" processing={true} onSmoothlyFormSubmit={e => console.log(\"form input\", e.detail)}>\n\t\t\t\t<smoothly-input name=\"text\">Input</smoothly-input>\n\t\t\t\t<smoothly-input-file camera=\"back\" placeholder=\"Capture a photo\" name=\"image\">\n\t\t\t\t\t<span slot=\"label\">Testing camera photo</span>\n\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"camera-outline\" />\n\t\t\t\t</smoothly-input-file>\n\t\t\t\t<smoothly-picker name=\"picker\">\n\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t</smoothly-picker>\n\t\t\t\t<smoothly-input-select\n\t\t\t\t\tname=\"select\"\n\t\t\t\t\tinitialPrompt=\"Select...\"\n\t\t\t\t\tref={(element: HTMLSmoothlyInputSelectElement) => (this.selectElement = element)}>\n\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t</smoothly-input-select>\n\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\tname=\"date-range\"\n\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\tshowLabel={false}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<smoothly-input-date name=\"date\" value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\tDate\n\t\t\t\t</smoothly-input-date>\n\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" fill=\"solid\" size=\"medium\" />\n\t\t\t\t</smoothly-submit>\n\t\t\t</smoothly-form>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-demo\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyInputDemo {\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Select</h2>\n\t\t\t\t<div class=\"select-div\">\n\t\t\t\t\t<smoothly-input-select name=\"select-dessert\" looks=\"border\" onSmoothlyInput={e => console.log(e.detail)}>\n\t\t\t\t\t\t<label slot=\"label\">Select with reset button</label>\n\t\t\t\t\t\t<smoothly-item value=\"1\">Ice cream</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">Cookie</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">Croissant</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">Chocolate fondue</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"refresh-outline\" />\n\t\t\t\t\t\t</smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\tname=\"select-dessert-multiple\"\n\t\t\t\t\t\tlooks=\"border\"\n\t\t\t\t\t\tonSmoothlyInput={e => console.log(e.detail)}>\n\t\t\t\t\t\t<label slot=\"label\">Select multiple with reset button</label>\n\t\t\t\t\t\t<smoothly-item value=\"ice cream\">Ice cream</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"sponge cake\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t<smoothly-item selected value=\"cookie\">\n\t\t\t\t\t\t\tCookie\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"croissant\">Croissant</smoothly-item>\n\t\t\t\t\t\t<smoothly-item selected value=\"chocolate fondue\">\n\t\t\t\t\t\t\tChocolate fondue\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"refresh-outline\" />\n\t\t\t\t\t\t</smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select\n\t\t\t\t\t\tname=\"select-icon\"\n\t\t\t\t\t\tclearable={false}\n\t\t\t\t\t\tshowSelected={false}\n\t\t\t\t\t\tonSmoothlyInput={e => console.log(\"Form Readonly\", e.detail)}>\n\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t</div>\n\n\t\t\t\t<h2>Delayed</h2>\n\t\t\t\t<smoothly-input name=\"Delayed\" delay={2}>\n\t\t\t\t\tDelayed\n\t\t\t\t</smoothly-input>\n\t\t\t\t<h2>Editable form and Input with Clear and Reset - Readonly</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\ttype=\"create\"\n\t\t\t\t\treadonly\n\t\t\t\t\taction=\"https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4\">\n\t\t\t\t\t<smoothly-input readonly name=\"First Name\" value=\"John\">\n\t\t\t\t\t\tFirst name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input name=\"Last name\" value=\"Doe\">\n\t\t\t\t\t\tLast name\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"phone\" name=\"Phone\" value={\"777888999\"}>\n\t\t\t\t\t\tPhone\n\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"refresh-outline\" />\n\t\t\t\t\t\t</smoothly-input-reset>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<p slot=\"label\">Clearable</p>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"first\"}>\n\t\t\t\t\t\t\tLabel 1\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected slot=\"options\" value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"third\"}>\n\t\t\t\t\t\t\tLabel 3\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-select menuHeight=\"7.5items\" placeholder=\"Select...\" multiple name=\"select-month\">\n\t\t\t\t\t\t<label slot=\"label\">Month</label>\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name=\"select-icon\" clearable={false} showSelected={false}>\n\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-checkbox name=\"checkbox\">Check the box</smoothly-input-checkbox>\n\t\t\t\t\t<smoothly-input-checkbox name=\"checkbox2\" checked>\n\t\t\t\t\t\tCheck the box 2\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t<smoothly-input-range step={1} name=\"range3\" value={20000}>\n\t\t\t\t\t\tSelect\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t<smoothly-picker multiple name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-input-edit fill=\"default\" type=\"button\" color=\"tertiary\" slot=\"edit\" size=\"icon\" shape=\"rounded\" />\n\t\t\t\t\t<smoothly-input-reset fill=\"default\" type=\"form\" color=\"warning\" slot=\"reset\" size=\"icon\" shape=\"rounded\" />\n\t\t\t\t\t<smoothly-input-submit delete slot=\"clear\" color=\"danger\" size=\"icon\" shape=\"rounded\" />\n\t\t\t\t\t<smoothly-input-submit fill=\"default\" type=\"button\" color=\"success\" slot=\"submit\" size=\"icon\" shape=\"rounded\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Editable form and Input with Clear and Reset - Editable</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\ttype=\"create\"\n\t\t\t\t\taction=\"https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4\">\n\t\t\t\t\t<smoothly-input readonly name=\"First Name\" value=\"John\">\n\t\t\t\t\t\tFirst name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input name=\"Last name\" value=\"Doe\">\n\t\t\t\t\t\tLast name\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"phone\" name=\"Phone\" value={\"777888999\"}>\n\t\t\t\t\t\tPhone\n\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"refresh-outline\" />\n\t\t\t\t\t\t</smoothly-input-reset>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<p slot=\"label\">Clearable</p>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"first\"}>\n\t\t\t\t\t\t\tLabel 1\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected slot=\"options\" value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"third\"}>\n\t\t\t\t\t\t\tLabel 3\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-select multiple menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t<label slot=\"label\">Month multiple select</label>\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name=\"select-icon\" clearable={false} showSelected={false}>\n\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-checkbox name=\"checkbox\">Check the box</smoothly-input-checkbox>\n\t\t\t\t\t<smoothly-input-checkbox name=\"checkbox2\" checked>\n\t\t\t\t\t\tCheck the box 2\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t<smoothly-input-range step={1} name=\"range3\" value={20000}>\n\t\t\t\t\t\tSelect\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t<smoothly-picker multiple name=\"animals\">\n\t\t\t\t\t\t<span slot=\"label\">Animals</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option selected value={\"cat\"}>\n\t\t\t\t\t\t\tCat\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"dog\"}>Dog</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"fish\"}>Fish</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-input-edit fill=\"default\" type=\"button\" color=\"tertiary\" slot=\"edit\" size=\"icon\" shape=\"rounded\" />\n\t\t\t\t\t<smoothly-input-reset fill=\"default\" type=\"form\" color=\"warning\" slot=\"reset\" size=\"icon\" shape=\"rounded\" />\n\t\t\t\t\t<smoothly-input-submit delete slot=\"clear\" color=\"danger\" size=\"icon\" shape=\"rounded\" />\n\t\t\t\t\t<smoothly-input-submit fill=\"default\" type=\"button\" color=\"success\" slot=\"submit\" size=\"icon\" shape=\"rounded\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Color</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input-color name=\"color\"></smoothly-input-color>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Range</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input-range step={1} name=\"range\" outputSide=\"right\">\n\t\t\t\t\t\tSelect and so\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t<smoothly-input-range step={1} name=\"range2\">\n\t\t\t\t\t\tSelect with really really long label\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t<smoothly-input-range step={1} name=\"range3\">\n\t\t\t\t\t\tSelect\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Duration</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tplaceholder=\"hh:mm\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tconsole.log(\"event duration\", duration)\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tplaceholder=\"-hh:mm\"\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tconsole.log(\"event duration\", duration)\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Transparent inputs</h2>\n\t\t\t\t<smoothly-form looks={\"transparent\"}>\n\t\t\t\t\t<smoothly-input-file name={\"file\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>File</span>\n\t\t\t\t\t\t<smoothly-icon slot={\"button\"} name={\"folder-open-outline\"} size={\"small\"} />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<smoothly-input type={\"duration\"} looks={\"transparent\"} placeholder={\"h:mm\"}>\n\t\t\t\t\t\tInput\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-picker>\n\t\t\t\t\t\t<span slot={\"label\"}>Picker</span>\n\t\t\t\t\t\t<span slot={\"search\"}>Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<smoothly-icon name={\"ellipse-outline\"} />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"}>\n\t\t\t\t\t\t\t<smoothly-icon name={\"square-outline\"} />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-input-date>Date</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date-range>Date Range</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-select name={\"transport\"}>\n\t\t\t\t\t\t<smoothly-item value={\"plane\"}>\n\t\t\t\t\t\t\t<smoothly-icon name={\"airplane-outline\"} />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"car\"}>\n\t\t\t\t\t\t\t<smoothly-icon name={\"car-outline\"} />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"bus\"} selected>\n\t\t\t\t\t\t\t<smoothly-icon name={\"bus-outline\"} />\n\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t</smoothly-form>\n\n\t\t\t\t<h2>Submit</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\t\tEmail\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\t\tPassword\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-clear fill=\"default\" type=\"form\" color=\"danger\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Prices</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"no\">\n\t\t\t\t\t\tNo currency\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"crowns\" currency=\"SEK\">\n\t\t\t\t\t\tSEK\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"usDollar\" currency=\"USD\">\n\t\t\t\t\t\tUSD\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"pounds\" currency=\"GBP\">\n\t\t\t\t\t\tGBP\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"peso\" currency=\"UYW\">\n\t\t\t\t\t\tUYW\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"iceland\" currency=\"ISK\">\n\t\t\t\t\t\tISK\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" name=\"Palladium\" currency=\"XPD\">\n\t\t\t\t\t\t{\"XPD (Palladium)\"}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-clear fill=\"default\" type=\"form\" color=\"danger\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\n\t\t\t\t<h4>Clear</h4>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input name=\"First Name\" value=\"John\">\n\t\t\t\t\t\tFirst name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input name=\"Last name\" value=\"Doe\">\n\t\t\t\t\t\tLast name\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"phone\" name=\"Phone\">\n\t\t\t\t\t\tPhone\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-clear fill=\"default\" type=\"form\" color=\"danger\" slot=\"submit\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Identifier</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"identifier-code\">Code</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-attribute\">Attribute</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-snake\">Snake</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-pascal\">Pascal</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-camel\">Camel</smoothly-input>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Border</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\t\tEmail\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\t\tPassword\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" onSubmit={(e: Event) => alert(e)} color=\"success\" fill=\"solid\">\n\t\t\t\t\t\tSend\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Grid</h2>\n\t\t\t\t<h4>Contact</h4>\n\t\t\t\t<smoothly-form looks=\"grid\" action=\"https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe\">\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\">\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\">\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"street\" value=\"Torgny Segerstedts Allé 87\">\n\t\t\t\t\t\tStreet\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"postal-code\" name=\"zip\">\n\t\t\t\t\t\tZipCode\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"city\">\n\t\t\t\t\t\tCity\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"countryCode\">\n\t\t\t\t\t\tCountryCode\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"phone\" name=\"phone\">\n\t\t\t\t\t\tPhone\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\t\tEmail\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tSubmit\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Card</h4>\n\t\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormSubmit={(e: CustomEvent) => alert(JSON.stringify(e.detail))}>\n\t\t\t\t\t<smoothly-input type=\"card-number\" name=\"card\">\n\t\t\t\t\t\tCard #\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-submit size=\"icon\" slot=\"submit\" color=\"success\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t\t<smoothly-input type=\"card-expires\" name=\"expires\">\n\t\t\t\t\t\tExpires\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"card-csc\" name=\"csc\">\n\t\t\t\t\t\tCVV/CVC\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\">\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\">\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Contact</h4>\n\t\t\t\t<smoothly-form looks=\"grid\">\n\t\t\t\t\t<smoothly-input type=\"email\" name=\"email\">\n\t\t\t\t\t\tEmail\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\t\tPassword\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"price\" currency=\"SEK\" name=\"price\">\n\t\t\t\t\t\tPrice\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"percent\" name=\"percent\">\n\t\t\t\t\t\tPercent\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Random</h4>\n\t\t\t\t<smoothly-form looks=\"grid\">\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tname=\"name\"\n\t\t\t\t\t\treadonly={true}\n\t\t\t\t\t\tvalue={\"Readonly\"}\n\t\t\t\t\t\tonSmoothlyBlur={() => console.log(\"smoothly blur\")}\n\t\t\t\t\t\tstyle={{ width: \"100%\" }}>\n\t\t\t\t\t\tReadonly\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"testing\">\n\t\t\t\t\t\tTextTest\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"date-time\" name=\"date-time\">\n\t\t\t\t\t\tDate-Time\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"divisor\" name=\"divisor\">\n\t\t\t\t\t\tDivisor\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"date\" name=\"date\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-date name=\"some-date\">Calendar</smoothly-input-date>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Line</h2>\n\t\t\t\t<smoothly-form looks=\"line\" action=\"https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4\">\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" fill=\"solid\" onSubmit={(e: Event) => alert(e)} color=\"success\">\n\t\t\t\t\t\tSend\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Input Alternatives</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tname=\"name.first\"\n\t\t\t\t\t\tplaceholder=\"Smith\"\n\t\t\t\t\t\tonSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input placeholder=\"test\"></smoothly-input>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" fill=\"solid\" onSubmit={(e: Event) => alert(e)} color=\"success\">\n\t\t\t\t\t\tSend\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Smoothly checkboxes</h4>\n\t\t\t\t<smoothly-form>\n\t\t\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t\t\t<smoothly-input-checkbox disabled name=\"first-checkbox\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tFirst\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"second-checkbox\" checked>\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tsecond\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"third-checkbox\">3rd</smoothly-input-checkbox>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Smoothly Radio Buttons</h4>\n\t\t\t\t<smoothly-form onSmoothlyFormSubmit={e => console.log(e.detail)} looks=\"border\">\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"close\" />\n\t\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t\t<p slot=\"label\">Clearable</p>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"first\"}>\n\t\t\t\t\t\t\tLabel 1\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected slot=\"options\" value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"third\"}>\n\t\t\t\t\t\t\tLabel 3\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-radio name=\"radioSecondInput\">\n\t\t\t\t\t\t<p slot=\"label\">Not clearable</p>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"first\"}>\n\t\t\t\t\t\t\tLabel 1\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"third\"}>\n\t\t\t\t\t\t\tLabel 3\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"fourth\"}>\n\t\t\t\t\t\t\tLabel 4\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"fifth\"}>\n\t\t\t\t\t\t\tLabel 5\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item slot=\"options\" value={\"sixth\"}>\n\t\t\t\t\t\t\tLabel 6\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Smoothly Picker</h4>\n\t\t\t\t<smoothly-picker-demo />\n\t\t\t\t<smoothly-back-to-top />\n\t\t\t\t<h4>Smoothly Date</h4>\n\t\t\t\t<smoothly-input-date>Date</smoothly-input-date>\n\t\t\t\t<smoothly-input-date showLabel={false} value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\tDate\n\t\t\t\t</smoothly-input-date>\n\t\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormSubmit={e => console.log(e.detail)}>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2024-12-30\"></smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">submit daterange</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\n\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\tshowLabel={false}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t\t}}></smoothly-input-date-range>\n\n\t\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormSubmit={e => console.log(\"Submitted\", e.detail)}>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"text\">\n\t\t\t\t\t\tText\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<smoothly-input-file placeholder=\"Select or drag a file here\" name=\"file\">\n\t\t\t\t\t\t\t<span slot=\"label\">Testing file input</span>\n\t\t\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"folder-outline\" />\n\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t</div>\n\t\t\t\t\t<smoothly-input-file camera=\"back\" placeholder=\"Capture a photo\" name=\"image\">\n\t\t\t\t\t\t<span slot=\"label\">Testing camera photo</span>\n\t\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"camera-outline\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<smoothly-input-clear type=\"form\" color=\"danger\" fill=\"solid\" slot=\"clear\">\n\t\t\t\t\t\tClear\n\t\t\t\t\t</smoothly-input-clear>\n\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<br />\n\t\t\t\t<smoothly-form looks=\"line\" onSmoothlyFormSubmit={e => console.log(\"form input\", e.detail)}>\n\t\t\t\t\t<smoothly-input name=\"text\">Input</smoothly-input>\n\t\t\t\t\t<smoothly-input-file camera=\"back\" placeholder=\"Capture a photo\" name=\"image\">\n\t\t\t\t\t\t<span slot=\"label\">Testing camera photo</span>\n\t\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"camera-outline\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<smoothly-picker name=\"picker\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-input-select name=\"select\" placeholder=\"Select...\" menuHeight=\"7.5items\">\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"date-range\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\t\tshowLabel={false}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-input-date name=\"date\" value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" fill=\"solid\" size=\"medium\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h4>Form with spinner showcase</h4>\n\t\t\t\t<smoothly-form looks=\"line\" processing={true} onSmoothlyFormSubmit={e => console.log(\"form input\", e.detail)}>\n\t\t\t\t\t<smoothly-input name=\"text\">Input</smoothly-input>\n\t\t\t\t\t<smoothly-input-file camera=\"back\" placeholder=\"Capture a photo\" name=\"image\">\n\t\t\t\t\t\t<span slot=\"label\">Testing camera photo</span>\n\t\t\t\t\t\t<smoothly-icon slot=\"button\" name=\"camera-outline\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<smoothly-picker name=\"picker\">\n\t\t\t\t\t\t<span slot=\"label\">Shape</span>\n\t\t\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t\t\t<smoothly-picker-option value={\"circle\"}>\n\t\t\t\t\t\t\t<span slot=\"label\">Circle</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"ellipse-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"cube\"}>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Cube</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"cube-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t\t<smoothly-picker-option value={\"square\"} selected>\n\t\t\t\t\t\t\t<span slot={\"label\"}>Square</span>\n\t\t\t\t\t\t\t<smoothly-icon size=\"tiny\" name=\"square-outline\" />\n\t\t\t\t\t\t</smoothly-picker-option>\n\t\t\t\t\t</smoothly-picker>\n\t\t\t\t\t<smoothly-input-select name=\"select\" placeholder=\"Select...\">\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"date-range\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\t\tshowLabel={false}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-input-date name=\"date\" value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-submit slot=\"submit\" color=\"success\" fill=\"solid\" size=\"icon\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" fill=\"solid\" size=\"medium\" />\n\t\t\t\t\t</smoothly-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -3,3 +3,18 @@ smoothly-input-demo {
 	margin: 2em;
 	margin-bottom: 20rem;
 }
+.checkbox-group {
+	display: flex;
+	gap: 1.5em;
+	align-items: center;
+	background-color: rgb(var(--background-color));
+}
+.select-div {
+	display: flex;
+	justify-content: space-between;
+	gap: 1em;
+	flex-wrap: wrap;
+}
+.select-div>* {
+	flex-basis: 49%;
+}