smoothly 1.2.1-alpha.12 → 1.2.1-alpha.13

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

@@ -9044,18 +9044,20 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: 'c0c6e0d705065464c9a8641fb90a7eb3db1fd385', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '38825442b4f5c7853c4c41295d2b6b467100b822', name: "start" }), index.h("div", { key: '68fce946c08fc319c6d86d792f47991c25d40877' }, index.h("div", { key: '34309b2e7afdc17cdc33030b9fcff946e0363243', class: "ghost" }, index.h("div", { key: '44a442387af514de45508fac3f857990e8ec5be6', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '45564be02e80bd749ed8506e5534c3cda41814ff', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'f9c34a90ec804635155e95f6e5b8977d2a0fd74a', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (index.h(index.Host, { key: 'c0c6e0d705065464c9a8641fb90a7eb3db1fd385', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '38825442b4f5c7853c4c41295d2b6b467100b822', name: "start" }), index.h("div", { key: '68fce946c08fc319c6d86d792f47991c25d40877' }, index.h("div", { key: '34309b2e7afdc17cdc33030b9fcff946e0363243', class: "ghost" }, index.h("div", { key: '44a442387af514de45508fac3f857990e8ec5be6', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '45564be02e80bd749ed8506e5534c3cda41814ff', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '39a4f425e7b1b2be463a4e3b8ca9b1e298cb595a', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (event.key == "Enter")
                     this.smoothlyBlur.emit();
-            }, onFocus: event => (this.state = this.stateHandler.onFocus(event, this.state)), onBlur: event => {
-                const lastValue = this.stateHandler.getValue(this.state);
-                this.state = this.stateHandler.onBlur(event, this.state);
-                this.smoothlyBlur.emit();
-                this.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) });
-                if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
-                    this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
-            } }), index.h("label", { key: 'fe6e3f12d440020fdc731b2bc493b4de329b8ff5', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'b4afeb0ea0973a4f96c2d15384e8f8ccbe0e3a47' })), index.h("smoothly-icon", { key: 'e8da321b86bcb43292716c2e958ae356e14269a7', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '5c116f354c3d3737cc382c43bcdbcff37d08db7a', name: "end" })));
+            }, onFocus: event => !this.readonly && (this.state = this.stateHandler.onFocus(event, this.state)), onBlur: event => {
+                if (!this.readonly) {
+                    const lastValue = this.stateHandler.getValue(this.state);
+                    this.state = this.stateHandler.onBlur(event, this.state);
+                    this.smoothlyBlur.emit();
+                    this.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) });
+                    if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
+                        this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
+                }
+            } }), index.h("label", { key: '0866c91d37625c3f302079e1197568837df73eba', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'a35198bb124977075f6f215b58b0529ceab6eb8f' })), index.h("smoothly-icon", { key: 'eaed09aac882d68b2a0edacb875235c77652fe17', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), index.h("slot", { key: '5ddb19945b1cf2130565eb431da972c79e87e00f', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {