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

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

@@ -1,51 +1,110 @@
 import { h, Host } from "@stencil/core";
 import { http } from "cloudly-http";
-import { Notice } from "../../model/Notice";
-import { Clearable } from "./Clearable";
-import { Data } from "./Data";
+import { Data, Notice } from "../../model";
+import { Clearable } from "../input/Clearable";
+import { Editable } from "../input/Editable";
+import { Input } from "../input/Input";
 export class SmoothlyForm {
   constructor() {
+    this.inputs = new Map();
+    this.listeners = {};
+    this.color = undefined;
     this.value = {};
-    this.clearables = new Map();
+    this.readonly = false;
     this.looks = "plain";
     this.name = undefined;
     this.method = undefined;
     this.action = undefined;
     this.processing = undefined;
-    this.notice = undefined;
+    this.prevent = true;
+    this.changed = false;
+  }
+  async listen(property, listener) {
+    var _a;
+    var _b;
+    ;
+    ((_a = (_b = this.listeners)[property]) !== null && _a !== void 0 ? _a : (_b[property] = [])).push(listener);
+    listener(this);
+  }
+  watchValue() {
+    var _a;
+    this.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true));
+    (_a = this.listeners.changed) === null || _a === void 0 ? void 0 : _a.forEach(l => l(this));
+  }
+  watchReadonly() {
+    var _a;
+    (_a = this.listeners.changed) === null || _a === void 0 ? void 0 : _a.forEach(l => l(this));
+  }
+  smoothlyInputLooksHandler(event) {
+    event.stopPropagation();
+    event.detail(this.looks, this.color);
   }
   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));
-    }
+    this.smoothlyFormInput.emit((this.value = Data.merge(this.value, event.detail)));
   }
   async smoothlySubmitHandler(event) {
     this.processing = true;
-    this.submit();
+    await this.submit();
     this.processing = false;
   }
+  async smoothlyInputLoadHandler(event) {
+    event.stopPropagation();
+    event.detail(this);
+    if (Input.Element.is(event.target)) {
+      this.value = Data.merge(this.value, { [event.target.name]: event.target.value });
+      this.inputs.set(event.target.name, event.target);
+    }
+  }
+  async smoothlyFormDisableHandler(event) {
+    event.stopPropagation();
+    event.detail(this.readonly);
+  }
   async submit() {
+    var _a;
     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.");
+      const action = this.action;
+      (_a = this.notice) === null || _a === void 0 ? void 0 : _a.emit(Notice.execute("Submitting form", async () => {
+        const response = await http
+          .fetch(this.method == "POST"
+          ? http.Request.create({
+            method: "POST",
+            url: action,
+            header: { contentType: "application/json" },
+            body: this.value,
+          })
+          : { url: `${action}?${http.Search.stringify(this.value)}` })
+          .catch(() => undefined);
+        let result;
+        if (!response || (response === null || response === void 0 ? void 0 : response.status) < 200 || response.status >= 300)
+          result = [false, "Failed to submit form."];
+        else {
+          result = [true, "Form successfully submitted."];
+          this.clear();
+        }
+        return result;
+      }));
     }
   }
   async clear() {
-    new Set(this.clearables.values()).forEach(clearable => clearable.clear());
+    this.inputs.forEach(input => {
+      Clearable.is(input) && input.clear();
+    });
+  }
+  async edit(editable) {
+    this.inputs.forEach(input => {
+      Editable.Element.type.is(input) && input.edit(editable);
+    });
+    this.readonly = !editable;
+  }
+  async reset() {
+    this.inputs.forEach(input => {
+      Editable.Element.type.is(input) && input.reset();
+    });
+    this.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true));
   }
   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" }))));
+    return (h(Host, null, h("smoothly-spinner", { active: this.processing }), h("form", { onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", null, h("slot", null)), h("div", null, h("slot", { name: "edit" }), h("slot", { name: "reset" }), h("slot", { name: "clear" }), h("slot", { name: "submit" })))));
   }
   static get is() { return "smoothly-form"; }
   static get originalStyleUrls() {
@@ -60,13 +119,82 @@ export class SmoothlyForm {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Readonly<Data>",
+          "resolved": "{ readonly [x: string]: Value | Data; }",
+          "references": {
+            "Readonly": {
+              "location": "global"
+            },
+            "Data": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "looks": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"plain\" | \"grid\" | \"border\" | \"line\"",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
-          "references": {}
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../input/Looks"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -145,14 +273,45 @@ export class SmoothlyForm {
         },
         "attribute": "processing",
         "reflect": true
+      },
+      "prevent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prevent",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "changed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "changed",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "notice": {}
-    };
-  }
   static get events() {
     return [{
         "method": "smoothlyFormInput",
@@ -170,7 +329,7 @@ export class SmoothlyForm {
           "references": {
             "Data": {
               "location": "import",
-              "path": "./Data"
+              "path": "../../model"
             }
           }
         }
@@ -190,7 +349,27 @@ export class SmoothlyForm {
           "references": {
             "Data": {
               "location": "import",
-              "path": "./Data"
+              "path": "../../model"
+            }
+          }
+        }
+      }, {
+        "method": "notice",
+        "name": "notice",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Notice",
+          "resolved": "Notice",
+          "references": {
+            "Notice": {
+              "location": "import",
+              "path": "../../model"
             }
           }
         }
@@ -198,6 +377,32 @@ export class SmoothlyForm {
   }
   static get methods() {
     return {
+      "listen": {
+        "complexType": {
+          "signature": "(property: \"changed\", listener: (parent: Editable) => Promise<void>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Editable": {
+              "location": "import",
+              "path": "../input/Editable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "submit": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -229,21 +434,83 @@ export class SmoothlyForm {
           "text": "",
           "tags": []
         }
+      },
+      "edit": {
+        "complexType": {
+          "signature": "(editable: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }, {
+        "propName": "readonly",
+        "methodName": "watchReadonly"
+      }];
+  }
   static get listeners() {
     return [{
+        "name": "smoothlyInputLooks",
+        "method": "smoothlyInputLooksHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
         "name": "smoothlyInput",
         "method": "smoothlyInputHandler",
         "target": undefined,
-        "capture": true,
+        "capture": false,
         "passive": false
       }, {
         "name": "smoothlySubmit",
         "method": "smoothlySubmitHandler",
         "target": undefined,
-        "capture": true,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyInputLoad",
+        "method": "smoothlyInputLoadHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyFormDisable",
+        "method": "smoothlyFormDisableHandler",
+        "target": undefined,
+        "capture": false,
         "passive": false
       }];
   }

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

@@ -1 +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"]}
+{"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, Watch } from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { Color, Data, Notice } from \"../../model\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Editable } from \"../input/Editable\"\nimport { Input } from \"../input/Input\"\nimport { Looks } from \"../input/Looks\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm implements Clearable, Submittable, Editable {\n\tprivate inputs = new Map<string, Input.Element>()\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop({ mutable: true, reflect: true }) readonly = false\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: Looks = \"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@Prop() prevent = true\n\t@Prop({ mutable: true }) changed = false\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Data>\n\t@Event() notice: EventEmitter<Notice>\n\tprivate listeners: {\n\t\tchanged?: ((parent: Editable) => Promise<void>)[]\n\t} = {}\n\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\t;(this.listeners[property] ??= []).push(listener)\n\t\tlistener(this)\n\t}\n\t@Watch(\"value\")\n\twatchValue() {\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Watch(\"readonly\")\n\twatchReadonly() {\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks, color: Color | undefined) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.looks, this.color)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.smoothlyFormInput.emit((this.value = Data.merge(this.value, event.detail)))\n\t}\n\t@Listen(\"smoothlySubmit\")\n\tasync smoothlySubmitHandler(event: CustomEvent): Promise<void> {\n\t\tthis.processing = true\n\t\tawait this.submit()\n\t\tthis.processing = false\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this)\n\t\tif (Input.Element.is(event.target)) {\n\t\t\tthis.value = Data.merge(this.value, { [event.target.name]: event.target.value })\n\t\t\tthis.inputs.set(event.target.name, event.target)\n\t\t}\n\t}\n\t@Listen(\"smoothlyFormDisable\")\n\tasync smoothlyFormDisableHandler(event: CustomEvent): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.readonly)\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 action = this.action\n\t\t\tthis.notice?.emit(\n\t\t\t\tNotice.execute(\"Submitting form\", async () => {\n\t\t\t\t\tconst response = await http\n\t\t\t\t\t\t.fetch(\n\t\t\t\t\t\t\tthis.method == \"POST\"\n\t\t\t\t\t\t\t\t? http.Request.create({\n\t\t\t\t\t\t\t\t\t\tmethod: \"POST\",\n\t\t\t\t\t\t\t\t\t\turl: action,\n\t\t\t\t\t\t\t\t\t\theader: { contentType: \"application/json\" },\n\t\t\t\t\t\t\t\t\t\tbody: this.value,\n\t\t\t\t\t\t\t\t  })\n\t\t\t\t\t\t\t\t: { url: `${action}?${http.Search.stringify(this.value)}` }\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.catch(() => undefined)\n\t\t\t\t\tlet result: [boolean, string]\n\t\t\t\t\tif (!response || response?.status < 200 || response.status >= 300)\n\t\t\t\t\t\tresult = [false, \"Failed to submit form.\"]\n\t\t\t\t\telse {\n\t\t\t\t\t\tresult = [true, \"Form successfully submitted.\"]\n\t\t\t\t\t\tthis.clear()\n\t\t\t\t\t}\n\t\t\t\t\treturn result\n\t\t\t\t})\n\t\t\t)\n\t\t}\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tClearable.is(input) && input.clear()\n\t\t})\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.edit(editable)\n\t\t})\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.reset()\n\t\t})\n\t\tthis.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true))\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-spinner active={this.processing}></smoothly-spinner>\n\t\t\t\t<form onSubmit={!this.prevent ? undefined : e => e.preventDefault()} 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<div>\n\t\t\t\t\t\t<slot name=\"edit\" />\n\t\t\t\t\t\t<slot name=\"reset\" />\n\t\t\t\t\t\t<slot name=\"clear\" />\n\t\t\t\t\t\t<slot name=\"submit\" />\n\t\t\t\t\t</div>\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

@@ -1,5 +1,8 @@
 smoothly-form {
 	display: block;
+	position: relative;
+	--background-color: var(--smoothly-color-shade);
+	--text-color: var(--smoothly-color-contrast)
 }
 smoothly-form > form {
 	position: relative;
@@ -8,7 +11,6 @@ smoothly-form > form {
 smoothly-form > form > fieldset {
 	display: flex;
 	flex-flow: row wrap;
-
 	margin-inline-start: unset;
 	margin-inline-end: unset;
 	padding-block-start: unset;
@@ -24,27 +26,19 @@ smoothly-form > form > fieldset {
 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;
+	flex-basis: 40%;
 }
 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;
+	border: rgba(var(--text-color), .5) solid .5px;
 }
 smoothly-form[looks="line"] > form > fieldset,
-smoothly-form[looks="border"] > form > fieldset {
+smoothly-form[looks="border"] > form > fieldset,
+smoothly-form[looks="transparent"] > form > fieldset {
 	gap: 2em
 }
 
-smoothly-form > form > [slot=submit] {
-	margin: .5em auto;
-	max-width: 10em;
+smoothly-form > form > div {
+	display: flex;
+	justify-content: end;
+	gap: 1em;
 }

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

@@ -1,45 +1,31 @@
+import { h, Host } from "@stencil/core";
+import { Icon } from "../../model";
 export class SmoothlyIcon {
   constructor() {
     this.color = undefined;
     this.fill = "solid";
-    this.name = undefined;
+    this.name = "empty";
     this.size = "medium";
     this.toolTip = undefined;
     this.document = undefined;
   }
-  async loadDocument() {
-    if (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();
-  }
-  hostData() {
-    return {
-      innerHTML: this.document
-        ? this.document
-          .replace(` width="512" height="512"`, "")
-          .replace(/(<title>)[\w\d\s-]*(<\/title>)/, `<title>${this.toolTip || ""}</title>`)
-          .replace(/stroke:#000;/gi, "")
-        : undefined,
-    };
+    let result;
+    if (this.name != "empty") {
+      result = await Icon.load(this.name);
+      result = result === null || result === void 0 ? void 0 : result.replace(/(?<=^<svg\s?)/, `$& role="img"`).replace(` width="512" height="512"`, "").replace(/stroke:#000;/gi, "");
+      if (result === null || result === void 0 ? void 0 : result.includes("<title>"))
+        result = result.replace(/(<title>)[\w\d\s-]*(<\/title>)/, `<title>${this.toolTip || ""}</title>`);
+      else
+        result = result === null || result === void 0 ? void 0 : result.replace(/(.*>)(<\/svg>$)/, `$1<title>${this.toolTip || ""}</title>$2`);
+    }
+    this.document =
+      result !== null && result !== void 0 ? result : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+		<title>Empty</title>
+		</svg>`;
   }
   render() {
-    return [];
-  }
-  static async fetch(url) {
-    const response = await fetch(url);
-    return response.ok ? response.text() : undefined;
-  }
-  static async load(name) {
-    var _a;
-    const url = `https://site-icons.pages.dev/ionicons@5.0.0/dist/svg/${name}.svg`;
-    return (_a = SmoothlyIcon.cache[url]) !== null && _a !== void 0 ? _a : (SmoothlyIcon.cache[url] = SmoothlyIcon.fetch(url));
+    return h(Host, { innerHTML: this.document });
   }
   static get is() { return "smoothly-icon"; }
   static get encapsulation() { return "scoped"; }
@@ -104,18 +90,24 @@ export class SmoothlyIcon {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "Icon | \"empty\"",
+          "resolved": "Icon | \"empty\"",
+          "references": {
+            "Icon": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "name",
-        "reflect": false
+        "reflect": true,
+        "defaultValue": "\"empty\""
       },
       "size": {
         "type": "string",
@@ -162,9 +154,8 @@ export class SmoothlyIcon {
   static get watchers() {
     return [{
         "propName": "name",
-        "methodName": "loadDocument"
+        "methodName": "componentWillLoad"
       }];
   }
 }
-SmoothlyIcon.cache = {};
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAOlC,MAAM,OAAO,YAAY;;;gBAEc,OAAO;gBACG,OAAO;gBACgB,QAAQ;;;;EAI/E,KAAK,CAAC,iBAAiB;IACtB,IAAI,MAA0B,CAAA;IAC9B,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE;MACzB,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;MACnC,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CACZ,OAAO,CAAC,eAAe,EAAE,eAAe,EACzC,OAAO,CAAC,2BAA2B,EAAE,EAAE,EACvC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA;MAC/B,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,SAAS,CAAC;QAC9B,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,gCAAgC,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,EAAE,UAAU,CAAC,CAAA;;QAEjG,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,iBAAiB,EAAE,YAAY,IAAI,CAAC,OAAO,IAAI,EAAE,YAAY,CAAC,CAAA;KACxF;IACD,IAAI,CAAC,QAAQ;MACZ,MAAM,aAAN,MAAM,cAAN,MAAM,GACN;;SAEM,CAAA;EACR,CAAC;EACD,MAAM;IACL,OAAO,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;EAC1C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Icon } 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({ reflect: true }) name: Icon | \"empty\" = \"empty\"\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 componentWillLoad() {\n\t\tlet result: string | undefined\n\t\tif (this.name != \"empty\") {\n\t\t\tresult = await Icon.load(this.name)\n\t\t\tresult = result\n\t\t\t\t?.replace(/(?<=^<svg\\s?)/, `$& role=\"img\"`)\n\t\t\t\t.replace(` width=\"512\" height=\"512\"`, \"\")\n\t\t\t\t.replace(/stroke:#000;/gi, \"\")\n\t\t\tif (result?.includes(\"<title>\"))\n\t\t\t\tresult = result.replace(/(<title>)[\\w\\d\\s-]*(<\\/title>)/, `<title>${this.toolTip || \"\"}</title>`)\n\t\t\telse\n\t\t\t\tresult = result?.replace(/(.*>)(<\\/svg>$)/, `$1<title>${this.toolTip || \"\"}</title>$2`)\n\t\t}\n\t\tthis.document =\n\t\t\tresult ??\n\t\t\t`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t<title>Empty</title>\n\t\t</svg>`\n\t}\n\trender() {\n\t\treturn <Host innerHTML={this.document} />\n\t}\n}\n"]}

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

@@ -6,7 +6,7 @@ export class SmoothlyIconDemo {
   render() {
     return [
       h("h1", null, "Icons"),
-      h("content", null, [
+      h("div", null, [
         "add-circle",
         "add",
         "airplane",