smoothly 0.3.5 → 0.3.6

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

@@ -1,4 +1,4 @@
-import { Component, Event, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Notice } from "../../model";
 export class SmoothlyDisplayDemo {
   noticeWarning(notice) {
@@ -7,137 +7,31 @@ export class SmoothlyDisplayDemo {
   }
   render() {
     return [
-      h("main", null,
-        h("smoothly-popup", null,
-          h("div", null, "Popup, click me"),
-          h("div", { color: "dark", slot: "popup" }, "1 line popup")),
-        h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }),
-        h("dl", null,
-          h("dt", null, "text"),
-          h("dd", null,
-            h("smoothly-display", { type: "text", value: "text" })),
-          h("dt", null, "postal code"),
-          h("dd", null,
-            h("smoothly-display", { type: "postal-code", value: "752 31" })),
-          h("dt", null, "password"),
-          h("dd", null,
-            h("smoothly-display", { type: "password", value: "password" })),
-          h("dt", null, "email"),
-          h("dd", null,
-            h("smoothly-display", { type: "email", value: "test@example.com" })),
-          h("dt", null, "price"),
-          h("dd", null,
-            h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })),
-          h("dt", null, "display amount without decimals"),
-          h("dd", null,
-            h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })),
-          h("dt", null, "display amount with decimals if they are set, otherwise no decimal"),
-          h("dd", null,
-            h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })),
-          h("dt", null, "display amount with decimals"),
-          h("dd", null,
-            h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })),
-          h("dt", null, "percent"),
-          h("dd", null,
-            h("smoothly-display", { type: "percent", value: "42" })),
-          h("dt", null, "phone"),
-          h("dd", null,
-            h("smoothly-display", { type: "phone", value: "0101881108" })),
-          h("dt", null, "card number"),
-          h("dd", null,
-            h("smoothly-display", { type: "card-number", value: "4111111111111111" })),
-          h("dt", null, "card expires"),
-          h("dd", null,
-            h("smoothly-display", { type: "card-expires", value: "7/22" })),
-          h("dt", null, "card csc"),
-          h("dd", null,
-            h("smoothly-display", { type: "card-csc", value: "987" })),
-          h("dt", null, "date"),
-          h("dd", null,
-            h("smoothly-display", { type: "date", value: "2022-07-07" })),
-          h("dt", null, "date time"),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })),
-          h("dd", null,
-            h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })),
-          h("dt", null, "Deprecated display date time"),
-          h("dd", null,
-            h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" })),
-          h("dt", null, "Display amount"),
-          h("dd", null,
-            h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })),
-          h("dt", null, "Quiet"),
-          h("dd", null,
-            h("smoothly-quiet", { color: "dark" }, "-"))),
-        h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }),
-        h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }),
-        h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }),
-        h("smoothly-skeleton", { period: 3, distance: "20rem" }),
-        h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }),
-        h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }),
-        h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }),
-        h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }),
-        h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }),
-        h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }),
-        h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }),
-        h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }),
-        h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }),
-        h("div", { style: { display: "flex", justifyContent: "space-between" } },
-          h("smoothly-popup", { direction: "down" },
-            "Click for popup",
-            h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")),
-          h("smoothly-popup", { direction: "down" },
-            "Click for popup",
-            h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))),
-        h("p", null, "Test of diffrent kinds of notifier:"),
-        h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"),
-        h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"),
-        h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"),
-        h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"),
-        h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"),
-        h("div", { style: { position: "relative", height: "10em" } },
-          "Large Spinner",
-          h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })),
-        h("div", { style: { position: "relative", height: "10em" } },
-          "Medium Spinner",
-          h("smoothly-spinner", { active: true, size: "medium" })),
-        h("div", { style: { position: "relative", height: "10em" } },
-          "Small Spinner",
-          h("smoothly-spinner", { active: true, size: "small" })),
-        h("div", { style: { position: "absolute", left: "500px", top: "150px" } },
-          h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
+      h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Deprecated display date time"), h("dd", null, h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" })), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
     ];
   }
   static get is() { return "smoothly-display-demo"; }
-  static get events() { return [{
-      "method": "notice",
-      "name": "notice",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "Notice",
-        "resolved": "Notice",
-        "references": {
-          "Notice": {
-            "location": "import",
-            "path": "../../model"
+  static get events() {
+    return [{
+        "method": "notice",
+        "name": "notice",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Notice",
+          "resolved": "Notice",
+          "references": {
+            "Notice": {
+              "location": "import",
+              "path": "../../model"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }

package/dist/collection/components/frame/index.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Method, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 import { Message, Trigger } from "../../model";
 export class SmoothlyFrame {
   get contentWindow() {
@@ -32,137 +32,147 @@ export class SmoothlyFrame {
   }
   static get is() { return "smoothly-frame"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["style.css"]
-  }; }
-  static get properties() { return {
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "url",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "origin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | undefined",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
       },
-      "attribute": "origin",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "trigger",
-      "name": "trigger",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "complexType": {
-        "original": "Trigger",
-        "resolved": "Trigger",
-        "references": {
-          "Trigger": {
-            "location": "import",
-            "path": "../../model"
+      "origin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "origin",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "trigger",
+        "name": "trigger",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Trigger",
+          "resolved": "Trigger",
+          "references": {
+            "Trigger": {
+              "location": "import",
+              "path": "../../model"
+            }
           }
         }
-      }
-    }, {
-      "method": "message",
-      "name": "message",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "Message<any>",
-        "resolved": "Message<any>",
-        "references": {
-          "Message": {
-            "location": "import",
-            "path": "../../model"
+      }, {
+        "method": "message",
+        "name": "message",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Message<any>",
+          "resolved": "Message<any>",
+          "references": {
+            "Message": {
+              "location": "import",
+              "path": "../../model"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "send": {
-      "complexType": {
-        "signature": "(message: string | Message<any>, content?: Trigger | any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Message": {
-            "location": "import",
-            "path": "../../model"
+      }];
+  }
+  static get methods() {
+    return {
+      "send": {
+        "complexType": {
+          "signature": "(message: string | Message<any>, content?: Trigger | any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Message": {
+              "location": "import",
+              "path": "../../model"
+            },
+            "Trigger": {
+              "location": "import",
+              "path": "../../model"
+            }
           },
-          "Trigger": {
-            "location": "import",
-            "path": "../../model"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
 }

package/dist/collection/components/google-font/index.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from "@stencil/core";
+import { h } from "@stencil/core";
 import { GoogleFont } from "../../model/GoogleFont";
 export class SmoothlyGoogleFont {
   render() {
@@ -6,28 +6,30 @@ export class SmoothlyGoogleFont {
   }
   static get is() { return "smoothly-google-font"; }
   static get encapsulation() { return "scoped"; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "GoogleFont",
-        "resolved": "string | undefined",
-        "references": {
-          "GoogleFont": {
-            "location": "import",
-            "path": "../../model/GoogleFont"
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GoogleFont",
+          "resolved": "string | undefined",
+          "references": {
+            "GoogleFont": {
+              "location": "import",
+              "path": "../../model/GoogleFont"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
 }