npm - smoothly - Versions diffs - 1.0.0-alpha.99 → 1.0.0 - Mend

smoothly 1.0.0-alpha.99 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (456) hide show

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

@@ -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: "tiny" })), 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 ADDED Viewed

@@ -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,MAAM,GAAG,CAChE;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=\"tiny\" />\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 ADDED Viewed

@@ -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/display/index.js CHANGED Viewed

@@ -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",

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

	@@ -1 +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"]}
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,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-demo/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class SmoothlyDisplayDemo {
   }
   render() {
     return [
-      h("main", null, h("fieldset", null, h("h2", null, "Smoothly display"), 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: "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", { 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", 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("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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-demo/index.tsx"],"names":[],"mappings":"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","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<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:\"Europe/Stockholm\"}} 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<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.succeeded(\"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\" open>\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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-demo/index.tsx"],"names":[],"mappings":"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","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<dl>\n\t\t\t\t\t\t<dt>Duration</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<smoothly-display type=\"duration\" value={{ hours: 13, minutes: 100 }} />\n\t\t\t\t\t\t\t\t<smoothly-display type=\"duration\" value={{ hours: 8 }} />\n\t\t\t\t\t\t\t\t<smoothly-display type=\"duration\" value={{ minutes: 3 }} />\n\t\t\t\t\t\t\t\t<smoothly-display type=\"duration\" value={{ hours: -13, minutes: 100 }} />\n\t\t\t\t\t\t\t\t<smoothly-display type=\"duration\" value={{ hours: -8 }} />\n\t\t\t\t\t\t\t\t<smoothly-display type=\"duration\" value={{ minutes: -3 }} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</dd>\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:\"Europe/Stockholm\"}} 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<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.succeeded(\"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>\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 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\" open>\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\t<h2>Label</h2>\n\t\t\t\t\t{labels.map(l => <smoothly-label hue={l.hue} description={l.description} shape={\"rectangle\"}>{l.name}</smoothly-label>)}\n\t\t\t\t</fieldset>\n\t\t\t</main>,\n\t\t]\n\t}\n}\nconst labels = [{\n\tname: \"2fa\",\n\thue: 120,\n\tdescription: \"User has two factor authentication enabled.\",\n},\n{\nname: \"expired\",\nhue: 240,\ndescription: \"User's password has expired.\",\n},\n{\nname: \"inactive\",\nhue: 60,\ndescription: \"User is inactive.\",\n}]\n"]}

package/dist/collection/components/filter/Filter.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { isly } from "isly";
+const EventEmitter = isly.object({ emit: isly.function() });
+export var Filter;
+(function (Filter) {
+  let Element;
+  (function (Element) {
+    Element.type = isly.object({
+      property: isly.string().optional(),
+      properties: isly.record(isly.string(), isly.string()).optional(),
+    });
+  })(Element = Filter.Element || (Filter.Element = {}));
+  Filter.type = Element.type.extend({
+    smoothlyFilterUpdate: EventEmitter,
+    smoothlyFilterManipulate: EventEmitter,
+  });
+})(Filter || (Filter = {}));
+//# sourceMappingURL=Filter.js.map

package/dist/collection/components/filter/Filter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/filter/Filter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAE3B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAe,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAwB,EAAE,CAAC,CAAA;AAK/F,MAAM,KAAW,MAAM,CAiBtB;AAjBD,WAAiB,MAAM;EAOtB,IAAiB,OAAO,CAKvB;EALD,WAAiB,OAAO;IACV,YAAI,GAAG,IAAI,CAAC,MAAM,CAAU;MACxC,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;MAClC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAyB,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE;KACxF,CAAC,CAAA;EACH,CAAC,EALgB,OAAO,GAAP,cAAO,KAAP,cAAO,QAKvB;EACY,WAAI,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAS;IAC/C,oBAAoB,EAAE,YAAY;IAClC,wBAAwB,EAAE,YAAY;GACtC,CAAC,CAAA;AACH,CAAC,EAjBgB,MAAM,KAAN,MAAM,QAiBtB","sourcesContent":["import { EventEmitter } from \"@stencil/core\"\nimport { selectively } from \"selectively\"\nimport { isly } from \"isly\"\n\nconst EventEmitter = isly.object<EventEmitter>({ emit: isly.function<EventEmitter[\"emit\"]>() })\nexport interface Filter extends Filter.Element {\n\tsmoothlyFilterUpdate: EventEmitter<Filter.Update>\n\tsmoothlyFilterManipulate: EventEmitter<Filter.Manipulate>\n}\nexport namespace Filter {\n\texport type Manipulate = (criteria: selectively.Criteria) => selectively.Criteria\n\texport type Update = (expression: selectively.Criteria) => void\n\texport interface Element {\n\t\tproperty?: string\n\t\tproperties?: Record<string, string>\n\t}\n\texport namespace Element {\n\t\texport const type = isly.object<Element>({\n\t\t\tproperty: isly.string().optional(),\n\t\t\tproperties: isly.record<Record<string, string>>(isly.string(), isly.string()).optional(),\n\t\t})\n\t}\n\texport const type = Element.type.extend<Filter>({\n\t\tsmoothlyFilterUpdate: EventEmitter,\n\t\tsmoothlyFilterManipulate: EventEmitter,\n\t})\n}\n"]}

package/dist/collection/components/filter/field/index.js ADDED Viewed

@@ -0,0 +1,105 @@
+import { h, Host } from "@stencil/core";
+import { selectively } from "selectively";
+export class SmoothlyFilterField {
+  constructor() {
+    this.criteria = undefined;
+  }
+  async clear() {
+    var _a;
+    await ((_a = this.input) === null || _a === void 0 ? void 0 : _a.clear());
+  }
+  filterFieldEmit() {
+    var _a, _b;
+    this.smoothlyFilterField.emit(selectively.parse((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""));
+  }
+  render() {
+    return (h(Host, { onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, h("smoothly-input", { name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
+        e.stopPropagation();
+        this.filterFieldEmit();
+      }, onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => {
+        e.stopPropagation();
+      } }, "Filter")));
+  }
+  static get is() { return "smoothly-filter-field"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "criteria": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "selectively.Criteria",
+          "resolved": "Helper[] | Rule | number | string | { [property: string]: Helper | Helper[]; }",
+          "references": {
+            "selectively": {
+              "location": "import",
+              "path": "selectively"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "criteria",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyFilterField",
+        "name": "smoothlyFilterField",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "selectively.Rule",
+          "resolved": "Rule",
+          "references": {
+            "selectively": {
+              "location": "import",
+              "path": "selectively"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map