smoothly 0.3.5 → 0.3.7

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Listen, Prop, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Date, DateRange } from "isoly";
 export class InputDateRange {
   constructor() {
@@ -22,236 +22,243 @@ export class InputDateRange {
   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) }, "from"),
-        h("span", null, "\u2013"),
-        h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyInput: e => (this.end = e.detail.value) }, "to")),
+      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) }, "from"), h("span", null, "\u2013"), h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyInput: e => (this.end = e.detail.value) }, "to")),
       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.value = event.detail;
-            event.stopPropagation();
-          }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
+      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.value = event.detail;
+          event.stopPropagation();
+        }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
     ];
   }
   static get is() { return "smoothly-input-date-range"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["style.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "string | undefined",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "string | undefined",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "start": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "string | undefined",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+      "start": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "string | undefined",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "start",
+        "reflect": false
       },
-      "attribute": "start",
-      "reflect": false
-    },
-    "end": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "string | undefined",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+      "end": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "string | undefined",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "end",
+        "reflect": false
       },
-      "attribute": "end",
-      "reflect": false
-    },
-    "max": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "string",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+      "max": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "string",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max",
-      "reflect": false
-    },
-    "min": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "string",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+      "min": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "string",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false
       },
-      "attribute": "min",
-      "reflect": false
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": false
-    },
-    "showLabel": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-label",
-      "reflect": true,
-      "defaultValue": "true"
-    }
-  }; }
-  static get events() { return [{
-      "method": "valueChanged",
-      "name": "valueChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "Date",
-        "resolved": "string",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+      "showLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-label",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "string",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
         }
-      }
-    }, {
-      "method": "dateRangeSelected",
-      "name": "dateRangeSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ start: Date; end: Date }",
-        "resolved": "{ start: string; end: string; }",
-        "references": {
-          "Date": {
-            "location": "import",
-            "path": "isoly"
+      }, {
+        "method": "dateRangeSelected",
+        "name": "dateRangeSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ start: Date; end: Date }",
+          "resolved": "{ start: string; end: string; }",
+          "references": {
+            "Date": {
+              "location": "import",
+              "path": "isoly"
+            }
           }
         }
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "onValue"
-    }]; }
-  static get listeners() { return [{
-      "name": "startChanged",
-      "method": "onStartChanged",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "endChanged",
-      "method": "onEndChanged",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "dateRangeSet",
-      "method": "onDateRangeSet",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValue"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "startChanged",
+        "method": "onStartChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "endChanged",
+        "method": "onEndChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "dateRangeSet",
+        "method": "onDateRangeSet",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,93 +1,8 @@
-import { Component, h } from "@stencil/core";
+import { h } from "@stencil/core";
 export class SmoothlyInputDemo {
   render() {
     return [
-      h("form", { action: "done", style: { position: "relative" } },
-        h("header", null,
-          h("h5", null, "Form")),
-        h("main", null,
-          h("fieldset", null,
-            h("h2", null, "Smoothly Iput"),
-            h("h3", null, "Card"),
-            h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"),
-            h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"),
-            h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"),
-            h("smoothly-input-date", null),
-            h("smoothly-input", { type: "date", name: "date" }, "Date"),
-            h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"),
-            h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"),
-            h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"),
-            h("smoothly-input", { type: "card-number", name: "card" }, "Card #"),
-            h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"),
-            h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"),
-            h("h3", null, "Contact"),
-            h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"),
-            h("smoothly-input", { type: "text", name: "testing" }, "Texttest"),
-            h("smoothly-input", { type: "password", name: "password" }, "Password"),
-            h("smoothly-input", { type: "email", name: "email" }, "Email"),
-            h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"),
-            h("smoothly-input", { type: "percent", name: "percent" }, "Percent"),
-            h("smoothly-input", { type: "phone", name: "phone" }, "Phone"),
-            h("smoothly-input-date", null, "Date")),
-          h("fieldset", null,
-            h("h2", null, "Smoothly Radio"),
-            h("h3", null, "Deselectable Radio List with button"),
-            h("smoothly-radio-button", { deselectable: true, decoration: "button" },
-              h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } },
-                h("span", null, "Option 1"),
-                h("span", { slot: "expansion" }, "Some description.")),
-              h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } },
-                h("span", null, "Option 2"),
-                h("span", { slot: "expansion" }, "Some other description.")),
-              h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } },
-                h("span", null, "Option 3"))),
-            h("h3", null, "Radio List with button"),
-            h("smoothly-radio-button", { decoration: "button" },
-              h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } },
-                h("span", null, "Option 1"),
-                h("span", { slot: "expansion" }, "Some description.")),
-              h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } },
-                h("span", null, "Option 2"),
-                h("span", { slot: "expansion" }, "Some other description.")),
-              h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } },
-                h("span", null, "Option 3"))),
-            h("h3", null, "Radio List without button"),
-            h("smoothly-radio-button", null,
-              h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true },
-                h("span", null, "Option 1"),
-                h("span", { slot: "expansion" }, "Some description.")),
-              h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } },
-                h("span", null, "Option 2"),
-                h("span", { slot: "expansion" }, "Some other description.")),
-              h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } },
-                h("span", null, "Option 3"))),
-            h("smoothly-radio", { name: "option", value: "1" }, "option 1"),
-            h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"),
-            h("smoothly-radio", { name: "option", value: "3" }, "option 3")),
-          h("fieldset", null,
-            h("h2", null, "Smoothly Accordion"),
-            h("smoothly-accordion", null,
-              h("smoothly-accordion-item", { name: "A", open: true },
-                h("smoothly-radio", { name: "a", value: "1" }, "a 1"),
-                h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"),
-                h("smoothly-radio", { name: "a", value: "3" }, "a 3")),
-              h("smoothly-accordion-item", { name: "B" },
-                h("smoothly-radio", { name: "b", value: "1" }, "b 1"),
-                h("smoothly-radio", { name: "b", value: "2" }, "b 2"),
-                h("smoothly-radio", { name: "b", value: "3" }, "b 3")))),
-          h("fieldset", null,
-            h("h2", null, "Smoothly checkbox"),
-            h("smoothly-checkbox", { selectAll: true, intermediate: true }),
-            h("smoothly-checkbox", null),
-            h("smoothly-checkbox", { disabled: true })),
-          h("fieldset", null,
-            h("h2", null, "Smoothly addresses"),
-            h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }),
-            h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }),
-            h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))),
-        h("footer", null,
-          h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"),
-          h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
+      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Iput"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, 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("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
       h("smoothly-backtotop", null),
     ];
   }