smoothly 1.0.0-alpha.98 → 1.0.0

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

@@ -0,0 +1,249 @@
+import { h, Host } from "@stencil/core";
+import { Button } from "../../Button";
+import { Editable } from "../Editable";
+export class SmoothlyInputEdit {
+  constructor() {
+    this.color = "tertiary";
+    this.expand = undefined;
+    this.fill = undefined;
+    this.disabled = false;
+    this.display = true;
+    this.shape = undefined;
+    this.type = "button";
+    this.size = undefined;
+    this.toolTip = "Edit";
+  }
+  componentWillLoad() {
+    this.smoothlyInputLoad.emit(parent => {
+      if (Editable.type.is(parent)) {
+        this.parent = parent;
+        parent.listen("changed", async (p) => {
+          this.display = p.readonly;
+        });
+      }
+    });
+  }
+  clickHandler() {
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.edit(true);
+  }
+  render() {
+    return (h(Host, { title: this.toolTip }, h(Button, { disabled: this.disabled, type: "button" }, h("smoothly-icon", { class: "default", name: "create-outline", fill: "solid", size: "tiny" }))));
+  }
+  static get is() { return "smoothly-input-edit"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "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,
+        "defaultValue": "\"tertiary\""
+      },
+      "expand": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"block\" | \"full\"",
+          "resolved": "\"block\" | \"full\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expand",
+        "reflect": true
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fill",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"link\" | \"button\"",
+          "resolved": "\"button\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"flexible\" | \"small\" | \"large\" | \"icon\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "toolTip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tool-tip",
+        "reflect": false,
+        "defaultValue": "\"Edit\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/edit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAS,MAAM,eAAe,CAAA;AAE/G,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAOtC,MAAM,OAAO,iBAAiB;;iBAEY,UAAU;;;oBAGA,KAAK;mBACN,IAAI;;gBAEH,QAAQ;;mBAEzC,MAAM;;EAExB,iBAAiB;IAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;UAClC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAA;QAC1B,CAAC,CAAC,CAAA;OACF;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAA;EACxB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO;MACxB,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ;QAC7C,qBAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,CACxE,CACH,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Listen, Prop, VNode } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Button } from \"../../Button\"\nimport { Editable } from \"../Editable\"\n\n@Component({\n\ttag: \"smoothly-input-edit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputEdit implements ComponentWillLoad {\n\tprivate parent?: Editable\n\t@Prop({ reflect: true }) color?: Color = \"tertiary\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = true\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Prop() toolTip = \"Edit\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\tthis.display = p.readonly\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.edit(true)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host title={this.toolTip}>\n\t\t\t\t<Button disabled={this.disabled} type=\"button\">\n\t\t\t\t\t<smoothly-icon class=\"default\" name=\"create-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t</Button>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,238 @@
+[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([editable]){
+	opacity: 0.5;
+}
+
+:host smoothly-icon.default {
+	transform: translate(.1em, -.1em);
+}
+
+:host::slotted(button > * > * + smoothly-icon) {
+	display: none;
+}

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

@@ -20,7 +20,7 @@ export class SmoothlyInputFile {
   }
   render() {
     var _a, _b, _c;
-    return (h(Host, { class: { dragging: this.dragging }, 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 => {
+    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(),
@@ -97,7 +97,7 @@ export class SmoothlyInputFile {
         "mutable": true,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -223,7 +223,7 @@ export class SmoothlyInputFile {
         },
         "complexType": {
           "original": "(looks: Looks, color: Color) => void",
-          "resolved": "(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",

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":"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","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\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 { 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

@@ -5,14 +5,36 @@
 :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 {