smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

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

@@ -1 +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"]}
+{"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,KAAK,EAAE,MAAM,eAAe,CAAA;AAG5G,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAM5C,MAAM,OAAO,gBAAgB;;gBAE0B,MAAM;mBACV,KAAK;wBACA,KAAK;uBACrB,KAAK;oBACR,KAAK;;;;;EAMzC,iBAAiB;IAChB,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC1C,CAAC;EAID,kBAAkB;IACjB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;MACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAA;EACrD,CAAC;EAGD,KAAK,CAAC,MAAM;IACX,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,CAAA;MAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACvB,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,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAA;EACpD,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,qBACC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EACH,IAAI,CAAC,WAAW;UACf,CAAC,CAAC,eAAe;UACjB,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO;YACpC,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY;cACpC,CAAC,CAAC,mBAAmB;cACrB,CAAC,CAAC,OAAO,GAEV;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI;QACxB,eAAa,CACN;MACR,WAAK,KAAK,EAAE,WAAW;QACtB,YAAM,IAAI,EAAC,WAAW,GAAG,CACpB,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport * as langly from \"langly\"\nimport { Clearable } from \"../input/Clearable\"\nimport * as translation from \"./translation\"\n@Component({\n\ttag: \"smoothly-checkbox\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyCheckbox implements Clearable {\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({ reflect: true }) unavailable = false\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop() name: string\n\t@Prop() value: any\n\t@Event() smoothlyInput: 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@Watch(\"checked\")\n\t@Watch(\"unavailable\")\n\tunavailableChanged(): void {\n\t\tif (this.unavailable && this.checked)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: undefined })\n\t}\n\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tif (!this.disabled && !this.unavailable) {\n\t\t\tconst checked = this.intermediate || this.checked == false\n\t\t\tthis.smoothlyInput.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\t@Method()\n\tasync clear() {\n\t\tthis.checked = false\n\t\tthis.smoothlyInput.emit({ [this.name]: undefined })\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-icon\n\t\t\t\t\ttoolTip={this.t(!this.checked ? \"Select\" : \"De-select\")}\n\t\t\t\t\tonClick={() => this.toggle()}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tname={\n\t\t\t\t\t\tthis.unavailable\n\t\t\t\t\t\t\t? \"close-outline\"\n\t\t\t\t\t\t\t: this.intermediate && !this.checked\n\t\t\t\t\t\t\t? \"remove-outline\"\n\t\t\t\t\t\t\t: this.checked && !this.intermediate\n\t\t\t\t\t\t\t? \"checkmark-outline\"\n\t\t\t\t\t\t\t: \"empty\"\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={this.name}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t\t<div class={\"expansion\"}>\n\t\t\t\t\t<slot name=\"expansion\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,63 +1,60 @@
 * {
 	box-sizing: border-box;
 }
-
 :host {
-	display: block;
-}
-
-:host > main {
-	display: flex;
-	align-items: center;
+	display: grid;
 	width: fit-content;
-	height: max-content;
-	margin: 0.3rem 0;
-	line-height: 0;
-}
-
-:host > main > label {
-	display:flex;
-	justify-content: center;
+	grid-template-columns: auto 1fr;
+	row-gap: 0.5rem;
 	align-items: center;
-	margin: 0 0.2em;
+}
+:host label:empty {
+	display: none;
+}
+:host label {
+	grid-column: 2;
+	margin-left: 0.2rem;
 }
 
-:host > main > div {
+:host smoothly-icon {
+	grid-column: 1;
+	line-height: 0;
 	border: 1px solid rgb(var(--smoothly-color-contrast));
 }
-
-:host > main > div > smoothly-icon {
-	display: flex;
-	justify-content: center;	
-	align-items: center;
+:host:not([disabled]):not([unavailable]) smoothly-icon {
+	cursor: pointer;
 }
-
-:host:not([checked]) > main > div > smoothly-icon,
-:host:not([intermediate]) > main > div > smoothly-icon {
-	stroke: rgb(var(--smoothly-color-contrast));
+:host[disabled] smoothly-icon,
+:host[unavailable] smoothly-icon {
+	border-color: rgb(var(--smoothly-color-contrast), 0.3);
 }
-
-:host[disabled] > main > div {
-	border: 1px solid rgb(var(--smoothly-color-contrast), 0.3);
+:host[disabled] smoothly-icon,
+:host[unavailable] smoothly-icon {
+	opacity: 0.7;
+}
+:host:not([checked]) smoothly-icon,
+:host:not([intermediate]) smoothly-icon
+:host:not([unavailable]) {
+	stroke: rgb(var(--smoothly-color-contrast));
 }
 
-::slotted([slot=expansion]) {
-	display: none;
+:host div.expansion {
+	position: relative;
+	grid-column-start: 2;
 	background-color: rgb(var(--smoothly-secondary-color));
 	color: rgb(var(--smoothly-secondary-contrast));
-}
-
-[checked]::slotted([slot=expansion]) {
-	display: block;
-	padding: 0.5em;
+	padding: 0.5rem;
 	border-radius: 5px;
-	margin: 0.5rem 0;
 }
-
-[checked]::slotted([slot=expansion])::before {
+:host:not([checked]) div.expansion,
+:host div.expansion:empty {
+	display: none;
+}
+:host div.expansion::before {
 	content: "\25B2";
-	position: relative;
-	top: -1.35em;
-	left: 2rem;
+	position: absolute;
+	bottom: calc(100% + 0.5rem /* <-- alignment */ - 0.3rem /* <-- adjustment*/);
+	line-height: 0;
+	left: 0.5rem;
 	color: rgb(var(--smoothly-secondary-color))
 }

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

@@ -0,0 +1,261 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyButtonConfirm {
+  constructor() {
+    this.color = undefined;
+    this.name = undefined;
+    this.doubleClickTime = 0.2;
+    this.expand = undefined;
+    this.fill = undefined;
+    this.disabled = false;
+    this.shape = undefined;
+    this.type = "button";
+    this.size = undefined;
+    this.clickTimeStamp = undefined;
+  }
+  clickHandler(event) {
+    if (this.clickTimeStamp && event.timeStamp - this.clickTimeStamp > this.doubleClickTime * 1000) {
+      this.timer && window.clearTimeout(this.timer);
+      this.clickTimeStamp = undefined;
+      this.smoothlyConfirm.emit({ [this.name]: true });
+    }
+    else {
+      this.clickTimeStamp = event.timeStamp;
+      this.timer = window.setTimeout(() => {
+        this.clickTimeStamp = undefined;
+      }, 2000);
+    }
+  }
+  render() {
+    return (h(Host, { warning: this.clickTimeStamp }, h("smoothly-button", { fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: this.type, onClick: event => this.clickHandler(event) }, h("smoothly-icon", { name: "alert-outline", fill: "solid", color: "warning", size: "small" })), h("smoothly-button", { fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: this.type, onClick: event => this.clickHandler(event) }, h("slot", null))));
+  }
+  static get is() { return "smoothly-button-confirm"; }
+  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": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "doubleClickTime": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "double-click-time",
+        "reflect": false,
+        "defaultValue": "0.2"
+      },
+      "expand": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"block\" | \"full\"",
+          "resolved": "\"block\" | \"full\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expand",
+        "reflect": true
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fill",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"link\" | \"button\"",
+          "resolved": "\"button\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"large\" | \"icon\" | \"flexible\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "clickTimeStamp": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyConfirm",
+        "name": "smoothlyConfirm",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
+          "references": {
+            "Data": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        }
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/confirm/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAA;AAQ3F,MAAM,OAAO,qBAAqB;;;;2BAIP,GAAG;;;oBAGO,KAAK;;gBAEP,QAAQ;;;;EAM1C,YAAY,CAAC,KAAiB;IAC7B,IAAI,IAAI,CAAC,cAAc,IAAI,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,EAAE;MAC/F,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;MAC7C,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;MAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;KAChD;SAAM;MACN,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,SAAS,CAAA;MACrC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;MAChC,CAAC,EAAE,IAAI,CAAC,CAAA;KACR;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,cAAc;MACjC,uBACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;QAC1C,qBAAe,IAAI,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,CACjE;MAClB,uBACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;QAC1C,eAAQ,CACS,CACZ,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Color, Data, Fill } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-button-confirm\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyButtonConfirm {\n\ttimer?: number\n\t@Prop() color?: Color\n\t@Prop({ reflect: true }) name: string\n\t@Prop() doubleClickTime = 0.2\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop() fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop() shape?: \"rounded\"\n\t@Prop() type: \"link\" | \"button\" = \"button\"\n\t@Prop() size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@State() clickTimeStamp: number | undefined\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\t@Event() smoothlyConfirm: EventEmitter<Data>\n\n\tclickHandler(event: MouseEvent): void {\n\t\tif (this.clickTimeStamp && event.timeStamp - this.clickTimeStamp > this.doubleClickTime * 1000) {\n\t\t\tthis.timer && window.clearTimeout(this.timer)\n\t\t\tthis.clickTimeStamp = undefined\n\t\t\tthis.smoothlyConfirm.emit({ [this.name]: true })\n\t\t} else {\n\t\t\tthis.clickTimeStamp = event.timeStamp\n\t\t\tthis.timer = window.setTimeout(() => {\n\t\t\t\tthis.clickTimeStamp = undefined\n\t\t\t}, 2000)\n\t\t}\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host warning={this.clickTimeStamp}>\n\t\t\t\t<smoothly-button\n\t\t\t\t\tfill={this.fill}\n\t\t\t\t\texpand={this.expand}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tshape={this.shape}\n\t\t\t\t\tcolor={\"warning\"}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={this.type}\n\t\t\t\t\tonClick={event => this.clickHandler(event)}>\n\t\t\t\t\t<smoothly-icon name={\"alert-outline\"} fill=\"solid\" color=\"warning\" size=\"small\" />\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button\n\t\t\t\t\tfill={this.fill}\n\t\t\t\t\texpand={this.expand}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tshape={this.shape}\n\t\t\t\t\tcolor={this.color}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={this.type}\n\t\t\t\t\tonClick={event => this.clickHandler(event)}>\n\t\t\t\t\t<slot />\n\t\t\t\t</smoothly-button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,15 @@
+:host {
+	display: inline-block;
+}
+:host([disabled]){
+	opacity: 0.5;
+}
+:host:not([warning]) smoothly-button:first-child{
+	display: none;
+}
+:host[warning] smoothly-button:nth-child(2){
+	display: none;
+}
+:host([expand]) {
+	width: 100%;
+}

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

@@ -26,7 +26,7 @@ export class SmoothlyCountry {
         "mutable": false,
         "complexType": {
           "original": "CountryCode.Alpha2",
-          "resolved": "\"AF\" | \"AX\" | \"AL\" | \"DZ\" | \"AS\" | \"AD\" | \"AO\" | \"AI\" | \"AQ\" | \"AG\" | \"AR\" | \"AM\" | \"AW\" | \"AU\" | \"AT\" | \"AZ\" | \"BS\" | \"BH\" | \"BD\" | \"BB\" | \"BY\" | \"BE\" | \"BZ\" | \"BJ\" | \"BM\" | \"BT\" | \"BO\" | \"BQ\" | \"BA\" | \"BW\" | \"BV\" | \"BR\" | \"IO\" | \"BN\" | \"BG\" | \"BF\" | \"BI\" | \"CV\" | \"KH\" | \"CM\" | \"CA\" | \"KY\" | \"CF\" | \"TD\" | \"CL\" | \"CN\" | \"CX\" | \"CC\" | \"CO\" | \"KM\" | \"CG\" | \"CD\" | \"CK\" | \"CR\" | \"CI\" | \"HR\" | \"CU\" | \"CW\" | \"CY\" | \"CZ\" | \"DK\" | \"DJ\" | \"DM\" | \"DO\" | \"EC\" | \"EG\" | \"SV\" | \"GQ\" | \"ER\" | \"EE\" | \"SZ\" | \"ET\" | \"FK\" | \"FO\" | \"FJ\" | \"FI\" | \"FR\" | \"GF\" | \"PF\" | \"TF\" | \"GA\" | \"GM\" | \"GE\" | \"DE\" | \"GH\" | \"GI\" | \"GR\" | \"GL\" | \"GD\" | \"GP\" | \"GU\" | \"GT\" | \"GG\" | \"GN\" | \"GW\" | \"GY\" | \"HT\" | \"HM\" | \"VA\" | \"HN\" | \"HK\" | \"HU\" | \"IS\" | \"IN\" | \"ID\" | \"IR\" | \"IQ\" | \"IE\" | \"IM\" | \"IL\" | \"IT\" | \"JM\" | \"JP\" | \"JE\" | \"JO\" | \"KZ\" | \"KE\" | \"KI\" | \"KP\" | \"KR\" | \"KW\" | \"KG\" | \"LA\" | \"LV\" | \"LB\" | \"LS\" | \"LR\" | \"LY\" | \"LI\" | \"LT\" | \"LU\" | \"MO\" | \"MG\" | \"MW\" | \"MY\" | \"MV\" | \"ML\" | \"MT\" | \"MH\" | \"MQ\" | \"MR\" | \"MU\" | \"YT\" | \"MX\" | \"FM\" | \"MD\" | \"MC\" | \"MN\" | \"ME\" | \"MS\" | \"MA\" | \"MZ\" | \"MM\" | \"NA\" | \"NR\" | \"NP\" | \"NL\" | \"NC\" | \"NZ\" | \"NI\" | \"NE\" | \"NG\" | \"NU\" | \"NF\" | \"MK\" | \"MP\" | \"NO\" | \"OM\" | \"PK\" | \"PW\" | \"PS\" | \"PA\" | \"PG\" | \"PY\" | \"PE\" | \"PH\" | \"PN\" | \"PL\" | \"PT\" | \"PR\" | \"QA\" | \"RE\" | \"RO\" | \"RU\" | \"RW\" | \"BL\" | \"SH\" | \"KN\" | \"LC\" | \"MF\" | \"PM\" | \"VC\" | \"WS\" | \"SM\" | \"ST\" | \"SA\" | \"SN\" | \"RS\" | \"SC\" | \"SL\" | \"SG\" | \"SX\" | \"SK\" | \"SI\" | \"SB\" | \"SO\" | \"ZA\" | \"GS\" | \"SS\" | \"ES\" | \"LK\" | \"SD\" | \"SR\" | \"SJ\" | \"SE\" | \"CH\" | \"SY\" | \"TW\" | \"TJ\" | \"TZ\" | \"TH\" | \"TL\" | \"TG\" | \"TK\" | \"TO\" | \"TT\" | \"TN\" | \"TR\" | \"TM\" | \"TC\" | \"TV\" | \"UG\" | \"UA\" | \"AE\" | \"GB\" | \"US\" | \"UM\" | \"UY\" | \"UZ\" | \"VU\" | \"VE\" | \"VN\" | \"VG\" | \"VI\" | \"WF\" | \"EH\" | \"YE\" | \"ZM\" | \"ZW\"",
+          "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AQ\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BV\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GS\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HM\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TF\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"UM\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
           "references": {
             "CountryCode": {
               "location": "import",

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

@@ -32,6 +32,9 @@ export class SmoothlyDisplay {
       case "date":
         result = (_a = get(this.type, getLocale())) === null || _a === void 0 ? void 0 : _a.toString(this.value);
         break;
+      case "duration":
+        result = format(this.value, type);
+        break;
       case "date-time":
         result = this.format
           ? DateTime.localize(this.value, this.format, getLocale())
@@ -59,7 +62,7 @@ export class SmoothlyDisplay {
         "mutable": false,
         "complexType": {
           "original": "Type",
-          "resolved": "\"card-csc\" | \"card-expires\" | \"card-number\" | \"date\" | \"date-time\" | \"divisor\" | \"email\" | \"identity-number\" | \"password\" | \"percent\" | \"phone\" | \"postal-code\" | \"price\" | \"text\"",
+          "resolved": "\"text\" | \"divisor\" | \"card-csc\" | \"card-expires\" | \"card-number\" | \"date\" | \"date-time\" | \"duration\" | \"email\" | \"identifier-code\" | \"identifier-pascal\" | \"identifier-snake\" | \"identifier-camel\" | \"identifier-attribute\" | \"identity-number\" | \"integer\" | \"password\" | \"percent\" | \"phone\" | \"postal-code\" | \"price\"",
           "references": {
             "Type": {
               "location": "import",
@@ -98,7 +101,7 @@ export class SmoothlyDisplay {
         "mutable": false,
         "complexType": {
           "original": "Currency",
-          "resolved": "\"BTN\" | \"MKD\" | \"CHE\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\" | undefined",
+          "resolved": "\"BTN\" | \"CHE\" | \"MKD\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\" | undefined",
           "references": {
             "Currency": {
               "location": "import",
@@ -120,7 +123,7 @@ export class SmoothlyDisplay {
         "mutable": false,
         "complexType": {
           "original": "CountryCode.Alpha2",
-          "resolved": "Alpha2 | undefined",
+          "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AQ\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BV\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GS\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HM\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TF\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"UM\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\" | undefined",
           "references": {
             "CountryCode": {
               "location": "import",

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

@@ -1 +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"]}
+{"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,UAAU;QACd,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;QACjC,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 \"duration\":\n\t\t\t\tresult = format(this.value, type)\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

@@ -82,7 +82,7 @@ export class SmoothlyDisplayAmount {
         "mutable": false,
         "complexType": {
           "original": "Currency",
-          "resolved": "\"BTN\" | \"MKD\" | \"CHE\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\"",
+          "resolved": "\"BTN\" | \"CHE\" | \"MKD\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\"",
           "references": {
             "Currency": {
               "location": "import",

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

@@ -7,7 +7,7 @@ export class SmoothlyDisplayDemo {
   }
   render() {
     return [
-      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.")))),
+      h("main", null, h("fieldset", null, h("h2", null, "Smoothly display"), h("dl", null, h("dt", null, "Duration"), h("dd", null, h("div", null, h("smoothly-display", { type: "duration", value: { hours: 13, minutes: 100 } }), h("smoothly-display", { type: "duration", value: { hours: 8 } }), h("smoothly-display", { type: "duration", value: { minutes: 3 } }), h("smoothly-display", { type: "duration", value: { hours: -13, minutes: 100 } }), h("smoothly-display", { type: "duration", value: { hours: -8 } }), h("smoothly-display", { type: "duration", value: { minutes: -3 } }))), 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: "Europe/Stockholm" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Deprecated display date time"), 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.succeeded("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", null, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { 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", open: true }, 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.")), h("h2", null, "Label"), labels.map(l => h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name)))),
     ];
   }
   static get is() { return "smoothly-display-demo"; }
@@ -35,4 +35,19 @@ export class SmoothlyDisplayDemo {
       }];
   }
 }
+const labels = [{
+    name: "2fa",
+    hue: 120,
+    description: "User has two factor authentication enabled.",
+  },
+  {
+    name: "expired",
+    hue: 240,
+    description: "User's password has expired.",
+  },
+  {
+    name: "inactive",
+    hue: 60,
+    description: "User is inactive.",
+  }];
 //# sourceMappingURL=index.js.map