smoothly 1.0.1-alpha.8 → 1.1.0

package/dist/custom-elements/index.js

@@ -33377,11 +33377,15 @@ var Editable;
       reset: islyFunction(),
       setInitialValue: islyFunction(),
     });
+    Element.is = Element.type.is;
   })(Element = Editable.Element || (Editable.Element = {}));
+  const EventEmitter = object({ emit: islyFunction() });
   Editable.type = Element.type.extend({
     changed: boolean(),
     value: any().optional(),
+    smoothlyFormDisable: EventEmitter,
   });
+  Editable.is = Editable.type.is;
 })(Editable || (Editable = {}));
 
 var Looks;
@@ -33400,11 +33404,13 @@ var Input;
       color: Color$1.type.optional(),
       name: string(),
       looks: Looks.type,
+      binary: islyFunction().optional(),
     });
     Element.is = Element.type.is;
   })(Element = Input.Element || (Input.Element = {}));
   const EventEmitter = object({ emit: islyFunction() });
   Input.type = Element.type.extend({
+    smoothlyInputLoad: EventEmitter,
     smoothlyInput: EventEmitter,
     smoothlyInputForm: EventEmitter.optional(),
   });
@@ -33417,12 +33423,14 @@ const SmoothlyForm$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.smoothlyFormDisable = createEvent(this, "smoothlyFormDisable", 7);
     this.smoothlyFormInput = createEvent(this, "smoothlyFormInput", 7);
     this.smoothlyFormSubmit = createEvent(this, "smoothlyFormSubmit", 7);
     this.smoothlyFormReset = createEvent(this, "smoothlyFormReset", 7);
     this.smoothlyFormEdit = createEvent(this, "smoothlyFormEdit", 7);
     this.smoothlyFormClear = createEvent(this, "smoothlyFormClear", 7);
     this.notice = createEvent(this, "notice", 7);
+    this.contentType = "json";
     this.inputs = new Map();
     this.readonlyAtLoad = this.readonly;
     this.listeners = {};
@@ -33437,6 +33445,9 @@ const SmoothlyForm$1 = class extends HTMLElement {
     this.changed = false;
     this.processing = undefined;
   }
+  componentWillLoad() {
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+  }
   async listen(property, listener) {
     var _a;
     var _b;
@@ -33466,9 +33477,12 @@ const SmoothlyForm$1 = class extends HTMLElement {
     this.action && event.stopPropagation();
   }
   async smoothlyInputLoadHandler(event) {
+    var _a, _b;
     event.stopPropagation();
     event.detail(this);
     if (Input.Element.is(event.target)) {
+      if (await ((_b = (_a = event.target).binary) === null || _b === void 0 ? void 0 : _b.call(_a)))
+        this.contentType = "form-data";
       this.value = Data.merge(this.value, { [event.target.name]: event.target.value });
       this.inputs.set(event.target.name, event.target);
     }
@@ -33494,7 +33508,10 @@ const SmoothlyForm$1 = class extends HTMLElement {
                   : "GET";
           const response = await fetch(Request.create(method == "GET"
             ? { method, url: `${action}?${stringify(this.value)}` }
-            : Object.assign({ method, url: action }, (this.value && { header: { contentType: "application/json" }, body: this.value }))))
+            : Object.assign({ method, url: action }, (this.value && {
+              header: { contentType: this.contentType ? "multipart/form-data" : "application/json" },
+              body: this.value,
+            }))))
             .catch(() => undefined);
           const result = !response || (response === null || response === void 0 ? void 0 : response.status) < 200 || response.status >= 300
             ? [false, "Failed to submit form."]
@@ -34599,6 +34616,7 @@ const InputDate = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.smoothlyInputLoad = createEvent(this, "smoothlyInputLoad", 7);
     this.smoothlyValueChange = createEvent(this, "smoothlyValueChange", 7);
     this.smoothlyInput = createEvent(this, "smoothlyInput", 7);
     this.smoothlyInputLooks = createEvent(this, "smoothlyInputLooks", 7);
@@ -34613,6 +34631,7 @@ const InputDate = class extends HTMLElement {
     this.disabled = undefined;
   }
   componentWillLoad() {
+    this.smoothlyInputLoad.emit(() => { });
     this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
   }
   async clear() {
@@ -34662,6 +34681,7 @@ const InputDateRange = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.smoothlyInputLoad = createEvent(this, "smoothlyInputLoad", 7);
     this.smoothlyValueChange = createEvent(this, "smoothlyValueChange", 7);
     this.smoothlyInput = createEvent(this, "smoothlyInput", 7);
     this.smoothlyInputLooks = createEvent(this, "smoothlyInputLooks", 7);
@@ -34683,6 +34703,7 @@ const InputDateRange = class extends HTMLElement {
     this.end = undefined;
   }
   componentWillLoad() {
+    this.smoothlyInputLoad.emit(() => { });
     this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
     if (this.start && this.end)
       this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } });
@@ -34732,7 +34753,7 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
     this.duration = { hours: 8 };
   }
   render() {
-    return (h(Host, null, h("h2", null, "Controlled form"), h("smoothly-input-demo-controlled-form", null), h("h2", null, "Create form defaulting type"), h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with clear button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+    return (h(Host, null, h("h2", null, "Controlled form"), h("smoothly-input-demo-controlled-form", null), h("h2", null, "Create form defaulting type"), h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with clear button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December"), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-file", { name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { slot: "label" }, "Profile"), h("smoothly-icon", { slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
         const duration = e.detail.duration;
         console.log("event duration", duration);
         this.duration = duration;
@@ -34828,7 +34849,7 @@ const SmoothlyInputEdit$1 = class extends HTMLElement {
   static get style() { return styleCss$O; }
 };
 
-const styleCss$N = ".sc-smoothly-input-file-h{box-sizing:border-box}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-file-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-file-h[looks=\"grid\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-file-h{border:none}[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within) input.sc-smoothly-input-file{background:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-file-h{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.sc-smoothly-input-file{position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgb(var(--text-color ,var(--smoothly-color-contrast)), 0.3)}.sc-smoothly-input-file-h:not(.dragging) .mask.sc-smoothly-input-file{display:none}input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}.input.sc-smoothly-input-file{display:flex;align-items:center;padding-left:0.4rem;padding-bottom:0.2rem}smoothly-button.sc-smoothly-input-file{margin:0;border:none}label.sc-smoothly-input-file{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.sc-smoothly-input-file-s>*{display:block;width:100%;font-size:0.65em;opacity:0.8}.sc-smoothly-input-file-h:not([show-label]) label.sc-smoothly-input-file{display:none}smoothly-icon.sc-smoothly-input-file{display:none;position:absolute;right:0.2em;top:0.6em}span.sc-smoothly-input-file{cursor:pointer;padding-left:0.5rem}";
+const styleCss$N = ".sc-smoothly-input-file-h{box-sizing:border-box}.sc-smoothly-input-file-h[looks=\"border\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-file-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-file-h[looks=\"line\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-file-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-file-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-file-h[looks=\"grid\"].sc-smoothly-input-file-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-file-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-file-h{border:none}[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:not(:focus-within) input.sc-smoothly-input-file{background:transparent}[looks=\"transparent\"].sc-smoothly-input-file-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-file-h{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.sc-smoothly-input-file{position:absolute;inset:0;background-color:rgb(var(--text-color ,var(--smoothly-color-contrast)), 0.3)}.sc-smoothly-input-file-h:not(.dragging) .mask.sc-smoothly-input-file{display:none}input.sc-smoothly-input-file{overflow:hidden;height:0;width:0;padding:0}div.input.sc-smoothly-input-file{display:flex;align-items:center;padding-bottom:0.2rem;column-gap:1ch}smoothly-button.sc-smoothly-input-file{margin:0;border:none}label.sc-smoothly-input-file{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.sc-smoothly-input-file-s>*{display:block;width:100%;font-size:0.65em;opacity:0.8}.sc-smoothly-input-file-h:not([show-label]) label.sc-smoothly-input-file{display:none}smoothly-icon.sc-smoothly-input-file{display:none;position:absolute;right:0.2em;top:0.6em}span.sc-smoothly-input-file{cursor:pointer}";
 
 const SmoothlyInputFile$1 = class extends HTMLElement {
   constructor() {
@@ -34836,9 +34857,11 @@ const SmoothlyInputFile$1 = class extends HTMLElement {
     this.__registerHost();
     this.smoothlyInputLooks = createEvent(this, "smoothlyInputLooks", 7);
     this.smoothlyInput = createEvent(this, "smoothlyInput", 7);
-    this.smoothlyChange = createEvent(this, "smoothlyChange", 7);
+    this.smoothlyInputLoad = createEvent(this, "smoothlyInputLoad", 7);
+    this.smoothlyFormDisable = createEvent(this, "smoothlyFormDisable", 7);
     this.transfer = new DataTransfer();
-    this.dragging = false;
+    this.changed = false;
+    this.readonly = false;
     this.accept = undefined;
     this.color = undefined;
     this.looks = "plain";
@@ -34847,34 +34870,82 @@ const SmoothlyInputFile$1 = class extends HTMLElement {
     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 watchers() { return {
+    "value": ["valueChanged"]
+  }; }
   static get style() { return styleCss$N; }
 };
 
@@ -37188,7 +37259,7 @@ const SmoothlyInputDateRange = /*@__PURE__*/proxyCustomElement(InputDateRange, [
 const SmoothlyInputDemo = /*@__PURE__*/proxyCustomElement(SmoothlyInputDemo$1, [0,"smoothly-input-demo",{"duration":[32]}]);
 const SmoothlyInputDemoControlledForm = /*@__PURE__*/proxyCustomElement(SmoothlyInputDemoControlledForm$1, [2,"smoothly-input-demo-controlled-form",{"name":[32]}]);
 const SmoothlyInputEdit = /*@__PURE__*/proxyCustomElement(SmoothlyInputEdit$1, [6,"smoothly-input-edit",{"color":[513],"expand":[513],"fill":[513],"disabled":[1540],"display":[1540],"shape":[513],"type":[513],"size":[513],"toolTip":[1,"tool-tip"]},[[0,"click","clickHandler"]]]);
-const SmoothlyInputFile = /*@__PURE__*/proxyCustomElement(SmoothlyInputFile$1, [6,"smoothly-input-file",{"accept":[1],"color":[1537],"looks":[1537],"camera":[513],"name":[513],"showLabel":[516,"show-label"],"value":[1040],"placeholder":[1537],"dragging":[32]}]);
+const SmoothlyInputFile = /*@__PURE__*/proxyCustomElement(SmoothlyInputFile$1, [6,"smoothly-input-file",{"changed":[1028],"readonly":[1540],"accept":[1],"color":[1537],"looks":[1537],"camera":[513],"name":[513],"showLabel":[516,"show-label"],"value":[1040],"placeholder":[1537],"dragging":[32]}]);
 const SmoothlyInputMonth = /*@__PURE__*/proxyCustomElement(MonthSelector, [2,"smoothly-input-month",{"value":[1025]}]);
 const SmoothlyInputRadio = /*@__PURE__*/proxyCustomElement(SmoothlyInputRadio$1, [6,"smoothly-input-radio",{"changed":[1028],"value":[1032],"looks":[1537],"clearable":[4],"readonly":[1540],"name":[1]},[[0,"smoothlyRadioButtonRegister","handleRegister"],[0,"smoothlyInputLoad","SmoothlyInputLoadHandler"],[0,"smoothlySelect","smoothlyRadioInputHandler"]]]);
 const SmoothlyInputRadioItem = /*@__PURE__*/proxyCustomElement(SmoothlyInputRadioItem$1, [6,"smoothly-input-radio-item",{"value":[1032],"selected":[1028],"looks":[1537],"name":[1025]}]);