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

package/dist/components/smoothly-app-demo.js

@@ -16,43 +16,43 @@ import { d as defineCustomElement$1t } from './p-9ba73174.js';
 import { d as defineCustomElement$1s } from './p-d8db6c83.js';
 import { d as defineCustomElement$1r } from './p-9652bc90.js';
 import { d as defineCustomElement$1q } from './p-4f89fe0a.js';
-import { d as defineCustomElement$1p } from './p-1e4b5d8f.js';
-import { d as defineCustomElement$1o } from './p-aaf83c91.js';
-import { d as defineCustomElement$1n } from './p-da906314.js';
+import { d as defineCustomElement$1p } from './p-413e4258.js';
+import { d as defineCustomElement$1o } from './p-6cdfda1e.js';
+import { d as defineCustomElement$1n } from './p-893f7863.js';
 import { d as defineCustomElement$1m } from './p-631842aa.js';
 import { d as defineCustomElement$1l } from './p-1bf5dad5.js';
 import { d as defineCustomElement$1k } from './p-be596a9e.js';
-import { d as defineCustomElement$1j } from './p-e7a4ac66.js';
-import { d as defineCustomElement$1i } from './p-4f272618.js';
-import { d as defineCustomElement$1h } from './p-6dcf3459.js';
-import { d as defineCustomElement$1g } from './p-90302295.js';
-import { d as defineCustomElement$1f } from './p-60cb135c.js';
-import { d as defineCustomElement$1e } from './p-4ec525c8.js';
-import { d as defineCustomElement$1d } from './p-a50318cd.js';
-import { d as defineCustomElement$1c } from './p-00a82884.js';
-import { d as defineCustomElement$1b } from './p-a44fd0aa.js';
-import { d as defineCustomElement$1a } from './p-609eabe7.js';
-import { d as defineCustomElement$19 } from './p-bfdbee5d.js';
+import { d as defineCustomElement$1j } from './p-c8f8c147.js';
+import { d as defineCustomElement$1i } from './p-476fd3b1.js';
+import { d as defineCustomElement$1h } from './p-005bb52a.js';
+import { d as defineCustomElement$1g } from './p-5b9429be.js';
+import { d as defineCustomElement$1f } from './p-4bef3e5b.js';
+import { d as defineCustomElement$1e } from './p-f617a56e.js';
+import { d as defineCustomElement$1d } from './p-9e69db0b.js';
+import { d as defineCustomElement$1c } from './p-20853a04.js';
+import { d as defineCustomElement$1b } from './p-f551738d.js';
+import { d as defineCustomElement$1a } from './p-9651f988.js';
+import { d as defineCustomElement$19 } from './p-cb33287e.js';
 import { d as defineCustomElement$18 } from './p-a1af56e3.js';
 import { d as defineCustomElement$17 } from './p-8a02ff30.js';
-import { d as defineCustomElement$16 } from './p-5879c0a2.js';
-import { d as defineCustomElement$15 } from './p-db41903a.js';
+import { d as defineCustomElement$16 } from './p-275491c7.js';
+import { d as defineCustomElement$15 } from './p-100d067e.js';
 import { d as defineCustomElement$14 } from './p-0e71696f.js';
 import { d as defineCustomElement$13 } from './p-2939bb2b.js';
-import { d as defineCustomElement$12 } from './p-1797be0c.js';
-import { d as defineCustomElement$11 } from './p-1e15b793.js';
-import { d as defineCustomElement$10 } from './p-fee0f359.js';
-import { d as defineCustomElement$$ } from './p-7b9bdf2a.js';
-import { d as defineCustomElement$_ } from './p-d92df881.js';
-import { d as defineCustomElement$Z } from './p-6daf3f93.js';
+import { d as defineCustomElement$12 } from './p-5f7dd700.js';
+import { d as defineCustomElement$11 } from './p-1847326a.js';
+import { d as defineCustomElement$10 } from './p-163bd817.js';
+import { d as defineCustomElement$$ } from './p-15e66616.js';
+import { d as defineCustomElement$_ } from './p-fe81e409.js';
+import { d as defineCustomElement$Z } from './p-a4df40d3.js';
 import { d as defineCustomElement$Y } from './p-e5613a72.js';
 import { d as defineCustomElement$X } from './p-b28af62c.js';
 import { d as defineCustomElement$W } from './p-4e624488.js';
-import { d as defineCustomElement$V } from './p-76fb0a4c.js';
+import { d as defineCustomElement$V } from './p-51c231f6.js';
 import { d as defineCustomElement$U } from './p-eeb1e790.js';
 import { d as defineCustomElement$T } from './p-4433b27b.js';
-import { d as defineCustomElement$S } from './p-4bccb4ee.js';
-import { d as defineCustomElement$R } from './p-99ead2c5.js';
+import { d as defineCustomElement$S } from './p-d19b3503.js';
+import { d as defineCustomElement$R } from './p-1729ec54.js';
 import { d as defineCustomElement$Q } from './p-582e4f8c.js';
 import { d as defineCustomElement$P } from './p-3e87d17f.js';
 import { d as defineCustomElement$O } from './p-0a7ea113.js';
@@ -60,7 +60,7 @@ import { d as defineCustomElement$N } from './p-9c14be4b.js';
 import { d as defineCustomElement$M } from './p-1964f713.js';
 import { d as defineCustomElement$L } from './p-6c77cd6c.js';
 import { d as defineCustomElement$K } from './p-bd99d7e0.js';
-import { d as defineCustomElement$J } from './p-4fb88136.js';
+import { d as defineCustomElement$J } from './p-f029915f.js';
 import { d as defineCustomElement$I } from './p-8bd61cb0.js';
 import { d as defineCustomElement$H } from './p-7ec0f9ad.js';
 import { d as defineCustomElement$G } from './p-155b35db.js';
@@ -69,7 +69,7 @@ import { d as defineCustomElement$E } from './p-8a34ee77.js';
 import { d as defineCustomElement$D } from './p-fea68b4b.js';
 import { d as defineCustomElement$C } from './p-38829eed.js';
 import { d as defineCustomElement$B } from './p-29cf2133.js';
-import { d as defineCustomElement$A } from './p-23654b8b.js';
+import { d as defineCustomElement$A } from './p-2b3e3dd5.js';
 import { d as defineCustomElement$z } from './p-e55d0b9e.js';
 import { d as defineCustomElement$y } from './p-0b5ca4eb.js';
 import { d as defineCustomElement$x } from './p-5733b8ef.js';
@@ -84,14 +84,14 @@ import { d as defineCustomElement$p } from './p-a78942e6.js';
 import { d as defineCustomElement$o } from './p-4c3b2014.js';
 import { d as defineCustomElement$n } from './p-56fd5598.js';
 import { d as defineCustomElement$m } from './p-532aa5fd.js';
-import { d as defineCustomElement$l } from './p-8acdd8d0.js';
-import { d as defineCustomElement$k } from './p-bd9c50fe.js';
+import { d as defineCustomElement$l } from './p-31af2db0.js';
+import { d as defineCustomElement$k } from './p-3765cc07.js';
 import { d as defineCustomElement$j } from './p-608a35ca.js';
 import { d as defineCustomElement$i } from './p-9661e3e2.js';
 import { d as defineCustomElement$h } from './p-d4d6503f.js';
 import { d as defineCustomElement$g } from './p-c9b98b2c.js';
 import { d as defineCustomElement$f } from './p-f4ad0c7e.js';
-import { d as defineCustomElement$e } from './p-fa44b695.js';
+import { d as defineCustomElement$e } from './p-bc953568.js';
 import { d as defineCustomElement$d } from './p-53681ab6.js';
 import { d as defineCustomElement$c } from './p-a1ec2a51.js';
 import { d as defineCustomElement$b } from './p-cb7811d5.js';

package/dist/components/smoothly-filter-field.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFilterField$1, d as defineCustomElement$1 } from './p-aaf83c91.js';
+import { S as SmoothlyFilterField$1, d as defineCustomElement$1 } from './p-6cdfda1e.js';
 
 const SmoothlyFilterField = SmoothlyFilterField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-filter-input.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFilterInput$1, d as defineCustomElement$1 } from './p-da906314.js';
+import { S as SmoothlyFilterInput$1, d as defineCustomElement$1 } from './p-893f7863.js';
 
 const SmoothlyFilterInput = SmoothlyFilterInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-filter.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFilter$1, d as defineCustomElement$1 } from './p-1e4b5d8f.js';
+import { S as SmoothlyFilter$1, d as defineCustomElement$1 } from './p-413e4258.js';
 
 const SmoothlyFilter = SmoothlyFilter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-all.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoAll$1, d as defineCustomElement$1 } from './p-4f272618.js';
+import { S as SmoothlyFormDemoAll$1, d as defineCustomElement$1 } from './p-476fd3b1.js';
 
 const SmoothlyFormDemoAll = SmoothlyFormDemoAll$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-card.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoCard$1, d as defineCustomElement$1 } from './p-6dcf3459.js';
+import { S as SmoothlyFormDemoCard$1, d as defineCustomElement$1 } from './p-005bb52a.js';
 
 const SmoothlyFormDemoCard = SmoothlyFormDemoCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-controlled.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoControlled$1, d as defineCustomElement$1 } from './p-90302295.js';
+import { S as SmoothlyFormDemoControlled$1, d as defineCustomElement$1 } from './p-5b9429be.js';
 
 const SmoothlyFormDemoControlled = SmoothlyFormDemoControlled$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-date-range.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoDateRange$1, d as defineCustomElement$1 } from './p-4ec525c8.js';
+import { S as SmoothlyFormDemoDateRange$1, d as defineCustomElement$1 } from './p-f617a56e.js';
 
 const SmoothlyFormDemoDateRange = SmoothlyFormDemoDateRange$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-date.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoDate$1, d as defineCustomElement$1 } from './p-60cb135c.js';
+import { S as SmoothlyFormDemoDate$1, d as defineCustomElement$1 } from './p-4bef3e5b.js';
 
 const SmoothlyFormDemoDate = SmoothlyFormDemoDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-login.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoLogin$1, d as defineCustomElement$1 } from './p-a50318cd.js';
+import { S as SmoothlyFormDemoLogin$1, d as defineCustomElement$1 } from './p-9e69db0b.js';
 
 const SmoothlyFormDemoLogin = SmoothlyFormDemoLogin$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-pet.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoPet$1, d as defineCustomElement$1 } from './p-00a82884.js';
+import { S as SmoothlyFormDemoPet$1, d as defineCustomElement$1 } from './p-20853a04.js';
 
 const SmoothlyFormDemoPet = SmoothlyFormDemoPet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-prices.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoPrices$1, d as defineCustomElement$1 } from './p-a44fd0aa.js';
+import { S as SmoothlyFormDemoPrices$1, d as defineCustomElement$1 } from './p-f551738d.js';
 
 const SmoothlyFormDemoPrices = SmoothlyFormDemoPrices$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-transparent.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoTransparent$1, d as defineCustomElement$1 } from './p-609eabe7.js';
+import { S as SmoothlyFormDemoTransparent$1, d as defineCustomElement$1 } from './p-9651f988.js';
 
 const SmoothlyFormDemoTransparent = SmoothlyFormDemoTransparent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo-typed.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemoTyped$1, d as defineCustomElement$1 } from './p-bfdbee5d.js';
+import { S as SmoothlyFormDemoTyped$1, d as defineCustomElement$1 } from './p-cb33287e.js';
 
 const SmoothlyFormDemoTyped = SmoothlyFormDemoTyped$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-form-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyFormDemo$1, d as defineCustomElement$1 } from './p-e7a4ac66.js';
+import { S as SmoothlyFormDemo$1, d as defineCustomElement$1 } from './p-c8f8c147.js';
 
 const SmoothlyFormDemo = SmoothlyFormDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-icon-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyIconDemo$1, d as defineCustomElement$1 } from './p-5879c0a2.js';
+import { S as SmoothlyIconDemo$1, d as defineCustomElement$1 } from './p-275491c7.js';
 
 const SmoothlyIconDemo = SmoothlyIconDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-checkbox-demo.js

@@ -10,18 +10,18 @@ import { d as defineCustomElement$n } from './p-9652bc90.js';
 import { d as defineCustomElement$m } from './p-4f89fe0a.js';
 import { d as defineCustomElement$l } from './p-be596a9e.js';
 import { d as defineCustomElement$k } from './p-8a02ff30.js';
-import { d as defineCustomElement$j } from './p-db41903a.js';
+import { d as defineCustomElement$j } from './p-100d067e.js';
 import { d as defineCustomElement$i } from './p-0e71696f.js';
 import { d as defineCustomElement$h } from './p-2939bb2b.js';
-import { d as defineCustomElement$g } from './p-1797be0c.js';
-import { d as defineCustomElement$f } from './p-fee0f359.js';
-import { d as defineCustomElement$e } from './p-7b9bdf2a.js';
+import { d as defineCustomElement$g } from './p-5f7dd700.js';
+import { d as defineCustomElement$f } from './p-163bd817.js';
+import { d as defineCustomElement$e } from './p-15e66616.js';
 import { d as defineCustomElement$d } from './p-e5613a72.js';
 import { d as defineCustomElement$c } from './p-b28af62c.js';
 import { d as defineCustomElement$b } from './p-4e624488.js';
 import { d as defineCustomElement$a } from './p-eeb1e790.js';
 import { d as defineCustomElement$9 } from './p-4433b27b.js';
-import { d as defineCustomElement$8 } from './p-4bccb4ee.js';
+import { d as defineCustomElement$8 } from './p-d19b3503.js';
 import { d as defineCustomElement$7 } from './p-582e4f8c.js';
 import { d as defineCustomElement$6 } from './p-3e87d17f.js';
 import { d as defineCustomElement$5 } from './p-0a7ea113.js';

package/dist/components/smoothly-input-color-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputColorDemo$1, d as defineCustomElement$1 } from './p-1e15b793.js';
+import { S as SmoothlyInputColorDemo$1, d as defineCustomElement$1 } from './p-1847326a.js';
 
 const SmoothlyInputColorDemo = SmoothlyInputColorDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-color.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputColor$1, d as defineCustomElement$1 } from './p-1797be0c.js';
+import { S as SmoothlyInputColor$1, d as defineCustomElement$1 } from './p-5f7dd700.js';
 
 const SmoothlyInputColor = SmoothlyInputColor$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-date-range.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputDateRange$1, d as defineCustomElement$1 } from './p-7b9bdf2a.js';
+import { S as SmoothlyInputDateRange$1, d as defineCustomElement$1 } from './p-15e66616.js';
 
 const SmoothlyInputDateRange = SmoothlyInputDateRange$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-date.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputDate$1, d as defineCustomElement$1 } from './p-fee0f359.js';
+import { S as SmoothlyInputDate$1, d as defineCustomElement$1 } from './p-163bd817.js';
 
 const SmoothlyInputDate = SmoothlyInputDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-demo-standard.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputDemoStandard$1, d as defineCustomElement$1 } from './p-6daf3f93.js';
+import { S as SmoothlyInputDemoStandard$1, d as defineCustomElement$1 } from './p-a4df40d3.js';
 
 const SmoothlyInputDemoStandard = SmoothlyInputDemoStandard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputDemo$1, d as defineCustomElement$1 } from './p-d92df881.js';
+import { S as SmoothlyInputDemo$1, d as defineCustomElement$1 } from './p-fe81e409.js';
 
 const SmoothlyInputDemo = SmoothlyInputDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-price-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputPriceDemo$1, d as defineCustomElement$1 } from './p-76fb0a4c.js';
+import { S as SmoothlyInputPriceDemo$1, d as defineCustomElement$1 } from './p-51c231f6.js';
 
 const SmoothlyInputPriceDemo = SmoothlyInputPriceDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-range-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputRangeDemo$1, d as defineCustomElement$1 } from './p-99ead2c5.js';
+import { S as SmoothlyInputRangeDemo$1, d as defineCustomElement$1 } from './p-1729ec54.js';
 
 const SmoothlyInputRangeDemo = SmoothlyInputRangeDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input-range.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInputRange$1, d as defineCustomElement$1 } from './p-4bccb4ee.js';
+import { S as SmoothlyInputRange$1, d as defineCustomElement$1 } from './p-d19b3503.js';
 
 const SmoothlyInputRange = SmoothlyInputRange$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-input.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyInput$1, d as defineCustomElement$1 } from './p-db41903a.js';
+import { S as SmoothlyInput$1, d as defineCustomElement$1 } from './p-100d067e.js';
 
 const SmoothlyInput = SmoothlyInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-next-demo.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyNextDemo$1, d as defineCustomElement$1 } from './p-4fb88136.js';
+import { S as SmoothlyNextDemo$1, d as defineCustomElement$1 } from './p-f029915f.js';
 
 const SmoothlyNextDemo = SmoothlyNextDemo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-next-table-demo-filtered.js

@@ -1,4 +1,4 @@
-import { T as TableDemoFiltered, d as defineCustomElement$1 } from './p-23654b8b.js';
+import { T as TableDemoFiltered, d as defineCustomElement$1 } from './p-2b3e3dd5.js';
 
 const SmoothlyNextTableDemoFiltered = TableDemoFiltered;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-table-demo-filtered.js

@@ -1,4 +1,4 @@
-import { T as TableDemoFiltered, d as defineCustomElement$1 } from './p-bd9c50fe.js';
+import { T as TableDemoFiltered, d as defineCustomElement$1 } from './p-3765cc07.js';
 
 const SmoothlyTableDemoFiltered = TableDemoFiltered;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-table-demo.js

@@ -1,4 +1,4 @@
-import { T as TableDemo, d as defineCustomElement$1 } from './p-8acdd8d0.js';
+import { T as TableDemo, d as defineCustomElement$1 } from './p-31af2db0.js';
 
 const SmoothlyTableDemo = TableDemo;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/smoothly-table-testing.js

@@ -1,4 +1,4 @@
-import { S as SmoothlyTableTesting$1, d as defineCustomElement$1 } from './p-fa44b695.js';
+import { S as SmoothlyTableTesting$1, d as defineCustomElement$1 } from './p-bc953568.js';
 
 const SmoothlyTableTesting = SmoothlyTableTesting$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -9040,18 +9040,20 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(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(); } }, h("slot", { key: '38825442b4f5c7853c4c41295d2b6b467100b822', name: "start" }), h("div", { key: '68fce946c08fc319c6d86d792f47991c25d40877' }, h("div", { key: '34309b2e7afdc17cdc33030b9fcff946e0363243', class: "ghost" }, h("div", { key: '44a442387af514de45508fac3f857990e8ec5be6', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '45564be02e80bd749ed8506e5534c3cda41814ff', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), 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 (h(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(); } }, h("slot", { key: '38825442b4f5c7853c4c41295d2b6b467100b822', name: "start" }), h("div", { key: '68fce946c08fc319c6d86d792f47991c25d40877' }, h("div", { key: '34309b2e7afdc17cdc33030b9fcff946e0363243', class: "ghost" }, h("div", { key: '44a442387af514de45508fac3f857990e8ec5be6', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '45564be02e80bd749ed8506e5534c3cda41814ff', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), 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) });
-            } }), h("label", { key: 'fe6e3f12d440020fdc731b2bc493b4de329b8ff5', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'b4afeb0ea0973a4f96c2d15384e8f8ccbe0e3a47' })), h("smoothly-icon", { key: 'e8da321b86bcb43292716c2e958ae356e14269a7', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), 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) });
+                }
+            } }), h("label", { key: '0866c91d37625c3f302079e1197568837df73eba', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'a35198bb124977075f6f215b58b0529ceab6eb8f' })), h("smoothly-icon", { key: 'eaed09aac882d68b2a0edacb875235c77652fe17', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: '5ddb19945b1cf2130565eb431da972c79e87e00f', name: "end" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {