smoothly 1.0.1-alpha.8 → 1.1.0

package/dist/collection/components/input/file/index.js

@@ -1,8 +1,9 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 export class SmoothlyInputFile {
   constructor() {
     this.transfer = new DataTransfer();
-    this.dragging = false;
+    this.changed = false;
+    this.readonly = false;
     this.accept = undefined;
     this.color = undefined;
     this.looks = "plain";
@@ -11,33 +12,78 @@ export class SmoothlyInputFile {
     this.showLabel = true;
     this.value = undefined;
     this.placeholder = undefined;
+    this.dragging = false;
+  }
+  get files() {
+    this.transfer.items.clear();
+    this.value && this.transfer.items.add(this.value);
+    return this.transfer.files;
   }
   componentWillLoad() {
     this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+    this.smoothlyInput.emit({ [this.name]: this.value });
+    this.smoothlyInputLoad.emit(() => { });
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
   }
   async clear() {
     this.value = undefined;
   }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
+  }
+  async edit(editable) {
+    this.readonly = !editable;
+  }
+  async reset() {
+    this.value = this.initialValue;
+  }
+  async setInitialValue() {
+    this.initialValue = this.value;
+    this.valueChanged();
+  }
+  async binary() {
+    return true;
+  }
+  valueChanged() {
+    this.changed = this.initialValue !== this.value;
+    this.smoothlyInput.emit({ [this.name]: this.value });
+  }
+  inputHandler(event) {
+    var _a, _b, _c;
+    event.stopPropagation();
+    if ((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)
+      this.value = (_c = this.input) === null || _c === void 0 ? void 0 : _c.files[0];
+  }
+  dropHandler(event) {
+    var _a;
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragging = false;
+    if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files.length)
+      this.value = event.dataTransfer.files[0];
+  }
+  clickHandler(event) {
+    var _a;
+    if (!this.readonly && !event.composedPath().find(target => target == this.input)) {
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }
+  dragOverHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  dragEnterHandler(event) {
+    event.preventDefault();
+    !this.readonly && (this.dragging = true);
+  }
+  dragLeaveHandler(event) {
+    event.stopPropagation();
+    this.dragging = false;
+  }
   render() {
     var _a, _b, _c;
-    return (h(Host, { class: { dragging: this.dragging }, tabindex: 0, onClick: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.click(); }, onDragOver: (event) => (event.preventDefault(), event.stopPropagation()), onDragEnter: () => (this.dragging = true) }, h("label", null, h("slot", { name: "label" })), h("div", { class: "input" }, h("smoothly-button", { color: this.color, fill: "clear", size: "flexible", onClick: event => { var _a; return (event.stopPropagation(), (_a = this.input) === null || _a === void 0 ? void 0 : _a.click()); } }, h("slot", { name: "button" })), h("span", { onClick: event => { var _a; return (event.stopPropagation(), (_a = this.input) === null || _a === void 0 ? void 0 : _a.click()); } }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { class: "mask", onDrop: event => {
-        var _a;
-        return (event.preventDefault(),
-          event.stopPropagation(),
-          (this.dragging = false),
-          ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files.length) &&
-            (this.smoothlyInput.emit({ [this.name]: (this.value = event.dataTransfer.files[0]) }),
-              this.smoothlyChange.emit({ [this.name]: (this.value = event.dataTransfer.files[0]) })));
-      }, onDragLeave: event => (event.stopPropagation(), (this.dragging = false)) }), h("input", { ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: (this.transfer.items.clear(), this.value && this.transfer.items.add(this.value), this.transfer.files), onInput: event => {
-        var _a, _b, _c;
-        return (event.stopPropagation(),
-          ((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length) && this.smoothlyInput.emit({ [this.name]: (this.value = (_c = this.input) === null || _c === void 0 ? void 0 : _c.files[0]) }));
-      }, onChange: event => {
-        var _a, _b, _c;
-        return (event.stopPropagation(),
-          ((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length) &&
-            this.smoothlyChange.emit({ [this.name]: (this.value = (_c = this.input) === null || _c === void 0 ? void 0 : _c.files[0]) }));
-      } })), h("slot", null)));
+    return (h(Host, { class: { dragging: this.dragging }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", null, h("slot", { name: "label" })), h("div", { class: "input" }, h("smoothly-button", { color: this.color, fill: "clear", size: "flexible" }, h("slot", { name: "button" })), h("span", null, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), h("input", { ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("slot", null)));
   }
   static get is() { return "smoothly-input-file"; }
   static get encapsulation() { return "scoped"; }
@@ -53,6 +99,42 @@ export class SmoothlyInputFile {
   }
   static get properties() {
     return {
+      "changed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "changed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "accept": {
         "type": "string",
         "mutable": false,
@@ -246,20 +328,17 @@ export class SmoothlyInputFile {
           "text": ""
         },
         "complexType": {
-          "original": "Record<string, File>",
-          "resolved": "{ [x: string]: File; }",
+          "original": "Record<string, any>",
+          "resolved": "{ [x: string]: any; }",
           "references": {
             "Record": {
               "location": "global"
-            },
-            "File": {
-              "location": "global"
             }
           }
         }
       }, {
-        "method": "smoothlyChange",
-        "name": "smoothlyChange",
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -268,17 +347,29 @@ export class SmoothlyInputFile {
           "text": ""
         },
         "complexType": {
-          "original": "Record<string, File>",
-          "resolved": "{ [x: string]: File; }",
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
           "references": {
-            "Record": {
-              "location": "global"
-            },
-            "File": {
+            "HTMLElement": {
               "location": "global"
             }
           }
         }
+      }, {
+        "method": "smoothlyFormDisable",
+        "name": "smoothlyFormDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(disabled: boolean) => void",
+          "resolved": "(disabled: boolean) => void",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -298,8 +389,107 @@ export class SmoothlyInputFile {
           "text": "",
           "tags": []
         }
+      },
+      "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": "../Editable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "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": []
+        }
+      },
+      "setInitialValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "binary": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/input/file/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/file/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAW5F,MAAM,OAAO,iBAAiB;;IACrB,aAAQ,GAAiB,IAAI,YAAY,EAAE,CAAA;oBAE/B,KAAK;;;iBAG8B,OAAO;;;qBAGzB,IAAI;;;;EAOzC,iBAAiB;IAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;EAC5G,CAAC;EAGD,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;EACvB,CAAC;EACD,MAAM;;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAA,EAAA,EAClC,UAAU,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,CAAC,eAAe,EAAE,CAAC,EAC/E,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACzC;QACC,YAAM,IAAI,EAAE,OAAO,GAAI,CAChB;MACR,WAAK,KAAK,EAAC,OAAO;QACjB,uBACC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,KAAK,CAAC,EAAE,WAAC,OAAA,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAC,CAAA,EAAA;UAChE,YAAM,IAAI,EAAE,QAAQ,GAAI,CACP;QAClB,YAAM,OAAO,EAAE,KAAK,CAAC,EAAE,WAAC,OAAA,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAC,CAAA,EAAA,IACpE,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,mCAAI,IAAI,CAAC,WAAW,CAC/B;QACP,WACC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,KAAK,CAAC,EAAE;;YAAC,OAAA,CAChB,KAAK,CAAC,cAAc,EAAE;cACtB,KAAK,CAAC,eAAe,EAAE;cACvB,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;cACvB,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAC,MAAM;gBAC/B,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;kBACrF,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CACvF,CAAA;WAAA,EACD,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,GACvE;QACF,aACC,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,EACtC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EACvD,MAAM,EAAE,MAAA,IAAI,CAAC,MAAM,mCAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,EAChE,KAAK,EACJ,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAEtG,OAAO,EAAE,KAAK,CAAC,EAAE;;YAAC,OAAA,CACjB,KAAK,CAAC,eAAe,EAAE;cACvB,CAAA,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,0CAAE,MAAM,KAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAC1G,CAAA;WAAA,EACD,QAAQ,EAAE,KAAK,CAAC,EAAE;;YAAC,OAAA,CAClB,KAAK,CAAC,eAAe,EAAE;cACvB,CAAA,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,0CAAE,MAAM;gBACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAC/E,CAAA;WAAA,GACA,CACG;MACN,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-file\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputFile implements Clearable, Input {\n\tprivate transfer: DataTransfer = new DataTransfer()\n\tprivate input?: HTMLInputElement\n\t@State() dragging = false\n\t@Prop() accept?: string\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) camera: \"front\" | \"back\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) value?: File\n\t@Prop({ mutable: true, reflect: true }) placeholder: string | undefined\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, File>>\n\t@Event() smoothlyChange: EventEmitter<Record<string, File>>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{ dragging: this.dragging }}\n\t\t\t\ttabindex={0}\n\t\t\t\tonClick={() => this.input?.click()}\n\t\t\t\tonDragOver={(event: Event) => (event.preventDefault(), event.stopPropagation())}\n\t\t\t\tonDragEnter={() => (this.dragging = true)}>\n\t\t\t\t<label>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</label>\n\t\t\t\t<div class=\"input\">\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tfill={\"clear\"}\n\t\t\t\t\t\tsize=\"flexible\"\n\t\t\t\t\t\tonClick={event => (event.stopPropagation(), this.input?.click())}>\n\t\t\t\t\t\t<slot name={\"button\"} />\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<span onClick={event => (event.stopPropagation(), this.input?.click())}>\n\t\t\t\t\t\t{this.value?.name ?? this.placeholder}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={\"mask\"}\n\t\t\t\t\t\tonDrop={event => (\n\t\t\t\t\t\t\tevent.preventDefault(),\n\t\t\t\t\t\t\tevent.stopPropagation(),\n\t\t\t\t\t\t\t(this.dragging = false),\n\t\t\t\t\t\t\tevent.dataTransfer?.files.length &&\n\t\t\t\t\t\t\t\t(this.smoothlyInput.emit({ [this.name]: (this.value = event.dataTransfer.files[0]) }),\n\t\t\t\t\t\t\t\tthis.smoothlyChange.emit({ [this.name]: (this.value = event.dataTransfer.files[0]) }))\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonDragLeave={event => (event.stopPropagation(), (this.dragging = false))}\n\t\t\t\t\t/>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={element => (this.input = element)}\n\t\t\t\t\t\ttype={\"file\"}\n\t\t\t\t\t\tcapture={this.camera == \"back\" ? \"environment\" : \"user\"}\n\t\t\t\t\t\taccept={this.accept ?? (!this.camera ? undefined : \"image/jpeg\")}\n\t\t\t\t\t\tfiles={\n\t\t\t\t\t\t\t(this.transfer.items.clear(), this.value && this.transfer.items.add(this.value), this.transfer.files)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonInput={event => (\n\t\t\t\t\t\t\tevent.stopPropagation(),\n\t\t\t\t\t\t\tthis.input?.files?.length && this.smoothlyInput.emit({ [this.name]: (this.value = this.input?.files[0]) })\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonChange={event => (\n\t\t\t\t\t\t\tevent.stopPropagation(),\n\t\t\t\t\t\t\tthis.input?.files?.length &&\n\t\t\t\t\t\t\t\tthis.smoothlyChange.emit({ [this.name]: (this.value = this.input?.files[0]) })\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/file/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-file\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputFile implements ComponentWillLoad, Input, Clearable, Editable {\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() accept?: string\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) camera: \"front\" | \"back\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) value?: File\n\t@Prop({ mutable: true, reflect: true }) placeholder: string | undefined\n\t@State() dragging = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> }\n\tprivate transfer: DataTransfer = new DataTransfer()\n\tprivate input?: HTMLInputElement\n\tprivate initialValue: SmoothlyInputFile[\"value\"]\n\n\tprivate get files(): FileList {\n\t\tthis.transfer.items.clear()\n\t\tthis.value && this.transfer.items.add(this.value)\n\t\treturn this.transfer.files\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\tthis.smoothlyInputLoad.emit(() => {})\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.valueChanged()\n\t}\n\t@Method()\n\tasync binary(): Promise<boolean> {\n\t\treturn true\n\t}\n\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tthis.changed = this.initialValue !== this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t}\n\n\tinputHandler(event: Event): void {\n\t\tevent.stopPropagation()\n\t\tif (this.input?.files?.length)\n\t\t\tthis.value = this.input?.files[0]\n\t}\n\tdropHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t\tthis.dragging = false\n\t\tif (event.dataTransfer?.files.length)\n\t\t\tthis.value = event.dataTransfer.files[0]\n\t}\n\tclickHandler(event: MouseEvent): void {\n\t\tif (!this.readonly && !event.composedPath().find(target => target == this.input)) {\n\t\t\tthis.input?.click()\n\t\t}\n\t}\n\tdragOverHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t}\n\tdragEnterHandler(event: DragEvent): void {\n\t\tevent.preventDefault()\n\t\t!this.readonly && (this.dragging = true)\n\t}\n\tdragLeaveHandler(event: DragEvent): void {\n\t\tevent.stopPropagation()\n\t\tthis.dragging = false\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{ dragging: this.dragging }}\n\t\t\t\ttabindex={0}\n\t\t\t\tonClick={(e: MouseEvent) => this.clickHandler(e)}\n\t\t\t\tonDragOver={(e: DragEvent) => this.dragOverHandler(e)}\n\t\t\t\tonDragEnter={(e: DragEvent) => this.dragEnterHandler(e)}>\n\t\t\t\t<label>\n\t\t\t\t\t<slot name={\"label\"} />\n\t\t\t\t</label>\n\t\t\t\t<div class=\"input\">\n\t\t\t\t\t<smoothly-button color={this.color} fill={\"clear\"} size=\"flexible\">\n\t\t\t\t\t\t<slot name={\"button\"} />\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<span>{this.value?.name ?? this.placeholder}</span>\n\t\t\t\t\t<div class={\"mask\"} onDrop={e => this.dropHandler(e)} onDragLeave={e => this.dragLeaveHandler(e)} />\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={element => (this.input = element)}\n\t\t\t\t\t\ttype={\"file\"}\n\t\t\t\t\t\tcapture={this.camera == \"back\" ? \"environment\" : \"user\"}\n\t\t\t\t\t\taccept={this.accept ?? (!this.camera ? undefined : \"image/jpeg\")}\n\t\t\t\t\t\tfiles={this.files}\n\t\t\t\t\t\tonInput={e => this.inputHandler(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/file/style.css

@@ -45,38 +45,34 @@
 	position: relative;
 	width: 100%;
 	padding-left: 0.4rem;
-		background-color: rgb(var(--background-color,var(--smoothly-color-shade)))
+	background-color: rgb(var(--background-color,var(--smoothly-color-shade)));
 }
 .mask {
 	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+	inset: 0;
 	background-color: rgb(var(--text-color ,var(--smoothly-color-contrast)), 0.3);
 }
 
 :host:not(.dragging) .mask {
 	display: none;
 }
-input {
+ input {
 	overflow: hidden;
 	height: 0;
 	width: 0;
-	padding:0
+	padding: 0;
 }
-.input {
+ div.input {
 	display: flex;
-	align-items:center;
-	padding-left: 0.4rem;
+	align-items: center;
 	padding-bottom: 0.2rem;
+	column-gap: 1ch;
 }
-smoothly-button {
+ smoothly-button {
 	margin: 0;
 	border: none;
 }
-label {
-	padding-left: 0.4rem;
+ label {
 	padding-top: 0.4rem;
 	display: flex;
 	width: 100%;
@@ -86,7 +82,7 @@ label {
 	cursor: inherit;
 
 }
-label::slotted(*) {
+ label::slotted(*) {
 	display: block;
 	width: 100%;
 	font-size: 0.65em;
@@ -103,5 +99,4 @@ smoothly-icon {
 }
 span {
 	cursor: pointer;
-	padding-left: 0.5rem;
 }

package/dist/collection/model/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAkD,MAAM,cAAc,CAAA;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA","sourcesContent":["export { Autocomplete } from \"./Autocomplete\"\nexport { Color } from \"./Color\"\nexport { Fill } from \"./Fill\"\nexport { GoogleFont } from \"./GoogleFont\"\nexport { Icon } from \"./Icon\"\nexport { Message } from \"./Message\"\nexport { Notice } from \"./Notice\"\nexport { Option } from \"./Option\"\nexport { Trigger } from \"./Trigger\"\nexport { Listenable, HasListenable, WithListenable, CanBeListenable } from \"./Listenable\"\nexport { StateBase } from \"./StateBase\"\nexport { redirect } from \"./redirect\"\nexport { Data } from \"./Data\"\nexport { Submit } from \"./Submit\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAiE,MAAM,cAAc,CAAA;AACxG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA","sourcesContent":["export { Autocomplete } from \"./Autocomplete\"\nexport { Color } from \"./Color\"\nexport { Fill } from \"./Fill\"\nexport { GoogleFont } from \"./GoogleFont\"\nexport { Icon } from \"./Icon\"\nexport { Message } from \"./Message\"\nexport { Notice } from \"./Notice\"\nexport { Option } from \"./Option\"\nexport { Trigger } from \"./Trigger\"\nexport { Listenable, HasListenable, WithListenable, CanBeListenable, ListenerBatch } from \"./Listenable\"\nexport { StateBase } from \"./StateBase\"\nexport { redirect } from \"./redirect\"\nexport { Data } from \"./Data\"\nexport { Submit } from \"./Submit\"\n"]}

package/dist/collection/smoothly.js.map

@@ -1 +1 @@
-{"version":3,"file":"smoothly.js","sourceRoot":"","sources":["../src/smoothly.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAEL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EAEP,UAAU,EAIV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,GACN,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { Components, JSX } from \"./components\"\nexport {\n\tAutocomplete,\n\tColor,\n\tFill,\n\tGoogleFont,\n\tMessage,\n\tNotice,\n\tTrigger,\n\tOption,\n\tListenable,\n\tHasListenable,\n\tWithListenable,\n\tCanBeListenable,\n\tIcon,\n\tStateBase,\n\tData,\n\tredirect,\n\tSubmit,\n} from \"./model\"\nexport { Cosmetic } from \"./utilities\"\n"]}
+{"version":3,"file":"smoothly.js","sourceRoot":"","sources":["../src/smoothly.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAEL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EAEP,UAAU,EAKV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,GACN,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { Components, JSX } from \"./components\"\nexport {\n\tAutocomplete,\n\tColor,\n\tFill,\n\tGoogleFont,\n\tMessage,\n\tNotice,\n\tTrigger,\n\tOption,\n\tListenable,\n\tHasListenable,\n\tWithListenable,\n\tCanBeListenable,\n\tListenerBatch,\n\tIcon,\n\tStateBase,\n\tData,\n\tredirect,\n\tSubmit,\n} from \"./model\"\nexport { Cosmetic } from \"./utilities\"\n"]}