npm - smoothly - Versions diffs - 1.119.0 → 1.121.0 - Mend

smoothly 1.119.0 → 1.121.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (446) hide show

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

@@ -7,25 +7,25 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: 'ec049b1d4b3d93e28913174bd7ab55ce836298ae' }, h("h2", { key: 'd0430155840916db4250402c39e5ee2656dc9930' }, "Filter and Variants"), h("smoothly-form", { key: '4c6f1ffa07fed10ba6051ab4d5f29c1278608b23', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'bea5be3b9c5f839da1fe6efd6497b4fa7c946e77', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'a64ee5957e34d669c481b77ba0f561ba5eebfa55', name: "variant" }, h("span", { key: '80df7e185a498c1c33cfe1c3fde85f955d46f256', slot: "label" }, "Variant"), h("smoothly-item", { key: 'd6447afb06c4471f9b3036838da77182161ebaf1', value: "outline" }, "outline"), h("smoothly-item", { key: '6622d9acf5549f05128632e386cafcabd4e5df0d', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '1a94b3d1d195c77716a7a9e92303bab3dffcf8b0', slot: "end" }))), h("h2", { key: '1320b7b476f6451885fa32dcb0daed671d269612' }, "Props"), h("smoothly-form", { key: '1bc3722b6b25c57352ff7bc1df1571a3df824611', looks: "grid", onSmoothlyFormInput: e => {
+        return (h(Host, { key: '8fbea784d2ed3e61eed53bbde4bf62acd7c00c33' }, h("h2", { key: 'e0ffda5c80cffb4a5819b69889980d43dc873c5c' }, "Filter and Variants"), h("smoothly-form", { key: '9734546f38e2bc3aa1136ec2d60ca919f96b7c78', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'fb615bfa1bb32cde349e9461eb7c95db4561c5f1', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '63402507181804347642d78531856b217174951a', name: "variant" }, h("span", { key: 'd301e5204b7ce8bc4d3d31ab5c0ced12f1e3d893', slot: "label" }, "Variant"), h("smoothly-item", { key: 'fca79aa0f519c2c9823c0fc08dba8fc7d017c184', value: "outline" }, "outline"), h("smoothly-item", { key: '78f2882358c54452f4ce56f976bed73fcade9b4f', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '1f3d317162149b9abd016a5f329d69ac05683646', slot: "end" }))), h("h2", { key: '3e894f0b4aa610c5a8267a183277e272f4855a9b' }, "Props"), h("smoothly-form", { key: '694c7a9bd59edbea5823eb04156dc16e0bae9712', looks: "grid", onSmoothlyFormInput: e => {
                 this.props = e.detail;
                 console.log("props", this.props);
-            } }, h("smoothly-input-select", { key: '8b065ccb0feb16a805a20ee13eab053d0cd8edfe', name: "color" }, h("span", { key: '3ed5be41ac0893b18741356a70c7653c862579a0', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
+            } }, h("smoothly-input-select", { key: '0c3057a4f67a05e690ff3b063c930465016d8dd6', name: "color" }, h("span", { key: 'ae91aea176ba10c3da98a60c3063ec0f43167bff', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
                 background: `rgb(var(--smoothly-${color}-color))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, color)))), h("smoothly-input-clear", { key: '50b90280c6f0600a073b8b8a254fb035f1aefec0', slot: "end" })), h("smoothly-input-select", { key: 'efda773381d8cb5d491e591b731cea17b406a005', name: "fill" }, h("span", { key: '396dbb906c3b52b53732b062f5ce8ebe70ce85b6', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '44cc4c40f24ad5c978e423496ea30a3068f862a1', slot: "end" })), h("smoothly-input-select", { key: 'd3aaee102be617722fc42dcd47139fe0d2c7284c', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: 'dc450c6debc6be202b40628ef77196159e45a082', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+            } }), h("span", null, color)))), h("smoothly-input-clear", { key: '22657bf293b433e392d57a06ca7ae2301c50676d', slot: "end" })), h("smoothly-input-select", { key: 'a3cb883bd3ce072da544acb7c4a9d23de599d63f', name: "fill" }, h("span", { key: 'f2332f34ea7fd13b2722addacbb8ccb0a02a005e', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '8518dae156b2233616eaaa468421a05c8f34025f', slot: "end" })), h("smoothly-input-select", { key: '0c684a06181b5e3aba3e9285c27e5dfc95b11fba', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: 'bdf65faa5cc2d6ac46c2d8f57d12f6c980dbed4f', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'a68b41f9a46917cb1b46e9ada61d05c280f92ff0', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'f094c91bdb64df81fd5fc49945b2760c214c37ed', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: '38e1df15f3e5756a231ea13ae7e603ad729cbfd5', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: '034a6c1102fcfc4f84802b652ae4773daedcc79a', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: '676477dc9f358f3512f0fb0f60a99a1deb3fa400', name: "flip" }, h("span", { key: '7e7924009ac080ccd225052351d0c70079990b6f', slot: "label" }, "Flip"), h("smoothly-item", { key: '70d21d485c90d881422d4c577fa04f101e0dae13', value: "x" }, "x"), h("smoothly-item", { key: '7e57ce51632ddd1dbf5fed24f109599de216eb3e', value: "y" }, "y"), h("smoothly-input-clear", { key: '0ea9f343784f533ebab4bc8d0b0879deb5e75156', slot: "end" })), h("smoothly-input-select", { key: '67e1d6b7b5e040e5284d0f5984c60a9f57a1d47f', name: "size" }, h("span", { key: 'e89ec731e273bd86c43d8993c78dbdcb1e052280', slot: "label" }, "Size"), h("smoothly-item", { key: '06201d3e144034f8984f48a064ea7d01dbdc3a7f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '5f996913a822077f1fd66371819d528b0f67dc7f', value: "small" }, "small"), h("smoothly-item", { key: '1aa1eff32b61221555b6356cbe658fb2591a6678', value: "medium" }, "medium"), h("smoothly-item", { key: '1d18ac8a2bbcc4f16cd19263aa16d2d714582f27', value: "large" }, "large"), h("smoothly-item", { key: 'a0dd2fc34393ef5fc1ed89f1b000d3a3482a2324', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '1cde73483d40576d71b1994ea7a4a18a0df791dc', slot: "end" })), h("smoothly-input-range", { key: 'c57e682c8ad984279d9b4d4eef60a6c076b3014b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '485dc43539bb93a6bdd58ab1ba10ac5ee64abb80', slot: "end" }))), h("h1", { key: 'cef7183437984cc0d8df4765a5afd62790e07881' }, "Icons"), h("div", { key: '332d4c1168cda7307f00eef4106494860ed0a491', class: "icons" }, [
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'bf07ed563c77658d9c8627794932cf807d4d497c', name: "flip" }, h("span", { key: 'f117c483d18de238eb575e23c358ecd54eec249f', slot: "label" }, "Flip"), h("smoothly-item", { key: 'd8d6d1da3ede777093bfb6882c4a34a498b109d1', value: "x" }, "x"), h("smoothly-item", { key: 'fb202fe8bf15b614abacc3778e49f2a9da67abd8', value: "y" }, "y"), h("smoothly-input-clear", { key: 'c6067ab01e51359091f41c82f315aa36aad09ad4', slot: "end" })), h("smoothly-input-select", { key: '9ba36e95d18097099035b4a11182091e1e7e2287', name: "size" }, h("span", { key: '571f9a1953f6b3f22d18f0dd591c9743d3818687', slot: "label" }, "Size"), h("smoothly-item", { key: 'c38f009d2fb5df14dc7c5dbde70538f8ae5b3e04', value: "tiny" }, "tiny"), h("smoothly-item", { key: '800ae091d06fe8f3f9a728ad4ac63b67a7141200', value: "small" }, "small"), h("smoothly-item", { key: 'b24d245d0614bae7fc0c125824c7cf6ad3a11aa2', value: "medium" }, "medium"), h("smoothly-item", { key: '8fdb8c8686a36898c63d6981ef44fc2348e6018e', value: "large" }, "large"), h("smoothly-item", { key: 'a1d2a033d0531ca802a3241f0f7bfe3b9ab6faf6', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: 'b72340bf5146665b425c1debb51dcf46bab08a72', slot: "end" })), h("smoothly-input-range", { key: 'b39307e3bd9fb244dd56b4de51f392b3522cd39d', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'b73479f5999155b57a18c1adaf4dd2a06f98fab5', slot: "end" }))), h("h1", { key: 'd9423d81faff0144d5d67a1a15af7395dec71c13' }, "Icons"), h("div", { key: '26499ec293ff6772322d9853841d33ad1c0a1195', 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 CHANGED Viewed

@@ -43,7 +43,7 @@ export class SmoothlyIcon {
     }
     render() {
         var _a;
-        return h(Host, { key: '0a19bf819d57a94f13fc8c2fbc885aebb0bf7a24', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: 'a04fcfccfde192d4146ebb8113809c8606bcd04f', 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 CHANGED Viewed

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputCheckboxDemo {
     render() {
-        return (h(Host, { key: 'b87b050eb78e63350fdef9978b8ab3f6f75f90ba' }, h("h2", { key: 'b59d7d2132935b59925b3d486334adaa57d34111' }, "All inputs"), h("smoothly-form", { key: '2cf49373621aa3b4952816aa554835ab9a1dc75a', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '342a601528a1e72db8a79995d906d2f2d8ebd85d', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '6ffb6868dc9fb8b91a535712012a2f1c12137afc', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'a61b4f80fa1a58b159870fcf6c3633ced18634ae', size: "icon", slot: "end" })), h("smoothly-input", { key: '774574e34066312584d662925f47ca07809e4e78', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'b60d029086821dc8b5e754776c5e62233e5cc3b8', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '3c9969ce5448170cc919b40944981f5ad43edd7e', clearable: true, name: "radioFirstInput" }, h("p", { key: 'd8410427e1341ff530ecb7dee9823c21852fa3a7', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '61c64bbe7250b4eb4290bd2c75caf62528c355c1', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '44bbffb4103eb379652bbf436761458a14a7175f', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'c5dcb3b19adec142097e43ed1b10f80984477c49', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'e1cc8f36aa4dd9c84750797073c5d8ed0f2bad10', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: '9543a9f9cc6ac7402415825a9872ec37d3048b3e', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: '41cbb2fab7585029ee91ea45d2b1d2f360a6a732', slot: "label" }, "Month"), h("smoothly-item", { key: '498d55992f8539e09c3862c0a147c271a645038d', value: "1" }, "January"), h("smoothly-item", { key: '1609ea60cb94e9ef195f4a18c61465c5319fb44d', value: "2" }, "February"), h("smoothly-item", { key: '1312da1f050e2e4ffde8c4b13dce23cb22711a2d', value: "3" }, "March"), h("smoothly-item", { key: 'ada60354212087fc55fb81939f831d6551d6ef7d', value: "4" }, "April"), h("smoothly-item", { key: '00da4e1699a9e1fc127a6f48ea7f440b0e3199da', value: "5" }, "May"), h("smoothly-item", { key: '93c3f12dd68334918a5f6a96b37506b548bba081', value: "6" }, "June"), h("smoothly-item", { key: '16c5a1d2d4a76312933e4c75312e29bbc4e77bc2', value: "7" }, "July"), h("smoothly-item", { key: 'fd8b80bb3b8e643f533543ea16041aed0e36a304', value: "8" }, "August"), h("smoothly-item", { key: '5f85430c08aa753b36b31f9de1a7a1d7d8d793e6', value: "9" }, "September"), h("smoothly-item", { key: '1c9447ee0e21fc37b625c4a2c9699659a6a03d80', value: "10" }, "October"), h("smoothly-item", { key: '648214d00c82a87a5403650e289dfc16470417d5', value: "11" }, "November"), h("smoothly-item", { key: '9b680e645e7589c8a8ece5f7fe951d3e818b04d2', value: "12" }, "December"), h("smoothly-input-clear", { key: '2cc62e638bd2037f1ff2f841c070840763b4ad32', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '958f4e3773a9002b8b531defd76b69723abd8f3f', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '962f4103e460087672484eb3f88045027d32a130', value: "folder", selected: true }, h("smoothly-icon", { key: '6345e8422873c99e0dbab80025984b73aa4bbf68', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '848077e1177766f84d6c7d59d9ffec16792631d4', value: "camera" }, h("smoothly-icon", { key: 'd2c00f76124a9b7be6fc25fb9c07b4de189af3da', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '66a99e5d40cc59d07b203c88596def4a04f80616', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'a1c6b415241594b64b0faf73f363d16f78124cd9', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '100e28190aaddd73697716b92ec4fb9ad8dd4924', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: 'ed20d251ffc8bc5a1ddf527da2b2995b9e3bd4bf', name: "date" }, "Date", h("smoothly-input-clear", { key: '92228279c6a86738a4674bd44288a524b83e6307', slot: "end" })), h("smoothly-input-range", { key: 'e4fe8940464d23127d57edcfc79a3f808122107a', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '62f3734c6b281d314d585eba4667860ed93860d3', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '67a043f52e277658892f34af93b8ab2d50451dd9', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '133126812e7dbae7f1491640dab148f4feb1c561', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '24cde6c2ea0b981781248e2bd4bad76612bde4ae', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: 'b3da2cca79cf80972d6d2eb2370c46bcfe75a7ed', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '352432da59dfba1eac043d8b150b2740faf38384', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'f711a241f53cfb5803979dc19c0421aa5b4b9936', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '9f0ab930a4b1159d0373f9e33490c54dc070f71f', slot: "label" }, "Profile"), h("smoothly-icon", { key: '114f04898200155379a21c30fd6fe0bc9fac29c1', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: 'e13dfab8e36f03e1862a73ad36e7a16e2f55cd00', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '667402ebc3bdfef1b6cd11be423cd95259d096b9', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '8bf6222df1f9e450a44c28eba57774ab0b00aa43', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '3d628aed8faa2698a051915c01a6487b59ffa28c', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'f82e58a33a25824d8ff34103072d404f4b4b98fb', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: 'b352bdfbee661343cf47d50f12abebfc0cf6ab16' }, h("h2", { key: '91c946ac08fdd45e077f83fc330b2ab936b3a1e4' }, "All inputs"), h("smoothly-form", { key: '6fff86e68d54df3d04c6aff0dd68cc159b59db8a', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '6dc3fd3c8e17bd65c40e10c209d5c9e9af05606c', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '7d7acb5d57428af599b670ffb305d1deec054ebe', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '27c3f25370ebcd5cccce3db547b28a10570679fb', size: "icon", slot: "end" })), h("smoothly-input", { key: '49aa72aa749938f51ffdf9ebd7a466d94845ee9d', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '286f46fa39c7ad3786b62730fd58be655d447917', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '91ad70640e71a52489c855e1852c609a88bb2eb6', clearable: true, name: "radioFirstInput" }, h("p", { key: '3068f8e03da6c743c9041d00e6206674d8647db6', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'd636989038d98000ba11ce424ccc27ab625d0515', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5b5e6959f78fc2e3d08eb38e1be5d8e72e46972b', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '1bbb84c8f3a50612a1fd0b54d08e12486ed98fc7', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'cd125a26f203f4d1aeb056bee95ae5acb632ff46', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: '814ebdf5fde8126970fdf5b333bdf9fa78a528bc', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: '01b6346ec1df5a391709de9619eaffd6b5eb3142', slot: "label" }, "Month"), h("smoothly-item", { key: 'edccdd1fa584a1d1e8c4d0eb79236cca0da371d1', value: "1" }, "January"), h("smoothly-item", { key: 'd1e30185f0fe5d7be1fb93caa0858760c3ece3ea', value: "2" }, "February"), h("smoothly-item", { key: '87b05bb03e14c13271e9a4d91d1d61dcf2ccdb4e', value: "3" }, "March"), h("smoothly-item", { key: 'a2f732d3a5e1e2257fc63d1777d5ff9440e5a6ea', value: "4" }, "April"), h("smoothly-item", { key: '2a4355ba7020386bd68f3064e758f3c302c914b1', value: "5" }, "May"), h("smoothly-item", { key: '4e2ca1c70ebab9644f0b9f23f8838349a2af5662', value: "6" }, "June"), h("smoothly-item", { key: 'c28b5bf4614565fb363e96f1419f642a5a1e511a', value: "7" }, "July"), h("smoothly-item", { key: '29f55d2c10ea35f64d372b4bacf3d16ce6158462', value: "8" }, "August"), h("smoothly-item", { key: 'af6f0893b6c8f74ab2ec83c994fa4c283ccd50d1', value: "9" }, "September"), h("smoothly-item", { key: 'bb9dd4309de5f13ee8b09413ed140656f0cd8993', value: "10" }, "October"), h("smoothly-item", { key: '4494fc9fde1fcae901228b8a3bc59f66f39062e6', value: "11" }, "November"), h("smoothly-item", { key: '8e30882cfc9d205c27455edc3dddcef27c5f3f6e', value: "12" }, "December"), h("smoothly-input-clear", { key: '95012437948deee3d15b981e9fd2782dd2e69bf8', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '488a3819d8b5f9d67c7d6a438f23c2f82fddf711', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '246ee9908f5b491020a9e4bc983b11ded6a584a9', value: "folder", selected: true }, h("smoothly-icon", { key: 'c08ecd57f6eb097c243f291a3c81fb9d2348dd53', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'fae16d67f4e6d37db50eaa88b5f7c4a8c864a524', value: "camera" }, h("smoothly-icon", { key: '2599688d7fea657f0fc6eff69ef2418b972574a6', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '322949e94c629f7e145dcecf9018fbf76d12288f', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '9cc5b47dc19012948e305a5757ce8db32e8604a6', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '90fd7d3c0be11f0392facadb1d222a103cb70229', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '4c2763206ed70c88dd68be14d7dd052b343e9ed4', name: "date" }, "Date", h("smoothly-input-clear", { key: '0d0d5e29aa88d9813233f37c4a44b03716b0b0c7', slot: "end" })), h("smoothly-input-range", { key: '7b9629770c6f9a0cf56bf6b2879622a1c3916bf8', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '2189012b707e0c9d59ce9d98a2934e46d4757cd6', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'ec909bac6b45f203d3b62c3a4bf4edb1786ab29c', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: 'e4a149d8f21fe0183c1c02af96b36dd45372464e', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: 'b12f8a0caa8efadc3517e4d49ac10a28a77c3113', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '5c0efcf118ca8fe07c45801b1ce0a40ec6ae057f', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'ea359e74dfe9cbde7b72843d57c8a220b3b47fed', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'ad4abed80bcd4d341202927e20f53348be67c254', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '316576fc7488e1858fcb80431d9ca4550bfda77c', slot: "label" }, "Profile"), h("smoothly-icon", { key: '5e5c1586fa0728fcf8ca296a666fdf5557e3ef04', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '344bc835f9590416000916aa48b9e66a16dab543', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '46567f5f92d87e3352e61ee14115086804e8de1c', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '6857cae3aed0fe81e2600295af74e6be32b7a46a', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '5959f0903bfa4179c95609c9fa05adb4ccbc4eec', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '1503fb2488ea528635f4b7f162df3a28729d47b1', 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 CHANGED Viewed

@@ -64,10 +64,10 @@ export class SmoothlyInputCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: '6c5e8fd09ac7c64be72d541cdeee747c84495a6f' }, h("input", { key: '241ef4d9acc46562323db12313f6ca0a3fea5f0f', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (h(Host, { key: '8d586e5be3e100b6f67e79694bdb7166b2aeddf8' }, h("input", { key: 'fe7b1db5fe641116040034355e04ca8b5ab22e97', 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: 'a0909dfe8369e31bf4873a2ab05f21880c3f43fe', name: "checkmark-sharp", size: "tiny" }), h("label", { key: 'c3628052b38e4dfbdffefa92d428a04662726f65', htmlFor: this.id }, h("slot", { key: 'bfdbbb43537661b026600d2cb3af9c244d2ae5b3' })), h("span", { key: '4033bb43f9ead47f2f9f7eb6943e4199c7260766', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'e8985be231a6f80d71d85e1b665705458fb187f2', name: "end" }))));
+            } }), this.checked && h("smoothly-icon", { key: '51b9efb24588c22d2a568227297787d023571e71', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '6987b8f1b6e08a7f2c0b14c57e081939bc174fb4', htmlFor: this.id }, h("slot", { key: '3f86fa549bbe9a68c83895a8bda1517b1554a926' })), h("span", { key: '75546ae8484e8aa1945fdec28fd4449880304ae9', class: "smoothly-checkbox-end-slot" }, h("slot", { key: '1e4e1fcf24e300d18b3728bfbde4a1e178253bce', name: "end" }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/style.css CHANGED Viewed

@@ -87,6 +87,9 @@
 	transform-origin: top left;
 	transition: transform 100ms ease;
 }
+:host[right] .label {
+	transform-origin: top right;
+}
 :host.floating-label ::slotted([slot=label]),
 :host.has-value ::slotted([slot=label]),

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

@@ -42,7 +42,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f1f8c9c1065466cf60851197c73cb3e801593472', title: this.tooltip }, h("smoothly-button", { key: '2166cd37b5a0e93cba98b17657f4bf33e503814e', 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: '427e397efd7fc89e2e6ba34f1703cd249b8b07cf' }), h("smoothly-icon", { key: '3c16b4541b7d1493213d3dfc93adf32aec831869', name: "close", size: "tiny" }))));
+        return (h(Host, { key: '5c6e49461edbf91245aaa2bf66de4550e334919c', title: this.tooltip }, h("smoothly-button", { key: 'ad7d421bdedceaf36cc14d87602ce960c19f77eb', 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: '84cf8946d1d4681dde6c708aac9f791a276fd070' }), h("smoothly-icon", { key: '55a4310a4db96393cc6da853a7cfd974479bfe6c', 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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputColorDemo {
     render() {
-        return (h(Host, { key: '7b11b0f228e5e8655a3db81717e614354b9fbdc0' }, h("h2", { key: '41e22ff3427c56b0e5b5b5c837215ce3c8e3667b' }, "Color"), h("smoothly-input-color", { key: '778d1355985c37f4b8b193b65d0a534c640c5c1c', name: "color" }, "Choose color")));
+        return (h(Host, { key: '9ad04e1aa481ec3ad05d6487a25ab69202d2a8bf' }, h("h2", { key: 'cc47b241d3bb3e43752a3b0ec2e72144b2955bfa' }, "Color"), h("smoothly-input-color", { key: 'db081098c0eb29a73c9a708df96b48fd77425796', 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 CHANGED Viewed

@@ -146,7 +146,7 @@ export class SmoothlyInputColor {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: '606897dcf8880a8bceaf646a17b0b682dc0de4fe', style: {
+        return (h(Host, { key: '4db4d9329eaee9cad54871a66e4ea406e04a5b92', 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)}`,
@@ -155,7 +155,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: '3a8211dcd537f07359729f79b88c33ffa8dd26e6', 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: '932e1fee6e31f8942841ae068404f674d20c6d75' })), h("div", { key: '55de847010bfc30641a1b4814fc7d4ea1beb8b63', class: "color-sample" }), h("smoothly-icon", { key: '7e69d59ceb71c617d93205b6ada24bc0a0b6d3fe', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '38771b0daff4bda14ecb821f7ec0725ef575f50c' }, h("slot", { key: 'b005802e73faf84b2772e7bf28163963abe619ca', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: 'ed68b37bbbe25ccb1cfe00167b21b49fdcad5326', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'a3643b4c099fb94dfc57b8c2658bde1711aa0c5d', 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: 'd3fe0aeedcd45bacc1d38e75d7d5e97be3992a34', 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: '77f78c79097fc43d15b453044170290e25c1bfc2' })), h("div", { key: 'f8c144c3cfdc9ef249c941f492b009030eb97dda', class: "color-sample" }), h("smoothly-icon", { key: '8d29d95ef7cbc08cdf429088e9f005a02544ecad', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '8efce2fd4ca6fbde9968bddd60b54cb6e097091e' }, h("slot", { key: 'fd99776b1a150dd549d69e013124308ab6d2f16f', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '67b8c3fb973292a65257eedb64ac7a01044843d2', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'f576c2ce5b277209b94c8560e559299c715ea1e1', 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/color/style.css CHANGED Viewed

@@ -87,6 +87,9 @@
 	transform-origin: top left;
 	transition: transform 100ms ease;
 }
+:host[right] .label {
+	transform-origin: top right;
+}
 :host.floating-label ::slotted([slot=label]),
 :host.has-value ::slotted([slot=label]),
@@ -143,7 +146,7 @@
 :host>div.rgb-sliders {
 	background-color: rgb(var(--smoothly-input-background));
 	position: absolute;
-	padding: 1em 1em 1em 0;
+	padding: 1rem 0 1rem 2.5rem;
 	top: calc(var(--element-height) + .8em);
 	left: 0;
 	box-sizing: border-box;

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

@@ -108,7 +108,7 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'd610c101e778aa42a9369aa03f1caf8e14b8b5c8', 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: '44cfdeb10640f183b8d5aee0a40630dc6d3e994e', name: "start" }), h("label", { key: 'd7b5fdb309c4cbe5ca865169953f50e57bae8d4d', class: "label float-on-focus" }, h("slot", { key: '7230b56a3bdbb7a83a8c45800f056734b01bcb90' })), this.placeholder && h("span", { key: '4a0606f9f3d1bf1610393006ee6238b386b56655', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '19e00959912e9a0ba57bb0989d86a54fbd06006d', 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)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), 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: '2f7b6396f29e43ff06f86749b20358fd9067def3', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '384b7d43cebf3f16a8f14687acd424bcd790a55a', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '445ed1618b342123b180cecc999a2899176095c6', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '6345ea59f7dc66a47dcb0b33b01f15b9a3c7720d', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '6a2d605946629fafeb1a951aa4ce923d5c3cca53', slot: "year-label" }, h("slot", { key: '7352785fb90f97fe59dcc2662e81c12ae3544e70', name: "year-label" })), h("div", { key: '9433f633d73a13a3638df8374cc807e7adfe11d0', slot: "month-label" }, h("slot", { key: '2f9176a79690a41028a1633e5bb6b4bd9c464722', name: "month-label" }))))));
+        return (h(Host, { key: '23eb18ee49132c7fa6bb48a457212e95b3297499', 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: '92c0fc2f3bdba5377ffee8289cba726125541997', name: "start" }), h("label", { key: 'cd6a68025235ba18a254dd1a7e7bdb722f5c24ec', class: "label float-on-focus" }, h("slot", { key: 'c2d23b15c470fe987088c41abc9fb3af2fb5c7f4' })), this.placeholder && h("span", { key: '530b2676fc554e1cf1efce7f1553897fdf405767', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '8d4fa83adba95afedc7adebbf88582801141b8ca', 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)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), 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: '697c0a69230175703f5be27b2ffe5608424e3c6e', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '1d33bc9911d8bfe7e955bed1be025da988c34897', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'c0a3906ace69bd3a6c41c39a3538a811554673bc', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '19d3e81a19c37a7d50ee31b1a27b1762a32de2ee', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '960b3b1b2fb3928d6f71d6d7f3456b6d86c537f2', slot: "year-label" }, h("slot", { key: '1ba7fa33c27fbc2310f6fbb6094f1fac3901ca0f', name: "year-label" })), h("div", { key: 'b129672d85ce661203e6a0746a0778437a4ea857', slot: "month-label" }, h("slot", { key: '8c19839eb59e587650b40715722ee8ce12fb26a7', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/range/index.js CHANGED Viewed

@@ -123,15 +123,15 @@ export class SmoothlyInputDateRange {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (h(Host, { key: '4aafb51483d57234d6f42a6252a45078a5cc4054', tabindex: this.disabled ? undefined : 0, class: {
+        return (h(Host, { key: '8d1cc0bf552d9366cd676ca4d28ba9131b762985', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, h("span", { key: '5516903b15400ea4dd7dba463dd173ef48ca03df', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: '273d0fdad0534db6f46e3c37005ab0649edd8abc', name: "start" }), h("label", { key: '67fd396fd707428cf9413a5b8bd6501485874e64', class: "label float-on-focus" }, h("slot", { key: '67a092adcbb0abf829ffb68b48e2e37cc6dbc5ed' })), this.placeholder && h("span", { key: '54ed8804af377cdde573d7d148d62544adae5eb8', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '3144566fd5983266e70637449965c0ca981962b8', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, h("span", { key: 'ea5b162b919565e8ab3ba6d5c7420fad8d7bbfbd', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: 'ea6a109b34aefa2256aa1b82972dbbc5fef55897', name: "start" }), h("label", { key: 'b9b7f869df370e0f6e882b95babbe5c8f54ea324', class: "label float-on-focus" }, h("slot", { key: '1aa509d8a9438fa7151d4d50c62e9e07c981c58c' })), this.placeholder && h("span", { key: 'ece35a37734177645133e14582ae692565c8a0a6', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: 'b840c7a75cf6aa6a73bac8aef415d709e533a7f4', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '80257b7865d284f87a6aafd9f53acead98612f09', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: 'e6bb858a6a4ee6669ec02949f7e5dcd668187970', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '4ccdcf9160a7bb827309e5f5cd908095ba90a0bc', class: "smoothly-icons" }, h("smoothly-icon", { key: '7dbf49e194b48313c7b54eb1bc43d2660f7cf3dc', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '63448fe06f310d74951d3ddbd8b8511d1df170b0', name: "end" })), this.open && (h("smoothly-calendar", { key: '1d334b289c960660269e869ec6e42544beaaf0d7', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: 'f17bfad7cd7aca649b05cc75f3062a28fcf0cd5f', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '1aa47809013250eaea4ded0dc664b1af5a1170ba', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: 'b429db5ba1bf4197a08c5872028549f09390ac99', class: "smoothly-icons" }, h("smoothly-icon", { key: '1b9f165fe8fc3a509636aebe6cd5050ffc99e153', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'e508de43633d4cadd8a1f83de6a2fa8599175e30', name: "end" })), this.open && (h("smoothly-calendar", { key: '273526a8a97a657724014910b805c3c41c04833f', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.start = e.detail.start;

package/dist/collection/components/input/date/range/style.css CHANGED Viewed

@@ -87,6 +87,9 @@
 	transform-origin: top left;
 	transition: transform 100ms ease;
 }
+:host[right] .label {
+	transform-origin: top right;
+}
 :host.floating-label ::slotted([slot=label]),
 :host.has-value ::slotted([slot=label]),

package/dist/collection/components/input/date/style.css CHANGED Viewed

@@ -87,6 +87,9 @@
 	transform-origin: top left;
 	transition: transform 100ms ease;
 }
+:host[right] .label {
+	transform-origin: top right;
+}
 :host.floating-label ::slotted([slot=label]),
 :host.has-value ::slotted([slot=label]),

package/dist/collection/components/input/date/text/index.js CHANGED Viewed

@@ -182,7 +182,7 @@ export class SmoothlyInputDateRangeText {
         }
     }
     render() {
-        return (h(Host, { key: '58630b82c91178b70eee75c26ad8b6c2927410cb', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat.Order.toArray(this.order).map((part, index) => {
+        return (h(Host, { key: 'f85c786115e7a171f69dc12fc7cd7fd95d47dc04', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat.Order.toArray(this.order).map((part, index) => {
             var _a;
             return (h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index) }, h("span", { class: {
                     "smoothly-date-text-part": true,

package/dist/collection/components/input/date/time/index.js CHANGED Viewed

@@ -97,30 +97,30 @@ export class SmoothlyInputDateTime {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (h(Host, { key: 'ad93ad9f51896e7b99f721d7a81808e092816c03' }, h("smoothly-input", { key: '0e212a092315fa9a0feaaf67f3c2127a6c5d76c2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (h(Host, { key: '40f6c261f57e7dba3054cf01875d40cdc554ba16' }, h("smoothly-input", { key: '98aa0e61e439a1ae686191425fca97a99e3e9232', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, h("slot", { key: '3365117b617114c1c961a34660585c2ddae7f93d' })), h("smoothly-input", { key: '91b0c6323b1451c1b40f23bcf2aab162eeb2bf4d', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, h("slot", { key: 'e54f5e30a8f8bb9add88f07365a723a784da6060' })), h("smoothly-input", { key: '777133878145c16fe94dc58ed7a3c7cbeb6bd44d', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '30f3a9608f30b70ec0e999b1087f124a2c0f8f9a', class: "colon" }, ":"), h("smoothly-input", { key: 'd3dfb6f59c4bffd573187b513abbcc3f26621389', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), h("span", { key: '885faf984fcf9070a1d700acc89dd53dfc5f0731', class: "colon" }, ":"), h("smoothly-input", { key: '4af1ab62eabdb841edd6a20b9db3758eff7e26b6', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: 'a909976d14881c52ff1461afde62ee22acccbea0', class: "icons" }, h("smoothly-icon", { key: 'd200862fdf9b53b85d1deb9569cf4b9c93aee077', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'c5391f31a81c2b9ed019fb27e5aefb2e41a91d49', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ac41f035d3f92fd3116dfcf360f2e4d921a829b0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), h("span", { key: 'ae5f1d26cffedde15e3857148fe17c985e147c8d', class: "icons" }, h("smoothly-icon", { key: 'f50114861f0731b7d5078a6ff683a065defa60e4', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'dbe69226779cb9f14e2077381fd9de71c96f5640', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'e047e6e5de085a1c771854ecb9b990ca16e1aa52', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, h("div", { key: '3a0ea948b27c084501a8a98c9ad31195077abd86', slot: "year-label" }, h("slot", { key: 'cc59da90159452014a6434827619eade272e75d3', name: "year-label" })), h("div", { key: 'a7bbff950447fab625edc43dd12814b24711d568', slot: "month-label" }, h("slot", { key: 'a5d595242c8424d5a6021e7306c219cc828dbfb1', name: "month-label" }))))));
+            } }, h("div", { key: 'a06fbb5b5d6800c17166980e056023768eeaf26c', slot: "year-label" }, h("slot", { key: '2baa75fd451515f003ae91bc1e7393765cee9de7', name: "year-label" })), h("div", { key: '0b35ff73fbd4e4a0b8b49938a2c8f4deb79f6dd0', slot: "month-label" }, h("slot", { key: 'f41fd202bcd5d82d87b10ec331e8de51bd518f99', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date-time"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/time/style.css CHANGED Viewed

@@ -87,6 +87,9 @@
 	transform-origin: top left;
 	transition: transform 100ms ease;
 }
+:host[right] .label {
+	transform-origin: top right;
+}
 :host.floating-label ::slotted([slot=label]),
 :host.has-value ::slotted([slot=label]),

package/dist/collection/components/input/demo/date/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class SmoothlyInputDateDemo {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (h(Host, { key: 'b0b29015752f46939700b57c62a07fa06ffe4e40' }, h("div", { key: '513e17083a0162befffa69473ddbdece8548e9ba' }, h("h2", { key: 'd9ac3875a4027fb083c7daad59d99fea4ce27ade' }, "Date input"), h("p", { key: '995523aa50c0634d265b3b9d91f5dac9a8502bf0' }, "Different locales formatting the same date"), h("smoothly-button", { key: '10a90fd4fe35c81b689d4c0cc547cc887b852669', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: 'b7d9b9ab464d611493eb029a1819b1890da7e0c3', looks: "transparent", onSmoothlyUserInput: e => {
+        return (h(Host, { key: 'cbba15250597a6d89b26f48ae9e79d6fced8e48d' }, h("div", { key: '15e49388b292c871a95ef08c250e60211bd7da69' }, h("h2", { key: '5027fbeaad76df66416ad518ba62e5d406f9aec2' }, "Date input"), h("p", { key: 'e0fda7a58506997767f4f8fd3fee8adf14ce482f' }, "Different locales formatting the same date"), h("smoothly-button", { key: '0b83e9e07173233d5a071a4799069b59dbbcf641', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: '237b78757e9984326376f0e9dc838f4481d02930', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (h(Fragment, null, h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, h("smoothly-input-clear", { slot: "end" })), h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? isoly.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", h("smoothly-input-clear", { slot: "end" })))))));

package/dist/collection/components/input/demo/index.js CHANGED Viewed

@@ -7,14 +7,14 @@ export class SmoothlyInputDemo {
         this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
     }
     render() {
-        return (h(Host, { key: 'ef33e129690f3cd0a771a1b12dcb8f9c79fa566e' }, h("smoothly-input-demo-standard", { key: '5e12871414915755af5fb0e896b2ae9cbaeec449' }), h("smoothly-input-date-demo", { key: 'cd9a7179d6d78b58c64a37329d170dafa3c4d4ee' }), h("smoothly-input-demo-user-input", { key: '1dc3897e7c1bb3de9b45084c880745abfadb568c' }), h("smoothly-input-demo-radio", { key: '3a6b7c1417ea8a91a62d4c911562175ba623c1e5' }), h("div", { key: 'd218e51f2785f7caed4318ea33aaab6dca63d05e', class: "inputs" }, h("h2", { key: '53ac6e802dd3e3581ad3dc2feb629537dbeaf9b6' }, "Calendar"), h("smoothly-input-date", { key: '25127e4d56c34404d0dc25d63b7cc96c5e8c3645', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: 'e3025c6634241fa1347c7b2c93a918288a2371d6', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '6db99859de7c13e9d6d40aa5c7cbdc25cddffd14' }, "Date Range"), h("smoothly-input-date-range", { key: 'c56da60bdb19ea3c0305d1881180845f848cb625', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '556c9c8b45219b64f966252c9ea23b8a02bf78a2', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd6e08652074753d81334f6f26872f16a4ad27120', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '65bffbaab83f117517cd37087c028d1ed2b4936c', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: '9abde760302f7d14296fc58d56b168ccd992c88a' }, h("smoothly-input-demo-standard", { key: '7145773de0c84eab437b1dc065202dc2cb19b37a' }), h("smoothly-input-date-demo", { key: 'c0304ad310674ae499009d58ddce974f7412c33f' }), h("smoothly-input-demo-user-input", { key: 'efde7d5d40929dcc96890f54a91797d0251db2bc' }), h("smoothly-input-demo-radio", { key: '9cde328a31101ee88b7ac3fd7f86abb00b8aedca' }), h("div", { key: '066262aa80f355d87120622b163621c209b0f43c', class: "inputs" }, h("h2", { key: 'bc38dbe23f7eb3611cac8cf83c5ce0634cb4e722' }, "Calendar"), h("smoothly-input-date", { key: 'f56708f29f4fa6158ea18b55d806215ee414c599', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '5fe8d855011464f877d70981663f27980080c16a', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: 'f060f3978aeb3707d20c26cdf03724ffb8b25220' }, "Date Range"), h("smoothly-input-date-range", { key: '397960f5adb2f9cdb84883e4a4a73134054e23be', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '37e2a88696a6c59498b203a00067c96028b8b7a9', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'e50dcde7cd3ce5a5286f5a9e6dfd8bbee00be2f9', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: 'ab99b94f110b3861c6b0350e555442325332f42a', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: 'e61e9737c489a68b612e38490fa4b2f95de72a6a', slot: "end", size: "icon" })), h("h2", { key: 'd7f0223de99a710561a28daf86ceb69d7aef1da1' }, "Date"), h("smoothly-input-date", { key: '2cf84ece02042c92ac3754379268a94ef536c91a' }, "Date"), h("smoothly-input-date", { key: 'b1b465843e3562c30e589af11004a09bf2b6157a', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '5810635fbfd26dd8735f8abd2c2e58f30affd61c', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'd63d51b77f52243dfa9f13fe2754e53919d21c06', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '7815c1afc2b1d38d3263630d8ef8d5a4cfa0a096', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'cf8b725f54894024063bb6735e17ed692195c994', slot: "end", size: "icon" })), h("h2", { key: 'db2776f12559673b653e4671f92c578471e65a7a' }, "Select"), h("div", { key: '64ef6bd07f27d07cf6ea6dd23ae434503fdcc740', class: "select-div" }, h("smoothly-input-select", { key: '0a0f832b86bdb2fc7aeb964d52f320a6d76cf40d', name: "select-dessert", looks: "border" }, h("label", { key: 'd95e443f3df2398ca64bd6bcd64d6cdd629d0a8d', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'c081a219a330aac151711e87423b474037b79628', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'c168ee280c6dea09c54d86ae72fe2c79e134d448', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'cfea0b38d63995c108f0277ca248647725d22a60', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: 'b93622e1a391c980d0c0371a0918dfca7ae7b456', value: "4" }, "Cookie"), h("smoothly-item", { key: 'e8733a8a51b09cea7ee31e4017f58152b58f5827', value: "5" }, "Croissant"), h("smoothly-item", { key: '90731e217754cb6c096cc190fb8b0c56c2bac593', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '0129f30c20777f9a37fc19ee8051e377507c9368', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '94d3b7ca28b5fe5f9c9a3c587d995c65c8be45ad', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '2d935f7418f8db300bf20412c4dd15934da5c0d3', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3c2579bffcde279703cfc041b315560a6dcc098e', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'a49fcce300b665b0de07fe67b5ea798e2fa94626', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '4678f38edab9f88113c056ff820df2bd07e2fe33', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'fdcf2ecd485fe75a35ca96ed89352a343819b770', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'f5cafb0e4b020489c72db9cd2362936449826dbd', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '8c49833f66cee2e2ebac320c67ee5452a77636f7', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '146806189c90cecb94e0bc9a01c713695689a2bc', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '56bc9c8ef474ce79b1af47086b65847877d6a03c', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b13d4158fadfb725ff6c1ca236f4724ba95936df', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '85d95f128731e5fd3ec1c1f3df672d98ff3a199a', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '3bffa0bfbce0ab015208bdff0d648bf8f6d497bf', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '05d80d05561b9a716ea94d8e3fb3e3d5afc66c4c', value: "folder", selected: true }, h("smoothly-icon", { key: 'f86490ab381f59ed6fcdacb1d7441697fe645fd8', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ec29517ce6ee5b7353bc20fc3c4365751815bfc6', value: "camera" }, h("smoothly-icon", { key: '75c27c69a18c0c37a6d989a2268ed9fa7ffb6daf', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '7ff7efc5b6f7a47da43fbd859a0c20cfb013c1c3', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '3eb848081a594d164a7144ac8fe91719c11dd950', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '7f6081c65f5280584d04b6ce8f7905ac77634a3e', slot: "end", size: "icon" })), h("h2", { key: '37f34f036ee7dc8fb75c4c00659da25e601ff5b1' }, "Date"), h("smoothly-input-date", { key: '511529a03ebe91114a24ac5a1942bf2007e1c338' }, "Date"), h("smoothly-input-date", { key: 'f0b777d7e776387614b9cbeb866f91fd20c86710', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '11c9d53699c3f56ab059fcc4ae23ae3ede7c3ef7', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'd8f02f6d1c3a5866f9666199b8dff8bffa2f020a', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'b818db6b9c7b7a3e52bd110795f814f440eab4f7', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'c099251b5d2925af72bf10d4e897f4102f62be43', slot: "end", size: "icon" })), h("h2", { key: '8033cbfa7ee22ca7440d58952676a43f092c1304' }, "Select"), h("div", { key: '1de49162035bde4ab43a46cea27a2e4ef016c784', class: "select-div" }, h("smoothly-input-select", { key: '2d2acbd594c6a260b1bd571f00a35e53db9f904f', name: "select-dessert", looks: "border" }, h("label", { key: '4a1ebbb1757580ebfba6c58651fa8207a186274c', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '10fe2d4eec5af17e61f704b594be8a700dde57e8', value: "1" }, "Ice cream"), h("smoothly-item", { key: '50f3be0902fa5d9989e0827df63cbbc1e4969a4e', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '54d4950affc3378a23311d30f01a6b75877921a8', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '2b669d8c3138b6bef8b2c0a5b0a17f07ea2b1fc3', value: "4" }, "Cookie"), h("smoothly-item", { key: '1d222cd2827315a43f1d8412777f2deab42c707e', value: "5" }, "Croissant"), h("smoothly-item", { key: 'f5582ec1306d69273508415467d56ef166d59592', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '903c91c69080f05179a1d4c5c4176f651bbac1a7', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a73b2cdcca14bddac369727f65113cfe2e36f9c8', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '264c0c5c870d69ccd4acd552c0c69b75bdf41322', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '1b013b6fce5892e21cec768704c1c7847f9c2d6b', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'cbf0fb98cd04b4c21d56c4640ebc7fea61de1b8e', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '5244238b76c116e31888c36887b3f4ac5c88f2d0', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '665cd5efa69f937a8de2e16549f6b5030f87aadd', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'f33f606105a30eadeb8ad91d1d098b59f03f1de2', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '903d7955210a152bdd397bf011ede1bdff121949', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a3b64c46106cc3059130d7c3a91d7f490d1d2751', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: 'a004cf922bae1aad8f4df3af6898096e965cfc6a', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '4aa4ef91d108edb11936203365632dfc604e6973', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '12985b2fd02dec4a942274c1ecd0b8d64045fb62', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '926065319fff2eb3024955686991469cf4128a36', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '1ac998cba750b6779c9d2159cef8245ab915f528', value: "folder", selected: true }, h("smoothly-icon", { key: '30d4832563d4b16c0bbb77cb33e0da404b743090', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'b04f79adc06b65369baed20874f53ef04a33f80f', value: "camera" }, h("smoothly-icon", { key: 'b16eaceb42a9e0b56587ce78e8cfdc6452dddd7b', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '5e225cc4758897b81015db7495c7d7a224776e53', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '4b9bcc2a3fe30dabc8669888a19ce86f369cc41e', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '36db6fdd61728c21488000fb0e588858726de95d', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'b3a93c5d2b02f5c5ca50e2041db860082432ba0f', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '5b3f4d4dda6ca6bac04d3d58e14b1bc6808a515d', value: "1" }, "January"), h("smoothly-item", { key: '2137f933a08f0bff7661ef7eedb566ef0613b2c0', value: "2" }, "February"), h("smoothly-item", { key: '2b60b2706c7a4e560dc61969fe8bff8bae2ee3b4', value: "3" }, "March"), h("smoothly-item", { key: '10f7a805783997893080eba61a3a293901273b7e', value: "4" }, "April"), h("smoothly-item", { key: 'fbb81488473ab771ba92650e7f6c0d1e385a5486', value: "5" }, "May"), h("smoothly-item", { key: 'bb9a696e13859137773158b219807224c9e456d5', value: "6" }, "June"), h("smoothly-item", { key: 'cb9cb347df1ab4551d11a6104fea41e53646f7fe', value: "7" }, "July"), h("smoothly-item", { key: 'f636d5874c7b810b59d9aea7454ee060093946ff', value: "8" }, "August"), h("smoothly-item", { key: 'd7882ebaf8e4b13216201b04201f19d0152c7997', value: "9" }, "September"), h("smoothly-item", { key: '30815b5d8ae477d52a6896083f58d5e913fc6ec9', value: "10" }, "October"), h("smoothly-item", { key: '70658c05936d61c7e4faf8ab265d5e7ae448774a', value: "11" }, "November"), h("smoothly-item", { key: 'c737ec283e42443c75334f925d7fab3df2527a4f', value: "12" }, "December")), h("div", { key: 'a149cf4a6ebc5828e095c10e9d6d57abbc43c359', class: "select-div-row" }, h("smoothly-input-select", { key: '0b32d71db9eb24afd885c46ea5f414be1e55133c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '1c4fb8eeb730b8cfe6e4818ca16c565014a159a7', value: "folder", selected: true }, h("smoothly-icon", { key: '082d0bba96283c4bceb9f92c3e772bd3fd8b7011', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ea4df02bbe52f26a1888b2f74ed587beb09890fe', value: "camera" }, h("smoothly-icon", { key: '166ec449cff9acf04d866ac4786ba9f30b2a3b42', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '65aa76f7da4c5677b031fe45a5a86fca0a3d29ee', value: "boat" }, h("smoothly-icon", { key: '32d5688b2e74006e65131f11ee06890d8d52b5dd', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'fccc2a0bad4e53a6fee2a5ceca85a59b91d70090', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f8a91a3e5d64b5058bb91a50dde94d3eb128f7b5', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '012a2aeb69da69b0ab9cff4b761500892f2c9aba' }, "Duration"), h("smoothly-input", { key: '55df5644b13c507f13d0efec711da4c3ae59dc95', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '4aa5fe278bfd9e37e3a625b67304cadb164bdd78', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'a171d4ffb8e1bfc698f0fc9ae4ed69e98ced36c9', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a23c78b0a859472f5e0123b0c02c010911417369', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'a733057d56e91b60e5baa989e26dddbd91e0241a', value: "1" }, "January"), h("smoothly-item", { key: '376d92471d5d2eaa9dd88812a8fc583153410198', value: "2" }, "February"), h("smoothly-item", { key: '7a1fce8efd0b7974e5528a5fa5662c1dfd778394', value: "3" }, "March"), h("smoothly-item", { key: 'cb9baf077486cb9bcdbbf89649530a5e0d6063c7', value: "4" }, "April"), h("smoothly-item", { key: '0a3473edcc3c472a629ba3d8a79f902acb2e26f3', value: "5" }, "May"), h("smoothly-item", { key: '5fdae912db41bffabf3b295d2c3032277dffaa94', value: "6" }, "June"), h("smoothly-item", { key: '80047591254fd32dc669b14753e4786d43d3c97d', value: "7" }, "July"), h("smoothly-item", { key: 'c9df20403a3c394c64aba952b9fedf32e79ccb4d', value: "8" }, "August"), h("smoothly-item", { key: '68313242691a68d57283d668fe9b515793737c7e', value: "9" }, "September"), h("smoothly-item", { key: '443d7a691c41599d0d89db84b537eb1f257ef517', value: "10" }, "October"), h("smoothly-item", { key: '9744bb0bda7582ad2b8b1f90fdf8032258463c54', value: "11" }, "November"), h("smoothly-item", { key: 'a96a75320e5c546549c4fa35f4176f35a82f5441', value: "12" }, "December")), h("div", { key: '3e7603380ceba63da34a828e2516632da73e39c4', class: "select-div-row" }, h("smoothly-input-select", { key: '408634ba59447206b05b3cd1fd1cc33d1eb8c65d', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'ee676953d6e5787b02d09f18296c90f0de191c1d', value: "folder", selected: true }, h("smoothly-icon", { key: 'a904b9c0a3606d2427f70b0de7038c58e126eb8f', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '3005772f6f0db186e465eaa8cdf0664acc8df98a', value: "camera" }, h("smoothly-icon", { key: 'd6d6da52e16928ffae5914bb57c5d507dcd753d7', size: "small", name: "camera-outline" })), h("smoothly-item", { key: 'e7f997b52e887a470a300bde751cb2972a8a6d1c', value: "boat" }, h("smoothly-icon", { key: '7d2fa7593473fea8a742b06451b86234dc2c984f', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: '72b7dd2b8193e7daa76e87e2b2c0229e6542b95d', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: '2eaf99ab88e42d799677b83d1e7cac4bf27b2cab', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: 'bdf117c705543939f57d4f8c001b9bd6b0f6d419' }, "Duration"), h("smoothly-input", { key: '8c58c7e2d86e031ffb41a6a46fc738bd87d73a8d', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '0e0b25be2290f7adfc1dc72807e11791965a1ad8', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: 'bb855c65c4b59aef87c9d4d18ac6db6b6d21bdec' }, "Integer with Min/Max"), h("smoothly-input", { key: '1a5e0092eb5330cc384aafce47e1438abca4a590', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '359faaba1e62172b0224c8d8ec58e49cb5a81f09', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '6ce0655a6b0134ce4175d65f80792287e48eefbe', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '3ce841cda01cbb2c4f346009648faa281831a4b2', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'e63ebb0b5996cbf653c6b6c969df48d635e28c30' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '62873bd1d9eadab148e0502f44fdbc779aa5a789', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '04dffd24a3af57da6ae369a8fbe9372893e6e380' }, "Identifiers"), h("smoothly-input", { key: '3d18b596880f98b84a07742cb9778d0095719294', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '190651f4f4263eaacd8b80f90f4074fef28da183', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '3a8802a9a173f518f975717cbe23cd1150316fc5', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '00ec5419cd67a7217d23f95513f451f2c8e98f8e', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '93eac4cce148e22640908d0d2f7c19a04b66d3f9', type: "identifier-camel" }, "Camel"), h("h2", { key: '98b93a5cb9daf216199adb5fa089ddd84bc96c61' }, "Input Alternatives"), h("smoothly-input", { key: 'a031c081e8531bad8400469ae449757958d7324a', type: "text", name: "name.last" }, h("smoothly-icon", { key: 'bf00331aeef0f1046c5505911d7db6ba845e636c', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '7824cf3b501d802ff40e4a750dd46defa9cac8b6', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '497b0417f5e7b0714753b0e5d78a78ab18130007', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'ba93dadda8140d398c1d350f98c53d2a08c440db', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '28e8478b908bb51c6c5949e986c69930d1b10cb5', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'fcb8531d6fe4129585e9a6d6e641022f2f14cb94', placeholder: "test" }), h("smoothly-input-submit", { key: '97a4d319d250ecd00ede7a5beb2c06b077e8e82c', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '50579aad1a91b0c728a127076a37be38273b3635' }, "Smoothly checkboxes"), h("div", { key: 'ceee0a83b7626132ac6323dfd894d8ece7ea2f69', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '0eab1d5ac670458ab57af847c9996fcf874fd985', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'aa4259b0bc0193a0e31b2bdc2f9550d1e7a9cd66', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '38fe8ffc98f95b0a81aba7dadb0a46f876ec09f4', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '40b2451d7fb2f705251abfb2158bc91a31ae9d3d', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '34675173c8447131c978ca934fdde0d8764f44a8', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '42c6dd2f0fd6bb72d8ce31158f0451c5f500fe2b', name: "third-checkbox" }, "3rd")), h("h4", { key: '94ddf8048c28f947c3d20a2440c49e9340448c58' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '0e308b17b5783bb23ce817cb30fbb9237a1b5b65', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '61ab423d103c3f04fbaae7d02d0a1685d576fcfe', name: "checkmark-circle", slot: "start" }), h("label", { key: 'f75b6164630e97ad5f1174c08afe841e7321fe28', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'fd4284b27663aed055dce8671b46881789ba7dfb', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '9554d37989867953cefb248a039d1c6217ea0c4f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '7643fa634aa9693163de7926468ea47ea99d232f', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'ef750494dee99f5bf962f93f143a80a540834f20', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '3cf94704be4ce872a79a97abb4dc1828ade9ad71', name: "radioSecondInput" }, h("label", { key: 'd3feeed0e6debeaba6e95eec7c6effa4e3aa0484', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'ed5bc06f71277cc4ad5e644d4b07c42c80dd1027', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '944215e958076b552f4ee8e5728897f63e88657c', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '273705d445c5b1c1c01f6cea30bf8ad4036f932a', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'c16dee456ac64f1aa945dcf6934ff6734c63e597', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'd9795190e66042dedd027a4780900e2a32548ebc', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '985a353d4d42885a3597807d9b3a1d6fe2692520', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '011666bd072c688123437302f21ef556b9bc45cf' }), h("smoothly-input-color-demo", { key: 'a7e2fedb5277f19eee2c670bf88c1089ead1eb92' }), h("smoothly-input-price-demo", { key: '3e2f3d6d9e0e368ad4b8c7f3294bbc8cb19d3358' }), h("smoothly-back-to-top", { key: 'c2ecc189b026a4eae72d521e4cdffcfbd58ddbd9' }))));
+            } }, "Duration"), h("h2", { key: 'ed1c66a6809ae277a848826be61161405e712e89' }, "Integer with Min/Max"), h("smoothly-input", { key: '220dca7d4c2fe1111025b6e44d23a40d105efe89', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: 'e2b1ae2d00b98366ee26f02d37915e319736f002', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '1ecd944814b02bbd94314507d76bea0f988352f4', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'b8990cc9cad14d470ca47ab3c6c04b4f685a0c55', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '2a747aa7ff1fb76fa374c730b59802c8f3a508cd' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '817b52d0ef2e31056e8ee8a7faab79990797c732', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'cd628bebd9e2b9de77eb82b0f9591cfe8d7b3ca2' }, "Identifiers"), h("smoothly-input", { key: 'fe1d2d89f25cd8a60fd537bfb5a9580548491604', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '14d47570684ca9165381718becda2f318c9c88bf', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'fb5ed7f2a284640369bf648a548161d233756dd5', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: 'cde9cde9c787d99c0eaf75085f0567139b8130c8', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '509c743780e2d2f0d759ab3cff67893318256443', type: "identifier-camel" }, "Camel"), h("h2", { key: '81ea90cb970b799945d3aeb14b70bb8184d911e4' }, "Input Alternatives"), h("smoothly-input", { key: '01ba72593f0e056a20d87c8722e2bc4317932962', type: "text", name: "name.last" }, h("smoothly-icon", { key: '70491c3ed08d7f0d13a3cd8eba72e47fa1de1008', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'ab3a45839ee4d8bacfac8ca96bcd7ec260ce36d9', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: 'a7996638a9ec278f74d967e0fcb03dcaf4445315', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'f524fc067947a8637a1c416a74d3de0c37744255', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: 'ec440199d9625155037e1cd9e614266748997f7a', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '27cc6d614a7bae4893462b5e708cb663bcffcec1', placeholder: "test" }), h("smoothly-input-submit", { key: '789ee37616c3c27e8e6414992be1f9ee2117a5d3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '5c256926b8f451dca0b5297992f6a6312a2f5494' }, "Smoothly checkboxes"), h("div", { key: '6650b3b1b27d5fbca72ef5679f03d11c3c5cc1a7', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '9030dedf496556b87212376fbd15617f6abebf48', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'e3a47da2376066cdfc082fbf4100adf340b70f36', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'd86dbe0e70d983c82791caf5729ed0510df48b4d', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '28505106b36406f9a24fdd0f8f27dea211544f38', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '7240cc38a40cfe3ca5ee3cdbb5ae971ebbf23efb', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '64df44307f15d6ca5878b5933b847931973a4bd4', name: "third-checkbox" }, "3rd")), h("h4", { key: 'd6cd694e036d14b16241a4664ed9e9a6b9257c80' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '43f5fe05e6889b3f009a85a996ca9f3df8418d85', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '67303cd42725a67937687862934c5eb4efb08617', name: "checkmark-circle", slot: "start" }), h("label", { key: '20faf3230a26de4d0578cc142212f849447826b0', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'c8f0663f1aca55d837179e535675837b8c5dc486', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'f699d87b7edd1e815068671279f6454a071dd26f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6c76a26cbcf6c0279ea178a8c2fa5cb70d592614', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '146770892b8d84fe6686d7d360b2c119271b068e', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'd15590998dacc095683e2a2149bd4d0008458c6c', name: "radioSecondInput" }, h("label", { key: '91206150e39f16cc6b63c27e936e0890d085dd3c', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '4be57f196fceca8c421b1a76539383e583815d47', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '64fb53d589cbc3c41d2716bcd0a94e0852b61984', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'cfd1618ca1085b04f892a0f7c41c3ba015817f8e', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '5204c85dc39eb90eb2203f7bc95465fd3505e0ee', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '7beb685e25cd77b0c4ee67d52c08d3dda77bbb43', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '2e540abce5ef3a5ef00f9bf66e28d4dcc2dcf033', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '0734d3ef8222645914a3de1baca3a564658155b2' }), h("smoothly-input-color-demo", { key: '4efc6abf40e3b21f406e0bc0c56e0b1549bf7c62' }), h("smoothly-input-price-demo", { key: 'bd457e1f8ac312ee0feb1685bee15b7ec9cfd451' }), h("smoothly-back-to-top", { key: 'a1795f547d9bcfc820f76df3e60f9611a8d654e8' }))));
     }
     static get is() { return "smoothly-input-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/price/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: 'c467c7cb0bc71a80d80b0249bbdaf6b6be48af4b' }, h("h2", { key: '216b76ae5cb923903331b846f0897471ae96bd87' }, "State demo on smoothly-input"), h("p", { key: '50522fbe29c228cf83f1450dbcb32e96d37b2587' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '5393c97d661ad1dd1fe8bbac11a2f731ad7fea77' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f782f50671c0b67344238121e6d742df328672bc', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '18a4f7dbfc952fcfa6db9188f8ad98c0c7f98731', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '2643df3e90deb2ae7492de2e95307210c9d96a1a' }, h("h2", { key: '8d7c08032c0fd5d42ea0a4b83bbc789ee12ad60c' }, "State demo on smoothly-input"), h("p", { key: '7bd734e458356493b22a048bf6b3cc33eb089a88' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '9129cc133c3e16c1473ce93c4bf4e85f02e1dc76' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '100da1f7a7e0a4e8ccb610211dc1ef0f9a324853', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: 'b60680c3c0a27ab6e1616844da966aaf5add80fe', type: "price", currency: this.currency }, "price")));
     }
     static get is() { return "smoothly-input-price-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/radio/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class SmoothlyInputDemoRadio {
         console.log("selected", this.selected);
     }
     render() {
-        return (h(Host, { key: '926c46d5493184b5562db849fe49f8bc69467635' }, h("h2", { key: '482f5b5dad79420a7d17fd32f8ca364fff3fea40' }, "radio input - column direction"), h("smoothly-input-radio", { key: '56b8f69f400852f3476747d3cfca4e208659a55a', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: 'f8efa9578d1cd57ed8a1c39f99d1ceb61dc15c0a', value: "1" }, h("span", { key: 'e8a9613c4be5a9a5f22e27376e2a5c3dc9432e9e' }, "Option 1"), h("span", { key: '59f7cb9ed2fb5ca96e16af28567e6ac29c920ee7', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '6c4733d75808282a051c25ccafdbffae1efec8b4', value: "2", selected: true }, h("span", { key: '135b8ad7de02530fb2ec7b1748c706ed7ad6a275' }, "Option 2"), h("div", { key: '8d8beb1041e44e46afe0423540b385ad7aa0a0d1', slot: "detail" }, h("smoothly-tabs", { key: '9295b932c4f29d8672003b063930beb56075662c' }, h("smoothly-tab", { key: '970586efae1aa46ddeb1c6ef203b89682251d77f', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '8faade213577e3d7cd4481f8c09ca80210f8312b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '00c1e6c7f8fa0e3d2ee17f20ac212463f515c7a3', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        return (h(Host, { key: '1d9b9369e8ab2eaef5660633873c4e9d6688446c' }, h("h2", { key: '3ce4a937fed4e899be4becf616b328eb3bbf6807' }, "radio input - column direction"), h("smoothly-input-radio", { key: '3f99a12df3e65d6e43ca7c1f592dc4c358b4f173', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: 'feda533691060ea6c92b08268e5ce977b535e8cb', value: "1" }, h("span", { key: '3635ace507b96b4596f612244f47bd52fa4efbde' }, "Option 1"), h("span", { key: 'fed88b7f85dcb5f40bd76defb20d337945ae1973', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '4973ad139be68dadadf3632b10734a70cd9dadec', value: "2", selected: true }, h("span", { key: '0c00fc9d3fe743d98322e37b04d250207ccb86dd' }, "Option 2"), h("div", { key: 'd2eda29ea9aabb04c4f017b7cb9f3500033efc38', slot: "detail" }, h("smoothly-tabs", { key: 'df82602edfa7865c748dfc801b275ee6ad420798' }, h("smoothly-tab", { key: '5d0d4ad5de30797b4146bbd3b49f3d437eeb7be0', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '96c1e24f24443f3ca5ed9110c1f61bfe83e77922', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: 'fec1d4386c7221ed7164f89b0c4b74caac413a54', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
     }
     static get is() { return "smoothly-input-demo-radio"; }
     static get encapsulation() { return "scoped"; }