smoothly 0.3.38 → 1.0.0-alpha.10

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

@@ -0,0 +1,106 @@
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	width: 100%;
+	margin-bottom: 1em; 
+}
+
+:host > smoothly-input {
+	margin-bottom: 0.5em;
+}
+
+section {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.hidden {
+	display: flex;
+	width: 0px;
+	opacity: 0;
+}
+
+.container {
+	width: inherit;
+	position: relative;
+	z-index: 3;
+	margin: 0.8em 0;
+	opacity: 1;
+	transition: opacity 100ms ease-in-out;
+}
+
+.container:after {
+	content:"";
+	height: 100%;
+	width: 100%;
+	border: 1px solid rgb(var(--smoothly-default-contrast));
+	border-radius: 0.25em;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* arrow */
+.container:before {
+	content:"";
+	width: 0.6em;
+	height: 0.6em;
+	transform: rotate(45deg);
+	border-top: 1px solid rgb(var(--smoothly-default-contrast));
+	border-left: 1px solid rgb(var(--smoothly-default-contrast));
+	background-color: rgb(var(--smoothly-default-color));
+	position: absolute;
+	z-index: 3;
+}
+
+/* arrow placement */
+.container.arrow-top:before {
+	left: calc(84.5%);
+	top: -6px;
+}
+
+/* wrapper for slot(filters) */
+.container-wrapper {
+	width: 100%;
+	padding: 1em;
+	position: relative;
+}
+
+/* the outline icons are invisible without stroke */
+.btn {
+	stroke: rgb(46, 52, 54);
+}
+
+/* temporary button for funnel */
+.btn:hover {
+	cursor:pointer
+}
+
+.btn.hidden {
+	margin-right: 0.25em;
+	opacity: 0;
+	cursor:text
+}
+
+.btn.clear {
+	margin-right: 0.25em;
+	opacity: 0.3;
+}
+
+::slotted(div[slot=filter]) {
+	display: grid;
+	grid-template-columns: 1fr;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5em;
+}
+
+

package/dist/collection/components/form/Clearable.js

@@ -0,0 +1,8 @@
+export var Clearable;
+(function (Clearable) {
+  function is(value) {
+    return value && typeof value == "object" && typeof value.clear == "function";
+  }
+  Clearable.is = is;
+})(Clearable || (Clearable = {}));
+//# sourceMappingURL=Clearable.js.map

package/dist/collection/components/form/Clearable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clearable.js","sourceRoot":"","sources":["../../../src/components/form/Clearable.ts"],"names":[],"mappings":"AAGA,MAAM,KAAW,SAAS,CAIzB;AAJD,WAAiB,SAAS;EACzB,SAAgB,EAAE,CAAC,KAAsB;IACxC,OAAO,KAAK,IAAI,OAAO,KAAK,IAAI,QAAQ,IAAI,OAAO,KAAK,CAAC,KAAK,IAAI,UAAU,CAAA;EAC7E,CAAC;EAFe,YAAE,KAEjB,CAAA;AACF,CAAC,EAJgB,SAAS,KAAT,SAAS,QAIzB","sourcesContent":["export interface Clearable {\n\tclear(): Promise<void>\n}\nexport namespace Clearable {\n\texport function is(value: Clearable | any): value is Clearable {\n\t\treturn value && typeof value == \"object\" && typeof value.clear == \"function\"\n\t}\n}\n"]}

package/dist/collection/components/form/Data.js

@@ -0,0 +1,15 @@
+export var Data;
+(function (Data) {
+  function set(data, [head, ...tail], value) {
+    const current = data[head !== null && head !== void 0 ? head : ""];
+    return Object.assign(Object.assign({}, data), { [head !== null && head !== void 0 ? head : ""]: !tail.length
+        ? value
+        : set(typeof current == "object" && !(current instanceof Blob) ? current : {}, tail, value) });
+  }
+  Data.set = set;
+  function deepen(data) {
+    return Object.entries(data).reduce((result, [name, value]) => set(result, name.split("."), value), {});
+  }
+  Data.deepen = deepen;
+})(Data || (Data = {}));
+//# sourceMappingURL=Data.js.map

package/dist/collection/components/form/Data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Data.js","sourceRoot":"","sources":["../../../src/components/form/Data.ts"],"names":[],"mappings":"AAGA,MAAM,KAAW,IAAI,CAapB;AAbD,WAAiB,IAAI;EACpB,SAAgB,GAAG,CAAC,IAAU,EAAE,CAAC,IAAI,EAAE,GAAG,IAAI,CAAW,EAAE,KAAY;IACtE,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAA;IAChC,uCACI,IAAI,KACP,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM;QACzB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,GAAG,CAAC,OAAO,OAAO,IAAI,QAAQ,IAAI,CAAC,CAAC,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAC5F;EACF,CAAC;EARe,QAAG,MAQlB,CAAA;EACD,SAAgB,MAAM,CAAC,IAA2B;IACjD,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;EACvG,CAAC;EAFe,WAAM,SAErB,CAAA;AACF,CAAC,EAbgB,IAAI,KAAJ,IAAI,QAapB","sourcesContent":["type Value = string | number | boolean | Blob | undefined\nexport type Data = { [name: string]: Data | Value }\n\nexport namespace Data {\n\texport function set(data: Data, [head, ...tail]: string[], value: Value): Data {\n\t\tconst current = data[head ?? \"\"]\n\t\treturn {\n\t\t\t...data,\n\t\t\t[head ?? \"\"]: !tail.length\n\t\t\t\t? value\n\t\t\t\t: set(typeof current == \"object\" && !(current instanceof Blob) ? current : {}, tail, value),\n\t\t}\n\t}\n\texport function deepen(data: Record<string, Value>): Data {\n\t\treturn Object.entries(data).reduce((result, [name, value]) => set(result, name.split(\".\"), value), {})\n\t}\n}\n"]}

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

@@ -0,0 +1,251 @@
+import { h, Host } from "@stencil/core";
+import { http } from "cloudly-http";
+import { Notice } from "../../model/Notice";
+import { Clearable } from "./Clearable";
+import { Data } from "./Data";
+export class SmoothlyForm {
+  constructor() {
+    this.value = {};
+    this.clearables = new Map();
+    this.looks = "plain";
+    this.name = undefined;
+    this.method = undefined;
+    this.action = undefined;
+    this.processing = undefined;
+    this.notice = undefined;
+  }
+  async smoothlyInputHandler(event) {
+    this.notice = undefined;
+    this.smoothlyFormInput.emit((this.value = Object.entries(event.detail).reduce((r, [name, value]) => Data.set(r, name.split("."), value), this.value)));
+    if (Clearable.is(event.target)) {
+      const clearable = event.target;
+      Object.keys(event.detail).forEach(key => this.clearables.set(key, clearable));
+    }
+  }
+  async smoothlySubmitHandler(event) {
+    this.processing = true;
+    this.submit();
+    this.processing = false;
+  }
+  async submit() {
+    this.smoothlyFormSubmit.emit(this.value);
+    if (this.action) {
+      const response = await http.fetch(this.method == "POST"
+        ? { method: "POST", url: this.action, body: this.value }
+        : { url: `${this.action}?${http.Search.stringify(this.value)}` });
+      if (response.status >= 200 && response.status < 300) {
+        this.notice = Notice.succeded("Form sucessfully submitted.");
+        await this.clear();
+      }
+      else
+        this.notice = Notice.failed("Failed to submit form.");
+    }
+  }
+  async clear() {
+    new Set(this.clearables.values()).forEach(clearable => clearable.clear());
+  }
+  render() {
+    return (h(Host, null, this.notice ? h("smoothly-notification", { notice: this.notice }) : [], h("smoothly-spinner", { active: this.processing }), h("form", { name: this.name }, h("fieldset", null, h("slot", null)), h("slot", { name: "submit" }))));
+  }
+  static get is() { return "smoothly-form"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "looks": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"plain\" | \"grid\" | \"border\" | \"line\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "method": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"GET\" | \"POST\"",
+          "resolved": "\"GET\" | \"POST\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "method",
+        "reflect": false
+      },
+      "action": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "action",
+        "reflect": false
+      },
+      "processing": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "processing",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "notice": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyFormInput",
+        "name": "smoothlyFormInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
+          "references": {
+            "Data": {
+              "location": "import",
+              "path": "./Data"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyFormSubmit",
+        "name": "smoothlyFormSubmit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
+          "references": {
+            "Data": {
+              "location": "import",
+              "path": "./Data"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "submit": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "smoothlyInput",
+        "method": "smoothlyInputHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "smoothlySubmit",
+        "method": "smoothlySubmitHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State } from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { Notice } from \"../../model/Notice\"\nimport { Clearable } from \"./Clearable\"\nimport { Data } from \"./Data\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm {\n\tprivate value: Data = {}\n\tprivate clearables = new Map<string, Clearable>()\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: \"plain\" | \"grid\" | \"border\" | \"line\" = \"plain\"\n\t@Prop() name?: string\n\t@Prop() method?: \"GET\" | \"POST\"\n\t@Prop() action?: string\n\t@Prop({ mutable: true, reflect: true }) processing: boolean\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Data>\n\t@State() notice?: Notice\n\n\t@Listen(\"smoothlyInput\", { capture: true })\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.notice = undefined\n\t\tthis.smoothlyFormInput.emit(\n\t\t\t(this.value = Object.entries(event.detail).reduce(\n\t\t\t\t(r, [name, value]) => Data.set(r, name.split(\".\"), value),\n\t\t\t\tthis.value\n\t\t\t))\n\t\t)\n\t\tif (Clearable.is(event.target)) {\n\t\t\tconst clearable = event.target\n\t\t\tObject.keys(event.detail).forEach(key => this.clearables.set(key, clearable))\n\t\t}\n\t}\n\t@Listen(\"smoothlySubmit\", { capture: true })\n\tasync smoothlySubmitHandler(event: CustomEvent): Promise<void> {\n\t\tthis.processing = true\n\t\tthis.submit()\n\t\tthis.processing = false\n\t}\n\t@Method()\n\tasync submit(): Promise<void> {\n\t\tthis.smoothlyFormSubmit.emit(this.value)\n\t\tif (this.action) {\n\t\t\tconst response = await http.fetch(\n\t\t\t\tthis.method == \"POST\"\n\t\t\t\t\t? { method: \"POST\", url: this.action, body: this.value }\n\t\t\t\t\t: { url: `${this.action}?${http.Search.stringify(this.value)}` }\n\t\t\t)\n\t\t\tif (response.status >= 200 && response.status < 300) {\n\t\t\t\tthis.notice = Notice.succeded(\"Form sucessfully submitted.\")\n\t\t\t\tawait this.clear()\n\t\t\t} else\n\t\t\t\tthis.notice = Notice.failed(\"Failed to submit form.\")\n\t\t}\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tnew Set(this.clearables.values()).forEach(clearable => clearable.clear())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.notice ? <smoothly-notification notice={this.notice}></smoothly-notification> : []}\n\t\t\t\t<smoothly-spinner active={this.processing}></smoothly-spinner>\n\t\t\t\t<form name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<slot name=\"submit\"></slot>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,50 @@
+smoothly-form {
+	display: block;
+}
+smoothly-form > form {
+	position: relative;
+	min-width: 15em;
+}
+smoothly-form > form > fieldset {
+	display: flex;
+	flex-flow: row wrap;
+
+	margin-inline-start: unset;
+	margin-inline-end: unset;
+	padding-block-start: unset;
+	padding-inline-start: unset;
+	padding-inline-end: unset;
+	padding-block-end: unset;
+	min-inline-size: unset;
+	border-width: unset;
+	border-style: unset;
+	border-color: unset;
+	border-image: unset;
+}
+smoothly-form > form > fieldset > * {
+	flex-grow: 1;
+	min-width: 10em;
+	width: 40%;
+}
+smoothly-form[looks="border"] > form > fieldset > *,
+smoothly-form[looks="grid"] > form > fieldset > * {
+	border: rgb(var(--smoothly-default-contrast)) solid 1px;
+}
+smoothly-form[looks="line"] > form > fieldset > * {
+	border-bottom: rgb(var(--smoothly-default-contrast)) solid 1px;
+}
+smoothly-form[looks="grid"] > form > fieldset {
+	border: rgba(var(--smoothly-default-contrast), .5) solid .5px;
+}
+smoothly-form[looks="grid"] > form > fieldset > * {
+	border: rgba(var(--smoothly-default-contrast), .5) solid .5px;
+}
+smoothly-form[looks="line"] > form > fieldset,
+smoothly-form[looks="border"] > form > fieldset {
+	gap: 2em
+}
+
+smoothly-form > form > [slot=submit] {
+	margin: .5em auto;
+	max-width: 10em;
+}

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

@@ -22,15 +22,18 @@ export class SmoothlyFrame {
           if (Trigger.is(content))
             this.trigger.emit(content);
           else
-            this.message.emit({ destination, content });
+            this.message2.emit({ destination, content });
       }, window);
   }
-  async send(message, content) {
+  async send(message2, content) {
     var _a, _b;
-    if (typeof message == "string")
-      Message.send(((_a = this.origin) !== null && _a !== void 0 ? _a : this.defaultOrigin) + "#" + message, content, this.contentWindow);
-    else if (Message.is(message) && this.contentWindow)
-      Message.send({ destination: ((_b = this.origin) !== null && _b !== void 0 ? _b : this.defaultOrigin) + "#" + message.destination, content: message.destination }, this.contentWindow);
+    if (typeof message2 == "string")
+      Message.send(((_a = this.origin) !== null && _a !== void 0 ? _a : this.defaultOrigin) + "#" + message2, content, this.contentWindow);
+    else if (Message.is(message2) && this.contentWindow)
+      Message.send({
+        destination: ((_b = this.origin) !== null && _b !== void 0 ? _b : this.defaultOrigin) + "#" + message2.destination,
+        content: message2.destination,
+      }, this.contentWindow);
   }
   render() {
     return h("iframe", { src: this.url + "#" + window.location.origin, height: "100%", width: "100%" });
@@ -124,8 +127,8 @@ export class SmoothlyFrame {
           }
         }
       }, {
-        "method": "message",
-        "name": "message",
+        "method": "message2",
+        "name": "message2",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -149,7 +152,7 @@ export class SmoothlyFrame {
     return {
       "send": {
         "complexType": {
-          "signature": "(message: string | Message<any>, content?: Trigger | any) => Promise<void>",
+          "signature": "(message2: string | Message<any>, content?: Trigger | any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -181,3 +184,4 @@ export class SmoothlyFrame {
   }
   static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,OAAO,aAAa;;;;;;EAMzB,IAAI,aAAa;IAChB,MAAM,MAAM,GACX,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAE,IAAI,CAAC,OAAO,CAAC,iBAAuC,CAAC,CAAC,CAAC,SAAS,CAAA;IACnH,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,SAAS,CAAA;EACrD,CAAC;EAID,IAAI,aAAa;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAA;IAClE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;EAC9B,CAAC;EACD,gBAAgB;;IACf,IAAI,IAAI,CAAC,aAAa;MACrB,OAAO,CAAC,MAAM,CACb,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,EACjC,CAAC,WAAmB,EAAE,OAAY,EAAE,EAAE;QACrC,IAAI,WAAW,IAAI,IAAI,CAAC,IAAI;UAC3B,IAAI,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;;YAE1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAA;MAC/C,CAAC,EACD,MAAM,CACN,CAAA;EACH,CAAC;EAID,KAAK,CAAC,IAAI,CAAC,QAA+B,EAAE,OAAuB;;IAClE,IAAI,OAAO,QAAQ,IAAI,QAAQ;MAC9B,OAAO,CAAC,IAAI,CAAC,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;SAC3F,IAAI,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,aAAa;MAClD,OAAO,CAAC,IAAI,CACX;QACC,WAAW,EAAE,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,WAAW;QAC7E,OAAO,EAAE,QAAQ,CAAC,WAAW;OAC7B,EACD,IAAI,CAAC,aAAa,CAClB,CAAA;EACH,CAAC;EACD,MAAM;IACL,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAU,CAAA;EAClG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop } from \"@stencil/core\"\nimport { Message, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-frame\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFrame {\n\t@Prop() url: string\n\t@Prop() name: string\n\t@Event() trigger: EventEmitter<Trigger>\n\t@Event() message2: EventEmitter<Message<any>>\n\t@Element() element?: HTMLElement\n\tget contentWindow(): Window | undefined {\n\t\tconst iframe =\n\t\t\tthis.element && this.element.firstElementChild ? (this.element.firstElementChild as HTMLIFrameElement) : undefined\n\t\treturn (iframe && iframe.contentWindow) || undefined\n\t}\n\t@Prop()\n\torigin: string | undefined\n\n\tget defaultOrigin(): string {\n\t\tconst match = this.url.match(/^(([a-z]+\\+)*[a-z]+:\\/\\/)?[^/^\\n]+/)\n\t\treturn match ? match[0] : \"*\"\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.contentWindow)\n\t\t\tMessage.listen(\n\t\t\t\tthis.origin ?? this.defaultOrigin,\n\t\t\t\t(destination: string, content: any) => {\n\t\t\t\t\tif (destination == this.name)\n\t\t\t\t\t\tif (Trigger.is(content))\n\t\t\t\t\t\t\tthis.trigger.emit(content)\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\tthis.message2.emit({ destination, content })\n\t\t\t\t},\n\t\t\t\twindow\n\t\t\t)\n\t}\n\tsend(message2: Message<any>): void\n\tsend(destination: string, content: Trigger | any): void\n\t@Method()\n\tasync send(message2: string | Message<any>, content?: Trigger | any): Promise<void> {\n\t\tif (typeof message2 == \"string\")\n\t\t\tMessage.send((this.origin ?? this.defaultOrigin) + \"#\" + message2, content, this.contentWindow)\n\t\telse if (Message.is(message2) && this.contentWindow)\n\t\t\tMessage.send(\n\t\t\t\t{\n\t\t\t\t\tdestination: (this.origin ?? this.defaultOrigin) + \"#\" + message2.destination,\n\t\t\t\t\tcontent: message2.destination,\n\t\t\t\t},\n\t\t\t\tthis.contentWindow\n\t\t\t)\n\t}\n\trender() {\n\t\treturn <iframe src={this.url + \"#\" + window.location.origin} height=\"100%\" width=\"100%\"></iframe>\n\t}\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/google-font/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMnD,MAAM,OAAO,kBAAkB;;;;EAG9B,MAAM;IACL,OAAO,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAQ,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAS,CAAC,CAAC,CAAC,EAAE,CAAA;EAClG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { GoogleFont } from \"../../model/GoogleFont\"\n\n@Component({\n\ttag: \"smoothly-google-font\",\n\tscoped: true,\n})\nexport class SmoothlyGoogleFont {\n\t@Prop() value?: GoogleFont\n\n\trender() {\n\t\treturn GoogleFont.is(this.value) ? <style>{GoogleFont.styleImportString(this.value)}</style> : \"\"\n\t}\n}\n"]}

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

@@ -9,7 +9,12 @@ export class SmoothlyIcon {
   }
   async loadDocument() {
     if (this.name)
-      this.document = await SmoothlyIcon.load(this.name);
+      this.document =
+        this.name != "empty"
+          ? await SmoothlyIcon.load(this.name)
+          : `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+			<title>Empty</title>
+			</svg>`;
   }
   async componentWillLoad() {
     await this.loadDocument();
@@ -162,3 +167,4 @@ export class SmoothlyIcon {
   }
 }
 SmoothlyIcon.cache = {};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQ7D,MAAM,OAAO,YAAY;;;gBAEc,OAAO;;gBAE0B,QAAQ;;;;EAI/E,KAAK,CAAC,YAAY;IACjB,IAAI,IAAI,CAAC,IAAI;MACZ,IAAI,CAAC,QAAQ;QACZ,IAAI,CAAC,IAAI,IAAI,OAAO;UACnB,CAAC,CAAC,MAAM,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;UACpC,CAAC,CAAC;;UAEG,CAAA;EACT,CAAC;EACD,KAAK,CAAC,iBAAiB;IACtB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;EAC1B,CAAC;EACD,QAAQ;IACP,OAAO;MACN,SAAS,EAAE,IAAI,CAAC,QAAQ;QACvB,CAAC,CAAC,IAAI,CAAC,QAAQ;WACZ,OAAO,CAAC,2BAA2B,EAAE,EAAE,CAAC;WACxC,OAAO,CAAC,gCAAgC,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,EAAE,UAAU,CAAC;WACjF,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC;QAChC,CAAC,CAAC,SAAS;KACZ,CAAA;EACF,CAAC;EACD,MAAM;IACL,OAAO,EAAE,CAAA;EACV,CAAC;EACO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAW;IACrC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;IACjC,OAAO,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;EACjD,CAAC;EAED,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAY;;IAC7B,MAAM,GAAG,GAAG,wDAAwD,IAAI,MAAM,CAAA;IAC9E,OAAO,MAAA,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,mCAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;EACtF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAJc,kBAAK,GAA+D,EAAE,CAAA","sourcesContent":["import { Component, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-icon\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyIcon {\n\t@Prop({ reflect: true }) color: Color\n\t@Prop({ reflect: true }) fill: Fill = \"solid\"\n\t@Prop() name?: string\n\t@Prop({ reflect: true }) size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"medium\"\n\t@Prop() toolTip?: string\n\t@State() document?: string\n\t@Watch(\"name\")\n\tasync loadDocument() {\n\t\tif (this.name)\n\t\t\tthis.document =\n\t\t\t\tthis.name != \"empty\"\n\t\t\t\t\t? await SmoothlyIcon.load(this.name)\n\t\t\t\t\t: `<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"ionicon\" viewBox=\"0 0 512 512\">\n\t\t\t<title>Empty</title>\n\t\t\t</svg>`\n\t}\n\tasync componentWillLoad() {\n\t\tawait this.loadDocument()\n\t}\n\thostData() {\n\t\treturn {\n\t\t\tinnerHTML: this.document\n\t\t\t\t? this.document\n\t\t\t\t\t\t.replace(` width=\"512\" height=\"512\"`, \"\")\n\t\t\t\t\t\t.replace(/(<title>)[\\w\\d\\s-]*(<\\/title>)/, `<title>${this.toolTip || \"\"}</title>`)\n\t\t\t\t\t\t.replace(/stroke:#000;/gi, \"\")\n\t\t\t\t: undefined,\n\t\t}\n\t}\n\trender() {\n\t\treturn []\n\t}\n\tprivate static async fetch(url: string): Promise<string | undefined> {\n\t\tconst response = await fetch(url)\n\t\treturn response.ok ? response.text() : undefined\n\t}\n\tprivate static cache: { [url: string]: Promise<string | undefined> | undefined } = {}\n\tstatic async load(name: string): Promise<string | undefined> {\n\t\tconst url = `https://site-icons.pages.dev/ionicons@5.0.0/dist/svg/${name}.svg`\n\t\treturn SmoothlyIcon.cache[url] ?? (SmoothlyIcon.cache[url] = SmoothlyIcon.fetch(url))\n\t}\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h } from \"@stencil/core\"\n@Component({\n\ttag: \"smoothly-icon-demo\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlyIconDemo {\n\tpage = 0\n\trender() {\n\t\treturn [\n\t\t\t<h1>Icons</h1>,\n\t\t\t<content>\n\t\t\t\t{[\n\t\t\t\t\t\"add-circle\",\n\t\t\t\t\t\"add\",\n\t\t\t\t\t\"airplane\",\n\t\t\t\t\t\"alarm\",\n\t\t\t\t\t\"albums\",\n\t\t\t\t\t\"alert-circle\",\n\t\t\t\t\t\"alert\",\n\t\t\t\t\t\"american-football\",\n\t\t\t\t\t\"analytics\",\n\t\t\t\t\t\"aperture\",\n\t\t\t\t\t\"apps\",\n\t\t\t\t\t\"archive\",\n\t\t\t\t\t\"arrow-back-circle\",\n\t\t\t\t\t\"arrow-back\",\n\t\t\t\t\t\"arrow-down-circle\",\n\t\t\t\t\t\"arrow-down\",\n\t\t\t\t\t\"arrow-forward-circle\",\n\t\t\t\t\t\"arrow-forward\",\n\t\t\t\t\t\"arrow-redo-circle\",\n\t\t\t\t\t\"arrow-redo\",\n\t\t\t\t\t\"arrow-undo-circle\",\n\t\t\t\t\t\"arrow-undo\",\n\t\t\t\t\t\"arrow-up-circle\",\n\t\t\t\t\t\"arrow-up\",\n\t\t\t\t\t\"at-circle\",\n\t\t\t\t\t\"at\",\n\t\t\t\t\t\"attach\",\n\t\t\t\t\t\"backspace\",\n\t\t\t\t\t\"bandage\",\n\t\t\t\t\t\"barbell\",\n\t\t\t\t\t\"bar-chart\",\n\t\t\t\t\t\"barcode\",\n\t\t\t\t\t\"baseball\",\n\t\t\t\t\t\"basketball\",\n\t\t\t\t\t\"basket\",\n\t\t\t\t\t\"battery-charging\",\n\t\t\t\t\t\"battery-dead\",\n\t\t\t\t\t\"battery-full\",\n\t\t\t\t\t\"battery-half\",\n\t\t\t\t\t\"beaker\",\n\t\t\t\t\t\"bed\",\n\t\t\t\t\t\"beer\",\n\t\t\t\t\t\"bicycle\",\n\t\t\t\t\t\"bluetooth\",\n\t\t\t\t\t\"boat\",\n\t\t\t\t\t\"body\",\n\t\t\t\t\t\"bonfire\",\n\t\t\t\t\t\"bookmarks\",\n\t\t\t\t\t\"bookmark\",\n\t\t\t\t\t\"book\",\n\t\t\t\t\t\"briefcase\",\n\t\t\t\t\t\"browsers\",\n\t\t\t\t\t\"brush\",\n\t\t\t\t\t\"bug\",\n\t\t\t\t\t\"build\",\n\t\t\t\t\t\"bulb\",\n\t\t\t\t\t\"business\",\n\t\t\t\t\t\"bus\",\n\t\t\t\t\t\"cafe\",\n\t\t\t\t\t\"calculator\",\n\t\t\t\t\t\"calendar\",\n\t\t\t\t\t\"call\",\n\t\t\t\t\t\"camera-reverse\",\n\t\t\t\t\t\"camera\",\n\t\t\t\t\t\"card\",\n\t\t\t\t\t\"caret-back-circle\",\n\t\t\t\t\t\"caret-back\",\n\t\t\t\t\t\"caret-down-circle\",\n\t\t\t\t\t\"caret-down\",\n\t\t\t\t\t\"caret-forward-circle\",\n\t\t\t\t\t\"caret-forward\",\n\t\t\t\t\t\"caret-up-circle\",\n\t\t\t\t\t\"caret-up\",\n\t\t\t\t\t\"car-sport\",\n\t\t\t\t\t\"car\",\n\t\t\t\t\t\"cart\",\n\t\t\t\t\t\"cash\",\n\t\t\t\t\t\"cellular\",\n\t\t\t\t\t\"chatbox-ellipses\",\n\t\t\t\t\t\"chatbox\",\n\t\t\t\t\t\"chatbubble-ellipses\",\n\t\t\t\t\t\"chatbubbles\",\n\t\t\t\t\t\"chatbubble\",\n\t\t\t\t\t\"checkbox\",\n\t\t\t\t\t\"checkmark-circle\",\n\t\t\t\t\t\"checkmark-done-circle\",\n\t\t\t\t\t\"checkmark-done\",\n\t\t\t\t\t\"checkmark\",\n\t\t\t\t\t\"chevron-back-circle\",\n\t\t\t\t\t\"chevron-back\",\n\t\t\t\t\t\"chevron-down-circle\",\n\t\t\t\t\t\"chevron-down\",\n\t\t\t\t\t\"chevron-forward-circle\",\n\t\t\t\t\t\"chevron-forward\",\n\t\t\t\t\t\"chevron-up-circle\",\n\t\t\t\t\t\"chevron-up\",\n\t\t\t\t\t\"clipboard\",\n\t\t\t\t\t\"close-circle\",\n\t\t\t\t\t\"close\",\n\t\t\t\t\t\"cloud-circle\",\n\t\t\t\t\t\"cloud-done\",\n\t\t\t\t\t\"cloud-download\",\n\t\t\t\t\t\"cloud-offline\",\n\t\t\t\t\t\"cloud\",\n\t\t\t\t\t\"cloud-upload\",\n\t\t\t\t\t\"cloudy-night\",\n\t\t\t\t\t\"cloudy\",\n\t\t\t\t\t\"code-download\",\n\t\t\t\t\t\"code-slash\",\n\t\t\t\t\t\"code\",\n\t\t\t\t\t\"code-working\",\n\t\t\t\t\t\"cog\",\n\t\t\t\t\t\"color-fill\",\n\t\t\t\t\t\"color-filter\",\n\t\t\t\t\t\"color-palette\",\n\t\t\t\t\t\"color-wand\",\n\t\t\t\t\t\"compass\",\n\t\t\t\t\t\"construct\",\n\t\t\t\t\t\"contract\",\n\t\t\t\t\t\"contrast\",\n\t\t\t\t\t\"copy\",\n\t\t\t\t\t\"create\",\n\t\t\t\t\t\"crop\",\n\t\t\t\t\t\"cube\",\n\t\t\t\t\t\"cut\",\n\t\t\t\t\t\"desktop\",\n\t\t\t\t\t\"disc\",\n\t\t\t\t\t\"document-attach\",\n\t\t\t\t\t\"documents\",\n\t\t\t\t\t\"document\",\n\t\t\t\t\t\"document-text\",\n\t\t\t\t\t\"download\",\n\t\t\t\t\t\"duplicate\",\n\t\t\t\t\t\"ear\",\n\t\t\t\t\t\"earth\",\n\t\t\t\t\t\"easel\",\n\t\t\t\t\t\"egg\",\n\t\t\t\t\t\"ellipse\",\n\t\t\t\t\t\"ellipsis-horizontal-circle\",\n\t\t\t\t\t\"ellipsis-horizontal\",\n\t\t\t\t\t\"ellipsis-vertical-circle\",\n\t\t\t\t\t\"ellipsis-vertical\",\n\t\t\t\t\t\"enter\",\n\t\t\t\t\t\"exit\",\n\t\t\t\t\t\"expand\",\n\t\t\t\t\t\"eyedrop\",\n\t\t\t\t\t\"eye-off\",\n\t\t\t\t\t\"eye\",\n\t\t\t\t\t\"fast-food\",\n\t\t\t\t\t\"female\",\n\t\t\t\t\t\"file-tray-full\",\n\t\t\t\t\t\"file-tray-stacked\",\n\t\t\t\t\t\"file-tray\",\n\t\t\t\t\t\"film\",\n\t\t\t\t\t\"filter\",\n\t\t\t\t\t\"finger-print\",\n\t\t\t\t\t\"fitness\",\n\t\t\t\t\t\"flag\",\n\t\t\t\t\t\"flame\",\n\t\t\t\t\t\"flashlight\",\n\t\t\t\t\t\"flash-off\",\n\t\t\t\t\t\"flash\",\n\t\t\t\t\t\"flask\",\n\t\t\t\t\t\"flower\",\n\t\t\t\t\t\"folder-open\",\n\t\t\t\t\t\"folder\",\n\t\t\t\t\t\"football\",\n\t\t\t\t\t\"funnel\",\n\t\t\t\t\t\"game-controller\",\n\t\t\t\t\t\"gift\",\n\t\t\t\t\t\"git-branch\",\n\t\t\t\t\t\"git-commit\",\n\t\t\t\t\t\"git-compare\",\n\t\t\t\t\t\"git-merge\",\n\t\t\t\t\t\"git-network\",\n\t\t\t\t\t\"git-pull-request\",\n\t\t\t\t\t\"glasses\",\n\t\t\t\t\t\"globe\",\n\t\t\t\t\t\"golf\",\n\t\t\t\t\t\"grid\",\n\t\t\t\t\t\"hammer\",\n\t\t\t\t\t\"hand-left\",\n\t\t\t\t\t\"hand-right\",\n\t\t\t\t\t\"happy\",\n\t\t\t\t\t\"hardware-chip\",\n\t\t\t\t\t\"headset\",\n\t\t\t\t\t\"heart-circle\",\n\t\t\t\t\t\"heart-dislike-circle\",\n\t\t\t\t\t\"heart-dislike\",\n\t\t\t\t\t\"heart-half\",\n\t\t\t\t\t\"heart\",\n\t\t\t\t\t\"help-buoy\",\n\t\t\t\t\t\"help-circle\",\n\t\t\t\t\t\"help\",\n\t\t\t\t\t\"home\",\n\t\t\t\t\t\"hourglass\",\n\t\t\t\t\t\"ice-cream\",\n\t\t\t\t\t\"images\",\n\t\t\t\t\t\"image\",\n\t\t\t\t\t\"infinite\",\n\t\t\t\t\t\"information-circle\",\n\t\t\t\t\t\"information\",\n\t\t\t\t\t\"journal\",\n\t\t\t\t\t\"keypad\",\n\t\t\t\t\t\"key\",\n\t\t\t\t\t\"language\",\n\t\t\t\t\t\"laptop\",\n\t\t\t\t\t\"layers\",\n\t\t\t\t\t\"leaf\",\n\t\t\t\t\t\"library\",\n\t\t\t\t\t\"link\",\n\t\t\t\t\t\"list-circle\",\n\t\t\t\t\t\"list\",\n\t\t\t\t\t\"locate\",\n\t\t\t\t\t\"location\",\n\t\t\t\t\t\"lock-closed\",\n\t\t\t\t\t\"lock-open\",\n\t\t\t\t\t\"log-in\",\n\t\t\t\t\t\"logo-amazon\",\n\t\t\t\t\t\"logo-amplify\",\n\t\t\t\t\t\"logo-android\",\n\t\t\t\t\t\"logo-angular\",\n\t\t\t\t\t\"logo-apple-appstore\",\n\t\t\t\t\t\"logo-apple\",\n\t\t\t\t\t\"logo-behance\",\n\t\t\t\t\t\"logo-bitbucket\",\n\t\t\t\t\t\"logo-bitcoin\",\n\t\t\t\t\t\"logo-buffer\",\n\t\t\t\t\t\"logo-capacitor\",\n\t\t\t\t\t\"logo-chrome\",\n\t\t\t\t\t\"logo-closed-captioning\",\n\t\t\t\t\t\"logo-codepen\",\n\t\t\t\t\t\"logo-css3\",\n\t\t\t\t\t\"logo-designernews\",\n\t\t\t\t\t\"logo-docker\",\n\t\t\t\t\t\"logo-dribbble\",\n\t\t\t\t\t\"logo-dropbox\",\n\t\t\t\t\t\"logo-edge\",\n\t\t\t\t\t\"logo-electron\",\n\t\t\t\t\t\"logo-euro\",\n\t\t\t\t\t\"logo-facebook\",\n\t\t\t\t\t\"logo-firebase\",\n\t\t\t\t\t\"logo-firefox\",\n\t\t\t\t\t\"logo-flickr\",\n\t\t\t\t\t\"logo-foursquare\",\n\t\t\t\t\t\"logo-github\",\n\t\t\t\t\t\"logo-gitlab\",\n\t\t\t\t\t\"logo-google-playstore\",\n\t\t\t\t\t\"logo-google\",\n\t\t\t\t\t\"logo-hackernews\",\n\t\t\t\t\t\"logo-html5\",\n\t\t\t\t\t\"logo-instagram\",\n\t\t\t\t\t\"logo-ionic\",\n\t\t\t\t\t\"logo-ionitron\",\n\t\t\t\t\t\"logo-javascript\",\n\t\t\t\t\t\"logo-laravel\",\n\t\t\t\t\t\"logo-linkedin\",\n\t\t\t\t\t\"logo-markdown\",\n\t\t\t\t\t\"logo-medium\",\n\t\t\t\t\t\"logo-nodejs\",\n\t\t\t\t\t\"logo-no-smoking\",\n\t\t\t\t\t\"logo-npm\",\n\t\t\t\t\t\"logo-octocat\",\n\t\t\t\t\t\"logo-paypal\",\n\t\t\t\t\t\"logo-pinterest\",\n\t\t\t\t\t\"logo-playstation\",\n\t\t\t\t\t\"logo-pwa\",\n\t\t\t\t\t\"logo-python\",\n\t\t\t\t\t\"logo-react\",\n\t\t\t\t\t\"logo-reddit\",\n\t\t\t\t\t\"logo-rss\",\n\t\t\t\t\t\"logo-sass\",\n\t\t\t\t\t\"logo-skype\",\n\t\t\t\t\t\"logo-slack\",\n\t\t\t\t\t\"logo-snapchat\",\n\t\t\t\t\t\"logo-soundcloud\",\n\t\t\t\t\t\"logo-stackoverflow\",\n\t\t\t\t\t\"logo-steam\",\n\t\t\t\t\t\"logo-stencil\",\n\t\t\t\t\t\"logo-tiktok\",\n\t\t\t\t\t\"logo-tumblr\",\n\t\t\t\t\t\"logo-tux\",\n\t\t\t\t\t\"logo-twitch\",\n\t\t\t\t\t\"logo-twitter\",\n\t\t\t\t\t\"logo-usd\",\n\t\t\t\t\t\"log-out\",\n\t\t\t\t\t\"logo-web-component\",\n\t\t\t\t\t\"logo-venmo\",\n\t\t\t\t\t\"logo-whatsapp\",\n\t\t\t\t\t\"logo-vimeo\",\n\t\t\t\t\t\"logo-windows\",\n\t\t\t\t\t\"logo-vk\",\n\t\t\t\t\t\"logo-wordpress\",\n\t\t\t\t\t\"logo-vue\",\n\t\t\t\t\t\"logo-xbox\",\n\t\t\t\t\t\"logo-xing\",\n\t\t\t\t\t\"logo-yahoo\",\n\t\t\t\t\t\"logo-yen\",\n\t\t\t\t\t\"logo-youtube\",\n\t\t\t\t\t\"magnet\",\n\t\t\t\t\t\"mail-open\",\n\t\t\t\t\t\"mail\",\n\t\t\t\t\t\"mail-unread\",\n\t\t\t\t\t\"male-female\",\n\t\t\t\t\t\"male\",\n\t\t\t\t\t\"man\",\n\t\t\t\t\t\"map\",\n\t\t\t\t\t\"medal\",\n\t\t\t\t\t\"medical\",\n\t\t\t\t\t\"medkit\",\n\t\t\t\t\t\"megaphone\",\n\t\t\t\t\t\"menu\",\n\t\t\t\t\t\"mic-circle\",\n\t\t\t\t\t\"mic-off-circle\",\n\t\t\t\t\t\"mic-off\",\n\t\t\t\t\t\"mic\",\n\t\t\t\t\t\"moon\",\n\t\t\t\t\t\"move\",\n\t\t\t\t\t\"musical-notes\",\n\t\t\t\t\t\"musical-note\",\n\t\t\t\t\t\"navigate-circle\",\n\t\t\t\t\t\"navigate\",\n\t\t\t\t\t\"newspaper\",\n\t\t\t\t\t\"notifications-circle\",\n\t\t\t\t\t\"notifications-off-circle\",\n\t\t\t\t\t\"notifications-off\",\n\t\t\t\t\t\"notifications\",\n\t\t\t\t\t\"nuclear\",\n\t\t\t\t\t\"nutrition\",\n\t\t\t\t\t\"open\",\n\t\t\t\t\t\"options\",\n\t\t\t\t\t\"paper-plane\",\n\t\t\t\t\t\"partly-sunny\",\n\t\t\t\t\t\"pause-circle\",\n\t\t\t\t\t\"pause\",\n\t\t\t\t\t\"paw\",\n\t\t\t\t\t\"pencil\",\n\t\t\t\t\t\"people-circle\",\n\t\t\t\t\t\"people\",\n\t\t\t\t\t\"person-add\",\n\t\t\t\t\t\"person-circle\",\n\t\t\t\t\t\"person-remove\",\n\t\t\t\t\t\"person\",\n\t\t\t\t\t\"phone-landscape\",\n\t\t\t\t\t\"phone-portrait\",\n\t\t\t\t\t\"pie-chart\",\n\t\t\t\t\t\"pin\",\n\t\t\t\t\t\"pint\",\n\t\t\t\t\t\"pizza\",\n\t\t\t\t\t\"planet\",\n\t\t\t\t\t\"play-back-circle\",\n\t\t\t\t\t\"play-back\",\n\t\t\t\t\t\"play-circle\",\n\t\t\t\t\t\"play-forward-circle\",\n\t\t\t\t\t\"play-forward\",\n\t\t\t\t\t\"play-skip-back-circle\",\n\t\t\t\t\t\"play-skip-back\",\n\t\t\t\t\t\"play-skip-forward-circle\",\n\t\t\t\t\t\"play-skip-forward\",\n\t\t\t\t\t\"play\",\n\t\t\t\t\t\"podium\",\n\t\t\t\t\t\"power\",\n\t\t\t\t\t\"pricetags\",\n\t\t\t\t\t\"pricetag\",\n\t\t\t\t\t\"print\",\n\t\t\t\t\t\"pulse\",\n\t\t\t\t\t\"push\",\n\t\t\t\t\t\"qr-code\",\n\t\t\t\t\t\"radio-button-off\",\n\t\t\t\t\t\"radio-button-on\",\n\t\t\t\t\t\"radio\",\n\t\t\t\t\t\"rainy\",\n\t\t\t\t\t\"reader\",\n\t\t\t\t\t\"receipt\",\n\t\t\t\t\t\"recording\",\n\t\t\t\t\t\"refresh-circle\",\n\t\t\t\t\t\"refresh\",\n\t\t\t\t\t\"reload-circle\",\n\t\t\t\t\t\"reload\",\n\t\t\t\t\t\"remove-circle\",\n\t\t\t\t\t\"remove\",\n\t\t\t\t\t\"reorder-four\",\n\t\t\t\t\t\"reorder-three\",\n\t\t\t\t\t\"reorder-two\",\n\t\t\t\t\t\"repeat\",\n\t\t\t\t\t\"resize\",\n\t\t\t\t\t\"restaurant\",\n\t\t\t\t\t\"return-down-back\",\n\t\t\t\t\t\"return-down-forward\",\n\t\t\t\t\t\"return-up-back\",\n\t\t\t\t\t\"return-up-forward\",\n\t\t\t\t\t\"ribbon\",\n\t\t\t\t\t\"rocket\",\n\t\t\t\t\t\"rose\",\n\t\t\t\t\t\"sad\",\n\t\t\t\t\t\"save\",\n\t\t\t\t\t\"scan-circle\",\n\t\t\t\t\t\"scan\",\n\t\t\t\t\t\"school\",\n\t\t\t\t\t\"search-circle\",\n\t\t\t\t\t\"search\",\n\t\t\t\t\t\"send\",\n\t\t\t\t\t\"server\",\n\t\t\t\t\t\"settings\",\n\t\t\t\t\t\"shapes\",\n\t\t\t\t\t\"share-social\",\n\t\t\t\t\t\"share\",\n\t\t\t\t\t\"shield-checkmark\",\n\t\t\t\t\t\"shield\",\n\t\t\t\t\t\"shirt\",\n\t\t\t\t\t\"shuffle\",\n\t\t\t\t\t\"skull\",\n\t\t\t\t\t\"snow\",\n\t\t\t\t\t\"speedometer\",\n\t\t\t\t\t\"square\",\n\t\t\t\t\t\"star-half\",\n\t\t\t\t\t\"star\",\n\t\t\t\t\t\"stats-chart\",\n\t\t\t\t\t\"stop-circle\",\n\t\t\t\t\t\"stop\",\n\t\t\t\t\t\"stopwatch\",\n\t\t\t\t\t\"subway\",\n\t\t\t\t\t\"sunny\",\n\t\t\t\t\t\"swap-horizontal\",\n\t\t\t\t\t\"swap-vertical\",\n\t\t\t\t\t\"sync-circle\",\n\t\t\t\t\t\"sync\",\n\t\t\t\t\t\"tablet-landscape\",\n\t\t\t\t\t\"tablet-portrait\",\n\t\t\t\t\t\"tennisball\",\n\t\t\t\t\t\"terminal\",\n\t\t\t\t\t\"text\",\n\t\t\t\t\t\"thermometer\",\n\t\t\t\t\t\"thumbs-down\",\n\t\t\t\t\t\"thumbs-up\",\n\t\t\t\t\t\"thunderstorm\",\n\t\t\t\t\t\"timer\",\n\t\t\t\t\t\"time\",\n\t\t\t\t\t\"today\",\n\t\t\t\t\t\"toggle\",\n\t\t\t\t\t\"trail-sign\",\n\t\t\t\t\t\"train\",\n\t\t\t\t\t\"transgender\",\n\t\t\t\t\t\"trash-bin\",\n\t\t\t\t\t\"trash\",\n\t\t\t\t\t\"trending-down\",\n\t\t\t\t\t\"trending-up\",\n\t\t\t\t\t\"triangle\",\n\t\t\t\t\t\"trophy\",\n\t\t\t\t\t\"tv\",\n\t\t\t\t\t\"umbrella\",\n\t\t\t\t\t\"walk\",\n\t\t\t\t\t\"wallet\",\n\t\t\t\t\t\"warning\",\n\t\t\t\t\t\"watch\",\n\t\t\t\t\t\"water\",\n\t\t\t\t\t\"videocam\",\n\t\t\t\t\t\"wifi\",\n\t\t\t\t\t\"wine\",\n\t\t\t\t\t\"volume-high\",\n\t\t\t\t\t\"volume-low\",\n\t\t\t\t\t\"volume-medium\",\n\t\t\t\t\t\"volume-mute\",\n\t\t\t\t\t\"volume-off\",\n\t\t\t\t\t\"woman\",\n\t\t\t\t]\n\t\t\t\t\t.slice(this.page * 100, 100)\n\t\t\t\t\t.map(name => (\n\t\t\t\t\t\t<smoothly-icon name={name} toolTip={name}></smoothly-icon>\n\t\t\t\t\t))}\n\t\t\t</content>,\n\t\t]\n\t}\n}\n"]}