smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -1,24 +1,26 @@
 import { h, Host } from "@stencil/core";
 import { http } from "cloudly-http";
-import { Data } from "../../model/Data";
-import { Notice } from "../../model/Notice";
+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.clearables = new Map();
+    this.inputs = new Map();
+    this.readonlyAtLoad = this.readonly;
     this.listeners = {};
     this.color = undefined;
     this.value = {};
+    this.type = "create";
+    this.readonly = false;
     this.looks = "plain";
     this.name = undefined;
-    this.method = undefined;
     this.action = undefined;
     this.processing = undefined;
     this.prevent = true;
-    this.notice = undefined;
     this.changed = false;
   }
-  listen(property, listener) {
+  async listen(property, listener) {
     var _a;
     var _b;
     ;
@@ -27,7 +29,11 @@ export class SmoothlyForm {
   }
   watchValue() {
     var _a;
-    this.changed = Object.values(this.value).filter(value => Boolean(value)).length > 0;
+    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) {
@@ -35,40 +41,80 @@ export class SmoothlyForm {
     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));
-    }
-  }
-  async smoothlySubmitHandler(event) {
-    this.processing = true;
-    this.submit();
-    this.processing = false;
+    this.smoothlyFormInput.emit((this.value = Data.merge(this.value, event.detail)));
   }
-  async SmoothlyInputLoadHandler(event) {
+  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 submit() {
-    this.smoothlyFormSubmit.emit(this.value);
+  async smoothlyFormDisableHandler(event) {
+    event.stopPropagation();
+    event.detail(this.readonly);
+  }
+  async submit(remove) {
+    var _a;
+    this.smoothlyFormSubmit.emit({ value: this.value, type: remove == true ? "remove" : this.type });
     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.succeeded("Form sucessfully submitted.");
-        await this.clear();
-      }
-      else
-        this.notice = Notice.failed("Failed to submit form.");
+      this.processing = true;
+      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(http.Request.create(remove == true
+          ? { method: "DELETE", url: action, header: { contentType: "application/json" }, body: this.value }
+          : this.type == "fetch"
+            ? {
+              method: "GET",
+              url: `${action}?${http.Search.stringify(this.value)}`,
+            }
+            : {
+              method: this.type == "change" ? "PUT" : this.type == "update" ? "PATCH" : "POST",
+              url: action,
+              header: { contentType: "application/json" },
+              body: 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.type == "create" && (await this.clear());
+          this.setInitialValue();
+          this.readonlyAtLoad && this.edit(!this.readonlyAtLoad);
+        }
+        this.processing = false;
+        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));
+  }
+  async setInitialValue() {
+    this.inputs.forEach(input => {
+      Editable.Element.type.is(input) && input.setInitialValue();
+    });
   }
   render() {
-    return (h(Host, null, this.notice ? h("smoothly-notification", { notice: this.notice }) : [], 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: "clear" }), 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() {
@@ -117,7 +163,7 @@ export class SmoothlyForm {
             },
             "Data": {
               "location": "import",
-              "path": "../../model/Data"
+              "path": "../../model"
             }
           }
         },
@@ -129,12 +175,12 @@ export class SmoothlyForm {
         },
         "defaultValue": "{}"
       },
-      "looks": {
+      "type": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"plain\" | \"grid\" | \"border\" | \"line\"",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "original": "\"update\" | \"change\" | \"fetch\" | \"create\"",
+          "resolved": "\"change\" | \"create\" | \"fetch\" | \"update\"",
           "references": {}
         },
         "required": false,
@@ -143,33 +189,57 @@ export class SmoothlyForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "looks",
-        "reflect": true,
-        "defaultValue": "\"plain\""
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"create\""
       },
-      "name": {
+      "readonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "looks": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../input/Looks"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
       },
-      "method": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"GET\" | \"POST\"",
-          "resolved": "\"GET\" | \"POST\" | undefined",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -178,7 +248,7 @@ export class SmoothlyForm {
           "tags": [],
           "text": ""
         },
-        "attribute": "method",
+        "attribute": "name",
         "reflect": false
       },
       "action": {
@@ -213,7 +283,7 @@ export class SmoothlyForm {
           "text": ""
         },
         "attribute": "processing",
-        "reflect": true
+        "reflect": false
       },
       "prevent": {
         "type": "boolean",
@@ -248,16 +318,11 @@ export class SmoothlyForm {
           "text": ""
         },
         "attribute": "changed",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "notice": {}
-    };
-  }
   static get events() {
     return [{
         "method": "smoothlyFormInput",
@@ -275,7 +340,7 @@ export class SmoothlyForm {
           "references": {
             "Data": {
               "location": "import",
-              "path": "../../model/Data"
+              "path": "../../model"
             }
           }
         }
@@ -290,12 +355,32 @@ export class SmoothlyForm {
           "text": ""
         },
         "complexType": {
-          "original": "Data",
-          "resolved": "{ [name: string]: Value | Data; }",
+          "original": "{ value: Data; type: \"update\" | \"change\" | \"fetch\" | \"create\" | \"remove\" }",
+          "resolved": "{ value: Data; type: \"fetch\" | \"remove\" | \"create\" | \"change\" | \"update\"; }",
           "references": {
             "Data": {
               "location": "import",
-              "path": "../../model/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"
             }
           }
         }
@@ -303,7 +388,52 @@ 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": "(remove?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "clear": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -319,7 +449,42 @@ export class SmoothlyForm {
           "tags": []
         }
       },
-      "clear": {
+      "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": []
+        }
+      },
+      "setInitialValue": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -341,6 +506,9 @@ export class SmoothlyForm {
     return [{
         "propName": "value",
         "methodName": "watchValue"
+      }, {
+        "propName": "readonly",
+        "methodName": "watchReadonly"
       }];
   }
   static get listeners() {
@@ -357,14 +525,14 @@ export class SmoothlyForm {
         "capture": false,
         "passive": false
       }, {
-        "name": "smoothlySubmit",
-        "method": "smoothlySubmitHandler",
+        "name": "smoothlyInputLoad",
+        "method": "smoothlyInputLoadHandler",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "smoothlyInputLoad",
-        "method": "SmoothlyInputLoadHandler",
+        "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, Watch } from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { Color } from \"../../model\"\nimport { Data } from \"../../model/Data\"\nimport { Notice } from \"../../model/Notice\"\nimport { Changeable } from \"../input/Changeable\"\nimport { Clearable } from \"../input/Clearable\"\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 Changeable, Clearable, Submittable {\n\tprivate clearables = new Map<string, Clearable>()\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\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@Prop() prevent = true\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Data>\n\t@State() notice?: Notice\n\t@Prop({ mutable: true, reflect: true }) changed = false\n\tprivate listeners: { changed?: ((parent: Changeable) => Promise<void>)[] } = {}\n\n\tlisten(property: \"changed\", listener: (parent: Changeable) => Promise<void>): 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 = Object.values(this.value).filter(value => Boolean(value)).length > 0\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.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\")\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@Listen(\"smoothlyInputLoad\")\n\tasync SmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): Promise<void> {\n\t\tevent.detail(this)\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.succeeded(\"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 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=\"clear\"></slot>\n\t\t\t\t\t\t<slot name=\"submit\"></slot>\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"]}
+{"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\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop() type: \"update\" | \"change\" | \"fetch\" | \"create\" = \"create\"\n\t@Prop({ mutable: true }) readonly = false\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: Looks = \"plain\"\n\t@Prop() name?: string\n\t@Prop() action?: string\n\t@Prop({ mutable: 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<{ value: Data; type: \"update\" | \"change\" | \"fetch\" | \"create\" | \"remove\" }>\n\t@Event() notice: EventEmitter<Notice>\n\tprivate inputs = new Map<string, Input.Element>()\n\tprivate readonlyAtLoad = this.readonly\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\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): 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(remove?: boolean): Promise<void> {\n\t\tthis.smoothlyFormSubmit.emit({ value: this.value, type: remove == true ? \"remove\" : this.type })\n\t\tif (this.action) {\n\t\t\tthis.processing = true\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\thttp.Request.create(\n\t\t\t\t\t\t\t\tremove == true\n\t\t\t\t\t\t\t\t\t? { method: \"DELETE\", url: action, header: { contentType: \"application/json\" }, body: this.value }\n\t\t\t\t\t\t\t\t\t: this.type == \"fetch\"\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tmethod: \"GET\",\n\t\t\t\t\t\t\t\t\t\t\turl: `${action}?${http.Search.stringify(this.value)}`,\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tmethod: this.type == \"change\" ? \"PUT\" : this.type == \"update\" ? \"PATCH\" : \"POST\",\n\t\t\t\t\t\t\t\t\t\t\turl: action,\n\t\t\t\t\t\t\t\t\t\t\theader: { contentType: \"application/json\" },\n\t\t\t\t\t\t\t\t\t\t\tbody: this.value,\n\t\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\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.type == \"create\" && (await this.clear())\n\t\t\t\t\t\tthis.setInitialValue()\n\t\t\t\t\t\tthis.readonlyAtLoad && this.edit(!this.readonlyAtLoad)\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.processing = false\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\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.inputs.forEach(input => {\n\t\t\tEditable.Element.type.is(input) && input.setInitialValue()\n\t\t})\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

@@ -32,7 +32,8 @@ smoothly-form[looks="grid"] > form > fieldset {
 	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
 }
 
@@ -40,4 +41,5 @@ smoothly-form > form > div {
 	display: flex;
 	justify-content: end;
 	gap: 1em;
+	margin-top: 0.5rem;
 }

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

@@ -1,42 +1,36 @@
 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.rotate = undefined;
+    this.flip = undefined;
     this.toolTip = undefined;
     this.document = undefined;
   }
-  async loadDocument() {
-    var _a;
-    if (this.name)
-      this.document =
-        this.name != "empty"
-          ? (_a = (await SmoothlyIcon.load(this.name))) === null || _a === void 0 ? void 0 : _a.replace(/(?<=^<svg\s?)/, `$& role="img"`)
-          : `<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
-			<title>Empty</title>
-			</svg>`;
-  }
   async componentWillLoad() {
-    this.loadDocument();
+    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 (!this.toolTip)
+        result = result === null || result === void 0 ? void 0 : result.replace(/<title>.*<\/title>/, "");
+      else if (result === null || result === void 0 ? void 0 : result.includes("<title>"))
+        result = result.replace(/(<title>).*(<\/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 (h(Host, { 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 }));
-  }
-  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, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
   }
   static get is() { return "smoothly-icon"; }
   static get encapsulation() { return "scoped"; }
@@ -102,22 +96,23 @@ export class SmoothlyIcon {
         "mutable": false,
         "complexType": {
           "original": "Icon | \"empty\"",
-          "resolved": "Icon | \"empty\" | undefined",
+          "resolved": "Icon | \"empty\"",
           "references": {
             "Icon": {
               "location": "import",
-              "path": "./Icon"
+              "path": "../../model"
             }
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "name",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"empty\""
       },
       "size": {
         "type": "string",
@@ -137,6 +132,40 @@ export class SmoothlyIcon {
         "reflect": true,
         "defaultValue": "\"medium\""
       },
+      "rotate": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rotate",
+        "reflect": true
+      },
+      "flip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"x\" | \"y\"",
+          "resolved": "\"x\" | \"y\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "flip",
+        "reflect": true
+      },
       "toolTip": {
         "type": "string",
         "mutable": false,
@@ -164,9 +193,8 @@ export class SmoothlyIcon {
   static get watchers() {
     return [{
         "propName": "name",
-        "methodName": "loadDocument"
+        "methodName": "componentWillLoad"
       }];
   }
 }
-SmoothlyIcon.cache = {};
 //# sourceMappingURL=index.js.map