npm - smoothly - Versions diffs - 1.69.0 → 1.71.0 - Mend

smoothly 1.69.0 → 1.71.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 (455) hide show

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

@@ -7,14 +7,14 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '02c6c030b29696d4b878e39211f11d2034213802' }, h("smoothly-input-demo-standard", { key: '29da7f4660380a019baa5700b40e1707e07e8fe8' }), h("smoothly-input-date-demo", { key: '698515282f4743cd6bd9cff5aeec2e006f3df8b1' }), h("smoothly-input-demo-user-input", { key: '0108177648399fee1e5eeeb2191434157b9a0cff' }), h("div", { key: 'efff19f824a0bb0c4ddde67ce1e706bca13fc648', class: "inputs" }, h("h2", { key: '2a481228b1590a7cbe05cb5b04ee3d8eb5cb91cb' }, "Calendar"), h("smoothly-input-date", { key: '9a06d7c17b8f5662ae99efcef8ab6a74c5ac7f80', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '2e09d9e8b336fe6fd04343bd1ba1d5585b1d0a23', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '7754e1dd6f71106c5ac79e720a3270238237cb79' }, "Date Range"), h("smoothly-input-date-range", { key: 'f90833ff2e3ea89da4f67b66896e689de76089a0', 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: '4afcb3d73ffce5a5da07e82378440d610b2f529b', 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: '065721a5981a760cf620cf5df3916a3eecdf9937', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: 'dcb097ef6151b478e9293d7eb7e86e694cfc51ce', 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: '7f574c5c82806c7ee00a06c793b883984cf6a317' }, h("smoothly-input-demo-standard", { key: '7776c856dfbc7795c37b12f4e1ccff9a58a53f02' }), h("smoothly-input-date-demo", { key: '8695fac1f681495d23a203f0c1e658369a5208e5' }), h("smoothly-input-demo-user-input", { key: 'a6b2084ab3bb40d10b12807cbfa18ec4aa8c80a5' }), h("div", { key: '50487efa2c862624ce4738c461878b38efcbb8f9', class: "inputs" }, h("h2", { key: '48456a442136dcf27f068d619a4648f21231d4df' }, "Calendar"), h("smoothly-input-date", { key: '4ea9c301b995bd9ba221deec879a46c4fca68b5b', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '0e87054e90eba9ac97cdcd48cdc2094deb765efb', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: 'c7967bf8213f8e987ee1350ac4b86bbddd4794bf' }, "Date Range"), h("smoothly-input-date-range", { key: 'c5aee42f2de2c7da2b95e724e4e545e5459f7ca6', 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: '1371f956391aa79369174d3bfc22bdb5ee5cf996', 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: 'd1b12734f006eaf59d8543c0578539f67245e0f7', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '23306a5a8f414e14691e9fa39c9282dfc6ae3d1d', 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: 'f72e6e921dd9f810d77b03a3330e3ed8d543b641', slot: "end", size: "icon" })), h("h2", { key: 'fa40ddfc2df454b63bb3deb5d4105012b9caead3' }, "Date"), h("smoothly-input-date", { key: '7470a11b7227dd819efb0776c80f69efa6a56f78' }, "Date"), h("smoothly-input-date", { key: 'de5bf36036f1b5da0908951a5f3a5103e1189bd6', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: 'a7a3830618338f53633c1d3eea1b4157d7b3e631', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'b7474fabaa8b810c612a561c71fea0eb876231be', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'aad99e3c91e392df6667e93ce3269d8e3b87f9da', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'dd325f345b914a63c2a5a56410a25eff4c0dcc4b', slot: "end", size: "icon" })), h("h2", { key: '6b28f64444f72c2b0b234cfdb89bc2d1ae90c6f9' }, "Select"), h("div", { key: '702430373d5cd8450e1f4fd0a608e737f7ecac93', class: "select-div" }, h("smoothly-input-select", { key: 'bd6095e851876898339c04e896aa9eb49be90617', name: "select-dessert", looks: "border" }, h("label", { key: 'd9a8be4a7d6f6c432e69a689e50cf62607967bfa', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'bbb612f77f99bfde4986cd0bb6d46001b9a35772', value: "1" }, "Ice cream"), h("smoothly-item", { key: '7a6ef3c94ddfa90652af33bc4871854f635ae556', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '1c8748a79b8c2f5444fc53701f7e22a770f74776', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '22ec8cb9b17f1192e7cdbf9e08fc9ac86f2f3d5d', value: "4" }, "Cookie"), h("smoothly-item", { key: 'daed2bce2b2457e475c359650a5bf8096c4f599a', value: "5" }, "Croissant"), h("smoothly-item", { key: '763b4346bf1e747ebe880546484b2fdccb6383fd', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '839a9ee179e0db3dee1d95d134eb183eec71eca3', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '131bc8ffbe9c34f99fc21e4b703ba91894729b97', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'bcba7645c326f1dbaf6b839fa4508f3ee3a4dfb3', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: 'ab2fc409901be2b2a54f0945d035c0cc2a0d7072', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'a1091217a339702ad2bc8578c7c8bbe3dbc25426', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '234986625866de7cc2c2d6c885826b03aa21a14a', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '6f09156594358ed5d95aa51640f2ef7faf0c2c36', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'd6a95079f82a453c42ef2f658edf5a1dd59c8e7f', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '892dd14754d61835a00db07f294a836212a45f43', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '5c13e14b644ef338475691c6b9c0fcb47be8a2d1', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '2eea8582c81d3cd42e2b7f69a5f7c147abc3f237', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'ffea457bf3b910c990d0a9e8b3f158f318690609', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '41b5c5e809c2173e796f8ad833f07a25513ca26c', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '4d9979185834b91ae99994c16502d4ae77b1e6a2', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b9d79a685d0cc41a3e7204528b528cfda9f80b5d', value: "folder", selected: true }, h("smoothly-icon", { key: '90a40fac1c5b4b3b031073afa5c77050948e96d1', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'd59af441742413b7aaf6cf3acbc4bdea384ece7f', value: "camera" }, h("smoothly-icon", { key: 'fb5549f6e4aa9e8c1bbc8a3cb8455eb0355cf572', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'ed38409e4c605efa406cf0ebcdcf1ead28744c28', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'bde56117f37632fb62914601dbc064cdd679a2ee', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '1774cefd3304bfa5c283a10cc44d85f6fe1eacc2', slot: "end", size: "icon" })), h("h2", { key: '7dc7b7271a81cd121f10fa61e28e88eaa037af3e' }, "Date"), h("smoothly-input-date", { key: '17b588159bde4dfbf0146ac942fa235d8d998688' }, "Date"), h("smoothly-input-date", { key: 'b9445869f64033bac130b0b0dca501752610af95', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: 'f34cd3598997c242ddb6b76698f7f821a601674e', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'a46fc2210b837bebdc3cc7a27b07067e0a679476', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'a3811bb817fbdf3d28474494b8a7dffd71fac67a', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '0499c2a7c5434ed716ad1ef87c2786609d94e97e', slot: "end", size: "icon" })), h("h2", { key: '683a2678f46ad1989cc4dd2edef990430beb547c' }, "Select"), h("div", { key: '682acef1f140100dd2e985b6899b89e4914e771e', class: "select-div" }, h("smoothly-input-select", { key: '2e38d749bf959df4d3ced73e8e9d59b8e3d38a4e', name: "select-dessert", looks: "border" }, h("label", { key: '01432777fc4d5bbdde9c83e24015513b6c14016f', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '0f53eaac56e52386945622443068d6769f57b382', value: "1" }, "Ice cream"), h("smoothly-item", { key: '4ad0fee8dade01fd46c1c97397bebb9183385562', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '67fb0107c5cd4294725f6a8399f5c93d589ee717', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '422b942a8306f00eb5cff7ef79d81ecf57033291', value: "4" }, "Cookie"), h("smoothly-item", { key: 'c77baa484e234d42d66c0e2a436f5ecdd7510b33', value: "5" }, "Croissant"), h("smoothly-item", { key: '36f84fdd871d2b8b7b89df7da54d07883c052282', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '1b6ab234c1c7c58bb065165373947f922ba466b4', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'cc2452592ab8c6b99b9630f9e464128c4a464350', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '9172fbe566574d3a6376d69dec7a5d6b50834633', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '75f90ab0248783d98e5fabdbcca908da69b1af21', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '91adf3c9485a41aed6a5acb6edad6a76c91e13b3', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '3dc66017de31e85c8d9ea8a5127a1cb2b7760071', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '733bd688bde445381df687fd17fb0d8a0ed8bf3b', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '1425d34d36caa1cb8bc15307110b4c5dfda7c2d1', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '5ac44d62a99fa114f404edc847b645305f4ea42d', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '79fb109059a58e0f50f525f4437639c621b83b06', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '33400cbca7257a35b9c931e046c51c18e50c9b55', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '0b394b9204545e7fe0ea938127c6cb625eaa919e', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '8643b17c6b78739ce7c41737fd7ee764f4933c0d', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '1c6f7c00f1c21a3be1a8390a28306a5720982eae', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b07f756a35e549b77e50be75f3a5e2fafc2b3099', value: "folder", selected: true }, h("smoothly-icon", { key: 'c50555d5282480fd507d55311bbfe0723dd03d53', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '6fa0811cc61e90332301cefcb2688ff27e31019a', value: "camera" }, h("smoothly-icon", { key: 'ab64f6988bb978556353d6d0097617d526ac304c', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '7a844e5cf695497cc30429d3e0bfb51cf30017ce', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '3b319069eb3dd5c5c7270acf6e16b5a3b7655dbf', 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: '92ab8563a04b4d080f55b679b665e01bb06bc55e', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '61038bc0e13696bfaa42547d061de2312ac015de', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '6040f20bba3e43562235a959cd96d5a18683ee6e', value: "1" }, "January"), h("smoothly-item", { key: '3ebad72e31b988cfb18bf2472b45fd7ddbe7ee49', value: "2" }, "February"), h("smoothly-item", { key: '874cf630f55510b329ab3842c3f27f96538d28db', value: "3" }, "March"), h("smoothly-item", { key: '8b7158079c40c878291c07bd4845878c593445d4', value: "4" }, "April"), h("smoothly-item", { key: '172269ef02d682562dd436e9e90ce1fca1d3e5a8', value: "5" }, "May"), h("smoothly-item", { key: '2134db55c89b4ff9b1981bc40677e333eb8e637c', value: "6" }, "June"), h("smoothly-item", { key: '114291c42f06079b9a653e2e151145538617a093', value: "7" }, "July"), h("smoothly-item", { key: '08728c04025a05f13216570caf0149750330196f', value: "8" }, "August"), h("smoothly-item", { key: 'ff810501892f1eb13b084bbaf8042f7895273803', value: "9" }, "September"), h("smoothly-item", { key: 'a77c8da9ae3849264205eb4f60a3c239b116967a', value: "10" }, "October"), h("smoothly-item", { key: '8438d819d6147802d17fa7d44ab9ad7e5730e230', value: "11" }, "November"), h("smoothly-item", { key: '735e62cc28212ea7b551d2feddd0f28856fd256b', value: "12" }, "December")), h("div", { key: 'c46100f9ad1e6b6df3c0cea3c3b0fa3386e7c259', class: "select-div-row" }, h("smoothly-input-select", { key: '99f2060a4878c75997e4d79d8fe0e66f7ca93ac0', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '5490827cc8f1b7517c6aff700cfd1f49a896d5d9', value: "folder", selected: true }, h("smoothly-icon", { key: '2e84be47fdf412e3ec6f99d436b98041021183b2', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '47a082f6a100a310a36b5e3115843ab1b36a7c12', value: "camera" }, h("smoothly-icon", { key: '6c7e7403ef5f04639148f800eeeac0ab408cfba9', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '428f3905bcc0b96fda19ff19a2ccd6c3bf78ed71', value: "boat" }, h("smoothly-icon", { key: 'db219dd94443390148d7021c31be0c326610483f', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'f942b05e792114611d9e346a1a194029fa661860', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: '602eabf78df4fd33011244d4af1d873609d58cd6', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '04635283edae69ec3425f0dc0278f83c17c4f6d7' }, "Duration"), h("smoothly-input", { key: 'c743ba931a63e30e4edb94371fd743f7a578a052', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '603abfbc13a98c8460324adb96c8c2ac83204f6a', 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: '24aa969e8e2608189b3c443e09ef3fa98c9feedd', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9c9c9e0d707a6f96fcba1b686873a9010be75a7d', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '0b6387482d71923df9e0b9d717d3ba88d8c98bd1', value: "1" }, "January"), h("smoothly-item", { key: '0947d179f35c567b557bda9dad655a8e25f6dd25', value: "2" }, "February"), h("smoothly-item", { key: '38daf41ad88e97e0852f296df2e5489948fce0f8', value: "3" }, "March"), h("smoothly-item", { key: '9ff729a187a5df043428043439a5f09ecc7260a4', value: "4" }, "April"), h("smoothly-item", { key: '71719ee81658c4897712459e3165accde7765bb8', value: "5" }, "May"), h("smoothly-item", { key: '7e917da27127b438a7de7d3c8e0aa3dce4eb2d72', value: "6" }, "June"), h("smoothly-item", { key: 'b70be51c019bf2f8dcf3e9e06168ac024b0a1c0b', value: "7" }, "July"), h("smoothly-item", { key: '32b97c0167a10cee962e417018b829723671ad50', value: "8" }, "August"), h("smoothly-item", { key: 'd54ca3fbb8cc3e1d68f9f68b9dbd4d432473e920', value: "9" }, "September"), h("smoothly-item", { key: 'd2209e23a9b8db4ea2281421dc108b177e1c04a7', value: "10" }, "October"), h("smoothly-item", { key: '73621556ac499b85857df738fc3bf1850cd4f964', value: "11" }, "November"), h("smoothly-item", { key: 'c6793237c76e6a26e374198ba2bdcdf9e8643251', value: "12" }, "December")), h("div", { key: '099d5c7456bc5836d7f0f2a840eb70ae81237f5a', class: "select-div-row" }, h("smoothly-input-select", { key: '804cf7f085aef7513ef3b76057af284dabab699c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '830e7259b185f6f5e4df5f31545063549c2a69b2', value: "folder", selected: true }, h("smoothly-icon", { key: 'abe9cdf7e8096b1b317bb6c62a9b274271479391', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '01607bfabfaa6df288dfd242c90e41af8e4fe5b2', value: "camera" }, h("smoothly-icon", { key: '71481f1e468a8e3dde815421f18ec6ee94ed7384', size: "small", name: "camera-outline" })), h("smoothly-item", { key: 'a059b96cdc6c6d7df8ca5185b81d53680c635b22', value: "boat" }, h("smoothly-icon", { key: 'ebe1246148aa4df73a62461f885e4b846e502836', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: '3eed3dc23316f18ab61b20a17ef3a602b8ebe7f2', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'bcfcc36500f746e17649c9ad9a553b88dc0823dc', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '041402c92d6c43264d811dccc9b8ab6004a42792' }, "Duration"), h("smoothly-input", { key: '451397df5c93c9bc71b5a13aa5a3d40e6e7dd42f', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '6fb8b8e8ea5b94a5fbdcca74b3852b75ef477a7c', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '92267d9df3323d81f958a3661f792ea7b77d45fb' }, "Integer with Min/Max"), h("smoothly-input", { key: '5ea4490bf6f0a3404cf66b53079ce2ed91e17c04', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '465ac753815e89812704ae20999487204e2f7613', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: 'd196b5c765509af843ee11d4d8827478a4ec333a', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '0afdd4d6d6ea407c77df2e76eb240e1b84c2f994', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'ca4e42874c06aa11b86fa57b01a83b8ec736dbd8' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '06263a3ef601bfe3554afe1576e31e304eca5bd4', 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: 'f78387790cd60d813e699c42f3c76e99cf67424e' }, "Identifiers"), h("smoothly-input", { key: 'ed74deca29700c595ba1d970028b7c68f415bab2', type: "identifier-code" }, "Code"), h("smoothly-input", { key: 'd94a1250cdf3003bb09555e842189d8d7124e56d', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'f03ca6c6c7df6c5d6cff5ca5c66430bafaabbf28', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: 'c63d11d8801a0be51cf2c340ff9b998dfbb5a50d', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '51b3067f7480eba8d1b0f091da9d42d5a2a1d112', type: "identifier-camel" }, "Camel"), h("h2", { key: '7d088cae8df3265fb1992dbbfd1b67eba7f56c1c' }, "Input Alternatives"), h("smoothly-input", { key: '261bf5ec719c209aac0016e13febf6007e0d2706', type: "text", name: "name.last" }, h("smoothly-icon", { key: '45bb04919bfa7cbb737e8262bde5931e43ea8242', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'baf8310bac3c88fa3370b6c4aa9ab1bf639d0099', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: 'e8e9385c2075615a5aaad9063004a17670d7f3ab', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'b71e3fa40e20f1f40ca67b0a02276f6fb7fec4fe', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '1d8ae1d64d7263fefb262af56a1d2d9f41ae20ab', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'ea8d25a462fac141c2254e79de7e8e62a6859481', placeholder: "test" }), h("smoothly-input-submit", { key: '12525826fc264c23d2deee1f4ba753a4f18145a3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '4eb4065eaad99c77903c914b142d05377c70110c' }, "Smoothly checkboxes"), h("div", { key: '22647fc32687dc8eafcfce67d506cae3dc51249e', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '911d189331db34adc1bb20eb815b88320be42f80', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '01d12c789b84ad7ff1b336e5d9c054e10a10460f', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'f867c216b32c38546739cc4e5c06756f55a73e06', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '142a5c59c513e2f2870523109836e7f17169fb37', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '8f97e98320fb816be2c65d9f09218ed6bbd3729a', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '0e9d7dc8140115d8368315e3afe3afc43f1ce0e4', name: "third-checkbox" }, "3rd")), h("h4", { key: 'cf2d56bf8c06e4f0dc86ac5f67fb3b108be85894' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: 'f3cae4429251b4143676fd5e82423089044925ee', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'e6269c274ba4df9d969805a24a6603e1abbdc4de', name: "checkmark-circle", slot: "start" }), h("label", { key: '14ab72946555ae79a8ae9e15b10c6ade0389646b', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '8f3c256eaffc0be2e902d6a9f974c983cf06a526', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '954e15aceca60b35f14d77c7aaff0bbcf74453d4', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '7c87b80b07bfb283de74745c0feecbdad6b87f35', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'bcf41b0e6febf1a9743c6c01672ba1cfd255f32b', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'fe7b03a20caa1f4bd6b8b4c4069d6e52ca7b2cb0', name: "radioSecondInput" }, h("label", { key: '323e2230853060a74df0e151a14a54a374cf083d', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '650bbcb2a6f51a683a7e25e05690fc27ed3d3146', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'b52ae0942474c8cd6471719834003a0ada7ab191', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '562740307d8443ffa6d88c2836f33b3377ff2443', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '03a55fef4f354124bd0d5214cdb93b8dc03a5095', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '7a96f3551583ee25df49da43b022d955693291cc', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '2e1ce0f952f4440074d9193965e0d9d22b22e01e', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '2b1bfd9c8de92822aea69fa58afac73ba84bba83' }), h("smoothly-input-color-demo", { key: 'f4df068345e11d93b28af08ecdce6823c4dd0f35' }), h("smoothly-input-price-demo", { key: '155ec24d88c7d4876a5cfbfc75b0a1be428ee41c' }), h("smoothly-back-to-top", { key: '149dc7137192dbe355a5cf1ed3dd22966db3b303' }))));
+            } }, "Duration"), h("h2", { key: 'a47dea26355bddf40255f0a88f72381b15b6fd39' }, "Integer with Min/Max"), h("smoothly-input", { key: '5708f669787dcfbe8fc18cd20ce1f43903331b3f', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: 'ba607eca48fd5d5c54da40c56f58f88b429a11c9', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '3899120a4588724eb5486c713e6b3592f9490106', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a83a35c1ddabdfe8338e5daa270642cd9a00cd7a', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '69838545fe489b84e54394656f3fec9993214768' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '2579f64feccd3ac373562867d7fc6c3a2fdc75b4', 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: 'd55229c36af45dbeab240431c674fd1fee27b49c' }, "Identifiers"), h("smoothly-input", { key: 'd7abf3ed7f1d633e0ba5abe6673a6e634a896738', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '8d600bc128529a9a6091fa18f0bea9bed1a74d7a', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '85a4a2f01be2b3fd39014833fd495958866838da', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '035f5f628c25f3d0398c9e8dc10390e5dacc0024', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '673f91b6cae1ba8b04b496e20e58d1a4d1c92965', type: "identifier-camel" }, "Camel"), h("h2", { key: '85a4af61aca5745d0125fb8305a8f640c0b5cdf1' }, "Input Alternatives"), h("smoothly-input", { key: 'e4b05f18bb44d4c7b9fdcef83551d9f8c591274b', type: "text", name: "name.last" }, h("smoothly-icon", { key: '2bdcd29f5ae945c37f5a7bb6e5587759bc567351', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '7b17f499a2061624e34fe89fb81d6cfbed54ccd6', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '58041447b7edc6ee18d0f4752c7efaf6767ad2af', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '70d890653d67ad30256b754bdbe3ffd0a5699044', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: 'a1836734b16b3cccdbc0af9b0d894ed478d45e0d', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '6c2a657437514116b1ae60210b289004b2e6a956', placeholder: "test" }), h("smoothly-input-submit", { key: '8e686ba1a74b8f9d85cc6778a314c793946d248e', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'a5b71808338b0ae5f06806bcd97142581a2a11f9' }, "Smoothly checkboxes"), h("div", { key: '309b348a380979cd64fdab4a66fd302a48b12b6f', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: 'efcc143919480eb5901b12800f01ea4847a2df14', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'a8835c00691583079ff65b59f750f59d470538c1', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'fefb3a5f492b1d39993ca89fc265b9312d0a75cb', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '916895ae8d167ad667109ea5a94ce72131e03cb6', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '26f2c7dccea2f4eb93fe8c82bd9291b2bc139c19', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '5c71f635dd09d730ba6048bbc4bdf3d40de58a05', name: "third-checkbox" }, "3rd")), h("h4", { key: '24380ae0e1f791eef55523ae58f818286b1414cf' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '376572dae3e2bb0dce2a68fe3503277a0681079b', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '149759fd8c4d501ad96744e01701142face0d6c2', name: "checkmark-circle", slot: "start" }), h("label", { key: '2032d793fc1c94de9cb856c06c64d0b03e6f77cd', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '50ccd0ae9fb6dfab3a27b574f7bee10ec96089e8', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '2f52388467ff677b40de490648d2c07cc3ee3b30', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'b2dee0bfdd05ccfff9995011e5cef0663241a214', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '3d990b0e3d8e629f00970acf2c8d1e30a79e4966', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '9f56ea2525dd6bc4a6a889b170f49b79542dd590', name: "radioSecondInput" }, h("label", { key: 'dac6544a61c1f064360e5dd2b5520f63e2cc3938', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'c4b32f24642b851f6b8da9c65df85df4294c598e', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'ca04462b6e8866f76edd48dcaac734b90f0a9b75', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6fa1b64cac9e953977a12687fa14a7218789f79c', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '4e32b3131c7becffb45d63a70926b8b0c2e1627f', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'a841d0bf0bdde25c84b224e9d77fab3e7db2898c', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'f5bf467213cdc73642fcfd2278ee8b963c1c1bc7', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '7c617d877ef45d0bd9a58066d3d185ae008f2eef' }), h("smoothly-input-color-demo", { key: 'ea9a64faece9ecf51e9d0f8e798f78d92e0590c3' }), h("smoothly-input-price-demo", { key: 'cc124983e4ca6aea3b925e2b229fcaac03565501' }), h("smoothly-back-to-top", { key: 'b01d5285d4fbf07edc5e955faa214f1fd40fd5d1' }))));
     }
     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: 'a47389fd0ff13ee8fb8d2e39832c85f9288d969d' }, h("h2", { key: 'ab865c73074ffb94eba263defc3ddcdeba8cd869' }, "State demo on smoothly-input"), h("p", { key: '318a30c15b5877b1b253661c6d559f89778cd500' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'ca7f3414b047ef2e5fba32203633cec984df1b10' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'e5bd9afb7c00a14030ad6784294c4d85731d34a4', 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: 'd457e8d00b53622bff4729bf8a98255747756f0f', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '671d9e1e09c36db8094dfe6f1ab4dd682b28fe73' }, h("h2", { key: '85a013c5fe711cc2a9dc759707a4e3880530377a' }, "State demo on smoothly-input"), h("p", { key: '57296c7eb9eacc94aee6802d6808181af5d4190a' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'b41379a50dd8e97d98a5eebc38694e04d192414c' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '3fc4076c53a6a0571f5375974d8b7e9b2bfb4414', 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: '390be92c6e43aeaa2d5072b43539041ea794d51b', 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/standard/index.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class SmoothlyInputDemoStandard {
         });
     }
     render() {
-        return (h(Host, { key: '54cf2b88dfb0ae3326c332e0d608b5e2aab4e2af' }, h("div", { key: 'c549a1f2bf55faa1db79e85170fd5106269400d0', class: "description" }, h("h2", { key: '4cd8be6f457b84c4363c93262a0a8c57d6ad794a' }, "Input Standard"), h("p", { key: 'd704b09fb11c51a92fa618c106039ed01695ce58' }, "Height of input should be ", h("code", { key: 'abee88ddb4d762af1cde9a6f7c94ad13fd069152' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '0922d6713e44cffa51cc253e94fb1ae98a823f24', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '1cdba85a6cddb32a49a763394b8cdb7b36d2c24a', name: "color" }, h("span", { key: '58013cb8ab43cc7cc05f6ab58670ec5f41eab179', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '0eae109840ebc9b0101fb08f7daa61253826da9c', slot: "end" })), h("smoothly-input-select", { key: 'f48cf9bd8f86d1eb5e68e3383bf9178ea27b5f22', name: "looks" }, h("span", { key: 'd6f665f4cbc8e871229312e611180bc0bf9607d1', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '955d191d8da75e9dace4c57e6f6f3d427bdac864', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'cbd64dab264df038bf40efa6c2d8733f6c767185', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'e5a2a80fba021019871563ac7197360060ccb451', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: 'f1bca93555a7cc9fa7a56a39e6bbdfc5b7570edc', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '15361ba7d104e800e627aebc52d8fff1623782b9', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '649cc21e6575e27e765e17443678f14ac73ba84f', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '59125e661fdf79f98c9d5a0f8f2c97eeb52f2b52', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: 'bc3803d7f0e97f5f8b7c863153aa0ce0d382e1de', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: '44d87477325a59e8b62c1f7ce3a29cdc29705916', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '0adfeb398a2f6f969d206cb46eb4776808fd4fc9', class: "width" }, "width: 100%"), h("div", { key: '1e617acd8e12c75a00259062602a8ef8775651cf', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '9521d2afdc06788925f96c2d0702fd3f00466359', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '75e835255286d02e1b8185902b4df7fc2b0a1147' }, "Text"), h("smoothly-input-clear", { key: 'ddd739321caa1aad97518efcde5068fef178b456', slot: "end" })), h("div", { key: 'a4ad7dae327fc4cf6fb5caa803f388f31d06ecff', class: "height" }), h("smoothly-input-select", { key: '989e3591abbfe261104fdc8e638e30593de4d487', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '2b03942427cc79d149444a6d9761307c43a32935', slot: "label" }, "Select"), h("smoothly-item", { key: '049747edec7c1f5ba4a3176d554f78bb065da54b', value: "1" }, "January"), h("smoothly-item", { key: '1a348110d398cecbad0c0cb7f4c58add1e4a3ff7', value: "2" }, "February"), h("smoothly-item", { key: '3f44a3ca68b3efb9f69ece4dbb4aa5719d62689f', value: "3" }, "March"), h("smoothly-item", { key: '2e6a23f327a391073cd581a537c74b404e633f61', value: "4" }, "April"), h("smoothly-item", { key: '0ec3a67ceb43fee1b4aed5d6641b8773976f8253', value: "5" }, "May"), h("smoothly-item", { key: '8ad75702a0011c4dfa0b58eb0e701cfd5b1b6079', value: "6" }, "June"), h("smoothly-item", { key: '37d90fd9da7a68b02bb4cd7388c9dc3fd3fad571', value: "7" }, "July"), h("smoothly-item", { key: 'df48b6b98fd8f8a4c4404a29880e6564cb84e830', value: "8" }, "August"), h("smoothly-item", { key: '4f81a3c63d0becbab5a2e2c437ca11c2eab05dbe', value: "9" }, "September"), h("smoothly-item", { key: 'a2127aff910d9201fccd3b2aaf784e75bedbaafa', value: "10" }, "October"), h("smoothly-item", { key: '9ae028899cdb86c7171dcb5d4b7ca9c33e44796e', value: "11" }, "November"), h("smoothly-item", { key: 'f968c99dcf0fedb0a4eacbbe4081880148448577', value: "12" }, "December"), h("smoothly-input-clear", { key: 'b6eab95784294604bd6b50c6ff0771b905f6d55b', slot: "end" })), h("div", { key: 'a46ef7c12df7de0166907d872b421fe6d0ad061e', class: "height" }), h("smoothly-input-checkbox", { key: '03db7a557a36f903bbfa5c70168099321de9bfaa', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: '8dd9be16c98100177e896fd587ae0cf5b78402ba', slot: "end" })), h("div", { key: 'd7a333388176160dcc641e3921f65a37d0f931b8', class: "height" }), h("smoothly-input-radio", { key: '3228c33a9f797f7e883fa89ce0f348c04833aa95', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'a2a4723025bb8fc6bdc656e036d7ce9a39eda82e', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '12221f4f2af214a53b30baa49cc767c30a595f4d', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '2b94d51be413b315b04bda5a15d94ba0a32d9110', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'f248d8c813e26760d7b9423ca91291a0ec1f9ef6', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '2b6cdfc609ef9e391e9d77db584adda5d041532a', slot: "end" })), h("div", { key: '006c1a1f17297b57ebd653727ef2ddfff3447b97', class: "height" }), h("smoothly-input-file", { key: '538ecb6a31bf36bdd0b1d09f93cb674c8aa0c02c', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'e3fc537c5ac5ec5147085921239f7d01ff7d73e4', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'dafa754b67cf94c4cdfbb4d1ffd1bedd970cad3a', slot: "end" })), h("div", { key: '467ea157fd9e4b51622bee191b8299702f7fbbaf', class: "height" }), h("smoothly-input-range", { key: '2d0aea78c861a096b1f52140df75bd7a489f48da', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: 'da071ac8f3749c37764e52a75f885a4558035630', slot: "end" })), h("div", { key: '599eba7c67eedc7c48238bb25266e544ebf51462', class: "height" }), h("smoothly-input-color", { key: 'e190a9d822eb04394a0bdd61c814d4d830a07b1b', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '4574ccb78b8cdb7c369c0e0ba6484793e7723a71' }, "Color"), h("smoothly-input-clear", { key: 'd135ececb5676cae9815d93324af41d22135e031', slot: "end" })), h("div", { key: '1fad04af82ecb775a216e54522cb615ebf99e55d', class: "height" }), h("smoothly-input-date", { key: 'e401fcd75ebc7344db4efbd293668694f7c67f2f', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '55a177807e873b60ba1fe106e11e4ca3d8806675' }, "Date"), h("smoothly-input-clear", { key: '255c515c381089461a199a8917b4cdd0f9bed0a2', slot: "end" })), h("div", { key: '0bb95de33a1a9416f9f980b58ee085988e7cf5c2', class: "height" }), h("smoothly-input-date-time", { key: 'c5d51c371c58f20e28b6ef21cd4ec59b942ea51d', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '723d6be1a2df58e787e1e6b3b994aa57856eb950', slot: "end" })), h("div", { key: 'f3caa12fed8a58c86d82f88e8184d8f33ddc3936', class: "height" }), h("smoothly-input-date-range", { key: '2f7b4f5aea8229344de58eacdb192021ab01aa88', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'd34bf0d664e007e0e3209c3461364b4c0477ab1d' }, "Date Range"), h("smoothly-input-clear", { key: '2f8c2648ccde1e9839161cee087661e503e11275', slot: "end" })), h("div", { key: '5d56a40d324dcec60ee958ce52cea4c733b00b81', class: "height" }))));
+        return (h(Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), h("smoothly-input-select", { key: 'abb4be407f4b7ed51d5f796bdfce3b2b56c468a4', name: "month", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '49f71dbb091094f79927778d18a0a58e70689f42', slot: "label" }, "Select"), h("smoothly-item", { key: '4b0e9cb4ce233c50a42fe249a3aef5648dc62558', value: "1" }, "January"), h("smoothly-item", { key: '38380b0f13ddeb83e2e19e0ac645dcdbacf6c4df', value: "2" }, "February"), h("smoothly-item", { key: '4f65be9a949261542191e3b484ad646e17f04987', value: "3" }, "March"), h("smoothly-item", { key: 'b6e9be5fbe31a12865717daddcd1a4039c942205', value: "4" }, "April"), h("smoothly-item", { key: '6c867101a115315e30bcf525d3fde4a8e49a5719', value: "5" }, "May"), h("smoothly-item", { key: 'ba4792a24e862aed054b356a444f9b791add16b1', value: "6" }, "June"), h("smoothly-item", { key: '9cc3a21ed384c2e2415311770925458dc13ac8d1', value: "7" }, "July"), h("smoothly-item", { key: '53cf8809b4dbc8256448b5c08a9d07f274e365a3', value: "8" }, "August"), h("smoothly-item", { key: '47a43966214064dab4d321cf9116b5cd87409dd3', value: "9" }, "September"), h("smoothly-item", { key: 'c71ceab27a3f86a5c2a27dc251b18f119f5ac623', value: "10" }, "October"), h("smoothly-item", { key: '7e824138f3b0b28a414465d69bb71c4d6786c3b5', value: "11" }, "November"), h("smoothly-item", { key: 'e7813efea82efe4cd4a8bfa54a7a55b21f53fa48', value: "12" }, "December"), h("smoothly-input-clear", { key: '7072ef8f9ac5b9a3028cbd2962560fc315f3d58b', slot: "end" })), h("div", { key: '3a1c4b4c2834bbb4921e330a77fe477c4741f181', class: "height" }), h("smoothly-input-checkbox", { key: '50499f2f1a4258a56caeb2266da17a9e881c7993', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: '550d44f73f1ae07461d73f66febd5138867e8247', slot: "end" })), h("div", { key: 'acb1b0eaab732df76e2c586e8f56ee6c81fbdd87', class: "height" }), h("smoothly-input-radio", { key: 'ec7f8b66f806e63a09320e2ebfcda71be001cd3b', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '00de1fcac1f811970b3f1154d6286dc7bd6036d8', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '35ea9212aa0f8eec4a96dedc406b428f58b848e6', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'db11c348c12a468a854c53c5f5f692ae7dcbaeb1', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '65707145740b173f4379c6bf5706a962a91bb021', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '883be5fef36a7e6fb16c57b30fcad312f1f25a6b', slot: "end" })), h("div", { key: '2cd8b1bb4ac90fd34732d2bfc34116bcc8429045', class: "height" }), h("smoothly-input-file", { key: '87739b41a33b7be135c5b3ed02648e702ac386ca', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '0d10524c66e0625ec86431a8c19dcedf83f47eac', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'a95f256a28cf294430040b6c6028921f0c620c8d', slot: "end" })), h("div", { key: '48650848e22a86ca8aa7501e09fbd8c5f0ce83ea', class: "height" }), h("smoothly-input-range", { key: 'b1e96735886d8e3e4b451ed17fa11ecada3e2302', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: 'ab7f71a498ce9404aacc63f0273bd3b715ddf12c', slot: "end" })), h("div", { key: '0ff2870912f9ae2e2b41ba9d982c906124ef2641', class: "height" }), h("smoothly-input-color", { key: 'fa4d779da5bfaea1e9644e721d9f6c4249949407', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '63674017888873443dc7b744114dae7996e79c52' }, "Color"), h("smoothly-input-clear", { key: '6344ad242592e19365961e80cc0814023eaa7dc2', slot: "end" })), h("div", { key: '16e0b71b1b6b1ee68813e3827b96bffe5ec63ef7', class: "height" }), h("smoothly-input-date", { key: '8ed46719b1c1e9a9085bd5decb2f0b76fda17e08', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'c268eeb0f99af102c6e1dc62b3d4a2ef01fb0982' }, "Date"), h("smoothly-input-clear", { key: '828d7b0e5719ee2c8e8ef5e431f19061dd1ade2b', slot: "end" })), h("div", { key: 'fe422ed5cc16bbb664f5dc190e59d05027b9ab6c', class: "height" }), h("smoothly-input-date-time", { key: 'f45a43382ca831e1755ef2d9ee3ff2529f52e092', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '000c95f6c81a9c8f84c88e258804c190de62a085', slot: "end" })), h("div", { key: 'e203612e082b43846696f0e8f25ba1633c8a40c0', class: "height" }), h("smoothly-input-date-range", { key: '0a813285a0bb45af8a02e66bd7f336218ba2bf3f', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '8c4b143da14013a4e7869cc09ac125fd978ba652' }, "Date Range"), h("smoothly-input-clear", { key: '71942a3eb11884fd20b5dd66f93bfebfaaaa917e', slot: "end" })), h("div", { key: '6ddfef156eb2dcbb511742abe5e03f0dec1e78fa', class: "height" }))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

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

@@ -19,11 +19,11 @@ export class SmoothlyInputDemoUserInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '3835c578ea7d246169e793bf4aa2c7a51fa5363d' }, h("div", { key: '7b58c28df58685c05871b3b2e0ac1be312929ade' }, h("h2", { key: '51ad8ea9e3aac7d2b86c8fd174f3e9a48697c15e' }, "User Input Event"), h("p", { key: '47cea5b74881ab7616adfae6ebce65da42dbb313' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '2866d17687a295b23b453f5b1379e5e66bcbff41' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: 'e16f064c937a6f9308630304c583ea341f832ad9' }), "Check the console to see the details of each ", h("code", { key: '78979ae82ed46d5a06a595e02df97ba33c89d2c0' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '138b41ca59399b09ff53e52b129ae97748ed387f', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '7d09fa4861e311009ab12e3c60002de3301927ec', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '0d502c95cb5db26bdce3ba41d15556da80d64433', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '435dd06d5ce59811c106ca7c69b6dfa1be50c12a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '33a6bd3e72cf03ec750a14924a837b7e684a8773', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '21adcb09ac47b9478957c45905170a860c49e1a8', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '359e7c7c033b09f9245ebc6be57bd34219d78ecf', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '51fa448a76d00d5f1998ad57f03d21a054e8113a', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'b59321ca66af38b90a01d2eb3d0e17f18a904095', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: 'fc5fb9f656c6c6e999a552dced58d28a8acd1ef8', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: 'b200be8a41c98d4f219a9f3530f3558fa971689c', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'dd284aa8c1ea6ad1cf4f0881250c105cb2a6ff0c', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '20cc5a84fa556220aef39a2ae15ae412ea2fef0c', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '7590af1c0425b6219743d81726e05164b970187c', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3b3cc2b584fc194bd1386a710cbbbbf50e2968fc', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'f38b4dd2f3e9bbf56f998ba8ede15b3c47b8dfee', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: 'dc47c4b5003bfe3c2b9408d56a2b0646fa7d60b9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: 'e5373df530143e9be043fef3040f0c28e4e6befd' }, h("div", { key: 'e43682af956adff7d7717bc0460eed3b1bb95d84' }, h("h2", { key: '4332098a4a62650fee3ff36df29bbab86ece7e9d' }, "User Input Event"), h("p", { key: 'b20f95a50866658227c61b92cd110ec481da9aea' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'd7966a4bf162c151d82b4202e72cd090eaf54ea0' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: 'c491689d80addd8399ee02ab7cfc6c14f599bb85' }), "Check the console to see the details of each ", h("code", { key: '919ebbf26937841a5396d0d8b1f7d56a268ac292' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '241df770721275520a479cac831b972062cf0fce', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '1c8afb64233081bd049d91a0dd0e8071aad85856', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '5fe334fb6629980fec2ee42d22df173f86b9bec2', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '0972c18426ec3adf17de6b187c582d875de17c75', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '0e6d5f9596b71bae1f548aaf3cc830e9327dda05', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '66f5d072734363f0457f38252105272c643354ce', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '37bb578799dfb2de20c6ed9c26214acc5a4b3c0b', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: 'a70017b8ad95581ec4361d96350f809942b61d93', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '07558d4cbc286b03af94f0cc93718f35a93a73f6', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1e6fa16c98dbf64e75d4527a5619a37d30631801', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: 'd3d7581a7c25ce7a7add6cc0f318bb738fbfcf56', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'cf1ad804353d6cecc2a92f1c919f0814ddc90293', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: 'ac4215b8764d794d7b2b502e8978eeb066bb482b', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: 'b0f18cbf601c7a7e1b105b6ade6b7738e735c1af', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '353846f23973a62890ca228fce9434606c351eab', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'e4e466950e474177dfd57b95741256ece59aeba7', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: 'e39a9742e3c896ed0b8083b0cb12694971c2f7b3', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '564c412728fabb0a62c8344fb4f8f833805eda2a', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '4028e3bc5a9625b4c0d302c1e856f618bf59fb22', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '91d54581db356cfcfc093286eb125502398315bd', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '1bfc78adefad21783c035335cf764bdb92c537e4', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '6416081389e857c3c18d2fad0dc11159a2aa93a6', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '78f36ca1d6a278db6d7bd4644689331be84c488a', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
     static get is() { return "smoothly-input-demo-user-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5a29f86218e6badfd620668a6c506fd9a028710d', title: this.tooltip }, h("smoothly-button", { key: '3fd484afcf17e8fd985b38fbc0b04c4520e584c5', 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: 'b3c2a52b3b1548816d6c6ff935cf0aa61acbfa64' }), h("smoothly-icon", { key: '3858475de79ce842dd4c1e5b7007281d7af36d5d', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '9413c465eefd77797e42c791530e44dff3846f28', title: this.tooltip }, h("smoothly-button", { key: '6671fd2c91156be7d9a584e1a99f5b8b4f32eb1e', 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: 'acaa5562e2b97fb0bf0f774fda77efdb33ba66cc' }), h("smoothly-icon", { key: '8defa183091cea2766970860a93f9005085e7325', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -111,7 +111,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '3a3f69cf2876610f6acd7bacdd14cd24804cf5c9', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'c3ef33087517af42aaf4471046ef0105dcaa2426' }, h("slot", { key: '548b22599ef8930d02cad1a9162dd767a02a68ca', name: "label" })), h("div", { key: 'd5841532fd15a4b9a11d8e5cd7a9cb9080f388b4', class: "input" }, h("smoothly-button", { key: '31556ec9557a41d9b9c692c532155f1ee86123d7', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: 'd2e4a1a56c1f054cc2e48a9d7a5d1d7a4ae5a9cb', name: "button" })), h("span", { key: 'cb719f2b9213ef0c5640f96f3c1f0d443eb89719' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'd02a31cf7177f06cf57b39b24c7bc40827dd3409', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '4198d37735c31576ba0239b98da15726a984ff54', name: "document-attach-outline" })), h("input", { key: '9b15653076d028787daeb1290b5eead52af03687', onFocus: () => console.log("focus file input!"), ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '685d2848ca6c3b439902b7596e5845c6d16bd604', onClick: (e) => e.stopPropagation() }, h("slot", { key: '018adc649cf0f333292d913076b7d65ad731b91b', name: "end" }))));
+        return (h(Host, { key: '8f0c65d2c9ed0950c1c5115f615f6d66e1242165', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'c03b59a35dbef07d3f0c4e0d58aecdd963fb499c' }, h("slot", { key: '75a815e3f443bb3e6c8e0aa81c30b68f9cddc9ce', name: "label" })), h("div", { key: '2e7c8f558cd1d344b1659ef2fde701dd612f3b53', class: "input" }, h("smoothly-button", { key: '8382da9351a2d57dfa17ff0a399066b1f645c5d8', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '6e8366cbb446f9f5be138978711f7172f18d0005', name: "button" })), h("span", { key: '8b64bdf48fb8f8cf552e1d000c18e3e415826056' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '26d26451e82bdb71ac7be890f308363dddd8a73e', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'da2cb7bc7b9e481dd0edf6730adc4a9d26409167', name: "document-attach-outline" })), h("input", { key: 'd19b4581fb2070dc0baa3ae6c9da9d3a5ca288d5', onFocus: () => console.log("focus file input!"), ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '8f4442060ca91b9d3ce769f71999031b9858aaaf', onClick: (e) => e.stopPropagation() }, h("slot", { key: '7fb47acfd5d5c4ae68b309d5302564cf757100a6', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -144,7 +144,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '18a98931c9b1a0ac241f137eb26d3f33edbbb31c', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: 'f8a5d3ad49c8f98b41bb267420e1f6744af81889', name: "start" }), h("div", { key: 'a5049a950240357a822da8210b4bb097d65e1f49', class: "smoothly-input-container" }, h("div", { key: 'cf5d9bb58fd6d7a64d169f11877af39d1fcf82fc', class: "guide" }, h("div", { key: '97cede4a817764ed1200dceb9ff4cc6639e594bb', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '170accf52143b99e51797450e8623a7326631a1a', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'f65ddf15d86378961565fce755ad3045729f31b5', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (h(Host, { key: '6d20a9bb70a342e7a09879e61fd826448747fb34', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: 'aaaa87666cf2c318eb0cf5a8a2b8df897b2f5d3d', name: "start" }), h("div", { key: 'ffa189d0c2312eede65a0ba0adb10e189a59d91c', class: "smoothly-input-container" }, h("div", { key: 'b968632b22fa137d485a6410f9a082c581eb0941', class: "guide" }, h("div", { key: '395d499fbfab5a9dd4ba70f28ab3790e5a1d2201', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: 'f78c326ffeebf0b9be35f46506a34384c207ea33', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'be43d339ea279eee0067fb3d016a72504cd10730', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -159,7 +159,7 @@ export class SmoothlyInput {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), h("label", { key: 'd82983d730112125458e06e5b9f1308a3c8e0aae', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '9fbdf1438e1588080ab14a33305ea9951a79b50f' }))), this.copyable && this.value && (h("span", { key: '948c6ff7192a5775cbe8e17b9059f7796cf0eb31', class: "copyable" }, h("small", { key: 'dba795d2bf8914f96d37d3fa7b8133ac15d2df33' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '46a6b7e4b0fa26dfc25d50ded9fbf2d2ab864c1f', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: '91f48e8db708f8241850f977abf66eb97fe545cd', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), h("slot", { key: '000e18e8fd0e981037a7b5517e575abf16cd83bf', name: "end" })));
+            } }), h("label", { key: '7cb7865c02d3017807a09caffb2b6f551e4b01cc', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '4ff4e42a697e5b8f5b1963a73e3b1e54f654f673' }))), this.copyable && this.value && (h("span", { key: '8395817fc60a71dc6c2b74cd2b42e5a765841448', class: "copyable" }, h("small", { key: '899bc49fe53abd066d154d02c46d21bd6a0379da' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '5b110c5522cc03f8e944b505197bf9eb83139fc6', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: 'd8b2c4248adce0440568e9fd44c712377565e7f5', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), h("slot", { key: '8a3a7f7704b9073b8b9e4b82ddb20cf28730b7c8', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -109,21 +109,21 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '4fc40a85069ddfa1ca23993226e22a11db4d3f46' }, h("smoothly-icon", { key: 'f54f3fc35f1c189bcbc4ba9b6857c660a4bc7308', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: 'a19d91c6e7a3418e4cc6645072227e24660a1055' }, h("smoothly-icon", { key: 'f49eef91fe444f2b2c46602239ffb720b463498a', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '7c0cc354c885f373dddcb0ea823dbd609cb8f621', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '63b194505c76cb794711fd50d6129c9037388687', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && isoly.Date.is(month)) {
                     const value = isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: '18d024c05244885cd36defb0256485c4afd40f3a', slot: "label" }, h("slot", { key: 'fa08a0ac39b925826add9a0c4028223670b61e5d', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: '6869eda4afccdb1671692987363dbb2ad831ffc6', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, h("div", { key: 'cb2f05a587d6dd8a54e0e9ef4e9b8d2da2956613', slot: "label" }, h("slot", { key: '25e30084d491b00bc0963c5d5675419f2a88ee02', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: '46bd63861b1facb4dfd7fd2dd0f4e7ade2a1535e', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && isoly.Date.is(year)) {
                     const value = isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'b8555f33b92a8a5a009e5ecb0cf0b5413f25a77a', slot: "label" }, h("slot", { key: 'c6fad9c97642a7e9177e7741d38d068e9a42883c', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'fc75bc0ec4f8a81de333c798381dab56c0dd3364', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, h("div", { key: '7c9c95e399522fcadc86a7d56565ed24f83bd1dd', slot: "label" }, h("slot", { key: '8332af277b6a5c3e16a92487fa886dac4ba594dd', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: 'cd668eac7633d2d767387599488fe6bb7326b8f0', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     static get is() { return "smoothly-input-month"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,7 +27,7 @@ export class SmoothlyInputRadioItem {
         });
     }
     render() {
-        return (h(Host, { key: 'b5de7dc5c9710d739dfadcd5f03d20faf58f310c', onClick: () => this.inputHandler(true) }, h("input", { key: 'c32833c2cdac9120f20b7d72f7b310c1868acccb', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '1ef73b5656e70b22ef7574a640ac270e0454878f', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '9b811789fae7dd9c9950e94dcc0e927689695b53' }, h("slot", { key: 'b357bab0d57368f5e0b00e963a92f6d853ad85ae' }))));
+        return (h(Host, { key: 'df843e11d9c3363b27ceb3e4930e353072a8c537', onClick: () => this.inputHandler(true) }, h("input", { key: 'a38159efa771785ca314bdbce6569bcc05503089', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: 'f3c5afda5328b233102ec346d05ba260dfe6cca3', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '80c90ca1625f26ec43f7e4fcdb3da585ee0e463e' }, h("slot", { key: 'af191ac240791505df6eb37658920f3564b71a42' }))));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputRangeDemo {
     render() {
-        return (h(Host, { key: 'fd572625434e3a3a511d2fdc4e39a11734eee8fb' }, h("h2", { key: '0bf7d54f8cf11e3e870d6c1152fdad2665baf305' }, "Range"), h("h3", { key: '37f05494fea8a36a05684fb0ad0aede0d27630aa' }, "Phone Number"), h("smoothly-input-range", { key: '68d94bdeb4db077a49a011c4849e99a1b33db40b', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'd1b81f1dae6424d685997bd8dfe02a10832a1b2a' }, "Stars out of ten"), h("smoothly-input-range", { key: 'dca3283520395117ed946a844bb46f7fc52c0212', max: 10, step: 1, label: "Stars" }), h("h3", { key: '8670432a44d93f9f7dbc315c1f0a51d9aa79100a' }, "Percent"), h("smoothly-input-range", { key: '78863ada16280bb963e15f1682aa8131667a1bd3', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '1b4a9ba5d75f92f1f90dc46a4710a35edd2fe2e9' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '95c8798a86fc50de7ad65b67f837a71e2743c2ae', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'f44529bf690bcf4ceff1dfa1520d2cf92a456f2f', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '27ef758b1ba28f93ae5a19cc14fb1bdbf1415c70', size: "icon", slot: "end" }))));
+        return (h(Host, { key: 'fe8877ae479bd8b4e8a530dbcdd2f8cac31170b2' }, h("h2", { key: 'd39ba6d14b8740a8d18fd3e62c51964a0079dfdd' }, "Range"), h("h3", { key: '1cde1d9dbda26b591f092ff6c1215a78c85668e3' }, "Phone Number"), h("smoothly-input-range", { key: '0df83246ce1c17510de342817b3e8371a405fd5f', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '5aeaf74220d18db5d292b43316b862bb30e596fa' }, "Stars out of ten"), h("smoothly-input-range", { key: '9cf4138304c1bddf4f368c145129b85ac3c9fc98', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'ec9ace4a4ca1da8e781839d7a7dc5808b4185c5a' }, "Percent"), h("smoothly-input-range", { key: '02512fb3b2a215c4ffe0cde5fbf79defe6bc431f', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: 'ff48ee90a6f0876d954fa97e55c100fdce94406f' }, "With icon at start and clear button"), h("smoothly-input-range", { key: 'f48778410e5ee8104c032220124a602bc3e84c7e', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'f08ec1e3e9621a87029901e2958a0d4221ab3e15', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '4b7382dc9c566fd1f94c080901e1949610fcb40e', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

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

@@ -95,18 +95,18 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'b31050b31fd4f712272805dae978e77dda5a8528', class: {
+        return (h(Host, { key: '51d0d50c2260a8efef459a490a6d40576edf8904', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '2959023c0b95b4ab2cb633771ce4510eedd60a79', name: "start" }), h("div", { key: '638e4505ef502cbc66fc1b0e175400241a04e272' }, h("label", { key: 'c58f717dd6fe082f8d7a7efef1452ecf0394bc26', htmlFor: this.name }, this.label), h("smoothly-input", { key: '06605be3ace57d773b718d239b846a82bfaec860', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, h("slot", { key: 'b8115e4e8c82c45c95983a6ca05ac4910547d509', name: "start" }), h("div", { key: '21ac65ef6af325989f1586a4109f28b02c4d9414' }, h("label", { key: 'a8730e6a0478abdd2a81a2153ed1863f389f632d', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'cce8eef1cb3fe30cafec2fccdcde4bb992b163ef', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '0720c9af64e4df7ae97125697d4c5c5d0c7bcbe4', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '27cdf67aed2b00925b5223fd697ce25b597ea380', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '6ab9f7b99bf40826eb17eb300cd8be062defa4d3', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '690aa75a19a26cf290c1290988357edab5097ab3', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '02605605242299e85758bcfcd3d2db9cdeeaf212', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '983c2dbe78fd7179d977ecfffe346dc6999e6026', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'f1541e975526a02100826dc3f817c64626b2750d', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '06897088ceab10a99692b4fe2d06e5d227dd44f8', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,7 +40,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '03402f774cc1077ac04978b7a24610570f4200a6', title: this.tooltip }, h("smoothly-button", { key: '09ec36dfc4da0b052ed61f6a23e667aa9d6c2ad1', 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), onClick: event => this.clickHandler(event) }, h("slot", { key: 'baa523935f7234b05f9736f1172bfc6dd19a6956' }), h("smoothly-icon", { key: 'f6f2074febef0cc601f3a31b0c3244cc83631123', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '00ce2610388bdfe4a860afc1eec4c91360ed0baa', title: this.tooltip }, h("smoothly-button", { key: 'f65ac219effa216faa6aeb8e8ef472b7656ce745', 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), onClick: event => this.clickHandler(event) }, h("slot", { key: '5432ebbc44053abcfa66d760436a8218f413f58f' }), h("smoothly-icon", { key: '098d71829c81316bcdaf71a072c37d8334a505c4', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-reset"; }
     static get encapsulation() { return "scoped"; }

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

@@ -288,14 +288,14 @@ export class SmoothlyInputSelect {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (h(Host, { key: 'ac498bdf04638e40e3779ecb304669ccb0d47868', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: 'd518d262ab3ef8a490b0bd35e16f7284e71b8f76', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: '4cee745bd10e9901dff8d24a24ae400b301de617', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: '58083043240aaf3fd1bb0141242bf8b75802a4b9', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), h("slot", { key: '7e80a83f68a488ddbc722aa0c68ed390df08db66', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '8e8b0491f96c66334519fc4207e9cf5b00bb02c3', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '487f686909a8d3967a3c58994448ee6009be9cb3', name: "label" }), h("div", { key: 'a9296c2fdee5c8adf44e06e9f47db8493f0ad709', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: '9a90d6b828880e1a372a66a41f733e3f1248179e', class: "search-preview" }, h("smoothly-icon", { key: 'b2fa1b974878f5ee7cdc9816b32f679c1bcf6e0e', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '5186a555d2eca3b001d32441cdeca33da5ab80dd', name: "backspace-outline", size: "small", onClick: e => {
+        return (h(Host, { key: '8865b3b7aa61d4f9836d8d56fe536ce60d3f1c14', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '5910b41ec6b8ccb26bb75c082344faa46ad035c1', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: '11d384a9ce8ddeffefb96b9a6995dd7420f193c8', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: 'a27b8162d4f3e2a8a481d08408826ce252eeaa30', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'cf8416a6003d9adcafd84ba20df0a4e2bcc851d6', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '92f7e28e4c455ff4bcd141a26cfcd60f9fcaec60', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '1c41066d1be6798ec0d6416301f8efd65a75dd00', name: "label" }), h("div", { key: '044cf7d7c0ee0d73b0d111e658eebec5c0c730df', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: 'c76062a280d2cfa5f0c5c6ea37f1ddffa6dcf0eb', class: "search-preview" }, h("smoothly-icon", { key: '1fcea707496416899b363e633fbdaf5967ed0333', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '0c608ee8231d08806686b024f1cdf7ef52543bc5', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: '1a66e7c38f3a2971f8d5e79582fff254a7433c2b', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (h("smoothly-icon", { key: 'd91911a2705e1c4977b103c363770333f01f950e', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), h("slot", { key: 'ab895b5b4c28ccb58e2f3f681f05136880b5e76d' }), this.addedItems)));
+            } })))), h("slot", { key: '4b3fe308c5e4c9f4ed937ef1f7437ba64f6411a1' }), this.addedItems)));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -38,7 +38,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '6fcde64d8fac3ea0fdbebd60e7b7d196941ec96e', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (h(Host, { key: 'f7f8d66cc479ee4cd0f92bc148dec2c0cb2d48f7', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
     static get is() { return "smoothly-input-submit"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/item/index.js CHANGED Viewed

@@ -35,7 +35,7 @@ export class SmoothlyItem {
             : false;
     }
     render() {
-        return (h(Host, { key: '4188755b69d79db97fefef5ea5e4084292d009bb', tabIndex: -1 }, h("slot", { key: 'c67d65abca921e3842607bd01b650021a1a7b604' })));
+        return (h(Host, { key: 'e20234d30e92293239fab80b17123a82aaf7a4df', tabIndex: -1 }, h("slot", { key: '4087bb39941fd908d388a64a6036e3c50ead3a9c' })));
     }
     static get is() { return "smoothly-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/label/index.js CHANGED Viewed

@@ -7,9 +7,9 @@ export class SmoothlyLabel {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e67a58e84705ae28942529742aa1a714159fc062', title: this.description, style: {
+        return (h(Host, { key: 'de59874afe507061a1c3ede6954e5e4431fa7c68', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '2d435672985edec44f928fcadf0deeedc11140d1' })));
+            } }, h("slot", { key: 'fcb5def4232e85094c4504191a20fdde03b4cdb8' })));
     }
     static get is() { return "smoothly-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/lazy/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class SmoothlyLazy {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: '275e974fcb898e9afceb69bb7a2b418a469c88b0' }, h("slot", { key: '34c8d3b64ed72bbc5d6a25b1764a1aa8a4c36505', name: "before" }), h("smoothly-load-more", { key: 'a245a699efcf82fdf1650e6cacb30350e00846e5', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '5a872fca780ab00424abc1e2c603eb82bdac53fe' })));
+        return (h(Host, { key: '9f9a3ad03a3cffa605de2e0a311c71ff0501cc74' }, h("slot", { key: '0e222b762686df3a561c17e45966654e6bdaa711', name: "before" }), h("smoothly-load-more", { key: 'b655698abb3cb1dc76e941d8c7b2b627221dcb85', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'dd06292abea01a005890a0c168a5152f6737ceb1' })));
     }
     static get is() { return "smoothly-lazy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/load-more/index.js CHANGED Viewed

@@ -37,7 +37,7 @@ export class LoadMore {
         }
     }
     render() {
-        return h(Host, { key: 'f0417450a6fba968831403c14a200ff442e24e29' });
+        return h(Host, { key: '5200709c13719dcdfa30a25d921fa27e38750fcd' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/modal/index.js CHANGED Viewed

@@ -15,9 +15,9 @@ export class SmoothlyModal {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: 'd60b2f59db43c0bb19dfb37f70be50a4a8d885b7', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '8fa3a1a8abe74467813cad81e8822982d40eccdf', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, h("div", { key: 'b64dc6178f8b03be86de7fb601ceb10cbf3ee76f', class: "modal" }, h("div", { key: 'e3b34f4c9d32149a866cbfea48d5240c29122f06', class: "header" }, h("slot", { key: 'f411126367f737d33a1cc3831c754602e42e8c1a', name: "header" }), this.closable && h("smoothly-icon", { key: 'f99a425a51724c213df02b8dcd2fde79fbcd7a3d', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: 'cbe267ddddedbedad722a133c1155f85757dc27e' }), h("div", { key: '965fb217eb19c4608e4a62984d2c7bddcc0a6bae', class: "actions" }, h("slot", { key: 'c600331b7c0b7f758693aff657eb61f7968581ca', name: "actions" })))));
+            } }, h("div", { key: 'e3cb0cb62a91cc16a4c115861e393504c1c8476f', class: "modal" }, h("div", { key: '6473ae0b383fa946ade76b878bcb1ee146c340d2', class: "header" }, h("slot", { key: 'b2370ebebfc0b3b9dd67437c955ee7e1576deafd', name: "header" }), this.closable && h("smoothly-icon", { key: '561a9331a431ee605bc3e0e52765017206c7a43d', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: 'ef0da1a3d54c242df32342c1d1a09f74cd2581be' }), h("div", { key: 'f937cbaea5e2bdd15f9aa0aa8f6fadacd0a93766', class: "actions" }, h("slot", { key: 'e23325708937e00b7138c30371d1474409fb70cb', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/notification/index.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class Notification {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: '41e55119865515de80be226f9dc66fb74936e572', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '798cdebb8f5cafd0f96a5af8dcc296ded7857bb1', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'ff1013462d5c0453b9cb7da8fd0cd6b27724d9f5', name: "close-circle-outline" }))), h("span", { key: '553e16e9640ade50af5a5aad367187c538c65bb8', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '5008a063ca0a1c2d4f811ddcd6746bb198be466b', name: this.properties[1] }), h("p", { key: 'cb550c4a6e15ce531e9f3004bafd568c81e9a2ea' }, this.notice.message))));
+        return (h(Host, { key: '874ce3aaa62fd7424e2c6629e13111b14649c7db', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '57057c09df734c4d359fd9952314032373c93828', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'ae2a94d9120759f44e0a0549e23b17d19fbf30a6', name: "close-circle-outline" }))), h("span", { key: 'c7a626eed0dc03b93f30ef5b7e0f22abad133b93', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'aa195f76644db7643cc4b31191cc2f0f27c24c49', name: this.properties[1] }), h("p", { key: '176a35c914559bde761a2e055353c2162e92a7e1' }, this.notice.message))));
     }
     static get is() { return "smoothly-notification"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/notifier/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class Notifier {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '947a66b45ecbe2eff543a9eaea4f2a0661198409' }, h("slot", { key: '26759ca00d3511ed72cc9812fb1a033beeb7546d' }), h("div", { key: '1ece3e1044aebacffa2ecbd4914bbcbe306b5ace', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '377473bb85fda49bf6654709bc583c8122a8a5fc' }, h("slot", { key: '0039c64ec570faa5702882cc273bd5bd778b0c0e' }), h("div", { key: '133205707821a6b56218eae7b1b135985301665a', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
     static get is() { return "smoothly-notifier"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/spinner/index.js CHANGED Viewed

@@ -6,9 +6,9 @@ export class SmoothlySpinner {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: '614c1ae29b2f9ce5175cd522ffc660bf69b188a6', style: {
+        return (h(Host, { key: '81b3ddac04d63c10cef57db98b33d20d3c486d1d', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '2945cf7b84919de7918710f2eca638547f5d5a10', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '7bd59fd923b2bfc070d25b86fe6301e24872cac0', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: 'a56a9b915feb8212b71cab991aaea00eeef858fa', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '80b73ff22092fd16f75fa632c45441585ae7bad5', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
     static get is() { return "smoothly-spinner"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/submit/index.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class SmoothlySubmit {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (h(Button, { key: '422492b144ef1857166e9a5b898d554a2683780c', disabled: this.disabled, type: this.type }, h("slot", { key: '00a9e1f60addff0bb38d713af547221106084b4a' })));
+        return (h(Button, { key: '1126363e33c9df54032d68e0b1637800fd59a547', disabled: this.disabled, type: this.type }, h("slot", { key: 'b0c64e8c390d82c430c78fd377f82106ac2cb6f0' })));
     }
     static get is() { return "smoothly-submit"; }
     static get encapsulation() { return "scoped"; }