smoothly 0.3.38 → 1.0.0-alpha.10

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

@@ -1,29 +1,35 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import * as translation from "./translation";
 export class SmoothlyCheckbox {
   constructor() {
-    this.selectAll = false;
-    this.size = "small";
-    this.intermediate = undefined;
-    this.selected = undefined;
+    this.size = "tiny";
+    this.checked = false;
+    this.intermediate = false;
+    this.name = undefined;
+    this.value = undefined;
     this.disabled = undefined;
     this.t = undefined;
   }
   componentWillLoad() {
     this.t = translation.create(this.element);
   }
-  toggle() {
+  async toggle() {
     if (!this.disabled) {
-      this.selected = !this.selected;
-      this.checked.emit({ selected: this.selected });
+      const checked = this.intermediate || this.checked == false;
+      this.smoothlyChecked.emit({
+        [this.name]: checked ? this.value : undefined,
+      });
+      this.checked = checked;
     }
   }
   render() {
-    return [
-      h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Deselect all" : "Deselect"), onClick: () => this.toggle(), style: { display: this.selected ? "" : "none" }, size: this.size, name: "checkbox-outline" }),
-      h("smoothly-icon", { toolTip: this.t(this.intermediate && !this.selected ? "Deselect all" : "Select all"), onClick: () => this.toggle(), style: { display: this.intermediate && !this.selected ? "" : "none" }, size: this.size, name: "remove-outline" }),
-      h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Select all" : "Select"), onClick: () => this.toggle(), style: { display: !this.selected ? "" : "none" }, size: this.size, name: "square-outline" }),
-    ];
+    return (h(Host, null, h("main", null, h("div", null, h("smoothly-icon", { toolTip: this.t(!this.checked ? "Select" : "De-select"), onClick: e => {
+        this.toggle();
+      }, size: this.size, name: this.intermediate && !this.checked
+        ? "remove-outline"
+        : this.checked && !this.intermediate
+          ? "checkmark-outline"
+          : "empty" })), h("label", { htmlFor: this.name }, h("slot", null))), h("slot", { name: "expansion" })));
   }
   static get is() { return "smoothly-checkbox"; }
   static get encapsulation() { return "scoped"; }
@@ -39,12 +45,12 @@ export class SmoothlyCheckbox {
   }
   static get properties() {
     return {
-      "selectAll": {
-        "type": "boolean",
+      "size": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "\"tiny\" | \"small\" | \"medium\" | \"large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"tiny\"",
           "references": {}
         },
         "required": false,
@@ -53,16 +59,16 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "select-all",
+        "attribute": "size",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"tiny\""
       },
-      "size": {
-        "type": "string",
-        "mutable": false,
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
         "complexType": {
-          "original": "\"tiny\" | \"small\" | \"medium\" | \"large\"",
-          "resolved": "\"large\" | \"medium\" | \"small\" | \"tiny\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -71,9 +77,9 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"small\""
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "intermediate": {
         "type": "boolean",
@@ -90,14 +96,15 @@ export class SmoothlyCheckbox {
           "text": ""
         },
         "attribute": "intermediate",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "selected": {
-        "type": "boolean",
-        "mutable": true,
+      "name": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -106,12 +113,29 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "selected",
-        "reflect": true
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -135,8 +159,8 @@ export class SmoothlyCheckbox {
   }
   static get events() {
     return [{
-        "method": "checked",
-        "name": "checked",
+        "method": "smoothlyChecked",
+        "name": "smoothlyChecked",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -145,11 +169,36 @@ export class SmoothlyCheckbox {
           "text": ""
         },
         "complexType": {
-          "original": "{ selected: boolean }",
-          "resolved": "{ selected: boolean; }",
-          "references": {}
+          "original": "Record<string, any>",
+          "resolved": "{ [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
         }
       }];
   }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAErG,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAM5C,MAAM,OAAO,gBAAgB;;gBAE0B,MAAM;mBACV,KAAK;wBACA,KAAK;;;;;;EAO5D,iBAAiB;IAChB,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC1C,CAAC;EAGD,KAAK,CAAC,MAAM;IACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MACnB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,CAAA;MAC1D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACzB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;OAC7C,CAAC,CAAA;MACF,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;KACtB;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC;UACC,qBACC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EACvD,OAAO,EAAE,CAAC,CAAC,EAAE;cACZ,IAAI,CAAC,MAAM,EAAE,CAAA;YACd,CAAC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EACH,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO;cACjC,CAAC,CAAC,gBAAgB;cAClB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY;gBACpC,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,OAAO,GACO,CACd;QACN,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI;UACxB,eAAa,CACN,CACF;MACP,YAAM,IAAI,EAAC,WAAW,GAAG,CACnB,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\"\nimport * as langly from \"langly\"\nimport * as translation from \"./translation\"\n@Component({\n\ttag: \"smoothly-checkbox\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyCheckbox {\n\t@Element() element: HTMLElement\n\t@Prop() size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"tiny\"\n\t@Prop({ mutable: true, reflect: true }) checked = false\n\t@Prop({ mutable: true, reflect: true }) intermediate = false\n\t@Prop() name: string\n\t@Prop() value: any\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Event() smoothlyChecked: EventEmitter<Record<string, any>>\n\t@State() t: langly.Translate\n\n\tcomponentWillLoad() {\n\t\tthis.t = translation.create(this.element)\n\t}\n\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tif (!this.disabled) {\n\t\t\tconst checked = this.intermediate || this.checked == false\n\t\t\tthis.smoothlyChecked.emit({\n\t\t\t\t[this.name]: checked ? this.value : undefined,\n\t\t\t})\n\t\t\tthis.checked = checked\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<main>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\ttoolTip={this.t(!this.checked ? \"Select\" : \"De-select\")}\n\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\tthis.toggle()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\tthis.intermediate && !this.checked\n\t\t\t\t\t\t\t\t\t? \"remove-outline\"\n\t\t\t\t\t\t\t\t\t: this.checked && !this.intermediate\n\t\t\t\t\t\t\t\t\t? \"checkmark-outline\"\n\t\t\t\t\t\t\t\t\t: \"empty\"\n\t\t\t\t\t\t\t}></smoothly-icon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<label htmlFor={this.name}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</label>\n\t\t\t\t</main>\n\t\t\t\t<slot name=\"expansion\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/checkbox/style.css

@@ -1,16 +1,63 @@
+* {
+	box-sizing: border-box;
+}
+
 :host {
 	display: block;
 }
-:host[hidden] {
-	display: none;
+
+:host > main {
+	display: flex;
+	align-items: center;
+	width: fit-content;
+	height: max-content;
+	margin: 0.3rem 0;
+	line-height: 0;
+}
+
+:host > main > label {
+	display:flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0 0.2em;
+}
+
+:host > main > div {
+	border: 1px solid rgb(var(--smoothly-color-contrast));
+}
+
+:host > main > div > smoothly-icon {
+	display: flex;
+	justify-content: center;	
+	align-items: center;
 }
-smoothly-icon {
-	cursor: pointer;
+
+:host:not([checked]) > main > div > smoothly-icon,
+:host:not([intermediate]) > main > div > smoothly-icon {
+	stroke: rgb(var(--smoothly-color-contrast));
 }
-smoothly-icon:nth-child(2) {
-	position: absolute;
-	transform: scaleX(0.6);
+
+:host[disabled] > main > div {
+	border: 1px solid rgb(var(--smoothly-color-contrast), 0.3);
+}
+
+::slotted([slot=expansion]) {
+	display: none;
+	background-color: rgb(var(--smoothly-secondary-color));
+	color: rgb(var(--smoothly-secondary-contrast));
+}
+
+[checked]::slotted([slot=expansion]) {
+	display: block;
+	padding: 0.5em;
+	border-radius: 5px;
+	margin: 0.5rem 0;
 }
-:host[disabled] smoothly-icon {
-	stroke: rgba(var(--smoothly-color-contrast), 0.3);
+
+[checked]::slotted([slot=expansion])::before {
+	content: "\25B2";
+	position: relative;
+	top: -1.35em;
+	left: 2rem;
+	color: rgb(var(--smoothly-secondary-color))
 }

package/dist/collection/components/checkbox/translation/index.js

@@ -5,3 +5,4 @@ export function create(language) {
     sv,
   }, language);
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/checkbox/translation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/checkbox/translation/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAChC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AAEzB,MAAM,UAAU,MAAM,CAAC,QAAsC;EAC5D,OAAO,MAAM,CAAC,MAAM,CACnB;IACC,EAAE;GACF,EACD,QAAQ,CACR,CAAA;AACF,CAAC","sourcesContent":["import * as isoly from \"isoly\"\nimport * as langly from \"langly\"\nimport { sv } from \"./sv\"\n\nexport function create(language: isoly.Language | HTMLElement): langly.Translate {\n\treturn langly.create(\n\t\t{\n\t\t\tsv,\n\t\t},\n\t\tlanguage\n\t)\n}\n"]}

package/dist/collection/components/checkbox/translation/sv.js

@@ -4,3 +4,4 @@ export const sv = {
   Select: "Markera",
   Deselect: "Avmarkera",
 };
+//# sourceMappingURL=sv.js.map

package/dist/collection/components/checkbox/translation/sv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../../../src/components/checkbox/translation/sv.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,EAAE,GAAG;EACjB,YAAY,EAAE,cAAc;EAC5B,cAAc,EAAE,gBAAgB;EAChC,MAAM,EAAE,SAAS;EACjB,QAAQ,EAAE,WAAW;CACrB,CAAA","sourcesContent":["export const sv = {\n\t\"Select all\": \"Markera alla\",\n\t\"Deselect all\": \"Avmarkera alla\",\n\tSelect: \"Markera\",\n\tDeselect: \"Avmarkera\",\n}\n"]}

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

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+export class SmoothlyColor {
+  constructor() {
+    this.color = undefined;
+  }
+  render() {
+    return h("slot", null);
+  }
+  static get is() { return "smoothly-color"; }
+  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
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/color/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQlD,MAAM,OAAO,aAAa;;;;EAGzB,MAAM;IACL,OAAO,eAAa,CAAA;EACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-color\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyColor {\n\t@Prop({ reflect: true }) color?: Color\n\n\trender() {\n\t\treturn <slot></slot>\n\t}\n}\n"]}

package/dist/collection/components/color/style.css

@@ -0,0 +1,69 @@
+[color=default] {
+	--smoothly-color: var(--smoothly-default-color);
+	--smoothly-color-contrast: var(--smoothly-default-contrast);
+	--smoothly-color-shade: var(--smoothly-default-shade);
+	--smoothly-color-tint: var(--smoothly-default-tint);
+}
+
+[color=primary] {
+	--smoothly-color: var(--smoothly-primary-color);
+	--smoothly-color-contrast: var(--smoothly-primary-contrast);
+	--smoothly-color-shade: var(--smoothly-primary-shade);
+	--smoothly-color-tint: var(--smoothly-primary-tint);
+}
+
+[color=secondary] {
+	--smoothly-color: var(--smoothly-secondary-color);
+	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
+	--smoothly-color-shade: var(--smoothly-secondary-shade);
+	--smoothly-color-tint: var(--smoothly-secondary-tint);
+}
+
+[color=tertiary] {
+	--smoothly-color: var(--smoothly-tertiary-color);
+	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
+	--smoothly-color-shade: var(--smoothly-tertiary-shade);
+	--smoothly-color-tint: var(--smoothly-tertiary-tint);
+}
+
+[color=success] {
+	--smoothly-color: var(--smoothly-success-color);
+	--smoothly-color-contrast: var(--smoothly-success-color);
+	--smoothly-color-shade: var(--smoothly-success-shade);
+	--smoothly-color-tint: var(--smoothly-success-tint);
+}
+
+[color=warning] {
+	--smoothly-color: var(--smoothly-warning-color);
+	--smoothly-color-contrast: var(--smoothly-warning-contrast);
+	--smoothly-color-shade: var(--smoothly-warning-shade);
+	--smoothly-color-tint: var(--smoothly-warning-tint);
+}
+
+[color=danger] {
+	--smoothly-color: var(--smoothly-danger-color);
+	--smoothly-color-contrast: var(--smoothly-danger-contrast);
+	--smoothly-color-shade: var(--smoothly-danger-shade);
+	--smoothly-color-tint: var(--smoothly-danger-tint);
+}
+
+[color=light] {
+	--smoothly-color: var(--smoothly-light-color);
+	--smoothly-color-contrast: var(--smoothly-light-contrast);
+	--smoothly-color-shade: var(--smoothly-light-shade);
+	--smoothly-color-tint: var(--smoothly-light-tint);
+}
+
+[color=medium] {
+	--smoothly-color: var(--smoothly-medium-color);
+	--smoothly-color-contrast: var(--smoothly-medium-contrast);
+	--smoothly-color-shade: var(--smoothly-medium-shade);
+	--smoothly-color-tint: var(--smoothly-medium-tint);
+}
+
+[color=dark] {
+	--smoothly-color: var(--smoothly-dark-color);
+	--smoothly-color-contrast: var(--smoothly-dark-contrast);
+	--smoothly-color-shade: var(--smoothly-dark-shade);
+	--smoothly-color-tint: var(--smoothly-dark-tint);
+}

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

@@ -70,3 +70,4 @@ export class SmoothlyCountry {
   }
   static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/country/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/country/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,WAAW,EAAY,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAMpC,MAAM,OAAO,eAAe;;;gBAEgB,QAAQ;;;EAGnD,iBAAiB;IAChB,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC1C,CAAC;EACD,MAAM;;IACL,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IACvG,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAC5D,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;MAClG,GAAG;MACH,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CACjE,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Element, h, Host, Prop, State } from \"@stencil/core\"\nimport { CountryCode, Language } from \"isoly\"\nimport { getLanguage } from \"langly\"\n\n@Component({\n\ttag: \"smoothly-country\",\n\tscoped: true,\n})\nexport class SmoothlyCountry {\n\t@Prop() value: CountryCode.Alpha2\n\t@Prop() text: \"alpha2\" | \"name\" | \"none\" = \"alpha2\"\n\t@Element() element: HTMLElement\n\t@State() language?: Language\n\tcomponentWillLoad() {\n\t\tthis.language = getLanguage(this.element)\n\t}\n\trender() {\n\t\tconst name = this.language && this.value ? CountryCode.Name.from(this.language, this.value) : undefined\n\t\treturn (\n\t\t\t<Host title={this.text == \"alpha2\" && name ? name : this.value}>\n\t\t\t\t{this.value?.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397)) +\n\t\t\t\t\t\" \" +\n\t\t\t\t\t(this.text == \"alpha2\" ? this.value : this.text == \"name\" ? name : \"\")}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -125,3 +125,4 @@ export class SmoothlyDialog {
       }];
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAS,OAAO,EAAE,MAAM,aAAa,CAAA;AAO5C,MAAM,OAAO,cAAc;;;gBAEqB,IAAI;oBACf,KAAK;;;EAGzC,eAAe,CAAC,KAA2B;IAC1C,IAAI,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO;MAC3D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;EACnB,CAAC;EACD,QAAQ;IACP,OAAO;MACN,KAAK,EAAE;QACN,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;OACrC;KACD,CAAA;EACF,CAAC;EACD,MAAM;IACL,OAAO;MACN;QACE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,wBAAkB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;UAC1C,qBAAe,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAkB,CACjE,CACnB,CAAC,CAAC,CAAC,CACH,EAAE,CACF;QACA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAK,IAAI,CAAC,MAAM,CAAM,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC3D;MACT;QACC,eAAa,CACP;KACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Listen, Prop } from \"@stencil/core\"\nimport { Color, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-dialog\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDialog {\n\t@Prop({ reflect: true }) color: Color | undefined\n\t@Prop({ mutable: true, reflect: true }) open = true\n\t@Prop({ reflect: true }) closable = false\n\t@Prop({ reflect: true }) header: string | undefined\n\t@Listen(\"trigger\")\n\tTriggerListener(event: CustomEvent<Trigger>) {\n\t\tif (Trigger.is(event.detail) && event.detail.name == \"close\")\n\t\t\tthis.open = false\n\t}\n\thostData() {\n\t\treturn {\n\t\t\tstyle: {\n\t\t\t\tdisplay: this.open ? \"block\" : \"none\",\n\t\t\t},\n\t\t}\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<header>\n\t\t\t\t{this.closable ? (\n\t\t\t\t\t<smoothly-trigger fill=\"clear\" name=\"close\">\n\t\t\t\t\t\t<smoothly-icon name=\"close-circle\" fill=\"solid\" color={this.color}></smoothly-icon>\n\t\t\t\t\t</smoothly-trigger>\n\t\t\t\t) : (\n\t\t\t\t\t[]\n\t\t\t\t)}\n\t\t\t\t{this.header ? <h1>{this.header}</h1> : <slot name=\"header\"></slot>}\n\t\t\t</header>,\n\t\t\t<main>\n\t\t\t\t<slot></slot>\n\t\t\t</main>,\n\t\t]\n\t}\n}\n//\n"]}

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

@@ -5,3 +5,4 @@ export class SmoothlyDialogDemo {
   }
   static get is() { return "smoothly-dialog-demo"; }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/dialog-demo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dialog-demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAK5C,MAAM,OAAO,kBAAkB;EAC9B,MAAM;IACL,OAAO,CACN,uBAAiB,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,QAAQ;MACxE,sBAAgB,GAAG,EAAC,4BAA4B,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAmB,CAC1F,CAClB,CAAA;EACF,CAAC;;CACD","sourcesContent":["import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-dialog-demo\",\n})\nexport class SmoothlyDialogDemo {\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-dialog color=\"default\" style={{ \"margin-top\": \"6vh\" }} closable>\n\t\t\t\t<smoothly-frame url=\"https://www.wikipedia.org/\" name=\"parent\" style={{ height: \"80vh\" }}></smoothly-frame>\n\t\t\t</smoothly-dialog>\n\t\t)\n\t}\n}\n"]}

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

@@ -164,3 +164,4 @@ function getLocale() {
   const result = navigator.language;
   return Locale.is(result) ? result : Language.is(result) ? Locale.toLocale(result) : undefined;
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/display/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAyB,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAQ,MAAM,QAAQ,CAAA;AAO1C,MAAM,OAAO,eAAe;;;;;;;;EAM3B,MAAM;;IACL,IAAI,MAAwC,CAAA;IAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;IACtB,QAAQ,IAAI,EAAE;MACb;QACC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QACjC,MAAK;MACN,KAAK,OAAO;QACX,MAAM,GAAG,SAAG,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,KAAK,IAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAK,CAAA;QACxE,MAAK;MACN,KAAK,OAAO;QACX,MAAM,GAAG,SAAG,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,KAAK,IAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAK,CAAA;QACnF,MAAK;MACN,KAAK,aAAa;QACjB,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;QAC/C,MAAK;MACN,KAAK,OAAO;QACX,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAChD,MAAK;MACN,KAAK,MAAM;QACV,MAAM,GAAG,MAAA,GAAG,CAAC,IAAI,CAAC,IAAY,EAAE,SAAS,EAAE,CAAC,0CAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAClE,MAAK;MACN,KAAK,WAAW;QACf,MAAM,GAAG,IAAI,CAAC,MAAM;UACnB,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC;UACzD,CAAC,CAAC,MAAA,GAAG,CAAC,IAAI,CAAC,IAAY,EAAE,SAAS,EAAE,CAAC,0CAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC5D,MAAK;KACN;IACD,OAAO,MAAM,CAAA;EACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AACD,SAAS,SAAS;EACjB,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAA;EACjC,OAAO,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AAC9F,CAAC","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { CountryCode, Currency, DateTime, Language, Locale } from \"isoly\"\nimport { format, get, Type } from \"tidily\"\n\n@Component({\n\ttag: \"smoothly-display\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDisplay {\n\t@Prop() type: Type\n\t@Prop() value?: any\n\t@Prop() currency?: Currency\n\t@Prop() country?: CountryCode.Alpha2\n\t@Prop() format?: DateTime.Format\n\trender() {\n\t\tlet result: string | HTMLElement | undefined\n\t\tconst type = this.type\n\t\tswitch (type) {\n\t\t\tdefault:\n\t\t\t\tresult = format(this.value, type)\n\t\t\t\tbreak\n\t\t\tcase \"email\":\n\t\t\t\tresult = <a href={\"mailto:\" + this.value}>{format(this.value, type)}</a>\n\t\t\t\tbreak\n\t\t\tcase \"phone\":\n\t\t\t\tresult = <a href={\"tel:\" + this.value}>{format(this.value, type, this.country)}</a>\n\t\t\t\tbreak\n\t\t\tcase \"postal-code\":\n\t\t\t\tresult = format(this.value, type, this.country)\n\t\t\t\tbreak\n\t\t\tcase \"price\":\n\t\t\t\tresult = format(this.value, type, this.currency)\n\t\t\t\tbreak\n\t\t\tcase \"date\":\n\t\t\t\tresult = get(this.type as Type, getLocale())?.toString(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"date-time\":\n\t\t\t\tresult = this.format\n\t\t\t\t\t? DateTime.localize(this.value, this.format, getLocale())\n\t\t\t\t\t: get(this.type as Type, getLocale())?.toString(this.value)\n\t\t\t\tbreak\n\t\t}\n\t\treturn result\n\t}\n}\nfunction getLocale(): Locale | undefined {\n\tconst result = navigator.language\n\treturn Locale.is(result) ? result : Language.is(result) ? Locale.toLocale(result) : undefined\n}\n"]}

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

@@ -120,3 +120,4 @@ export class SmoothlyDisplayAmount {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/display-amount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-amount/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAOhC,MAAM,OAAO,qBAAqB;;;;qBAGb,KAAK;;EAEzB,MAAM,CAAC,MAAc;IACpB,MAAM,cAAc,GAAG,CAAC,CAAA;IACxB,MAAM,eAAe,GAAG,CAAC,CAAA;IACzB,MAAM,WAAW,GAAG,CACnB,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CACrF,CAAA;IACX,IAAI,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;IACnC,IAAI,SAAiB,CAAA;IACrB,IAAI,MAAM,GAAG,MAAM,CAAA;IACnB,IAAI,MAAM,IAAI,EAAE;MACf,MAAM,GAAG,GAAG,CAAA;IACb,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACzB,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;MAC/B,IAAI,SAAS,IAAI,CAAC,EAAE;QACnB,MAAM,GAAG,GAAG,GAAG,MAAM,CAAA;QACrB,SAAS,EAAE,CAAA;OACX;MACD,eAAe,GAAG,SAAS,CAAA;MAC3B,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,GAAG,WAAW,GAAG,CAAC,EAAE,GAAG,CAAC,CAAA;MACxD,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,CAAC,CAAC,CAAA;KACzD;SAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAC3B,MAAM,GAAG,MAAM,GAAG,GAAG,CAAA;MACrB,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;MAC7B,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,GAAG,WAAW,GAAG,CAAC,EAAE,GAAG,CAAC,CAAA;KACxD;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;IAC9D,IAAI,MAAM,GAAG,CAAC,EAAE;MACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAChC,MAAM,QAAQ,GAAG,eAAe,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,cAAc,CAAA;QAChE,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;QAChF,eAAe,EAAE,CAAA;OACjB;KACD;IAED,OAAO,MAAM,CAAA;EACd,CAAC;EAED,MAAM;IACL,OAAO;MACN,OAAO,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;MAC/F,GAAG;MACH,IAAI,CAAC,QAAQ;KACb,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop } from \"@stencil/core\"\nimport { Currency } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-display-amount\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDisplayAmount {\n\t@Prop() amount: number | string\n\t@Prop() currency: Currency\n\t@Prop() toInteger = false\n\n\tformat(amount: string): string {\n\t\tconst digitsPerGroup = 3\n\t\tconst defaultDecimals = 2\n\t\tconst maxDecimals = (\n\t\t\tCurrency.decimalDigits(this.currency) ? Currency.decimalDigits(this.currency) : defaultDecimals\n\t\t) as number\n\t\tlet beforeSeparator = amount.length\n\t\tlet separator: number\n\t\tlet result = amount\n\t\tif (result == \"\")\n\t\t\tresult = \"0\"\n\t\tif (amount.includes(\".\")) {\n\t\t\tseparator = amount.indexOf(\".\")\n\t\t\tif (separator == 0) {\n\t\t\t\tresult = \"0\" + result\n\t\t\t\tseparator++\n\t\t\t}\n\t\t\tbeforeSeparator = separator\n\t\t\tresult = result.padEnd(separator + maxDecimals + 1, \"0\")\n\t\t\tresult = result.substring(0, separator + maxDecimals + 1)\n\t\t} else if (!this.toInteger) {\n\t\t\tresult = result + \".\"\n\t\t\tseparator = result.length - 1\n\t\t\tresult = result.padEnd(separator + maxDecimals + 1, \"0\")\n\t\t}\n\t\tconst spaces = Math.ceil(beforeSeparator / digitsPerGroup) - 1\n\t\tif (spaces > 0) {\n\t\t\tfor (let i = 0; i < spaces; i++) {\n\t\t\t\tconst position = beforeSeparator - (spaces - i) * digitsPerGroup\n\t\t\t\tresult = result.slice(0, position) + \" \" + result.slice(position, result.length)\n\t\t\t\tbeforeSeparator++\n\t\t\t}\n\t\t}\n\n\t\treturn result\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\ttypeof this.amount == \"number\" ? this.format(this.amount.toString()) : this.format(this.amount),\n\t\t\t\" \",\n\t\t\tthis.currency,\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/display-date-time/index.js

@@ -48,3 +48,4 @@ export class SmoothlyDisplayDateTime {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/display-date-time/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-date-time/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,IAAI,EAAE,MAAM,eAAe,CAAA;AAWlE,MAAM,OAAO,uBAAuB;;;;EAGnC,iBAAiB;IAChB,OAAO,CAAC,IAAI,CAAC,gGAAgG,CAAC,CAAA;EAC/G,CAAC;EACD,MAAM;IACL,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEzC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;EACvC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Prop } from \"@stencil/core\"\nimport { DateTime } from \"isoly\"\n\n/**\n * DEPRECATED, use  <smoothly-display type=\"date-time\">\n */\n@Component({\n\ttag: \"smoothly-display-date-time\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDisplayDateTime implements ComponentWillLoad {\n\t@Prop() datetime: DateTime\n\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tconsole.warn('Component <smoothly-display-date-time> is deprecated, use <smoothly-display type=\"date-time\">.')\n\t}\n\trender() {\n\t\tconst datetime = this.datetime.split(\"T\")\n\n\t\treturn [datetime[0], \" \", datetime[1]]\n\t}\n}\n"]}

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

@@ -7,7 +7,7 @@ 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("fieldset", null, h("h2", null, "Smoothly display"), 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("fieldset", null, h("h2", null, "Smoothly skeleton"), 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("fieldset", null, h("h2", null, "Smoothly URL encoded"), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), h("fieldset", null, h("h2", null, "Smoothly popup"), 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("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup"))), h("fieldset", null, h("h2", null, "Test of different 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("fieldset", null, h("h2", null, "Smoothly spinner"), 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("fieldset", null, h("h2", null, "Smoothly summary"), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "danger", fill: "clear" }, h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", null, "Person"), h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { slot: "content" }, "Some person information.")), h("smoothly-summary", { color: "danger", fill: "clear" }, h("p", { slot: "summary" }, "Some other title"), h("p", { slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")))),
     ];
   }
   static get is() { return "smoothly-display-demo"; }
@@ -35,3 +35,4 @@ export class SmoothlyDisplayDemo {
       }];
   }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAIpC,MAAM,OAAO,mBAAmB;EAEvB,aAAa,CAAC,MAAc;IACnC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;EACzB,CAAC;EACD,MAAM;IACL,OAAO;MACN;QACC;UACC,iCAAyB;UACzB,kCAA4B,QAAQ,EAAC,yBAAyB,GAA8B;UAC5F;YACC,qBAAa;YACb;cACC,wBAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAoB,CAC1D;YACL,4BAAoB;YACpB;cACC,wBAAkB,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,QAAQ,GAAoB,CACnE;YACL,yBAAiB;YACjB;cACC,wBAAkB,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,GAAoB,CAClE;YACL,sBAAc;YACd;cACC,wBAAkB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,kBAAkB,GAAoB,CACvE;YACL,sBAAc;YACd;cACC,wBAAkB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,GAAoB,CAC3E;YACL,gDAAwC;YACxC;cACC,+BAAyB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAE,IAAI,GAA4B,CAC5F;YACL,mFAA2E;YAC3E;cACC,+BAAyB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAE,IAAI,GAA4B,CAC/F;YACL,6CAAqC;YACrC;cACC,+BAAyB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAC,KAAK,GAA2B,CAC9E;YACL,wBAAgB;YAChB;cACC,wBAAkB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,IAAI,GAAoB,CAC3D;YACL,sBAAc;YACd;cACC,wBAAkB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,GAAoB,CACjE;YACL,4BAAoB;YACpB;cACC,wBAAkB,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,kBAAkB,GAAoB,CAC7E;YACL,6BAAqB;YACrB;cACC,wBAAkB,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,MAAM,GAAoB,CAClE;YACL,yBAAiB;YACjB;cACC,wBAAkB,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,GAAoB,CAC7D;YACL,qBAAa;YACb;cACC,wBAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAoB,CAChE;YACL,0BAAkB;YAClB;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,EAAE,KAAK,EAAC,sBAAsB,GAAoB,CACjM;YACL;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,EAAE,KAAK,EAAC,sBAAsB,GAAoB,CAChM;YACL;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,EAAE,KAAK,EAAC,sBAAsB,GAAoB,CACnM;YACL;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,EAAE,KAAK,EAAC,sBAAsB,GAAoB,CACnM;YACL;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAC,EAAE,KAAK,EAAC,wBAAwB,GAAoB,CAC5I;YACL;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAC,EAAE,KAAK,EAAC,wBAAwB,GAAoB,CAC9I;YACL;cACC,wBAAkB,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,EAAC,EAAE,KAAK,EAAC,mBAAmB,GAAoB,CACnN;YACL,6CAAqC;YACrC;cACC,kCAA4B,QAAQ,EAAC,qBAAqB,GAA8B,CACpF;YACL,+BAAuB;YACvB;cACC,+BAAyB,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,GAA2B,CAC9E;YACL,sBAAc;YACd;cACC,sBAAgB,KAAK,EAAC,MAAM,QAAmB,CAC3C,CACD,CACK;QACX;UACC,kCAA0B;UAC1B,yBAAmB,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAqB;UACjF,yBAAmB,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,aAAa,GAAqB;UACvF,yBAAmB,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,+BAA+B,GAAqB;UACzG,yBAAmB,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB;UACpE,yBAAmB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAqB;UAChG,yBAAmB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB;UACnF,yBAAmB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB;UACnF,yBAAmB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB;UACnF,yBAAmB,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAqB;UAC/F,yBAAmB,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB;UAClF,yBAAmB,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB;UAClF,yBAAmB,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,GAAsB,CACxE;QACX;UACC,qCAA6B;UAC7B,2BAAqB,IAAI,EAAC,qBAAqB,GAAuB,CAC5D;QACX;UACC,+BAAuB;UACvB,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAC;YAC7D,sBAAgB,SAAS,EAAC,MAAM;;cAE/B,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,8CAAgD,CAC7F;YACjB,sBAAgB,SAAS,EAAC,MAAM;;cAE/B,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC,uCAAyC,CACtF,CACZ;UACN;YACC,iCAA0B;YAC1B,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,mBAExB,CACU,CACP;QACX;UACA,oDAA4C;UAC3C,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC,cAAkB;UAC1G,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,gCAAgC,CAAC,CAAC,cAAkB;UAC9G,cAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,aAAiB;UAC1G,cACC,OAAO,EAAE,GAAG,EAAE,CACb,IAAI,CAAC,aAAa,CACjB,MAAM,CAAC,OAAO,CACb,gCAAgC,EAChC,GAAG,EAAE,CACJ,IAAI,OAAO,CAAoB,OAAO,CAAC,EAAE,CACxC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,CACjE,CACF,CACD,cAGM;UACT,cACC,OAAO,EAAE,GAAG,EAAE,CACb,IAAI,CAAC,aAAa,CACjB,MAAM,CAAC,KAAK,CACX,8BAA8B,EAC9B,GAAG,EAAE,CACJ,IAAI,OAAO,CAAoB,OAAO,CAAC,EAAE,CACxC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,CACjE,CACF,CACD,YAGM,CACC;QACX;UACC,iCAAyB;UACzB,WAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAC;;YAAe,wBAAkB,MAAM,QAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAC,oBAAoB,EAAE,aAAa,EAAE,sBAAsB,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,GAAG,GAAqB,CAAM;UAC7O,WAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAC;;YAAgB,wBAAkB,MAAM,QAAC,IAAI,EAAC,QAAQ,GAAoB,CAAM;UAClI,WAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAC;;YAAe,wBAAkB,MAAM,QAAC,IAAI,EAAC,OAAO,GAAoB,CAAM;UAChI,WAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;YAAE,oBAAc,GAAG,EAAC,uDAAuD,GAAgB,CAAM,CACvJ;QACX;UACC,iCAAyB;UACzB,wBAAkB,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;YACxD,SAAG,IAAI,EAAC,SAAS,iBAAe;YAChC,SAAG,IAAI,EAAC,SAAS,mBAAiB,CAChB;UACnB,wBAAkB,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;YACxD,SAAG,IAAI,EAAC,SAAS,iBAAe;YAChC,SAAG,IAAI,EAAC,SAAS,mBAAiB,CAChB;UACnB,wBAAkB,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO;YAC5C,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAC;cAAE,yBAAmB;cAAA,qBAAe,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAiB,CAAM;YAC1K,SAAG,IAAI,EAAC,SAAS,+BAA6B,CAC5B;UACnB,wBAAkB,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO;YAC5C,SAAG,IAAI,EAAC,SAAS,uBAAqB;YACtC,SAAG,IAAI,EAAC,SAAS,qSAAmS,CAClS,CACT,CACL;KACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h } from \"@stencil/core\"\nimport { Notice } from \"../../model\"\n@Component({\n\ttag: \"smoothly-display-demo\",\n})\nexport class SmoothlyDisplayDemo {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate noticeWarning(notice: Notice) {\n\t\tconsole.log(\"emit\", notice)\n\t\tthis.notice.emit(notice)\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<main>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly display</h2>\n\t\t\t\t\t<smoothly-display-date-time datetime=\"2019-08-15T08:08:17.65Z\"></smoothly-display-date-time>\n\t\t\t\t\t<dl>\n\t\t\t\t\t\t<dt>text</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"text\" value=\"text\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>postal code</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"postal-code\" value=\"752 31\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>password</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"password\" value=\"password\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>email</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"email\" value=\"test@example.com\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>price</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"price\" value=\"13.37\" currency=\"SEK\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount without decimals</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200} currency=\"SEK\" toInteger={true}></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount with decimals if they are set, otherwise no decimal</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200.20} currency=\"SEK\" toInteger={true}></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount with decimals</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200.20} currency=\"SEK\"></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>percent</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"percent\" value=\"42\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>phone</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"phone\" value=\"0101881108\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card number</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-number\" value=\"4111111111111111\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card expires</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-expires\" value=\"7/22\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card csc</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-csc\" value=\"987\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>date</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date\" value=\"2022-07-07\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>date time</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T02:02:02Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<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\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<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\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"numeric\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T12:22:24Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"short\", day: \"numeric\"}} value=\"2022-07-07T00:00+02:00\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"numeric\", day: \"numeric\"}} value=\"2022-07-07T00:00+02:00\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<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\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Deprecated display date time</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-date-time datetime=\"2019-01-31T20:01:34\"></smoothly-display-date-time>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Display amount</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount currency=\"SEK\" amount=\"1289.5\"></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Quiet</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-quiet color=\"dark\">-</smoothly-quiet>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t</dl>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly skeleton</h2>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" color=\"200,200,255\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" color=\"var(--smoothly-warning-color)\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly URL encoded</h2>\n\t\t\t\t\t<smoothly-urlencoded data=\"hej=hopp&tjena=moss\"></smoothly-urlencoded>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly popup</h2>\n\t\t\t\t\t<div style={{display: \"flex\", justifyContent: \"space-between\"}}>\n\t\t\t\t\t\t<smoothly-popup direction=\"down\">\n\t\t\t\t\t\t\tClick for popup\n\t\t\t\t\t\t\t<span slot=\"popup\" color=\"dark\" style={{whiteSpace: \"nowrap\"}}>Some popup stuff that has a lot of text</span>\n\t\t\t\t\t\t</smoothly-popup>\n\t\t\t\t\t\t<smoothly-popup direction=\"down\">\n\t\t\t\t\t\t\tClick for popup\n\t\t\t\t\t\t\t<span slot=\"popup\" color=\"dark\" style={{whiteSpace: \"nowrap\"}}>Some popup with a bunch of text.</span>\n\t\t\t\t\t\t</smoothly-popup>\n\t\t\t\t\t</div>\n\t\t\t\t\t<smoothly-popup>\n\t\t\t\t\t\t<div>Popup, click me</div>\n\t\t\t\t\t\t<div color=\"dark\" slot=\"popup\">\n\t\t\t\t\t\t\t1 line popup\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-popup>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t<h2>Test of different kinds of notifier</h2>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.warn(\"This is a test warning notice.\"))}>warning</button>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.succeded(\"This is a test success notice.\"))}>success</button>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.failed(\"This is a test danger notice.\"))}>danger</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\tthis.noticeWarning(\n\t\t\t\t\t\t\t\tNotice.execute(\n\t\t\t\t\t\t\t\t\t\"This is a test execute notice.\",\n\t\t\t\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\t\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\t\t\t\t\t\t\t\twindow.setTimeout(() => resolve([true, \"This went great\"]), 3000)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}>\n\t\t\t\t\t\texecute\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\tthis.noticeWarning(\n\t\t\t\t\t\t\t\tNotice.delay(\n\t\t\t\t\t\t\t\t\t\"This is a test delay notice.\",\n\t\t\t\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\t\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\t\t\t\t\t\t\t\twindow.setTimeout(() => resolve([true, \"This went great\"]), 3000)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}>\n\t\t\t\t\t\tdelay\n\t\t\t\t\t</button>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly spinner</h2>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Large Spinner<smoothly-spinner active size=\"large\" style={{\"--background-color\": \"255,255,255\", \"--background-opacity\": \"0.2\", \"--spinner-color\": \"0,130,0\", }}></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Medium Spinner<smoothly-spinner active size=\"medium\"></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Small Spinner<smoothly-spinner active size=\"small\"></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"absolute\", left: \"500px\", top: \"150px\" }}><smoothly-svg url=\"https://theme.payfunc.com/intergiro/animated-logo.svg\"></smoothly-svg></div>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly summary</h2>\n\t\t\t\t\t<smoothly-summary color=\"light\" fill=\"clear\" size=\"large\">\n\t\t\t\t\t\t<p slot=\"summary\">Some title</p>\n\t\t\t\t\t\t<p slot=\"content\">Some content</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"light\" fill=\"clear\" size=\"large\">\n\t\t\t\t\t\t<p slot=\"summary\">Some title</p>\n\t\t\t\t\t\t<p slot=\"content\">Some content</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"danger\" fill=\"clear\">\n\t\t\t\t\t\t<div slot=\"summary\" style={{display: \"flex\", gap: \"0.3rem\"}}><span>Person</span><smoothly-icon name=\"person\" color=\"light\" fill=\"clear\" size=\"tiny\"></smoothly-icon></div>\n\t\t\t\t\t\t<p slot=\"content\">Some person information.</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"danger\" fill=\"clear\">\n\t\t\t\t\t\t<p slot=\"summary\">Some other title</p>\n\t\t\t\t\t\t<p slot=\"content\">A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t</fieldset>\n\t\t\t</main>,\n\t\t]\n\t}\n}\n"]}