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

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

@@ -0,0 +1,239 @@
+[color=default] {
+	--smoothly-color: var(--smoothly-default-color);
+	--smoothly-color-contrast: var(--smoothly-default-contrast);
+	--smoothly-color-shade: var(--smoothly-default-shade);
+	--smoothly-color-tint: var(--smoothly-default-tint);
+}
+
+[color=primary] {
+	--smoothly-color: var(--smoothly-primary-color);
+	--smoothly-color-contrast: var(--smoothly-primary-contrast);
+	--smoothly-color-shade: var(--smoothly-primary-shade);
+	--smoothly-color-tint: var(--smoothly-primary-tint);
+}
+
+[color=secondary] {
+	--smoothly-color: var(--smoothly-secondary-color);
+	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
+	--smoothly-color-shade: var(--smoothly-secondary-shade);
+	--smoothly-color-tint: var(--smoothly-secondary-tint);
+}
+
+[color=tertiary] {
+	--smoothly-color: var(--smoothly-tertiary-color);
+	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
+	--smoothly-color-shade: var(--smoothly-tertiary-shade);
+	--smoothly-color-tint: var(--smoothly-tertiary-tint);
+}
+
+[color=success] {
+	--smoothly-color: var(--smoothly-success-color);
+	--smoothly-color-contrast: var(--smoothly-success-color);
+	--smoothly-color-shade: var(--smoothly-success-shade);
+	--smoothly-color-tint: var(--smoothly-success-tint);
+}
+
+[color=warning] {
+	--smoothly-color: var(--smoothly-warning-color);
+	--smoothly-color-contrast: var(--smoothly-warning-contrast);
+	--smoothly-color-shade: var(--smoothly-warning-shade);
+	--smoothly-color-tint: var(--smoothly-warning-tint);
+}
+
+[color=danger] {
+	--smoothly-color: var(--smoothly-danger-color);
+	--smoothly-color-contrast: var(--smoothly-danger-contrast);
+	--smoothly-color-shade: var(--smoothly-danger-shade);
+	--smoothly-color-tint: var(--smoothly-danger-tint);
+}
+
+[color=light] {
+	--smoothly-color: var(--smoothly-light-color);
+	--smoothly-color-contrast: var(--smoothly-light-contrast);
+	--smoothly-color-shade: var(--smoothly-light-shade);
+	--smoothly-color-tint: var(--smoothly-light-tint);
+}
+
+[color=medium] {
+	--smoothly-color: var(--smoothly-medium-color);
+	--smoothly-color-contrast: var(--smoothly-medium-contrast);
+	--smoothly-color-shade: var(--smoothly-medium-shade);
+	--smoothly-color-tint: var(--smoothly-medium-tint);
+}
+
+[color=dark] {
+	--smoothly-color: var(--smoothly-dark-color);
+	--smoothly-color-contrast: var(--smoothly-dark-contrast);
+	--smoothly-color-shade: var(--smoothly-dark-shade);
+	--smoothly-color-tint: var(--smoothly-dark-tint);
+}
+
+
+:host{
+	display: inline-block;
+	box-sizing: border-box;
+	border-radius: 0.5rem;
+	border: solid 1px;
+	transition: background 150ms ease-in-out;
+	cursor: pointer;
+}
+:host([type=link]) {
+	display: inline;
+	border: none;
+}
+:host([disabled]) {
+	opacity: 0.5;
+	pointer-events: none;
+}
+a,
+button {
+	font-size: 110%;
+	font-weight: 400;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+	display: inline-flex;
+	gap: 0.5rem;
+}
+button {
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	border-radius: 0.5rem;
+	align-items: center;
+}
+:host(:not([size=icon]):not([size=flexible])) > button {
+	padding: 0.8em;
+	min-width: 8em;
+}
+:host(:not([size=icon]):not([size=flexible])):has(smoothly-icon) > button {
+	padding: 0.6em;
+}
+:host([size=icon]) > button {
+	padding: 0.5em;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]) {
+	border-radius: 2rem;
+}
+:host([type=button]) > a {
+	text-align: center;
+	text-decoration: inherit;
+	width: calc(100% - 0.6em);
+}
+:host([size=small]) > button {
+	font-size: 100%;
+}
+:host([size=large]) > button {
+	font-size: 130%;
+}
+:host(:not([size=icon])) {
+	min-width: 8em;
+}
+:host([size=flexible]) {
+	min-width: unset;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: none;
+}
+:host([size=flexible]) > button {
+	min-width: unset;
+	padding: 0;
+	margin: 0 !important;
+}
+:host([expand]) {
+	width: 100%;
+}
+:host([expand=full]) {
+	border-left: none;
+	border-right: none;
+	border-radius: 0;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]) {
+	border-radius: 2rem;
+}
+:host(:not([fill=clear]):hover),
+:host(:not([fill=clear]):focus),	
+:host(:not([fill=clear]):active) {
+	border-color: rgb(var(--smoothly-color-tint)) !important;
+	background: rgb(var(--smoothly-color-tint)) !important;
+}
+:host(:not([fill=clear]):hover) > button,
+:host(:not([fill=clear]):focus) > button,
+:host(:not([fill=clear]):active) > button,
+:host(:not([fill=clear]):hover) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):focus) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):active) ::slotted(smoothly-icon) {
+	color: rgb(var(--smoothly-color-contrast)) !important;
+	stroke: rgb(var(--smoothly-color-contrast)) !important;
+	fill: rgb(var(--smoothly-color-contrast)) !important;
+}
+:host([fill=clear]:hover) > button,
+:host([fill=clear]:focus) > button,
+:host([fill=clear]:active) > button {
+	color: rgb(var(--smoothly-color-tint)) !important;
+	stroke: rgb(var(--smoothly-color-tint)) !important;
+	fill: rgb(var(--smoothly-color-tint)) !important;
+}
+:host([disabled]) {
+	opacity: 0.5;
+	pointer-events: none;
+}
+:host(:not([fill])),
+:host([fill=default]) {
+	background: rgb(var(--smoothly-color));
+	border-color: transparent;
+}
+:host([fill=solid]) {
+	background: rgb(var(--smoothly-color));
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=solid]) > button,
+:host([fill=default]) > button {
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
+	color: rgb(var(--smoothly-color-contrast));
+}
+:host([fill=outline]) > button,
+:host([fill=clear]) > button {
+	stroke: rgb(var(--smoothly-color));
+	fill: rgb(var(--smoothly-color));
+	color: rgb(var(--smoothly-color));
+}
+:host([fill=outline]) {
+	background: transparent;
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=clear]) {
+	background: transparent;
+	border-color: transparent;
+}
+::slotted(smoothly-icon[slot=start]),
+::slotted(smoothly-icon[slot=end]) {
+	font-size: 0.65em;
+}
+:host([hidden]) {
+	display: none;
+}
+
+
+:host(:not([display])) {
+	display: none;
+}
+
+:host([type="button"]) {
+	margin: 1em 0em;
+}
+
+:host([editable]){
+	opacity: 0.5;
+}
+
+:host button::slotted(smoothly-icon){
+	transform: translate(.1em, -.1em);
+}
+

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

@@ -0,0 +1,305 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyInputFile {
+  constructor() {
+    this.transfer = new DataTransfer();
+    this.dragging = false;
+    this.accept = undefined;
+    this.color = undefined;
+    this.looks = "plain";
+    this.camera = undefined;
+    this.name = undefined;
+    this.showLabel = true;
+    this.value = undefined;
+    this.placeholder = undefined;
+  }
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+  }
+  async clear() {
+    this.value = undefined;
+  }
+  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)));
+  }
+  static get is() { return "smoothly-input-file"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accept": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accept",
+        "reflect": false
+      },
+      "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
+      },
+      "looks": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
+      },
+      "camera": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"front\" | \"back\"",
+          "resolved": "\"back\" | \"front\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "camera",
+        "reflect": true
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "showLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-label",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "File",
+          "resolved": "File | undefined",
+          "references": {
+            "File": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dragging": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyInputLooks",
+        "name": "smoothlyInputLooks",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(looks: Looks, color: Color) => void",
+          "resolved": "(looks: \"line\" | \"grid\" | \"plain\" | \"border\" | \"transparent\", color: \"success\" | \"default\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | \"danger\" | \"light\" | \"medium\" | \"dark\") => void",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            },
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Record<string, File>",
+          "resolved": "{ [x: string]: File; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            },
+            "File": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyChange",
+        "name": "smoothlyChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Record<string, File>",
+          "resolved": "{ [x: string]: File; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            },
+            "File": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,107 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
+
+
+:host {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+	padding-left: 0.4rem;
+		background-color: rgb(var(--background-color,var(--smoothly-color-shade)))
+}
+.mask {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgb(var(--text-color ,var(--smoothly-color-contrast)), 0.3);
+}
+
+:host:not(.dragging) .mask {
+	display: none;
+}
+input {
+	overflow: hidden;
+	height: 0;
+	width: 0;
+	padding:0
+}
+.input {
+	display: flex;
+	align-items:center;
+	padding-left: 0.4rem;
+	padding-bottom: 0.2rem;
+}
+smoothly-button {
+	margin: 0;
+	border: none;
+}
+label {
+	padding-left: 0.4rem;
+	padding-top: 0.4rem;
+	display: flex;
+	width: 100%;
+	align-items: baseline;
+	justify-content: flex-start;
+	color: rgb(var(--text-color, var(--smoothly-color-contrast)));
+	cursor: inherit;
+
+}
+label::slotted(*) {
+	display: block;
+	width: 100%;
+	font-size: 0.65em;
+	opacity: 0.8;
+}
+:host:not([show-label]) label {
+	display: none;
+}
+smoothly-icon {
+	display: none;
+	position: absolute;
+	right: 0.2em;
+	top: 0.6em;
+}
+span {
+	cursor: pointer;
+	padding-left: 0.5rem;
+}