smoothly 1.0.0-alpha.13 → 1.0.0-alpha.131

package/dist/collection/components/{input-date-range → input/date/range}/index.js

@@ -1,7 +1,10 @@
 import { h } from "@stencil/core";
-import { Date, DateRange } from "isoly";
+import { isoly } from "isoly";
 export class InputDateRange {
   constructor() {
+    this.color = undefined;
+    this.looks = "plain";
+    this.name = undefined;
     this.value = undefined;
     this.start = undefined;
     this.end = undefined;
@@ -12,9 +15,26 @@ export class InputDateRange {
     this.labelStart = "from";
     this.labelEnd = "to";
   }
+  async clear() {
+    this.start = undefined;
+    this.end = undefined;
+  }
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+    if (this.start && this.end)
+      this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } });
+  }
   onValue(next) {
     this.valueChanged.emit(next);
   }
+  smoothlyInputHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
+  smoothlyInputLooksHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
   onStartChanged(event) {
     this.start = event.detail;
   }
@@ -22,17 +42,16 @@ export class InputDateRange {
     this.end = event.detail;
   }
   onDateRangeSet(event) {
-    console.log("dateRangeSet", event.detail);
     this.open = false;
     event.stopPropagation();
-    DateRange.is(event.detail) && this.dateRangeSelected.emit(event.detail);
+    isoly.DateRange.is(event.detail) && this.smoothlyInput.emit({ [this.name]: event.detail });
   }
   render() {
     var _a;
     return [
-      h("section", { onClick: () => (this.open = !this.open) }, h("smoothly-input", { type: "date", value: this.start, showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.value) }, `${this.labelStart}`), h("span", null, "\u2013"), h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyInput: e => (this.end = e.detail.value) }, `${this.labelEnd}`)),
+      h("section", { onClick: () => (this.open = !this.open) }, h("smoothly-input", { type: "date", name: "start", value: this.start, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.start) }, `${this.labelStart}`), h("span", null, "\u2013"), h("smoothly-input", { type: "date", name: "end", value: this.end, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.end = e.detail.end) }, `${this.labelEnd}`)),
       this.open ? h("div", { onClick: () => (this.open = false) }) : [],
-      this.open ? (h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : Date.now(), onValueChanged: event => {
+      this.open ? (h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), onValueChanged: event => {
           this.value = event.detail;
           event.stopPropagation();
         }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
@@ -52,14 +71,76 @@ export class InputDateRange {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": true,
+        "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
+      },
+      "looks": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../../Looks"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
+      },
       "value": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "Date",
+          "original": "isoly.Date",
           "resolved": "string | undefined",
           "references": {
-            "Date": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
@@ -78,10 +159,10 @@ export class InputDateRange {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "Date",
+          "original": "isoly.Date",
           "resolved": "string | undefined",
           "references": {
-            "Date": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
@@ -100,10 +181,10 @@ export class InputDateRange {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "Date",
+          "original": "isoly.Date",
           "resolved": "string | undefined",
           "references": {
-            "Date": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
@@ -122,10 +203,10 @@ export class InputDateRange {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "Date",
+          "original": "isoly.Date",
           "resolved": "string",
           "references": {
-            "Date": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
@@ -144,10 +225,10 @@ export class InputDateRange {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "Date",
+          "original": "isoly.Date",
           "resolved": "string",
           "references": {
-            "Date": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
@@ -247,18 +328,18 @@ export class InputDateRange {
           "text": ""
         },
         "complexType": {
-          "original": "Date",
+          "original": "isoly.Date",
           "resolved": "string",
           "references": {
-            "Date": {
+            "isoly": {
               "location": "import",
               "path": "isoly"
             }
           }
         }
       }, {
-        "method": "dateRangeSelected",
-        "name": "dateRangeSelected",
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -267,17 +348,62 @@ export class InputDateRange {
           "text": ""
         },
         "complexType": {
-          "original": "{ start: Date; end: Date }",
-          "resolved": "{ start: string; end: string; }",
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
           "references": {
-            "Date": {
+            "Data": {
               "location": "import",
-              "path": "isoly"
+              "path": "./../../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyInputLooks",
+        "name": "smoothlyInputLooks",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(looks: Looks, color: Color) => void",
+          "resolved": "(looks: Looks, color: Color) => void",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../../Looks"
+            },
+            "Color": {
+              "location": "import",
+              "path": "./../../../../model"
             }
           }
         }
       }];
   }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "value",
@@ -286,6 +412,18 @@ export class InputDateRange {
   }
   static get listeners() {
     return [{
+        "name": "smoothlyInput",
+        "method": "smoothlyInputHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyInputLooks",
+        "method": "smoothlyInputLooksHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
         "name": "startChanged",
         "method": "onStartChanged",
         "target": undefined,

package/dist/collection/components/input/date/range/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Clearable } from \"../../Clearable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class InputDateRange implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: isoly.Date\n\t@Prop({ mutable: true }) start?: isoly.Date\n\t@Prop({ mutable: true }) end?: isoly.Date\n\t@Prop({ mutable: true }) max: isoly.Date\n\t@Prop({ mutable: true }) min: isoly.Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() labelStart = \"from\"\n\t@Prop() labelEnd = \"to\"\n\t@Event() valueChanged: EventEmitter<isoly.Date>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t\tif (this.start && this.end)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t}\n\t@Watch(\"value\")\n\tonValue(next: isoly.Date) {\n\t\tthis.valueChanged.emit(next)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"startChanged\")\n\tonStartChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.start = event.detail\n\t}\n\t@Listen(\"endChanged\")\n\tonEndChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.end = event.detail\n\t}\n\t@Listen(\"dateRangeSet\")\n\tonDateRangeSet(event: CustomEvent<isoly.DateRange>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t\tisoly.DateRange.is(event.detail) && this.smoothlyInput.emit({ [this.name]: event.detail })\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<section onClick={() => (this.open = !this.open)}>\n\t\t\t\t<smoothly-input\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tname=\"start\"\n\t\t\t\t\tvalue={this.start}\n\t\t\t\t\tlooks=\"plain\"\n\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\tonSmoothlyInput={e => (this.start = e.detail.start)}>\n\t\t\t\t\t{`${this.labelStart}`}\n\t\t\t\t</smoothly-input>\n\t\t\t\t<span>–</span>\n\t\t\t\t<smoothly-input\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tname=\"end\"\n\t\t\t\t\tvalue={this.end}\n\t\t\t\t\tlooks=\"plain\"\n\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\tonSmoothlyInput={e => (this.end = e.detail.end)}>\n\t\t\t\t\t{`${this.labelEnd}`}\n\t\t\t\t</smoothly-input>\n\t\t\t</section>,\n\t\t\tthis.open ? <div onClick={() => (this.open = false)}></div> : [],\n\t\t\tthis.open ? (\n\t\t\t\t<nav>\n\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\tvalue={this.value ?? isoly.Date.now()}\n\t\t\t\t\t\tonValueChanged={event => {\n\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t</nav>\n\t\t\t) : (\n\t\t\t\t[]\n\t\t\t),\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/input/date/range/style.css

@@ -0,0 +1,69 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+
+:host {
+  position: relative;
+  display: block;
+  width: fit-content;
+  background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+
+:host > nav {
+  position: absolute;
+  z-index: 10;
+  top: 3.5em;
+  background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+  max-width: 22em;
+}
+
+:host > div {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2;
+}
+
+:host > nav > .arrow {
+  position: absolute;
+  z-index: 9;
+  transform: translate(10em, -0.55em) rotate(45deg);
+  width: 1em;
+  height: 1em;
+  background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+
+:host > section {
+  display: flex;
+  background-color: var(--background-color, var(--smoothly-color-shade), transparent);
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+smoothly-input {
+  border-radius: var(--border-radius, none);
+  background-color: transparent;
+  width: var(--input-width);
+  flex-grow: 1;
+}
+
+span {
+  padding: 0.5em 0.2em 0.5em 0.2em;
+  align-self: center;
+}

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

@@ -0,0 +1,58 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+
+
+:host {
+	position: relative;
+	max-width: 100vw;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+nav {
+	position: absolute;
+	z-index: 10;
+	top: 3.5em;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+	min-width: 18em;
+}
+:host > div {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 2;
+}
+:host > nav > .arrow {
+	position: absolute;
+	z-index: 9;
+	transform: translate(2em, -0.55em) rotate(45deg);
+	width: 1em;
+	height: 1em;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+
+@media screen and (min-width: 400px){
+	nav {
+		position: absolute;
+		z-index: 10;
+		top: 3.5em;
+		background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+		max-width: 22em;
+		
+	}
+}

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

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+import { isoly } from "isoly";
+export class SmoothlyInputDemo {
+  handleSelectionChanged(event) {
+    console.log("selectionChanged", event.detail);
+  }
+  render() {
+    return [
+      h("h2", null, "Duration"),
+      h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: { hours: 5, minutes: 30 }, onSmoothlyInput: e => console.log(e.detail.duration) }, "Duration"), h("smoothly-input", { name: "duration", type: "duration", value: { hours: 5, minutes: 30 }, placeholder: "hh:mm", onSmoothlyInput: e => console.log(e.detail.duration) }, "Varaktighet")),
+      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", { 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...", 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 listeners() {
+    return [{
+        "name": "selectionChanged",
+        "method": "handleSelectionChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map