smoothly 1.0.0-alpha.175 → 1.0.0-alpha.176

package/dist/cjs/smoothly-app_72.cjs.entry.js

@@ -8258,7 +8258,7 @@ const SmoothlyForm = class {
     this.prevent = true;
     this.changed = false;
   }
-  listen(property, listener) {
+  listenChanged(property, listener) {
     var _a;
     var _b;
     ((_a = (_b = this.listeners)[property]) !== null && _a !== void 0 ? _a : (_b[property] = [])).push(listener);
@@ -8949,7 +8949,7 @@ const SmoothlyInput = class {
     this.initialValue = undefined;
     this.changed = false;
   }
-  listen(property, listener) {
+  listenChanged(property, listener) {
     this.listener[property] = listener;
     listener(this);
   }
@@ -8988,6 +8988,10 @@ const SmoothlyInput = class {
     this.changed = Boolean(this.value);
     (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
+  watchingReadonly() {
+    var _a, _b;
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
   onCurrency() {
     this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
   }
@@ -9168,6 +9172,7 @@ const SmoothlyInput = class {
   static get watchers() { return {
     "type": ["typeChange"],
     "value": ["valueWatcher"],
+    "readonly": ["watchingReadonly"],
     "currency": ["onCurrency"]
   }; }
 };
@@ -9218,7 +9223,7 @@ SmoothlyInputCheckbox.style = styleCss$N;
 var Changeable;
 (function (Changeable) {
   function is(value) {
-    return value && typeof value == "object" && typeof value.changed == "boolean" && typeof value.listen == "function";
+    return (value && typeof value == "object" && typeof value.changed == "boolean" && typeof value.listenChanged == "function");
   }
   Changeable.is = is;
 })(Changeable || (Changeable = {}));
@@ -9243,12 +9248,20 @@ const SmoothlyInputClear = class {
       if (Clearable.is(parent)) {
         this.parent = parent;
         if (Changeable.is(parent))
-          parent.listen("changed", async (p) => {
+          parent.listenChanged("changed", async (p) => {
             if (p instanceof SmoothlyForm)
-              this.disabled = !p.changed;
-            if (p instanceof SmoothlyInput)
+              this.disabled = p.readonly ? true : !p.changed;
+            if (p instanceof SmoothlyInput) {
               this.display = p.changed;
+              this.disabled = p.readonly ? true : !p.changed;
+            }
           });
+        if (Editable.type.is(parent)) {
+          parent.listenReadonly &&
+            parent.listenReadonly("readonly", async (p) => {
+              this.disabled = p.readonly;
+            });
+        }
       }
     });
   }
@@ -9451,7 +9464,7 @@ const SmoothlyInputDemo = class {
     console.log("smoothlyInput", event.detail);
   }
   render() {
-    return (index.h(index.Host, null, index.h("h2", null, "Editable form and Input"), index.h("smoothly-form", { looks: "grid", readonly: true }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name"), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone"), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "create-outline", fill: "solid" }))), index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+    return (index.h(index.Host, null, index.h("h2", null, "Editable form and Input"), index.h("smoothly-form", { looks: "grid", readonly: true }, index.h("smoothly-input", { name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone"), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "create-outline", fill: "solid" })), index.h("smoothly-input-clear", { fill: "default", type: "form", color: "danger", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "trash-outline", fill: "solid" }))), index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.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;