smoothly 1.72.0 → 1.74.0

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

@@ -9098,7 +9098,7 @@ const SmoothlyFrame = class {
 };
 SmoothlyFrame.style = SmoothlyFrameStyle0;
 
-const styleCss$Y = "[fill].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{--smoothly-icon-size:1.2em}[size=small].sc-smoothly-icon-h{--smoothly-icon-size:1.4em}[size=medium].sc-smoothly-icon-h{--smoothly-icon-size:1.8em}[size=large].sc-smoothly-icon-h{--smoothly-icon-size:2.8em}[size=xlarge].sc-smoothly-icon-h{--smoothly-icon-size:4em}.sc-smoothly-icon-h{width:var(--smoothly-icon-size, 1.8em);height:var(--smoothly-icon-size, 1.8em)}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
+const styleCss$Y = "[fill].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:content-box}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{--smoothly-icon-size:1.2em}[size=small].sc-smoothly-icon-h{--smoothly-icon-size:1.4em}[size=medium].sc-smoothly-icon-h{--smoothly-icon-size:1.8em}[size=large].sc-smoothly-icon-h{--smoothly-icon-size:2.8em}[size=xlarge].sc-smoothly-icon-h{--smoothly-icon-size:4em}.sc-smoothly-icon-h{width:var(--smoothly-icon-size, 1.8em);height:var(--smoothly-icon-size, 1.8em)}.sc-smoothly-icon-h.sc-smoothly-icon-s>svg{width:100%}";
 const SmoothlyIconStyle0 = styleCss$Y;
 
 const SmoothlyIcon = class {
@@ -9571,6 +9571,7 @@ const SmoothlyInput = class {
                 break;
         }
         this.state = this.stateHandler.initialState((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.state) === null || _b === void 0 ? void 0 : _b.value);
+        this.inputElement && (this.state = this.stateHandler.setValue(this.inputElement, this.state, this.value));
     }
     stateChange() {
         const value = this.stateHandler.getValue(this.state);
@@ -9617,7 +9618,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '6d20a9bb70a342e7a09879e61fd826448747fb34', 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: 'aaaa87666cf2c318eb0cf5a8a2b8df897b2f5d3d', name: "start" }), index.h("div", { key: 'ffa189d0c2312eede65a0ba0adb10e189a59d91c', class: "smoothly-input-container" }, index.h("div", { key: 'b968632b22fa137d485a6410f9a082c581eb0941', class: "guide" }, index.h("div", { key: '395d499fbfab5a9dd4ba70f28ab3790e5a1d2201', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'f78c326ffeebf0b9be35f46506a34384c207ea33', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'be43d339ea279eee0067fb3d016a72504cd10730', 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: async (event) => {
+        return (index.h(index.Host, { key: '1504c02e41ccb51d4a77b460eef9312dc89cc6e2', 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: '3c04573eb3f0d4d4557aeadd7bf5fb46999c49bd', name: "start" }), index.h("div", { key: 'd7470f23286de6eedce69cbf40cf6bcd45a84d4d', class: "smoothly-input-container" }, index.h("div", { key: 'b0b1b0d3ff66bb3e07cfad1835365b2ee91d77bd', class: "guide" }, index.h("div", { key: '2ae60ed4f2fc95717d02ee53e24a621cb4b6d9d4', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '959c18357072e8bfeadc5678055804d1157e93b7', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'be47e5c74932b40e4a72b81ceedb766c407df9ee', 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: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9632,7 +9633,7 @@ const SmoothlyInput = class {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), index.h("label", { key: '7cb7865c02d3017807a09caffb2b6f551e4b01cc', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '4ff4e42a697e5b8f5b1963a73e3b1e54f654f673' }))), this.copyable && this.value && (index.h("span", { key: '8395817fc60a71dc6c2b74cd2b42e5a765841448', class: "copyable" }, index.h("small", { key: '899bc49fe53abd066d154d02c46d21bd6a0379da' }, this.copied ? "Copied!" : "Copy"), index.h("smoothly-icon", { key: '5b110c5522cc03f8e944b505197bf9eb83139fc6', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index.h("smoothly-icon", { key: 'd8b2c4248adce0440568e9fd44c712377565e7f5', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '8a3a7f7704b9073b8b9e4b82ddb20cf28730b7c8', name: "end" })));
+            } }), index.h("label", { key: '425aaa1a834f34a84281baa70be849bf33cef154', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '6f2e73b7ae197590656f28dcab0d704a00b5c3cd' }))), this.copyable && this.value && (index.h("span", { key: '4eec70effb0c227efc7873415b6727e89b875d33', class: "copyable" }, index.h("small", { key: '00ec0857d066d900f080038cd70cfc8b6c8c32ab' }, this.copied ? "Copied!" : "Copy"), index.h("smoothly-icon", { key: '440f0bb891b39792018950d9d50135b4f611aaf0', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index.h("smoothly-icon", { key: 'f59e0124afd354729822fb95809fd14d8919ef34', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: 'f07452e2793d65cad5b8b2a935ceea318182115e', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {