smoothly 1.0.0-alpha.21 → 1.0.0-alpha.210

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

@@ -0,0 +1,47 @@
+import { h, Host } from "@stencil/core";
+import { isoly } from "isoly";
+export class SmoothlyInputDemo {
+  constructor() {
+    this.duration = { hours: 8 };
+  }
+  render() {
+    return (h(Host, null, h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset"), h("smoothly-form", { looks: "grid", readonly: true }, 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", 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-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "create-outline", fill: "solid", size: "tiny" })), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "refresh-outline", fill: "solid", size: "tiny" })), h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "clear", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" })), 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", 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", method: "POST", 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", value: "first" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { name: "second-checkbox", checked: true, value: "second" }, 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", value: "third" }, "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("br", null), h("h4", null, "Smoothly Selector"), h("smoothly-input-select", { type: "icon", initialValue: "folder", showSelected: false }, h("smoothly-item", { value: "folder" }, h("smoothly-icon", { color: "dark", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { color: "dark", name: "camera-outline" }))), h("br", null), 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...", menuHeight: "7.5items", 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" })))));
+  }
+  static get is() { return "smoothly-input-demo"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "duration": {}
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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\tprivate selectElement: HTMLSmoothlyInputSelectElement\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>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</h2>\n\t\t\t\t<smoothly-form looks=\"grid\" readonly>\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\" 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-edit fill=\"default\" type=\"button\" color=\"tertiary\" slot=\"edit\" size=\"icon\" shape=\"rounded\">\n\t\t\t\t\t\t<smoothly-icon name=\"create-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-input-edit>\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\t<smoothly-icon name=\"refresh-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-input-reset>\n\t\t\t\t\t<smoothly-input-clear fill=\"default\" type=\"form\" color=\"danger\" slot=\"clear\" size=\"icon\" shape=\"rounded\">\n\t\t\t\t\t\t<smoothly-icon name=\"trash-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-input-clear>\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\" method=\"GET\" 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\n\t\t\t\t\tlooks=\"line\"\n\t\t\t\t\tmethod=\"POST\"\n\t\t\t\t\taction=\"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\" value={\"first\"}>\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 value={\"second\"}>\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\" value={\"third\"}>\n\t\t\t\t\t\t\t3rd\n\t\t\t\t\t\t</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\t\t\t\t<br />\n\t\t\t\t<h4>Smoothly Selector</h4>\n\t\t\t\t<smoothly-input-select type=\"icon\" initialValue=\"folder\" showSelected={false}>\n\t\t\t\t\t<smoothly-item value=\"folder\">\n\t\t\t\t\t\t<smoothly-icon color=\"dark\" name=\"folder-outline\" />\n\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t<smoothly-icon color=\"dark\" name=\"camera-outline\" />\n\t\t\t\t\t</smoothly-item>\n\t\t\t\t</smoothly-input-select>\n\t\t\t\t<br />\n\t\t\t\t<smoothly-input-select\n\t\t\t\t\tlooks=\"line\"\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<button onClick={async () => this.selectElement.reset()}>Reset select</button>\n\t\t\t\t<br />\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\n\t\t\t\t\t\tname=\"select\"\n\t\t\t\t\t\tinitialPrompt=\"Select...\"\n\t\t\t\t\t\tmenuHeight=\"7.5items\"\n\t\t\t\t\t\tref={(element: HTMLSmoothlyInputSelectElement) => (this.selectElement = element)}>\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\n\t\t\t\t\t\tname=\"select\"\n\t\t\t\t\t\tinitialPrompt=\"Select...\"\n\t\t\t\t\t\tref={(element: HTMLSmoothlyInputSelectElement) => (this.selectElement = element)}>\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

@@ -0,0 +1,15 @@
+smoothly-input-demo {
+	display: block;
+	margin: 2em;
+	margin-bottom: 20rem;
+}
+
+smoothly-button {
+	margin: 1em
+}
+
+.checkbox-group {
+	display: flex;
+	gap: 1.5em;
+	align-items: center;
+}

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

@@ -0,0 +1,231 @@
+import { h } from "@stencil/core";
+import { Button } from "../../Button";
+import { Editable } from "../Editable";
+export class SmoothlyInputEdit {
+  constructor() {
+    this.color = "tertiary";
+    this.expand = undefined;
+    this.fill = undefined;
+    this.disabled = false;
+    this.display = true;
+    this.shape = undefined;
+    this.type = "button";
+    this.size = undefined;
+  }
+  componentWillLoad() {
+    this.smoothlyInputLoad.emit(parent => {
+      if (Editable.type.is(parent)) {
+        this.parent = parent;
+        parent.listen("changed", async (p) => {
+          this.disabled = !p.readonly;
+          this.display = p.readonly;
+        });
+      }
+    });
+  }
+  clickHandler() {
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.edit(true);
+  }
+  render() {
+    return (h(Button, { disabled: this.disabled, type: "button" }, h("slot", null)));
+  }
+  static get is() { return "smoothly-input-edit"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"tertiary\""
+      },
+      "expand": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"block\" | \"full\"",
+          "resolved": "\"block\" | \"full\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expand",
+        "reflect": true
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fill",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"link\" | \"button\"",
+          "resolved": "\"button\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"flexible\" | \"small\" | \"large\" | \"icon\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/edit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAS,MAAM,eAAe,CAAA;AAEzG,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAOtC,MAAM,OAAO,iBAAiB;;iBAEY,UAAU;;;oBAGA,KAAK;mBACN,IAAI;;gBAEH,QAAQ;;;EAG3D,iBAAiB;IAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;UAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAA;UAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAA;QAC1B,CAAC,CAAC,CAAA;OACF;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAA;EACxB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ;MAC7C,eAAQ,CACA,CACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Listen, Prop, VNode } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Button } from \"../../Button\"\nimport { Editable } from \"../Editable\"\n\n@Component({\n\ttag: \"smoothly-input-edit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputEdit implements ComponentWillLoad {\n\tprivate parent?: Editable\n\t@Prop({ reflect: true }) color?: Color = \"tertiary\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = true\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\tthis.disabled = !p.readonly\n\t\t\t\t\tthis.display = p.readonly\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.edit(true)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type=\"button\">\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}