smoothly 1.69.0 → 1.71.0

package/dist/collection/components/form/demo/date/index.js

@@ -21,7 +21,7 @@ export class SmoothlyFormDemoDate {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: 'a7ff36f62518b4048172171f29a71f9e4a2d9027' }, h("h2", { key: '30beb481a7eb4db9e5ae73dc5ae239dab5cb7343' }, "Date input"), h("smoothly-form", { key: 'b22a7500f6582da40291cfe024a5f5167a4d97ab', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: '949c52817e6f094f11dcc069c419e8a3913039b7', name: "date" }, "Date"), h("smoothly-input-submit", { key: 'dc03efa9c5a058cbba0edea9bedca866f4fca73d', slot: "submit" }, h("smoothly-icon", { key: '9552bcdec6a26d354dcde5f40c57058da3716c71', name: "checkmark-outline" })))));
+        return (h(Host, { key: 'adefda2f6f0d537082d10f63ebd53a0497a7ca82' }, h("h2", { key: 'cf57f578f2caf3001c3ab14ce1b12eee3a8e7f74' }, "Date input"), h("smoothly-form", { key: '220ef96f2cef2e4526871b4dd7cae3736ffc3aa6', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: '37a21d5d8b094ba14ce80f2b521989927b40bffa', name: "date" }, "Date"), h("smoothly-input-submit", { key: '082d7a7369455a651bce813da2aab843df891835', slot: "submit" }, h("smoothly-icon", { key: '01fdc733a2a2ec49589658981ce32183dd6fcb75', name: "checkmark-outline" })))));
     }
     static get is() { return "smoothly-form-demo-date"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/date-range/index.js

@@ -21,7 +21,7 @@ export class SmoothlyFormDemoDateRange {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: 'cbbd77825d662b77222ca21cbdaffbf7debab06e' }, h("h2", { key: '98fb31c3069258339a902a42c0e3631610e9f903' }, "Date-range input"), h("smoothly-form", { key: 'fb4b3384f1a629a34139bbd74df099d042c77ce9', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: 'e2d04fee4b02c801fd334b2a6e76db1740120dd1', name: "range" }, "Range"), h("smoothly-input-submit", { key: '2c8b6bb50ed92c63250dc597b37d48610a5c8bf8', slot: "submit" }, h("smoothly-icon", { key: '774874497d34c6d553395c992a4ca9f305deb89b', name: "checkmark-outline" })))));
+        return (h(Host, { key: '7070cc781370699e35f5c90f89ddd0d2c1e08132' }, h("h2", { key: '44687d1177ddbaf97523e92067c4ad7b680b5bd9' }, "Date-range input"), h("smoothly-form", { key: '8a0df7c1c746e592b40a2c4422755e001d3a516f', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: 'a71548e2febc7dc65fb69125fa9200c0a061c384', name: "range" }, "Range"), h("smoothly-input-submit", { key: 'f0a37a386880bd34a13644093a1cc6256d0e5a64', slot: "submit" }, h("smoothly-icon", { key: 'bf0dec6f422116ecea2a42b1b057c6e2a412a105', name: "checkmark-outline" })))));
     }
     static get is() { return "smoothly-form-demo-date-range"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemo {
     render() {
-        return (h(Host, { key: 'a35ea2be54c7330f3e7c2d7f64c4579ed48b70ff' }, h("div", { key: '22fc32244417a20b0f3ba0d598bca7e15e6d4e66' }, h("smoothly-form-demo-all", { key: 'adb4582761d66be87de85d38334d0644fb10726d' }), h("smoothly-form-demo-pet", { key: 'ebed70d483e430772a04677c2549df2cff841fa2' }), h("smoothly-form-demo-card", { key: '05ee0b54fc2db3ddf7925c8bf3a0bd33ee7a7cc6' }), h("smoothly-form-demo-login", { key: '63755550a7b44c55c2c07ab0111bec145204b814' }), h("smoothly-form-demo-prices", { key: '2bb04e58340156e5741cdc8aadfb7f4db7723af6' }), h("smoothly-form-demo-typed", { key: 'ed385a174f6e84031a85ba5f5339251b91e18b0b' }), h("smoothly-form-demo-transparent", { key: 'bcc94e93a50e979c4f4265fb04db4237d06f0cce' }), h("smoothly-form-demo-date", { key: 'ece8bc437afc832dff509c644aaad77b431a95d8' }), h("smoothly-form-demo-schedule", { key: 'bc8859379be7fb08723bf2dc639e2ed31a510006' }), h("smoothly-form-demo-date-range", { key: 'd3f32aa95cbaa45eb43d4e48f76a43f6e1e72b14' }), h("smoothly-form-demo-controlled", { key: 'ead216008b41f31673f6c6ef1ee2cdf406a0b114' }))));
+        return (h(Host, { key: 'c520f9686d30f0f54e5a7b85a6411c7a6c4c8e26' }, h("div", { key: '218bccd1eb09e6c14499c064eb08b16acedab2b8' }, h("smoothly-form-demo-all", { key: '77aa11539755efb250357dff60c864437cbeee2d' }), h("smoothly-form-demo-pet", { key: 'd3d014e2fa8bedbcb28a74e7ae4f86eb5d8b4325' }), h("smoothly-form-demo-card", { key: '7b5483970827a684367a5ed8df45eb4dfbfacbdb' }), h("smoothly-form-demo-login", { key: 'e46120b15dc4f00622c6a3bb3608386c26978d94' }), h("smoothly-form-demo-prices", { key: '75e777d76b24702ea6e0d8d3decc634dcf204c57' }), h("smoothly-form-demo-typed", { key: 'dfe06d4d06a4d1ef32c23aba03bd880478b8f9a6' }), h("smoothly-form-demo-transparent", { key: '4e91222efb70aa23ca251cfb30158470b1077169' }), h("smoothly-form-demo-date", { key: '0b953abf55b43d5fbb4b47b5ee0e1a51000decce' }), h("smoothly-form-demo-schedule", { key: '656148a09b8131f87180451cae014ebdeffbb2dc' }), h("smoothly-form-demo-date-range", { key: '30d9a63aba3b4db8a8437e42dd0d113f3bd67186' }), h("smoothly-form-demo-controlled", { key: '5c754319261cdccce3cd7f32423ce71995acdcf8' }))));
     }
     static get is() { return "smoothly-form-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/login/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoLogin {
     render() {
-        return (h(Host, { key: 'c6c91f01f31482fcf062823cfc543834c1be3b2f' }, h("h2", { key: '24d231999ab4cb8987ade2141387fceadff1365f' }, "Login"), h("smoothly-form", { key: '647aaca0a026736546a81b80dac47d4edcb57b5e', looks: "border" }, h("smoothly-input", { key: 'c885174d4462f497e946657325da6309e889f697', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: '6bf32f5540973cd23d79cea2b2b15a6df4b425bb', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: 'b0562c687e1a025cae37c06ebbab3f5fa22983ae', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '91148f0ed411acd1dfc529a58b19074dd7182859', slot: "submit" }))));
+        return (h(Host, { key: '1e3f78829eab55a6c245870eeb74cb6c26063828' }, h("h2", { key: 'f54eed1eabb841f82de0da90b212ea6c11a2a988' }, "Login"), h("smoothly-form", { key: 'acdad38bf6530f2624b1b52d88ee0251dd7af3d3', looks: "border" }, h("smoothly-input", { key: '68d96eae8c35ac89869f20266896d008d843edf4', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: '9beab566c6f7189dfcebae7149d25be6bd2885e1', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: '851c57a3d2e2e8b42a36ba97ec3aa086959b0df3', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'dbb45b020eecfd32e532848c4e5b474030c5f1a0', slot: "submit" }))));
     }
     static get is() { return "smoothly-form-demo-login"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/pet/index.js

@@ -8,10 +8,10 @@ export class SmoothlyFormDemoPet {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '1a14984f2a97b3f2b340b42a94fe739b3cec9fe6' }, h("h2", { key: '60312704ad696adf1ebf066c2daad8f8f64e6d91' }, "Pet"), h("h3", { key: 'ab4ddbf7f875039c6af77a0c0cdfb1478cd70b49' }, "Value"), h("smoothly-form", { key: '44535b40f9a60a8da80ca3501078995d75b1ac34', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, h("smoothly-input", { key: '7467e61c97d9ad916180d9b03de6a63f10618ee1', type: "text", name: "name.first", value: "Johnny" }, "Name", h("smoothly-input-reset", { key: '414516b985468ace70cf7f98dddc418e75932c96', slot: "end" })), h("smoothly-input", { key: '6d678b788d479067730b9aaf28b777669ca68c78', type: "integer", name: "age" }, "Age (Years)"), h("smoothly-input-checkbox", { key: '7a7df991ee53a2e183be805664b81765e1798a85', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: 'fd6f58f335cd349a61d568e69537dfeb7f816567' }, h("h2", { key: 'fcccf576c54df16f5cb8a1b050def1d7456b3295' }, "Pet"), h("h3", { key: 'b1ff28871663e3d883717831eddec29a85ba0ccb' }, "Value"), h("smoothly-form", { key: 'eb882ce38ca479836483edf6d1794362e64b39df', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, h("smoothly-input", { key: '1d034f4162cfa87ff6f609add559682dd9e05cb6', type: "text", name: "name.first", value: "Johnny" }, "Name", h("smoothly-input-reset", { key: '308698375c3d928a829b7a0585b652acd7eb7125', slot: "end" })), h("smoothly-input", { key: '6332686d7d46872727ff9de8a578c3ac117149b8', type: "integer", name: "age" }, "Age (Years)"), h("smoothly-input-checkbox", { key: 'eb1f6aec65f842f22366fa844b0fda1584df0c66', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner", h("smoothly-input-reset", { key: 'fa2a7d9976a022e8f3aa15a3312a13a9202a9c44', slot: "end" })), this.hasOwner && (h(Fragment, { key: 'f742dc228707343f791ee79c05d8a69cce4c42cc' }, h("smoothly-input", { key: 'ccbd55ce1c6d5b3e1eaea126cb1c6c894f939fc2', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", h("smoothly-input-reset", { key: 'bc36d153c6f9778da3033242d8e6c3e0a05e5b08', slot: "end" })), h("smoothly-input", { key: '5585e64f1af30f13167e995220a48af383efcfc9', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), h("smoothly-input-file", { key: '895f2b9d666c31e12b7279d9ae6f78d64e62058f', name: "owner.picture" }, h("span", { key: '6e2bbabdc9f41934f51de1bb1113db82b4da4d3f', slot: "label" }, "Owner picture")), h("smoothly-input-date", { key: 'ba61887a72fc45ec7abb9017f580d87b47056e2d', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", h("smoothly-input-reset", { key: '33abcfbbffb224c90bd40f1586d0b76ff55726bc', slot: "end" })), h("smoothly-input-date-range", { key: 'f9089a4198de4b0510be31ed4228fcd353504bcb', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", h("smoothly-input-reset", { key: '6333fe44045a535ca8cb2860e1b488bd92b3b859', slot: "end" })), h("smoothly-input-range", { key: 'e4d7fb8f812f5214fee582c1cde26256981767b4', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", h("smoothly-input-reset", { key: '2df334a56b493f2b92c6fabc1cdaa19545ca58b7', slot: "end" })), h("smoothly-input-select", { key: '5ac5ac6f6ad0cb85b450052e09a587a707d23ea2', name: "owner.favoriteHat" }, h("span", { key: '93e0f032d4e059f7f3ef65b67e082727ebd6e51d', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), h("smoothly-input-reset", { key: '20baaf15a5ac7e34f51c059b032eacd294c305f8', slot: "end" })), h("smoothly-input-color", { key: 'a37557db5b9fd09a48034b74cf23db3b06186705', name: "owner.favoriteColor", value: this.owner.favoriteColor ? RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", h("smoothly-input-reset", { key: '306d19f03ef263a8993e43fa246b9c168762c24c', slot: "end" })), h("smoothly-input-radio", { key: 'eb1d8d49b1f1918f9c48895466d9d8708114b15d', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, h("span", { key: '70d91da4412d213b9551d71ca94c624eaf775c55', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'f8e1ba09bc3a8a22033a5953faf320cb56fcebb8', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), h("smoothly-summary", { key: '25ad3df973335242a5712ce5d274e1294f811268' }, h("span", { key: '4e21b9cd62f8622ab9f1e6c748023e563ba6bf01', slot: "summary" }, "Summary"), h("div", { key: '075f72e43b1b81223bedfb1381a4f575ad56e37d', slot: "content" }, h("smoothly-input", { key: '05111a5caeddfd49441cff71d5c15f86eac9b4ba', type: "price", name: "summary.price", currency: "EUR" }, "Summary Price"), h("smoothly-input-file", { key: 'ff70ef874b72e5c4d19ae5615dd13c7dde0215db', name: "summary.picture" }, h("span", { key: '14d4b9d8fffff8c3ef81688b7ad37fe229e67171', slot: "label" }, "Summary picture"), h("smoothly-input-clear", { key: 'e14e669593b085b596181d7118c35e50cb23f609', slot: "end" })), h("smoothly-input-date", { key: '90ea911cd33a6508a61c31a610d87143cb6ff761', name: "summary.birthday" }, "Summary birthday"), h("smoothly-input-date-range", { key: 'cc47f8143d3012613ab24498ca327728538a38db', name: "summary.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", h("smoothly-input-reset", { key: 'a53f80766c33e8c9e4ff1fd7fcca1db497d5d30b', slot: "end" })), h("smoothly-input-range", { key: '60d48aa97aa83faa1dba6691242733c09440af54', name: "summary.height", label: "Height" }, h("smoothly-input-reset", { key: '41c9e09c013856892e9484651b39a31f6d4883af', slot: "end" })), h("smoothly-input-select", { key: '849edae75b0b13d10ee5296a512d042c2cac4b5a', name: "summary.favoriteHat" }, h("span", { key: '93274bb5230c2c90eb940047f83e9e0096cd39fe', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-month", { key: '521db332fa3b7538075c5919e519bc6267ef0cae', name: "summary.month" }, h("span", { key: 'c43f9e1e8f0d1724d4e7501cf933a4dd7a9bb818', slot: "month-label" }, "Summary month")), h("smoothly-input-color", { key: '96a207a10dbd088b4ee14d554232d9283ccb83ab', name: "summary.color" }, "Summary Color"), h("smoothly-input-radio", { key: '2a35819d79ddf5992256c1a809732bc538f019e5', name: "summary.favoritePizza" }, h("span", { key: '097875cf9b8df300279f62bac0b893ab287c494a', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '351463c8b884c2fda62fe0c6896ff3762fc2bc78', name: "summary.hasPet" }, "Has Pet"))), h("smoothly-tabs", { key: 'f21d8025188f50c90d88004285ae4bdaf58f9550' }, h("smoothly-tab", { key: '0b20d2ba0a5627bae25afaaeecf0eacdfb431229', label: "Dog", name: "dog" }, h("smoothly-input", { key: '95039a99cdf3b50b48bbd97145b7e7fac8fc1245', type: "text", name: "dog.breed" }, "Breed"), h("smoothly-input-file", { key: '3b23f5c2a0bd8158a3e0172530198990237241a9', name: "dog.picture" }, h("span", { key: 'fdf44cabaefb27c188d44e1665d5dec77bbfa648', slot: "label" }, "Dog picture")), h("smoothly-input-date-time", { key: '2798ea0d9ca206a8f3c951a63312276ec8182228', name: "dog.lastWalk" }, "Time of last walk"), h("smoothly-input-date", { key: '6cb0a07639c19cdc465c75d3b81697e618fe1e64', name: "dog.birthday" }, "Dog birthday"), h("smoothly-input-date-range", { key: '9a69c74ed1cf929631d65556b0e8b86a6bbce694', name: "dog.dateRange" }, "Dog date range"), h("smoothly-input-select", { key: 'a2440801fc3e49e3ac117f8c01884d14817e6719', name: "dog.favoriteHat" }, h("span", { key: 'c7d7cdc296be6a4f56e4e7d51781d64bc4fc67c1', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-color", { key: 'af154907d6330f02227517a4f6afc4ebd6aa15f6', name: "dog.favoriteColor" }, "Dog's Favorite Color"), h("smoothly-input-radio", { key: 'd61665dda5034d3f7002bd2bbe668def0777066d', name: "dog.favoritePizza" }, h("span", { key: 'c98990517bca41e2a8bbb7ac7694841919a81c44', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'b78fa1698185f619cc91481d71cf8d68a8b86d25', name: "dog.hasPet" }, "Has Pet")), h("smoothly-tab", { key: '060ea6d220ddf073d0a079ff01dc52b56df0c4a7', label: "Cat", name: "cat", open: true }, h("smoothly-input", { key: 'd4550600d6de955ea727fd29cb7e0faeeedbfeb5', name: "cat.favoriteFood" }, "Favorite Food"))), h("smoothly-input-submit", { key: '0167cb1929d52729ff2fb329954674afe8a60e7a', size: "icon", slot: "submit", color: "success", fill: "solid" })), h("smoothly-display", { key: '6d70957cf7561c2eb092fa035c20942a91d022ee', type: "json", value: this.value })));
+            } }, "Has Owner", h("smoothly-input-reset", { key: 'cd6c11e114bce17426f90e355eb1db1af7ed8fc1', slot: "end" })), this.hasOwner && (h(Fragment, { key: 'e6ac2d7b3087306f99b0fa9b6444e91b5e0e37a6' }, h("smoothly-input", { key: 'b9acbcf6211fa057df6cf813b3138987f87d0faf', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", h("smoothly-input-reset", { key: '6135bc037cb61797db43929298cb0fecb566bae1', slot: "end" })), h("smoothly-input", { key: 'ea1cd7c11207f6ffef10b998d48601b23e32784c', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), h("smoothly-input-file", { key: '7b29325cf763adc7f8a74aa038787bcbc79e2cbc', name: "owner.picture" }, h("span", { key: '6cfb9c9ca08c1aa21bffd74440b9fc72be1f9b9e', slot: "label" }, "Owner picture")), h("smoothly-input-date", { key: 'b0e13b530fcbecdc3473f8f3a6b64faae0539f99', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", h("smoothly-input-reset", { key: '091080379497e5b4a44baa6e4c308d615d11efd3', slot: "end" })), h("smoothly-input-date-range", { key: '177cf8bab833aefc37641f84e311bae632766e4f', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", h("smoothly-input-reset", { key: '50d628cc5312eeaddc9e63eee1bec136edad5d54', slot: "end" })), h("smoothly-input-range", { key: '45d0b2a96491f83fa490303d972b1888ca238499', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", h("smoothly-input-reset", { key: 'e6d5532bae6b869e2689606856fed111437b10b4', slot: "end" })), h("smoothly-input-select", { key: '4eb44a966295ea7c466e05ffefdc78539d67a1c3', name: "owner.favoriteHat" }, h("span", { key: '4c5f5c7e8d90c0fbcdc4d7f3a08904a2d2a12e7a', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), h("smoothly-input-reset", { key: '953da4ac3876ae0426e16f575cb73f3d5f2f0167', slot: "end" })), h("smoothly-input-color", { key: '88e770f1c77599d46031e1d58d7c927748e4930c', name: "owner.favoriteColor", value: this.owner.favoriteColor ? RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", h("smoothly-input-reset", { key: '7ede6644743c2635706d4cf278f47e21d3b74d98', slot: "end" })), h("smoothly-input-radio", { key: 'c231193127024d9761aa559bec89ffb1eaf09acc', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, h("span", { key: '4388ee769be45cb2df1226a3abf3a4f11cbb6065', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '012f9e3da80a1ec67aee406964263dd91ea47138', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), h("smoothly-tabs", { key: '69d1dc65939a4deab9b22e83bd326ee88e1ac6fb' }, h("smoothly-tab", { key: 'add8493e142d0f4fb001bce90659e9ac9b514696', label: "Dog", name: "dog" }, h("smoothly-input", { key: '55d8cfe1ec5f5de509df765454025eb0f890b6f3', type: "text", name: "dog.breed" }, "Breed"), h("smoothly-input-file", { key: 'c676d03691f28f7cd69d27ab72f2f79667f7af04', name: "dog.picture" }, h("span", { key: '8f3cdfde96d4d8c9667ccc142e1aa324f3da2d26', slot: "label" }, "Dog picture")), h("smoothly-input-date-time", { key: 'd29a5e0694ab908dc4bdf52f5b9ad6b28985132d', name: "dog.lastWalk" }, "Time of last walk"), h("smoothly-input-date", { key: '474667a7c5357cfc9a4a6dbe98f1d688c4ec4954', name: "dog.birthday" }, "Dog birthday"), h("smoothly-input-date-range", { key: '8ccfb03d70d83cf566676b7ab57ea5191dd5393f', name: "dog.dateRange" }, "Dog date range"), h("smoothly-input-select", { key: '2066db8c8d4e5b44a378cf293e2adbb5e8bf460d', name: "dog.favoriteHat" }, h("span", { key: 'a62342e8af25a36683b5bb71329e5a9838e46ad8', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-color", { key: '542fe343740ac056bfbae4cd475115d14e55747c', name: "dog.favoriteColor" }, "Dog's Favorite Color"), h("smoothly-input-radio", { key: '3a974e789695f7d1f7dad1029b18e8234a40f520', name: "dog.favoritePizza" }, h("span", { key: 'ceb0081e3d6cdbb28132be63098b592399aea837', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'ee5fee3e5b44ee6ec5bd5c2a745cefc69e828ae2', name: "dog.hasPet" }, "Has Pet")), h("smoothly-tab", { key: '8fa8c7108190cc80ea2f19162d9da05d771cd012', label: "Cat", name: "cat", open: true }, h("smoothly-input", { key: '1447b9e61334745da924780fe9fd9ffa08d0772f', name: "cat.favoriteFood" }, "Favorite Food")), h("smoothly-tab", { key: '6aa5088e6670b82a7e322a6e3884834a3a6bebc6', label: "Parrot", name: "parrot" }, h("smoothly-input", { key: 'ea0f62a2bef7ba932d81d1cfc758a30730a942ae', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), h("smoothly-input-file", { key: '0d4ec9d5fb2629416bd2503b21ca161b1a42781c', name: "parrot.picture" }, h("span", { key: '277b9fadfca699e97cf6b59f32bc9eb935236ccb', slot: "label" }, "Summary picture"), h("smoothly-input-clear", { key: 'bde01c974d7a9a6d8f72ba693d14da87412142ce', slot: "end" })), h("smoothly-input-date", { key: 'dbb7ff97e4032431c28296f571bb9c14f4792a9f', name: "parrot.birthday" }, "Summary birthday"), h("smoothly-input-date-range", { key: '7c8bc746930884acd71fe8b9e43ad3f39df2280a', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", h("smoothly-input-reset", { key: 'c2c019d38267cc7cf2e1bb9f9de099093dcba829', slot: "end" })), h("smoothly-input-range", { key: 'f9e1e846edc01ff5d1d0a70623e1218115d74922', name: "parrot.height", label: "Height" }, h("smoothly-input-reset", { key: '28336ff1ca0555df0bad230de82ca4f27fac0f17', slot: "end" })), h("smoothly-input-select", { key: '1284dab60ff21da638a1c6de3b97bebc89f5336f', name: "parrot.favoriteHat" }, h("span", { key: '0f42c20171f445ee7662143458622bfe82edfbee', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-month", { key: '6add4cdf7a3ab70b237ebdd1b305702d0206960f', name: "parrot.month" }, h("span", { key: '1daadc9241a75387cbce7a75fe580e7816fd3db2', slot: "month-label" }, "Summary month")), h("smoothly-input-color", { key: '436f5e0c5cc9d2ebe4610db98ee2e06c99cdb342', name: "parrot.color" }, "Summary Color"), h("smoothly-input-radio", { key: '266007f891ac4b2b657c5b387cf8decb4f591a71', name: "parrot.favoritePizza" }, h("span", { key: '9e90dbf17288235b318dbda58b13bec95dc727c9', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '9422f35a25153747298d082b011823d983046a86', name: "parrot.hasPet" }, "Has Pet"))), h("smoothly-input-submit", { key: 'd60ff5f5085e2b3eb74f23c127dd6a3a9897a47a', size: "icon", slot: "submit", color: "success", fill: "solid" })), h("smoothly-display", { key: '84847bdce423d1d7c2d935d84b725dc3e2f0a5fb', type: "json", value: this.value })));
     }
     static get is() { return "smoothly-form-demo-pet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/pet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form/demo/pet/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, h, Host, State, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { RGB } from \"../../../../model/Color/RGB\"\n\n@Component({\n\ttag: \"smoothly-form-demo-pet\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoPet {\n\t@State() hasOwner = false\n\t@State() owner: {\n\t\tfirstName?: string\n\t\tlastName?: string\n\t\tbirthday?: string\n\t\townedRange?: Partial<isoly.DateRange>\n\t\theight?: number\n\t\tfavoriteHat?: string\n\t\tfavoriteColor?: RGB\n\t\tfavoritePizza?: string\n\t\thasPet?: boolean\n\t} = {}\n\t@State() value: any\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Pet</h2>\n\t\t\t\t<h3>Value</h3>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks=\"border\"\n\t\t\t\t\tonSmoothlyFormSubmit={(e: CustomEvent) => alert(JSON.stringify(e.detail))}\n\t\t\t\t\tonSmoothlyFormInput={e => (this.value = { ...e.detail })}>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" value=\"Johnny\">\n\t\t\t\t\t\tName\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"integer\" name=\"age\">\n\t\t\t\t\t\tAge (Years)\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\tname=\"hasOwner\"\n\t\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tthis.hasOwner = e.detail.hasOwner as boolean\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tHas Owner\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t{this.hasOwner && (\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tname=\"owner.firstName\"\n\t\t\t\t\t\t\t\tvalue={this.owner.firstName}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, firstName: e.detail[\"owner.firstName\"] })}>\n\t\t\t\t\t\t\t\tOwner First Name\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tname=\"owner.lastName\"\n\t\t\t\t\t\t\t\tvalue={this.owner.lastName}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, lastName: e.detail[\"owner.lastName\"] })}>\n\t\t\t\t\t\t\t\tOwner Last Name\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input-file name=\"owner.picture\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Owner picture</span>\n\t\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t\t\t<smoothly-input-date\n\t\t\t\t\t\t\t\tname=\"owner.birthday\"\n\t\t\t\t\t\t\t\tvalue={this.owner.birthday}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, birthday: e.detail[\"owner.birthday\"] })}>\n\t\t\t\t\t\t\t\tOwner birthday\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\t\t\tname=\"owner.ownedRange\"\n\t\t\t\t\t\t\t\tstart={this.owner.ownedRange?.start}\n\t\t\t\t\t\t\t\tend={this.owner.ownedRange?.end}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, ownedRange: e.detail[\"owner.ownedRange\"] })}>\n\t\t\t\t\t\t\t\tOwner ownedRange\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\t\t\tname=\"owner.height\"\n\t\t\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\t\t\tmax={250}\n\t\t\t\t\t\t\t\tvalue={this.owner.height}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, height: e.detail[\"owner.height\"] })}>\n\t\t\t\t\t\t\t\tOwner's Height\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t\t\t<smoothly-input-select name=\"owner.favoriteHat\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Owner's Favorite Hat</span>\n\t\t\t\t\t\t\t\t{[\"🎩 top hat\", \"🧢 cap\", \"👒 sun hat\", \"❌ none\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={value} key={index} selected={this.owner.favoriteHat == value}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t\t<smoothly-input-color\n\t\t\t\t\t\t\t\tname=\"owner.favoriteColor\"\n\t\t\t\t\t\t\t\tvalue={this.owner.favoriteColor ? RGB.toHex(this.owner.favoriteColor) : undefined}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, favoriteColor: e.detail[\"owner.favoriteColor\"] })}>\n\t\t\t\t\t\t\t\tOwner's Favorite Color\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-color>\n\t\t\t\t\t\t\t<smoothly-input-radio\n\t\t\t\t\t\t\t\tname=\"owner.favoritePizza\"\n\t\t\t\t\t\t\t\tvalue={this.owner.favoritePizza}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e =>\n\t\t\t\t\t\t\t\t\t(this.owner = { ...this.owner, favoritePizza: e.detail[\"owner.favoritePizza\"] as string })\n\t\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t\t<span slot=\"label\">Owner's Favorite Pizza</span>\n\t\t\t\t\t\t\t\t{[\"vesuvio\", \"capricciosa\", \"quattro formaggi\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-input-radio-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\t\t\tname=\"owner.hasPet\"\n\t\t\t\t\t\t\t\tchecked={this.owner.hasPet}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, hasPet: e.detail[\"owner.hasPet\"] as boolean })}>\n\t\t\t\t\t\t\t\tHas Pet\n\t\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t)}\n\t\t\t\t\t<smoothly-summary>\n\t\t\t\t\t\t<span slot=\"summary\">Summary</span>\n\t\t\t\t\t\t<div slot=\"content\">\n\t\t\t\t\t\t\t<smoothly-input type=\"price\" name=\"summary.price\" currency=\"EUR\">\n\t\t\t\t\t\t\t\tSummary Price\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input-file name=\"summary.picture\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Summary picture</span>\n\t\t\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t\t\t<smoothly-input-date name=\"summary.birthday\">Summary birthday</smoothly-input-date>\n\t\t\t\t\t\t\t<smoothly-input-date-range name=\"summary.ownedRange\" start=\"2020-01-01\" end=\"2020-01-15\">\n\t\t\t\t\t\t\t\tSummary ownedRange\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t\t\t<smoothly-input-range name=\"summary.height\" label={\"Height\"}>\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t\t\t<smoothly-input-select name=\"summary.favoriteHat\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Summary's Favorite Hat</span>\n\t\t\t\t\t\t\t\t{[\"🎩 top hat\", \"🧢 cap\", \"👒 sun hat\", \"❌ none\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t\t<smoothly-input-month name=\"summary.month\">\n\t\t\t\t\t\t\t\t<span slot={\"month-label\"}>Summary month</span>\n\t\t\t\t\t\t\t</smoothly-input-month>\n\t\t\t\t\t\t\t<smoothly-input-color name=\"summary.color\">Summary Color</smoothly-input-color>\n\t\t\t\t\t\t\t<smoothly-input-radio name=\"summary.favoritePizza\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Summary's Favorite Pizza</span>\n\t\t\t\t\t\t\t\t{[\"vesuvio\", \"capricciosa\", \"quattro formaggi\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-input-radio-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t\t\t<smoothly-input-checkbox name=\"summary.hasPet\">Has Pet</smoothly-input-checkbox>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-tabs>\n\t\t\t\t\t\t<smoothly-tab label=\"Dog\" name=\"dog\">\n\t\t\t\t\t\t\t<smoothly-input type={\"text\"} name=\"dog.breed\">\n\t\t\t\t\t\t\t\tBreed\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input-file name=\"dog.picture\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Dog picture</span>\n\t\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t\t\t<smoothly-input-date-time name=\"dog.lastWalk\">Time of last walk</smoothly-input-date-time>\n\t\t\t\t\t\t\t<smoothly-input-date name=\"dog.birthday\">Dog birthday</smoothly-input-date>\n\t\t\t\t\t\t\t<smoothly-input-date-range name=\"dog.dateRange\">Dog date range</smoothly-input-date-range>\n\t\t\t\t\t\t\t<smoothly-input-select name=\"dog.favoriteHat\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Dog's Favorite Hat</span>\n\t\t\t\t\t\t\t\t{[\"🎩 top hat\", \"🧢 cap\", \"👒 sun hat\", \"❌ none\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t\t<smoothly-input-color name=\"dog.favoriteColor\">Dog's Favorite Color</smoothly-input-color>\n\t\t\t\t\t\t\t<smoothly-input-radio name=\"dog.favoritePizza\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Dog's Favorite Pizza</span>\n\t\t\t\t\t\t\t\t{[\"vesuvio\", \"capricciosa\", \"quattro formaggi\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-input-radio-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t\t\t<smoothly-input-checkbox name=\"dog.hasPet\">Has Pet</smoothly-input-checkbox>\n\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t<smoothly-tab label=\"Cat\" name=\"cat\" open>\n\t\t\t\t\t\t\t<smoothly-input name={\"cat.favoriteFood\"}>Favorite Food</smoothly-input>\n\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t</smoothly-tabs>\n\t\t\t\t\t<smoothly-input-submit size=\"icon\" slot=\"submit\" color=\"success\" fill=\"solid\" />\n\t\t\t\t</smoothly-form>\n\t\t\t\t<smoothly-display type=\"json\" value={this.value} />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form/demo/pet/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, h, Host, State, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { RGB } from \"../../../../model/Color/RGB\"\n\n@Component({\n\ttag: \"smoothly-form-demo-pet\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoPet {\n\t@State() hasOwner = false\n\t@State() owner: {\n\t\tfirstName?: string\n\t\tlastName?: string\n\t\tbirthday?: string\n\t\townedRange?: Partial<isoly.DateRange>\n\t\theight?: number\n\t\tfavoriteHat?: string\n\t\tfavoriteColor?: RGB\n\t\tfavoritePizza?: string\n\t\thasPet?: boolean\n\t} = {}\n\t@State() value: any\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Pet</h2>\n\t\t\t\t<h3>Value</h3>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks=\"border\"\n\t\t\t\t\tonSmoothlyFormSubmit={(e: CustomEvent) => alert(JSON.stringify(e.detail))}\n\t\t\t\t\tonSmoothlyFormInput={e => (this.value = { ...e.detail })}>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" value=\"Johnny\">\n\t\t\t\t\t\tName\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"integer\" name=\"age\">\n\t\t\t\t\t\tAge (Years)\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\tname=\"hasOwner\"\n\t\t\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tthis.hasOwner = e.detail.hasOwner as boolean\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tHas Owner\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t{this.hasOwner && (\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tname=\"owner.firstName\"\n\t\t\t\t\t\t\t\tvalue={this.owner.firstName}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, firstName: e.detail[\"owner.firstName\"] })}>\n\t\t\t\t\t\t\t\tOwner First Name\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\tname=\"owner.lastName\"\n\t\t\t\t\t\t\t\tvalue={this.owner.lastName}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, lastName: e.detail[\"owner.lastName\"] })}>\n\t\t\t\t\t\t\t\tOwner Last Name\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input-file name=\"owner.picture\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Owner picture</span>\n\t\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t\t\t<smoothly-input-date\n\t\t\t\t\t\t\t\tname=\"owner.birthday\"\n\t\t\t\t\t\t\t\tvalue={this.owner.birthday}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, birthday: e.detail[\"owner.birthday\"] })}>\n\t\t\t\t\t\t\t\tOwner birthday\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\t\t\tname=\"owner.ownedRange\"\n\t\t\t\t\t\t\t\tstart={this.owner.ownedRange?.start}\n\t\t\t\t\t\t\t\tend={this.owner.ownedRange?.end}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, ownedRange: e.detail[\"owner.ownedRange\"] })}>\n\t\t\t\t\t\t\t\tOwner ownedRange\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\t\t\tname=\"owner.height\"\n\t\t\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\t\t\tmax={250}\n\t\t\t\t\t\t\t\tvalue={this.owner.height}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, height: e.detail[\"owner.height\"] })}>\n\t\t\t\t\t\t\t\tOwner's Height\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t\t\t<smoothly-input-select name=\"owner.favoriteHat\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Owner's Favorite Hat</span>\n\t\t\t\t\t\t\t\t{[\"🎩 top hat\", \"🧢 cap\", \"👒 sun hat\", \"❌ none\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={value} key={index} selected={this.owner.favoriteHat == value}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t\t<smoothly-input-color\n\t\t\t\t\t\t\t\tname=\"owner.favoriteColor\"\n\t\t\t\t\t\t\t\tvalue={this.owner.favoriteColor ? RGB.toHex(this.owner.favoriteColor) : undefined}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, favoriteColor: e.detail[\"owner.favoriteColor\"] })}>\n\t\t\t\t\t\t\t\tOwner's Favorite Color\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-color>\n\t\t\t\t\t\t\t<smoothly-input-radio\n\t\t\t\t\t\t\t\tname=\"owner.favoritePizza\"\n\t\t\t\t\t\t\t\tvalue={this.owner.favoritePizza}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e =>\n\t\t\t\t\t\t\t\t\t(this.owner = { ...this.owner, favoritePizza: e.detail[\"owner.favoritePizza\"] as string })\n\t\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t\t<span slot=\"label\">Owner's Favorite Pizza</span>\n\t\t\t\t\t\t\t\t{[\"vesuvio\", \"capricciosa\", \"quattro formaggi\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-input-radio-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\t\t\tname=\"owner.hasPet\"\n\t\t\t\t\t\t\t\tchecked={this.owner.hasPet}\n\t\t\t\t\t\t\t\tonSmoothlyInput={e => (this.owner = { ...this.owner, hasPet: e.detail[\"owner.hasPet\"] as boolean })}>\n\t\t\t\t\t\t\t\tHas Pet\n\t\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t)}\n\t\t\t\t\t<smoothly-tabs>\n\t\t\t\t\t\t<smoothly-tab label=\"Dog\" name=\"dog\">\n\t\t\t\t\t\t\t<smoothly-input type={\"text\"} name=\"dog.breed\">\n\t\t\t\t\t\t\t\tBreed\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input-file name=\"dog.picture\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Dog picture</span>\n\t\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t\t\t<smoothly-input-date-time name=\"dog.lastWalk\">Time of last walk</smoothly-input-date-time>\n\t\t\t\t\t\t\t<smoothly-input-date name=\"dog.birthday\">Dog birthday</smoothly-input-date>\n\t\t\t\t\t\t\t<smoothly-input-date-range name=\"dog.dateRange\">Dog date range</smoothly-input-date-range>\n\t\t\t\t\t\t\t<smoothly-input-select name=\"dog.favoriteHat\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Dog's Favorite Hat</span>\n\t\t\t\t\t\t\t\t{[\"🎩 top hat\", \"🧢 cap\", \"👒 sun hat\", \"❌ none\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t\t<smoothly-input-color name=\"dog.favoriteColor\">Dog's Favorite Color</smoothly-input-color>\n\t\t\t\t\t\t\t<smoothly-input-radio name=\"dog.favoritePizza\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Dog's Favorite Pizza</span>\n\t\t\t\t\t\t\t\t{[\"vesuvio\", \"capricciosa\", \"quattro formaggi\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-input-radio-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t\t\t<smoothly-input-checkbox name=\"dog.hasPet\">Has Pet</smoothly-input-checkbox>\n\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t<smoothly-tab label=\"Cat\" name=\"cat\" open>\n\t\t\t\t\t\t\t<smoothly-input name={\"cat.favoriteFood\"}>Favorite Food</smoothly-input>\n\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t<smoothly-tab label=\"Parrot\" name=\"parrot\">\n\t\t\t\t\t\t\t<smoothly-input type=\"price\" name=\"parrot.price\" currency=\"EUR\">\n\t\t\t\t\t\t\t\tSummary Price\n\t\t\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t\t\t<smoothly-input-file name=\"parrot.picture\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Summary picture</span>\n\t\t\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t\t\t<smoothly-input-date name=\"parrot.birthday\">Summary birthday</smoothly-input-date>\n\t\t\t\t\t\t\t<smoothly-input-date-range name=\"parrot.ownedRange\" start=\"2020-01-01\" end=\"2020-01-15\">\n\t\t\t\t\t\t\t\tSummary ownedRange\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t\t\t<smoothly-input-range name=\"parrot.height\" label={\"Height\"}>\n\t\t\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" />\n\t\t\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t\t\t\t<smoothly-input-select name=\"parrot.favoriteHat\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Summary's Favorite Hat</span>\n\t\t\t\t\t\t\t\t{[\"🎩 top hat\", \"🧢 cap\", \"👒 sun hat\", \"❌ none\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t\t<smoothly-input-month name=\"parrot.month\">\n\t\t\t\t\t\t\t\t<span slot={\"month-label\"}>Summary month</span>\n\t\t\t\t\t\t\t</smoothly-input-month>\n\t\t\t\t\t\t\t<smoothly-input-color name=\"parrot.color\">Summary Color</smoothly-input-color>\n\t\t\t\t\t\t\t<smoothly-input-radio name=\"parrot.favoritePizza\">\n\t\t\t\t\t\t\t\t<span slot=\"label\">Summary's Favorite Pizza</span>\n\t\t\t\t\t\t\t\t{[\"vesuvio\", \"capricciosa\", \"quattro formaggi\"].map((value, index) => (\n\t\t\t\t\t\t\t\t\t<smoothly-input-radio-item value={value} key={index}>\n\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t\t\t<smoothly-input-checkbox name=\"parrot.hasPet\">Has Pet</smoothly-input-checkbox>\n\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t</smoothly-tabs>\n\t\t\t\t\t<smoothly-input-submit size=\"icon\" slot=\"submit\" color=\"success\" fill=\"solid\" />\n\t\t\t\t</smoothly-form>\n\t\t\t\t<smoothly-display type=\"json\" value={this.value} />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/form/demo/pet/style.css

@@ -7,7 +7,6 @@
 }
 
 :host smoothly-input-checkbox[name="hasOwner"],
-:host > smoothly-form smoothly-summary,
 :host > smoothly-form smoothly-tabs {
 	flex-basis: 100%;
 }

package/dist/collection/components/form/demo/prices/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoPrices {
     render() {
-        return (h(Host, { key: '4ba4a54c238ca56d8b5ac6017d406d9f63877df8' }, h("h2", { key: 'b1ecf5a6af7612f552d17c6a6b07928674eb6df8' }, "Prices"), h("smoothly-form", { key: 'eaec45c13b4fb94ebdf2676d864183f1de4e546b', looks: "line" }, h("smoothly-input", { key: '7b060588a027648239b0874507de83789efffbd9', type: "price", name: "no" }, "No currency"), h("smoothly-input", { key: '3e56aa29a3f2e4181718fc7528d6e3ef95c3309b', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), h("smoothly-input", { key: 'e63cffb04693599429bf32d7d60bafe63c1ce6a9', type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { key: 'd332e6f0b691a4e99c0b4cea6387c0c02ea7ceec', type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { key: '269e008532df315736715e53b3ba6f059181c568', type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { key: '371a1033d38193d53d47fda1bd3427fb914ac3f1', type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { key: '3b2301ec71679bf57b45ff7472cc61c3e7d0d19f', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-reset", { key: 'd6af989b85524745c0827835c6199299eb0003de', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: 'b1060426519e152e11bc7eead47797dc3c13df79', slot: "submit" }))));
+        return (h(Host, { key: '07b1adb88bd8e33146a7136cfd9937bb514ca7f2' }, h("h2", { key: '07aa50d7b9724126041784ebcd6470db505b2b30' }, "Prices"), h("smoothly-form", { key: 'bacdec10f2b08eb01821fd3d0ef499ac9f226b10', looks: "line" }, h("smoothly-input", { key: '1de0e8872ccfaee3b0dd409b6e20b035b827bb24', type: "price", name: "no" }, "No currency"), h("smoothly-input", { key: 'f3e3ff990f12aed4d9c2fc183b1537c60bd5c334', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), h("smoothly-input", { key: '43c10d5ed2802155c05ea78c562f7f70750f726e', type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { key: '14b2ed48704938dbd3324cb9643964e94f506f69', type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { key: '925f583dff01f4776cc356caf5cbf457b029f887', type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { key: '9336ce172a3721c71085eed3a12bdd5059a2506e', type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { key: 'fad2f01e3f1ab0c7cf06cf5da0cfef6636154c5b', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-reset", { key: '60aac83fc7d1330da74f5828e8ae59a622ac5595', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: 'e760313c45ebfd058ed98e0a5ba107d04a69ae8a', slot: "submit" }))));
     }
     static get is() { return "smoothly-form-demo-prices"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/schedule/index.js

@@ -14,7 +14,7 @@ var TimeTable;
 })(TimeTable || (TimeTable = {}));
 export class SmoothlyFormDemoPrices {
     render() {
-        return (h(Host, { key: '6b92ef8e6dc604ebac3d408ac94914ae5c1ad562' }, h("h2", { key: '9b88d8ce4bbc5f252e7d5ff38f44847c61c2d0d8' }, "Schedule"), h("smoothly-form", { key: 'd282e72764108950d40b50f2bd9ebff0eab193b6', looks: "line", validator: TimeTable.type }, h("smoothly-input-date", { key: '8a3a2d0d414a0d52943cb6a457b72ace6956f929', name: "schedule.0.date" }, "Date"), h("smoothly-input", { key: 'f48c556bf2f13c7a04a047acf1ee776a2c41c260', name: "schedule.0.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '9f40cf87b96f1eb44e7238119c49d6edcbbe6339', name: "schedule.1.date" }, "Date"), h("smoothly-input", { key: 'd70460e1a727f002958dca9696f436c7eeaf0fb6', name: "schedule.1.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '2290b368197f8cc394e795d9c802ad0eb7f98f6a', name: "schedule.2.date" }, "Date"), h("smoothly-input", { key: '75b3bb95beead5470b6e6702f55ab7bf41c89b1c', name: "schedule.2.amount", type: "price" }, "Amount"), h("smoothly-input-reset", { key: 'c21e35951486698d23c7e226fa999443ec317c68', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: 'b22df250995a434b72d125ec004cbffc58e4d472', slot: "submit" }))));
+        return (h(Host, { key: 'c6c8f8e9732b7bee6174b065aca78ec9433d106f' }, h("h2", { key: '3abd7dcb1223634ebe153ca72bc01a63b8f1cc0f' }, "Schedule"), h("smoothly-form", { key: '58efff0608dccc24e672f0af2c46ed7a6910f91f', looks: "line", validator: TimeTable.type }, h("smoothly-input-date", { key: 'edfbd13e8fad7a7c250d0a34b6a05c8e14e7cfc7', name: "schedule.0.date" }, "Date"), h("smoothly-input", { key: 'b8be4605fffe2989054278d01c92267f5763389e', name: "schedule.0.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '0748a3ebf8c6be536eddc53800c0d411799f5bf4', name: "schedule.1.date" }, "Date"), h("smoothly-input", { key: '5bedf4f31945901c20d0cf856a2a1b8ae9e80423', name: "schedule.1.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: 'e45b5341043beedfde0c3e0384b0e3d102c0a671', name: "schedule.2.date" }, "Date"), h("smoothly-input", { key: 'bdba3363ca72fde13eacd55ddfe6410c57c7bb41', name: "schedule.2.amount", type: "price" }, "Amount"), h("smoothly-input-reset", { key: '18dca6b3c44da961d7b2ef3da97820ae966cd5c4', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '400283fd87c5de2ee10e72873afcba9064fa6814', slot: "submit" }))));
     }
     static get is() { return "smoothly-form-demo-schedule"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/transparent/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoTransparent {
     render() {
-        return (h(Host, { key: '4fda9e7a3bf9ba68a71e7f417384a9934b3ce480' }, h("h2", { key: 'ea82de5fecc3776cadf6b0edb13ce0b3ff10b045' }, "Transparent"), h("smoothly-form", { key: '627277c2e28486d9f7961bebab38299e067b6145', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, h("smoothly-input-file", { key: '82f86ac2a54819009777bba8a134c41cbb8e7fa9', name: "file" }, h("span", { key: '94f2f02bc481382e7b3939129fccd93940377c72', slot: "label" }, "File"), h("smoothly-icon", { key: '2a6acb648ed96bbe7990395af3d5e75f7a464d39', slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { key: 'b9d5fc5004142a7e65f5419e5d70819e8a97959b', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-input-date", { key: '48f165326a76aa73bcd577c07366063057a4f6a1' }, "Date"), h("smoothly-input-date-range", { key: 'da665855753bcb06cd7a075a6e6a7ebeffbe8cc5' }, "Date Range"), h("smoothly-input-select", { key: 'fa3674fe1472f9c523f78a2e96e9481db5291a3b', name: "transport" }, h("smoothly-item", { key: '9e8a9ab23629a3957f593d5d3462aabd7b860ac4', value: "plane" }, h("smoothly-icon", { key: 'd82d801ed428fc0d7feaaa897238b0669cce56a7', name: "airplane-outline" })), h("smoothly-item", { key: '12a31fbd8ac393860a20fc5c15dc9bc783449909', value: "car" }, h("smoothly-icon", { key: '50662edaaf06ca46bc7bf183e1571eaeb9cc76a3', name: "car-outline" })), h("smoothly-item", { key: 'a4a883dc8847507d1e4090852a0c92d9c78ef164', value: "bus", selected: true }, h("smoothly-icon", { key: '54a198e4724455226862c77b80ada7470950ae83', name: "bus-outline" }))), h("smoothly-input-submit", { key: 'cbeb075696f75cb9f40116604b40cabd7e4ee874', icon: "checkbox-outline" }))));
+        return (h(Host, { key: '23c35e22c6f70f6b55ad18ec6d38a188f0215c9b' }, h("h2", { key: 'e2fc9d3be81cdd5da0c630b42ede7e6715084d38' }, "Transparent"), h("smoothly-form", { key: '084e4048817e9edac303e5eb5cf10ca0b9161a3c', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, h("smoothly-input-file", { key: 'a8839f3a389be8f634d2f92eba94141b6448592c', name: "file" }, h("span", { key: '3c21619014ceb39e67679b08af8b05c0440d85fa', slot: "label" }, "File"), h("smoothly-icon", { key: '5ca5dbcc76fd50469eae5d0ed4a2b34b1eca00e3', slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { key: '6e10c11a9dd709713192cafaf916355866b471f7', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-input-date", { key: 'cfa290bcb1a0a5d1330a7ca989673efeb5ee3c51' }, "Date"), h("smoothly-input-date-range", { key: '4f50a65e65ec2df78c4a1636b346c5fc14bf4b29' }, "Date Range"), h("smoothly-input-select", { key: 'cca7b65376fc4a9a00acd0a2e70fd8d452e771ba', name: "transport" }, h("smoothly-item", { key: 'fb144f0f2b2242e0dd2769f61bf1a472be2c79c5', value: "plane" }, h("smoothly-icon", { key: '4474223b29cfd66f71f64a7f617559c9b714bbc1', name: "airplane-outline" })), h("smoothly-item", { key: '5beaffe896df6aa774a94e4ac008596020eb39b5', value: "car" }, h("smoothly-icon", { key: '3c84883a539e367eceab216e93d30a6d0da03d03', name: "car-outline" })), h("smoothly-item", { key: 'f0d434a1c2c86e14088cc266c9a6b45845e4abf1', value: "bus", selected: true }, h("smoothly-icon", { key: '67c1a2c383c6b6afe3f8d090cb92e367c3a2de08', name: "bus-outline" }))), h("smoothly-input-submit", { key: '6feb50ed966210ea27886c404fe104f6b46dfc4e', icon: "checkbox-outline" }))));
     }
     static get is() { return "smoothly-form-demo-transparent"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/typed/index.js

@@ -3,7 +3,7 @@ import { isoly } from "isoly";
 import { Contact } from "./Contact";
 export class SmoothlyFormDemoTyped {
     render() {
-        return (h(Host, { key: 'fd8b4632ddd0a7747248f41de0135fd008ad7b00' }, h("h2", { key: '67f51728ac8809709f06cac0ded4754a86fcbbea' }, "Typed Contact"), h("smoothly-form", { key: '17af0f22c176e18f6e220362f2e81df0d1a3951b', validator: Contact.type }, h("smoothly-input", { key: '10e858259b3e0c94b702d41201bf7042cb05029c', name: "name.first" }, "First Name"), h("smoothly-input", { key: 'ee4b73eb89b48c06ef2ed814f320275784720374', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '04f0c5f1e829711f8a318168c00b5f730af03ec2', name: "name.last" }, "Last Name"), h("smoothly-input", { key: '9402ca8684be39b543394a63b40a3c1164359ae6', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: '8b8f104ce8b6bf87305b2bc629d2aa46da66e897', name: "country" }, h("span", { key: 'e80709b873c8e82bd549bdce6eeca52594e207cd', slot: "label" }, "Country"), isoly.CountryCode.Alpha2.values.map(country => (h("smoothly-item", { value: country }, isoly.CountryCode.Name.en.from(country))))), h("smoothly-input-date", { key: 'bf7dd64f84748cfadef1d7df2ce1843489e7ad35', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: 'fc80d53928748ff41237b3f92fcc88e669c15aa3', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '38b20a59fcc7f25d2db9018e09d35b23262fe11d', slot: "submit", size: "icon", color: "success" }))));
+        return (h(Host, { key: '09d832f2e2c7fabdb8a1aa67f9e1597994165e5d' }, h("h2", { key: '8c90f3c15aeffc1cf3502e4e6ac153d3de1b9cc8' }, "Typed Contact"), h("smoothly-form", { key: '57bce4118b8793986ced78a45d115e0323f6f563', validator: Contact.type }, h("smoothly-input", { key: 'f5cf0372e007ae990944e92ff880622133e20bf5', name: "name.first" }, "First Name"), h("smoothly-input", { key: '8580c166148a543c2a75e06cef0d045aee90e110', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '96ace8adf89b75c8b23ae2328d31d904e70bb31b', name: "name.last" }, "Last Name"), h("smoothly-input", { key: '51834ec2a86232e2792fe1a4e97b17669e7fc3dc', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: '8be08f56052a4b985f0bcd66f7a4a1ab6b1d72f2', name: "country" }, h("span", { key: 'e5daf40e56a6ac2d79440fc62424362f121f6fbd', slot: "label" }, "Country"), isoly.CountryCode.Alpha2.values.map(country => (h("smoothly-item", { value: country }, isoly.CountryCode.Name.en.from(country))))), h("smoothly-input-date", { key: 'ff85538ce1aa8b04b69fada24c8c1ebb7e0bab12', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: '816e986b3a198860cbabf2869b440e10fe60e620', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'e912e9b466f52c4aad5d43ac0fca19ec155560c5', slot: "submit", size: "icon", color: "success" }))));
     }
     static get is() { return "smoothly-form-demo-typed"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/icon/demo/index.js

@@ -7,7 +7,7 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: '920ac11272227ac543d6771b565914e0ad983ae1' }, h("h2", { key: '4e24638831af2f9520950bc06e8d40425f16a4b8' }, "Filter and Variants"), h("smoothly-form", { key: 'b24dd0a63c48656f70ee6880a28104f3fcca3676', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'c42016713a0aa0098698c3307a459e2ab83875d1', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'dfd38bf777f4b99dd8d87722973ec7e95be9b737', name: "variant" }, h("span", { key: 'd381d37505733f6c80faec9da19c6f6dcf03d9b1', slot: "label" }, "Variant"), h("smoothly-item", { key: '7f75ce9d83d011d9ce91223efc5b9afe69aa652f', value: "outline" }, "outline"), h("smoothly-item", { key: '82317cea2ff2110cda8bdc98527a8efc2af62997', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: 'ef94f4f68d6f3e8932caafe04d9f3e4c121fad6e', slot: "end" }))), h("h2", { key: '23ea2ead19bfde41c2f239d2329e13c757a087c4' }, "Props"), h("smoothly-form", { key: '09b6c7f1fc5ca2eea5f576a21a029f99807ed207', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: '158af644db3a9de6c461fe7ba5431393815c2b24', name: "color" }, h("span", { key: '9cd60334e613740e847c84652c3009be19656508', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: 'd70f63dbf4355e86c8084968f8944aba6d219752', slot: "end" })), h("smoothly-input-select", { key: '66140e912bc0ae68dce6edfde38d6e35038a32eb', name: "fill" }, h("span", { key: 'bcf4c28383559e846755f4ea45373497acb3a1d1', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: 'a6ea6b23fa892d8d9c70ad75e4b44d0dd1dd8fdd', slot: "end" })), h("smoothly-input-select", { key: 'd227cafab0914bd84bbcb324373edc48d1903ec4', name: "flip" }, h("span", { key: 'b04d1006822108cd3afa8452b4965c7e996f95dd', slot: "label" }, "Flip"), h("smoothly-item", { key: '6c9350e7c1eda7e044b73739055750ef1b72352d', value: "x" }, "x"), h("smoothly-item", { key: '59a06e4b1178e89b6f882f869040b71ce3f92958', value: "y" }, "y"), h("smoothly-input-clear", { key: 'a809a820125b7b20b0a2ab676c65f136059cd29c', slot: "end" })), h("smoothly-input-select", { key: '73189d5621c2bc1238b3200168436014501e531c', name: "size" }, h("span", { key: 'af55cac2093217a90f691006bc34212b4c7bbe71', slot: "label" }, "Size"), h("smoothly-item", { key: 'b9401c9388c6803ac5fd83a02e63b71258fc04c4', value: "tiny" }, "tiny"), h("smoothly-item", { key: '8afc404e515623f3006ccbf66e0fce814ac46828', value: "small" }, "small"), h("smoothly-item", { key: 'a4ddddd6d6b18f641afa285ac43152fc3bc88026', value: "medium" }, "medium"), h("smoothly-item", { key: 'c6d38ba0fe0e083c1df17ac2c8ff4452c002222c', value: "large" }, "large"), h("smoothly-item", { key: 'b44cc01b4f444f09ea10845ac9602038f1eb2ea5', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: 'c8b66c84b3010109e8473da5859706604d010ee9', slot: "end" })), h("smoothly-input-range", { key: '3711bb2ead4acec61ed1124457971f4658132bd4', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '02dec8f65597469be0e804aaeacdd7c899d006b8', slot: "end" }))), h("h1", { key: 'ae82174f8a13d25e8249f69abccef7e9bbd19a54' }, "Icons"), h("div", { key: '115669dd56f4c96f71faa89588cce30f4e80fdd2', class: "icons" }, [
+        return (h(Host, { key: '76d04985ea3b05b89e3924d1477e2152cf69987e' }, h("h2", { key: '55a228ff66264dee9b1a33451dd38624e36405fd' }, "Filter and Variants"), h("smoothly-form", { key: 'b7028afd552ad08a426a576334edc075927d4da0', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'ef32f99e3efa643130eafe143ff3eb041eb740de', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '95246b9a7714f3fa94c5bb9aed572acbc043943a', name: "variant" }, h("span", { key: '945522c24b5bd7e486428ff874728c126bfe2bb7', slot: "label" }, "Variant"), h("smoothly-item", { key: '624784f7b0621c9d9bc582ff521fd7d027ab4740', value: "outline" }, "outline"), h("smoothly-item", { key: '781872747dd78da5c18307937eae02546a54645f', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '62f2a2dcecd806ab989784da1d29dc1d55d2181c', slot: "end" }))), h("h2", { key: '02700b2b3e514ef0475b89049df54839d1d99818' }, "Props"), h("smoothly-form", { key: 'ee64fa2e888fc8d5eee88c5f6ba2ac56073a485b', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: '84f79069f3059fb7c6ff9787b8dea43d240fcb04', name: "color" }, h("span", { key: 'e1384bdbbad1d3ef47d18fe7701515764c21f51f', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: '57bab5535b6984a060d7a115a700437a9792531a', slot: "end" })), h("smoothly-input-select", { key: 'cedc770b05430217c136caf5fb5a6fcc05a99d30', name: "fill" }, h("span", { key: 'dc0646109f5a72d1701b7c248e4c998a4cc81642', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: 'd639c904f93b4e705378d2327fd711de594020ec', slot: "end" })), h("smoothly-input-select", { key: '0e54bdadbe97e37890076ca87bd4b7e95cf4360f', name: "flip" }, h("span", { key: 'c8ef684d2a5f69ded9f0084fd2810e89c15fc330', slot: "label" }, "Flip"), h("smoothly-item", { key: '52ff2983e7fcecc19de0e9b93bf7f0c74a232eab', value: "x" }, "x"), h("smoothly-item", { key: 'c2b73656f06d4b843855623840603ce11c92dcc0', value: "y" }, "y"), h("smoothly-input-clear", { key: 'b245af6ebbc40ad4d0497b3145140e628be0afb8', slot: "end" })), h("smoothly-input-select", { key: '024759f276ae3ffcbdd736c07d291db66f9d951d', name: "size" }, h("span", { key: '6cddfc1203383bd0e8262d72f830e5f0f9018db1', slot: "label" }, "Size"), h("smoothly-item", { key: 'ea1550b29efa366731efa1094de22a3b198ab21b', value: "tiny" }, "tiny"), h("smoothly-item", { key: '0d71e4dd9a2d4f5bc8a4fb433cca1c0168acc90e', value: "small" }, "small"), h("smoothly-item", { key: '77648ec680152d4eff67a94ee973f914a4fa4ac6', value: "medium" }, "medium"), h("smoothly-item", { key: '8e99089682b90d50295eba87e2f962851d5e98a4', value: "large" }, "large"), h("smoothly-item", { key: 'd8bdde05960be9319372854c3c16e4a8dcbca8a0', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: 'f5db639f69afffd1a00b2e052d447c287f135e04', slot: "end" })), h("smoothly-input-range", { key: 'c1357626e97be16d3c132a6037379de2d7003871', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'ebb027ab694dc4f8641f0d158ec8d637f24ef9b9', slot: "end" }))), h("h1", { key: '114eb0be41737d8b679a4b2c4e583552cc9b3bcd' }, "Icons"), h("div", { key: '16fb9b9010f0ab0ca2729eb5fd3aaf799512f702', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),

package/dist/collection/components/icon/index.js

@@ -48,7 +48,7 @@ export class SmoothlyIcon {
     }
     render() {
         var _a;
-        return h(Host, { key: '70ac6bf53b091c9edddcdb82a4bc8ec5f11a19a5', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: '9020a09ffba054d3478a3ae7df25c7a785e9f7a4', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get is() { return "smoothly-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/demo/index.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputCheckboxDemo {
     render() {
-        return (h(Host, { key: 'b94e511ed9ebb9acfe29a583055b5c3d0c900688' }, h("h2", { key: '77d9f0115089cea9c3bfc022019c6116393799ff' }, "All inputs"), h("smoothly-form", { key: '2db3aa46ef2d30f4eab1a2647b33110416571e75', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: 'dc4c8f0aff24710fca4f12bf065f0e1af2ff8d46', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '6df42b84d0ded3ead7f87386aaf804a9f7adcedf', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '006aaf6d3095544124e9763934683f1bd2b300b8', size: "icon", slot: "end" })), h("smoothly-input", { key: '07d834d15660ba38ff7926bbb9a8269180c18584', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '7d13e192a23319264e8e5180afcf723a21d9927d', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'ddc5646207adb30376eb830b985b680e5281f8f1', clearable: true, name: "radioFirstInput" }, h("p", { key: '019382ac17efcec2e4f305808571641c63f1cbe2', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '1ee3836f2d77dc85a2c7a93700951d1ac0c7a9be', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '87c90c90e1bcd674546e10f0be829005b1cf15cc', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e32741b0db20decfe692b89460cabf9b93728ca3', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '819df2854ec6b2b502977ef8b9466658a9fd9271', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: '3f261b2105fd957a4564dc1ec00d177e045e3557', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: '2ce933cfe9a5ac40051aa77e75166ed5b0974246', slot: "label" }, "Month"), h("smoothly-item", { key: '20b9b302e8337624675c7549f3b0c6244a860533', value: "1" }, "January"), h("smoothly-item", { key: 'e559571f7100e4a5ecfacd5df6d50bd543127213', value: "2" }, "February"), h("smoothly-item", { key: 'e7e71dc569a0cf0986e29de3bd83838401bba84d', value: "3" }, "March"), h("smoothly-item", { key: 'bbd61732997e11b26ad64682768181701c8e316d', value: "4" }, "April"), h("smoothly-item", { key: '49a7d373168e925b44e77aae43fb06aa7a5ee623', value: "5" }, "May"), h("smoothly-item", { key: '43a26e082be0ff90224d633530b7d0d9fc1200f7', value: "6" }, "June"), h("smoothly-item", { key: '24ff86baf7a629422c111c2e9ae417a6f6a5d20b', value: "7" }, "July"), h("smoothly-item", { key: '7f0b013f96e400e84a70068d38add1d853dafc3e', value: "8" }, "August"), h("smoothly-item", { key: '1ebd9ec96a8e6b3a04cbe170b329587fe4de9094', value: "9" }, "September"), h("smoothly-item", { key: 'f6e47ab9f6fa34bf0636cb2db160a3b4f8efcc67', value: "10" }, "October"), h("smoothly-item", { key: 'a69d074aea73dba71760225f5dbce1235c6b1178', value: "11" }, "November"), h("smoothly-item", { key: 'dd60b0cffa0fe58315593329bbf1ebc773e4f4b9', value: "12" }, "December"), h("smoothly-input-clear", { key: '2a9e41e40e8f313e419bd94e03be8d2bdc952ec1', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '3fed565a608c43d6dac4eda3aab68879e3e5627d', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '9e98d00e0b563206a6cd653648d0140b5aeb8852', value: "folder", selected: true }, h("smoothly-icon", { key: '8a374fe45907830ca681caeec10780c2e305062a', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '716ed9690884178b6326e6489e0a88f826a39559', value: "camera" }, h("smoothly-icon", { key: 'c0499b4a9f93740245e9c90f2aab854b51638f2c', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: 'b27bbdd13737755039c0e2330c0743a32946d74a', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'aa855cc704e04fb37b1980ecfda031bdf216ebf2', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: 'f0cdb03b8f3171f3029e7ba4ad6a0703d0a6ee05', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: 'e172cfce2ace1e73116da1c7b676120a99fa3e08', name: "date" }, "Date", h("smoothly-input-clear", { key: '4317c35f43eaef96ea3b198c113eecaf16756690', slot: "end" })), h("smoothly-input-range", { key: 'ac00876551b694f3d88589025fed62433348878e', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: 'a381a639c2b0f88fa96c4a86a8ce087f73992811', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '6c4c79fd82faa061446384b24283d124332b9fb7', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '4f6e69dcd9b3d7210b0f4876f8e4d9162874c226', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '180f0a2a32334f6b78e9350d61d7d23fedd56995', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '025b9e166fff98f4a89b0fa58c6683b06ad9e41a', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '263891d17bf06c6f585be326a75fefd7b43aadfa', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: '7322c2d2577328becffbf6a5ef67adb77d16bf31', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '22061a11d7480288c0f01434d3cb5ff0a11c05ca', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'efcf203370cdef80e800622d048253b37f664610', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '8a43e200e3d72d6a7a63c7c72290475f22263895', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '123a574613578d9e28f66b37ed60c8627eab6d37', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '537548d65ba04091b47f5ffd3a3a578be4bd3693', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '3d26b6295e850fbf18ed2fcd836955e975d2a6ff', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'acf8e3faaf1c4148a46ff27a78169a003914ea16', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: 'ee779f8f531a7be7e12b799870e2dfa1057e4b18' }, h("h2", { key: 'cb1bc3ba16138ea0bd9b4e8a997c76ccd4a6520b' }, "All inputs"), h("smoothly-form", { key: 'a15b4ba795d57dd7e8d52e7bf4bf368f022539c6', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '14623371a64369d2325c112b0683676db70454d9', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '9c6e2092bb9a7e89621bb0e96f5658e6645f8974', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '51e6f70558551cfb6793b5a4667ffe7cbc432ae1', size: "icon", slot: "end" })), h("smoothly-input", { key: '3ce5c189787bc306b3aa59fa4bd0c1a0a1118648', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '8c64916f1cf2b476bacb115d0032e6a298ef6a50', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '3d62d4976404b96b57c500492bce1cc9976c4655', clearable: true, name: "radioFirstInput" }, h("p", { key: 'f4d5f5bdd09755d869a533b5063850f5922ad6fb', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '01ceb1abc5d19b135f061fd334308efa4f8e011c', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '41b314c2720d9b8d370c53b51773760edd717fbb', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'a8544e619ca1f1c8f875d35c0f55be9308bc4fc1', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'a6c6140f53e9cb97147a8877e5593e5a74bcf604', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'f4762346fce0bb8dc621fe7964debdaebec3ec04', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'ae8c1bed23a7a1be6a0b2d76933b89447a1d32b7', slot: "label" }, "Month"), h("smoothly-item", { key: '352cf820f10708dc51a64e51421a635c9b45bb7f', value: "1" }, "January"), h("smoothly-item", { key: 'fee03550b9a6060500693d207b03f91e7b45234c', value: "2" }, "February"), h("smoothly-item", { key: '67093f468e949888e39af4b504941cbf1540a33b', value: "3" }, "March"), h("smoothly-item", { key: 'f96a8a86b736af513e1ac9f1d5c9ce47a23772ed', value: "4" }, "April"), h("smoothly-item", { key: '525c0a84828663326d5c135d5e81cce195e29b63', value: "5" }, "May"), h("smoothly-item", { key: '433cad775f9c39e8681f63d03d160e43df1417b7', value: "6" }, "June"), h("smoothly-item", { key: '431c3e9e44521f0750e90742da750d7319debd91', value: "7" }, "July"), h("smoothly-item", { key: '8d618aad881caa8d697af1eb37b3420839683820', value: "8" }, "August"), h("smoothly-item", { key: '5e2c5cb5c44f2b577ce5c66b5bf10059e0ce21b6', value: "9" }, "September"), h("smoothly-item", { key: '6746b8737734be0c7ad199403b784b1ec7befe6c', value: "10" }, "October"), h("smoothly-item", { key: '01659ba085a866d3e79164a79d97b2d7dab8b639', value: "11" }, "November"), h("smoothly-item", { key: '9959ff95d6eef28b9ee1cc8bef58c4a65351131f', value: "12" }, "December"), h("smoothly-input-clear", { key: 'e47d8d406e24d64e0ade1a5ed57347557d2415e1', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'c4ac6415e846b0f9a80c0c93902e19c79c49b292', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'dda530642163e597f13cda5d93ae8393c827418e', value: "folder", selected: true }, h("smoothly-icon", { key: '2d63f662a40cae5ac6a6ff186bb01eb077c84de8', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'bbcbc37c049476b543190a765c14e954a437cfc1', value: "camera" }, h("smoothly-icon", { key: 'e91dcbb0643ffc43c5cc2d9b63a178117e96b651', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '382212ae2f8e2c1057e5a47ddf2e513221bce02a', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '6afb7f263b2304468a4ffa52eafa2212a83b4272', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '37a74499bd49ea62f0e74a6c13d5a2ee7ea71bd3', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '2c8fd121ef34e8b3b73b45ecf4629c23958b9fbc', name: "date" }, "Date", h("smoothly-input-clear", { key: '4b8d5b2929fe9314ca50c0a621e9af369236223a', slot: "end" })), h("smoothly-input-range", { key: 'a2b4b53a2b9b621c729ba882935923ce75244b76', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '9213a231df669f195d70eba65a110f8c3867f87e', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'a0dc8bb1ceaeab485e202a4e72e68351acfdd9f7', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '1b2d472f8cd38404ae9b89ede6c489c85f07c2cc', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '803ecd23d4e3811c11595b3009912b862b01c319', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '5426b1362991f692af2f1aa7f7d2f0744a0a0a24', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'b242d53d29ca785db86b5e04cdd2e7529333d1ef', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: '7da877f2c55611d7069f8477862786331dbdf270', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '95cc80a68308c1fac9b1f16d8d2f15c42223eb7b', slot: "label" }, "Profile"), h("smoothly-icon", { key: '9dbd3fe8dda01daec047a5e8d41d912b4960ae77', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '5dce8489af64fc00a3fe71bd504a8bd7eb49a845', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '2a7504ceeeb689ac3f1965229cecc4827af379b8', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '07a37c2f078391c3d1f3eab10912b19e3c94afd9', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '468fdfa03eda7cfaf9412130230501b7c5e0bf78', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'db873983dfd9160488d10f1bf6fdf9234d767ef4', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
     static get is() { return "smoothly-input-checkbox-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/index.js

@@ -68,10 +68,10 @@ export class SmoothlyInputCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: '48e911f4f263fa8297da0a6c8cfb1f10c6452101' }, h("input", { key: '85fae454d387c08e3230e152b3eeb438e70d658a', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (h(Host, { key: 'bb6f4d6ec2194928ec0e7f1c2a58cce9c49ac552' }, h("input", { key: 'ccd673f8d7279a26b2d303a0c0790793697fdf01', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && h("smoothly-icon", { key: '7a73bb9eecedde52cfc9deed2829bd08953098a1', name: "checkmark-outline", size: "tiny" }), h("label", { key: 'ce433772084c15001f19c14069371b0a54acdd96', htmlFor: this.id }, h("slot", { key: '5781b02bde3f71aa630ff349957795a1da5ce4f2' })), h("span", { key: '53e73f569729773cb3bc19375dc1c412123be13f', class: "smoothly-checkbox-end-slot" }, h("slot", { key: '1ecbb533580629f53d20c434c648c1179262c328', name: "end" }))));
+            } }), this.checked && h("smoothly-icon", { key: 'c3bd2176759b4c069ba0c10d5a9bf471a47250a8', name: "checkmark-outline", size: "tiny" }), h("label", { key: '977f8c81a690951ead38770b7752b9b41f6dbb20', htmlFor: this.id }, h("slot", { key: 'ee849d646b9a22d5828283218d4cf69d0bdc44e9' })), h("span", { key: 'd014a1a601d3bd394104f9159bb3558dd8638b0a', class: "smoothly-checkbox-end-slot" }, h("slot", { key: '535f36bf90ec3183f5013ae7231ad7e323a173f0', name: "end" }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/clear/index.js

@@ -40,7 +40,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6755d61ed63d5d07d5aa7af1d1d0c09cc1622cf1', title: this.tooltip }, h("smoothly-button", { key: '9c75c3886881a9744046e7a510e0c82a95095bde', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '745de8c2d9f2bb2e5c836db78c1510f217b543ac' }), h("smoothly-icon", { key: '150304f71ca88eeff83bb35bac466ef9db2325b2', name: "close", size: "tiny" }))));
+        return (h(Host, { key: 'cd9c333c2ac4a663fe6cebdb037074ef4cefab41', title: this.tooltip }, h("smoothly-button", { key: 'e1fd1227b620c3cbef9c4ba1fd41ab90cae36f56', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'f3a383e5fee2538aa0cc228fccaf1976b5bc7827' }), h("smoothly-icon", { key: '7cffe6821b2bd1ee11ff74f3bd63a856d688886c', name: "close", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-clear"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/color/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputColorDemo {
     render() {
-        return (h(Host, { key: 'c89d1086280858deaabbd96e546a5a5aa6e3d0ec' }, h("h2", { key: '9352642ff0f73b4940c1770c893b3d10bb4c9210' }, "Color"), h("smoothly-input-color", { key: '924d365641233bdf20d19437bc3cd212d1d073b1', name: "color" }, "Choose color")));
+        return (h(Host, { key: '8b90083f43a8db87c43f33d13c0e4125258eb8d6' }, h("h2", { key: '354d9f00965e36cc287031640278cffae58edf93' }, "Color"), h("smoothly-input-color", { key: '93daa25294822d9293c88c73cc1896934908d48a', name: "color" }, "Choose color")));
     }
     static get is() { return "smoothly-input-color-demo"; }
     static get styles() { return "style.css"; }

package/dist/collection/components/input/color/index.js

@@ -145,7 +145,7 @@ export class SmoothlyInputColor {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: 'e62afe054a62e46544652015c1928ffe75b4e217', style: {
+        return (h(Host, { key: '9b1cbc0ab4531b0be3c6a8ec5f494e38aad0992e', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -154,7 +154,7 @@ export class SmoothlyInputColor {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, h("smoothly-input", { key: '62ebee3ce7d5f19b1647df89edca85e379a842c0', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: '3e760c367d112274b1621ab74640efd6ee9a9d2d' })), h("div", { key: '19316f085738999e8b9efc56e9ee0f9402679fcf', class: "color-sample" }), h("smoothly-icon", { key: 'c8604ef92b4e75b949f58f097eddf73260ff465a', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: 'f209d26af01ff17d2d1273fa137083607da1724e' }, h("slot", { key: '7b1896c2f0fd29a90e307d896d807de12131432b', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '546084f1eb9dcfcbec54512f57b49abe48fb83ba', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'd1ca54bd84304066e8a8f68018ee460f80133aeb', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '4b4670e41f318a9e905bd919f61f41dd079135fd', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'e09a966d52d5767eecaabd3d58a2bf58154df117' })), h("div", { key: 'e386dd1331ea1cd887738cccdefff94fed71adc5', class: "color-sample" }), h("smoothly-icon", { key: 'e1b051f1cd915ea1410d9eb83fde16e1542ab6d2', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '1c60634acd1193c2bd6e0c014494c19ab6e27e53' }, h("slot", { key: '51f601cf28faa654139009e2cfdae637085543da', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '1ba1f943bd8fe436d21d5fd8ae56c8f2ef466874', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'dfbf03c32e92c6db7bb48aafb430c8df8f49e6d9', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
     }
     static get is() { return "smoothly-input-color"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/index.js

@@ -7,7 +7,7 @@ export class SmoothlyInputDate {
         this.isDifferentFromInitial = false;
         this.hasFocus = false;
         this.observer = Editable.Observer.create(this);
-        this.locale = navigator.language;
+        this.locale = undefined;
         this.color = undefined;
         this.looks = undefined;
         this.name = undefined;
@@ -114,7 +114,7 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '67b7c8e67fc36b14b4cf05474082437f66428d0c', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '86ffc998be10d6fe278b45dec3a39823b99b41b5', name: "start" }), h("label", { key: '9131a5cd449802bc10695d80f6e48938021ba724', class: "label float-on-focus" }, h("slot", { key: '3ead04d593003724945495650248dad84c51b8ab' })), this.placeholder && h("span", { key: '7ca27a270699cc7de41d2c2a96bd4e9aee612839', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '3477dc19001180590c4628dbe29c394c3e2c1b55', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => this.onUserChangedValue(e), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '97ec3743498617fa1a1a5129d97e143b3661cac3', class: "icons", ref: el => (this.iconsElement = el) }, h("slot", { key: '4d57268abc8a1b3e097b0ca6de0e0d46b2d533c3', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '566711660ec7b137c51fcdfc98103fc0f9af4306', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyValueChange: e => this.onUserChangedValue(e), max: this.max, min: this.min }, h("div", { key: 'ba91f5cc68e1016ff94601e53bc5f0cb5a80de45', slot: "year-label" }, h("slot", { key: 'ec7ea4fc638e6218ba9fdc8789a6b2fe969729ee', name: "year-label" })), h("div", { key: '3c31f1b37adca2d585b887ea0ce5332ca9b5a0b4', slot: "month-label" }, h("slot", { key: 'b43a7450febbfc555071dd9d1cc94976e1c511e3', name: "month-label" }))))));
+        return (h(Host, { key: 'f485bdfddf2c5f33038866d4a9133b9f6e0a59bc', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '56682a22b2609c96ce58848b7621ff3322ad9240', name: "start" }), h("label", { key: 'e8bc5bddb4ac1fedca4726d5179372bc47dcf72d', class: "label float-on-focus" }, h("slot", { key: '495639abbc4f50ab5fdc64c64a0f77cdeaa64912' })), this.placeholder && h("span", { key: '9149cc0a5c29d26c3f7f112979c4317420402807', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '85090a2b409e555de2c8c06df7b04d37aecb1a89', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateTextChange: e => this.onUserChangedValue(e), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '98e54b0eed76b3ac412afe6454222cea7de5fba9', class: "icons", ref: el => (this.iconsElement = el) }, h("slot", { key: '487c69e90a413abe916ecb4bc828548f37f11b3f', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '9e1506697be46a758179b88ee0cdc11a74cbd2e6', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyValueChange: e => this.onUserChangedValue(e), max: this.max, min: this.min }, h("div", { key: '73c2bfce422bf391b04fb983d8b4847c1e00ec26', slot: "year-label" }, h("slot", { key: '3b64d8b7a68685629ce040b37623db924c3e5f5c', name: "year-label" })), h("div", { key: 'e54348fecfb8026e0488b13267389af5d8bb4986', slot: "month-label" }, h("slot", { key: 'b83518e048bb3b27ba32a36351d6f9fd047d8454', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }
@@ -135,7 +135,7 @@ export class SmoothlyInputDate {
                 "mutable": false,
                 "complexType": {
                     "original": "isoly.Locale",
-                    "resolved": "\"af-ZA\" | \"am-ET\" | \"ar-AE\" | \"ar-BH\" | \"ar-DZ\" | \"ar-EG\" | \"ar-IQ\" | \"ar-JO\" | \"ar-KW\" | \"ar-LB\" | \"ar-LY\" | \"ar-MA\" | \"arn-CL\" | \"ar-OM\" | \"ar-QA\" | \"ar-SA\" | \"ar-SY\" | \"ar-TN\" | \"ar-YE\" | \"as-IN\" | \"az-Cyrl-AZ\" | \"az-Latn-AZ\" | \"ba-RU\" | \"be-BY\" | \"bg-BG\" | \"bn-BD\" | \"bn-IN\" | \"bo-CN\" | \"br-FR\" | \"bs-Cyrl-BA\" | \"bs-Latn-BA\" | \"ca-ES\" | \"co-FR\" | \"cs-CZ\" | \"cy-GB\" | \"da-DK\" | \"de-AT\" | \"de-CH\" | \"de-DE\" | \"de-LI\" | \"de-LU\" | \"dsb-DE\" | \"dv-MV\" | \"el-GR\" | \"en-029\" | \"en-AU\" | \"en-BZ\" | \"en-CA\" | \"en-GB\" | \"en-IE\" | \"en-IN\" | \"en-JM\" | \"en-MY\" | \"en-NZ\" | \"en-PH\" | \"en-SG\" | \"en-TT\" | \"en-US\" | \"en-ZA\" | \"en-ZW\" | \"es-AR\" | \"es-BO\" | \"es-CL\" | \"es-CO\" | \"es-CR\" | \"es-DO\" | \"es-EC\" | \"es-ES\" | \"es-GT\" | \"es-HN\" | \"es-MX\" | \"es-NI\" | \"es-PA\" | \"es-PE\" | \"es-PR\" | \"es-PY\" | \"es-SV\" | \"es-US\" | \"es-UY\" | \"es-VE\" | \"et-EE\" | \"eu-ES\" | \"fa-IR\" | \"fi-FI\" | \"fil-PH\" | \"fo-FO\" | \"fr-BE\" | \"fr-CA\" | \"fr-CH\" | \"fr-FR\" | \"fr-LU\" | \"fr-MC\" | \"fy-NL\" | \"ga-IE\" | \"gd-GB\" | \"gl-ES\" | \"gsw-FR\" | \"gu-IN\" | \"ha-Latn-NG\" | \"he-IL\" | \"hi-IN\" | \"hr-BA\" | \"hr-HR\" | \"hsb-DE\" | \"hu-HU\" | \"hy-AM\" | \"id-ID\" | \"ig-NG\" | \"ii-CN\" | \"is-IS\" | \"it-CH\" | \"it-IT\" | \"iu-Cans-CA\" | \"iu-Latn-CA\" | \"ja-JP\" | \"ka-GE\" | \"kk-KZ\" | \"kl-GL\" | \"km-KH\" | \"kn-IN\" | \"kok-IN\" | \"ko-KR\" | \"ky-KG\" | \"lb-LU\" | \"lo-LA\" | \"lt-LT\" | \"lv-LV\" | \"mi-NZ\" | \"mk-MK\" | \"ml-IN\" | \"mn-MN\" | \"mn-Mong-CN\" | \"moh-CA\" | \"mr-IN\" | \"ms-BN\" | \"ms-MY\" | \"mt-MT\" | \"nb-NO\" | \"ne-NP\" | \"nl-BE\" | \"nl-NL\" | \"nn-NO\" | \"nso-ZA\" | \"oc-FR\" | \"or-IN\" | \"pa-IN\" | \"pl-PL\" | \"prs-AF\" | \"ps-AF\" | \"pt-BR\" | \"pt-PT\" | \"qut-GT\" | \"quz-BO\" | \"quz-EC\" | \"quz-PE\" | \"rm-CH\" | \"ro-RO\" | \"ru-RU\" | \"rw-RW\" | \"sah-RU\" | \"sa-IN\" | \"se-FI\" | \"se-NO\" | \"se-SE\" | \"si-LK\" | \"sk-SK\" | \"sl-SI\" | \"sma-NO\" | \"sma-SE\" | \"smj-NO\" | \"smj-SE\" | \"smn-FI\" | \"sms-FI\" | \"sq-AL\" | \"sr-Cyrl-BA\" | \"sr-Cyrl-CS\" | \"sr-Cyrl-ME\" | \"sr-Cyrl-RS\" | \"sr-Latn-BA\" | \"sr-Latn-CS\" | \"sr-Latn-ME\" | \"sr-Latn-RS\" | \"sv-FI\" | \"sv-SE\" | \"sw-KE\" | \"syr-SY\" | \"ta-IN\" | \"te-IN\" | \"tg-Cyrl-TJ\" | \"th-TH\" | \"tk-TM\" | \"tn-ZA\" | \"tr-TR\" | \"tt-RU\" | \"tzm-Latn-DZ\" | \"ug-CN\" | \"uk-UA\" | \"ur-PK\" | \"uz-Cyrl-UZ\" | \"uz-Latn-UZ\" | \"vi-VN\" | \"wo-SN\" | \"xh-ZA\" | \"yo-NG\" | \"zh-CN\" | \"zh-HK\" | \"zh-MO\" | \"zh-SG\" | \"zh-TW\" | \"zu-ZA\"",
+                    "resolved": "\"af-ZA\" | \"am-ET\" | \"ar-AE\" | \"ar-BH\" | \"ar-DZ\" | \"ar-EG\" | \"ar-IQ\" | \"ar-JO\" | \"ar-KW\" | \"ar-LB\" | \"ar-LY\" | \"ar-MA\" | \"arn-CL\" | \"ar-OM\" | \"ar-QA\" | \"ar-SA\" | \"ar-SY\" | \"ar-TN\" | \"ar-YE\" | \"as-IN\" | \"az-Cyrl-AZ\" | \"az-Latn-AZ\" | \"ba-RU\" | \"be-BY\" | \"bg-BG\" | \"bn-BD\" | \"bn-IN\" | \"bo-CN\" | \"br-FR\" | \"bs-Cyrl-BA\" | \"bs-Latn-BA\" | \"ca-ES\" | \"co-FR\" | \"cs-CZ\" | \"cy-GB\" | \"da-DK\" | \"de-AT\" | \"de-CH\" | \"de-DE\" | \"de-LI\" | \"de-LU\" | \"dsb-DE\" | \"dv-MV\" | \"el-GR\" | \"en-029\" | \"en-AU\" | \"en-BZ\" | \"en-CA\" | \"en-GB\" | \"en-IE\" | \"en-IN\" | \"en-JM\" | \"en-MY\" | \"en-NZ\" | \"en-PH\" | \"en-SG\" | \"en-TT\" | \"en-US\" | \"en-ZA\" | \"en-ZW\" | \"es-AR\" | \"es-BO\" | \"es-CL\" | \"es-CO\" | \"es-CR\" | \"es-DO\" | \"es-EC\" | \"es-ES\" | \"es-GT\" | \"es-HN\" | \"es-MX\" | \"es-NI\" | \"es-PA\" | \"es-PE\" | \"es-PR\" | \"es-PY\" | \"es-SV\" | \"es-US\" | \"es-UY\" | \"es-VE\" | \"et-EE\" | \"eu-ES\" | \"fa-IR\" | \"fi-FI\" | \"fil-PH\" | \"fo-FO\" | \"fr-BE\" | \"fr-CA\" | \"fr-CH\" | \"fr-FR\" | \"fr-LU\" | \"fr-MC\" | \"fy-NL\" | \"ga-IE\" | \"gd-GB\" | \"gl-ES\" | \"gsw-FR\" | \"gu-IN\" | \"ha-Latn-NG\" | \"he-IL\" | \"hi-IN\" | \"hr-BA\" | \"hr-HR\" | \"hsb-DE\" | \"hu-HU\" | \"hy-AM\" | \"id-ID\" | \"ig-NG\" | \"ii-CN\" | \"is-IS\" | \"it-CH\" | \"it-IT\" | \"iu-Cans-CA\" | \"iu-Latn-CA\" | \"ja-JP\" | \"ka-GE\" | \"kk-KZ\" | \"kl-GL\" | \"km-KH\" | \"kn-IN\" | \"kok-IN\" | \"ko-KR\" | \"ky-KG\" | \"lb-LU\" | \"lo-LA\" | \"lt-LT\" | \"lv-LV\" | \"mi-NZ\" | \"mk-MK\" | \"ml-IN\" | \"mn-MN\" | \"mn-Mong-CN\" | \"moh-CA\" | \"mr-IN\" | \"ms-BN\" | \"ms-MY\" | \"mt-MT\" | \"nb-NO\" | \"ne-NP\" | \"nl-BE\" | \"nl-NL\" | \"nn-NO\" | \"nso-ZA\" | \"oc-FR\" | \"or-IN\" | \"pa-IN\" | \"pl-PL\" | \"prs-AF\" | \"ps-AF\" | \"pt-BR\" | \"pt-PT\" | \"qut-GT\" | \"quz-BO\" | \"quz-EC\" | \"quz-PE\" | \"rm-CH\" | \"ro-RO\" | \"ru-RU\" | \"rw-RW\" | \"sah-RU\" | \"sa-IN\" | \"se-FI\" | \"se-NO\" | \"se-SE\" | \"si-LK\" | \"sk-SK\" | \"sl-SI\" | \"sma-NO\" | \"sma-SE\" | \"smj-NO\" | \"smj-SE\" | \"smn-FI\" | \"sms-FI\" | \"sq-AL\" | \"sr-Cyrl-BA\" | \"sr-Cyrl-CS\" | \"sr-Cyrl-ME\" | \"sr-Cyrl-RS\" | \"sr-Latn-BA\" | \"sr-Latn-CS\" | \"sr-Latn-ME\" | \"sr-Latn-RS\" | \"sv-FI\" | \"sv-SE\" | \"sw-KE\" | \"syr-SY\" | \"ta-IN\" | \"te-IN\" | \"tg-Cyrl-TJ\" | \"th-TH\" | \"tk-TM\" | \"tn-ZA\" | \"tr-TR\" | \"tt-RU\" | \"tzm-Latn-DZ\" | \"ug-CN\" | \"uk-UA\" | \"ur-PK\" | \"uz-Cyrl-UZ\" | \"uz-Latn-UZ\" | \"vi-VN\" | \"wo-SN\" | \"xh-ZA\" | \"yo-NG\" | \"zh-CN\" | \"zh-HK\" | \"zh-MO\" | \"zh-SG\" | \"zh-TW\" | \"zu-ZA\" | undefined",
                     "references": {
                         "isoly": {
                             "location": "import",
@@ -145,14 +145,13 @@ export class SmoothlyInputDate {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "locale",
-                "reflect": true,
-                "defaultValue": "navigator.language as isoly.Locale"
+                "reflect": true
             },
             "color": {
                 "type": "string",