npm - smoothly - Versions diffs - 1.2.1-alpha.48 → 1.2.1-alpha.49 - Mend

smoothly 1.2.1-alpha.48 → 1.2.1-alpha.49

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 (431) hide show

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

@@ -78,13 +78,13 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'd0aa2669b708dd54eb52c3c2c021d5d3dd243a75' }, h("smoothly-input", { key: '5546c946cb664ac1ae41b882bced85ea2f653792', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: 'dd5cb22ac438173fa42b0cc33d30d5f2d2cfc6ab' }, h("smoothly-input", { key: 'a5b78b48e4fe1f56394c194f1a204d9aaac9ecc3', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, h("slot", { key: '99977a8ca529f4cf48c170d01d9fd55bd78f2a04' })), h("span", { key: 'c6bef02818d5f07c426c6584ede08a488a65d260', class: "icons" }, h("slot", { key: '956733ea747dbf023ebab46936ed92da170c7b95', name: "end" })), this.open && !this.readonly && (h("nav", { key: 'e9c4a2034cc79163972d78300f1c29df2883bc3d' }, h("smoothly-calendar", { key: '8b7d430ef9daf4a4c6475b1384813b516bd9b706', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, h("slot", { key: '9f926b39e9c5750d8099e77195788cdb0bf757aa' })), h("span", { key: '527ecd6825dd1b46d8faf4d97e2522ecc8a1b4db', class: "icons" }, h("slot", { key: '8edd6c554ffc9df30d2dde2cea952cd069648d39', name: "end" })), this.open && !this.readonly && (h("nav", { key: 'e5adc9ac0dea0c93e87774f81afde215b7bd071a' }, h("smoothly-calendar", { key: 'd93d146dbd74f8925dffe92cb181d386e1a9e7ff', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, h("div", { key: 'e2239089b7e57b9841dbfe192959e78bc8d4fe38', slot: "year-label" }, h("slot", { key: 'efa0ea2ec671291aa801db4114ea015c50d9f6a6', name: "year-label" })), h("div", { key: 'f026d9a5e9aa30eb7ecf9426978bc6cbb289c321', slot: "month-label" }, h("slot", { key: '9367a4dd4b80e1ab6568005d394569687cbc652f', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, h("div", { key: 'cdf37ec29e2150b44fee7c7153fe9eb301aa7548', slot: "year-label" }, h("slot", { key: '961d1de6ef85344b433a8405963a817b57f94a5f', name: "year-label" })), h("div", { key: '5edd148108c9ad3cce7ccbdcf23985c067c3d324', slot: "month-label" }, h("slot", { key: 'cad29d4e9e8932d3547bbe17ce006e99b861f35d', name: "month-label" })))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

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

@@ -91,12 +91,12 @@ export class SmoothlyInputDateRange {
     }
     render() {
         const locale = navigator.language;
-        return (h(Host, { key: '8d0c83ab36b5392715311a6419d1edacfdede8ca', tabindex: 0 }, h("section", { key: '99d6dda96a17e16314434a1819317a7d2b3e8acc', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: '42eedb4b26f847249b109342ffd60ef2aba62f06', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (h(Host, { key: '0a39feda764bfd21373182adf3b7f5b0b3472eb2', tabindex: 0 }, h("section", { key: '6bc56a02490b2e855d9d9c0b6f2b4e79d2f097b9', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: 'bb64b743e16f0f80232a101121475c9b18bf22fe', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${tidily.format(this.start, "date", locale)} — ${tidily.format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, h("slot", { key: '18df7411ef4fd886dfddd8352eaa7ad02f7880d6' }))), h("span", { key: 'a3163b9d70827d440bfcd27ba5a3cf6d20d873ac', class: "icons" }, h("slot", { key: 'e74a80a35e7f3dbb1bb314df9a226c9b2d46a428', name: "end" })), this.open && (h("nav", { key: 'd33e76fdc7030ab08592c4d1c8db6d5365b59fcb' }, h("smoothly-calendar", { key: 'd122e52bb71a2a9faa37f371b4340c1e25030ce3', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, h("slot", { key: '5c0304ae71532534e4df6673a2ca538e131ce7cc' }))), h("span", { key: '51c98ef57299158e77be485a5355d4a98eda18a2', class: "icons" }, h("slot", { key: 'a8e2f3cf5dee52eb181865b6fb6b992a87216a54', name: "end" })), this.open && (h("nav", { key: 'e41d58a167a882bff1878fec710c5295dc3f7ea3' }, h("smoothly-calendar", { key: 'de6578bbf253dbf6b5179629e1a414d311c40785', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {

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

@@ -6,17 +6,17 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '4d22468a080d1988e357ceb32b5df876a4c6db20' }, h("smoothly-input-demo-standard", { key: 'fc7fb5262f36fd7f953751fcca8b5056f08eb858' }), h("div", { key: 'e7b88f15dc9b8099bb60a9e336214e3b7b9f57db', class: "inputs" }, h("h2", { key: '38b73daf079236b55df1c6eb8a9e62039d636cd4' }, "Calendar"), h("smoothly-input-date", { key: 'd0515c4d2d38fb373c9df8ce388df33667b40846', name: "some-date" }, "Calendar"), h("h2", { key: 'c2cc92d5fa683da3ac36918b7089e4d562bc3236' }, "Date Range"), h("smoothly-input-date-range", { key: '01c970d18df033178939d14a7d690fc6eef35570', 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: '7470398fa98ccb00d749bcbc5f8370234f1d5ab7', 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: 'ec7d4687d0e66aac5110a61f4db380f9aa677f30', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '0c3d14c0cb2773bd20a8f894523a9f00b3da7d3d', 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: '2c21d84c0c387c41621323eac28a6fb0c7aa9eff' }, h("smoothly-input-demo-standard", { key: '119dd61fec7d5679e7d71ed8b1cbd7cd7676df8e' }), h("div", { key: 'f27fe4ccbce6bcb2bb247a7ca2bdf1a3c0f48eeb', class: "inputs" }, h("h2", { key: '14d1b974cd3d39d9bfce6db4db90390829af27fc' }, "Calendar"), h("smoothly-input-date", { key: '2554c0764e1c3240fed2a60b1f0fed1debc4b288', name: "some-date" }, "Calendar"), h("h2", { key: '566d6aa65ed9d693953c8f16fcfdd84877f948f6' }, "Date Range"), h("smoothly-input-date-range", { key: '888e3043ba1f13b4ee9bd00b214cb422745271e5', 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: '40cc239a477203bcec3950ca8f9d58760662b6f4', 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: '5914ae9340c307ebb9f2d237be1c464489af5e11', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '27f7376080ee0194d9b10c1b67fca176171582ca', 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: '03ea6127b0abe9f8a99e65c3e9c0aee7f57b35d9', slot: "end", size: "icon" })), h("h2", { key: 'd9f827401eac78533a5797f184971b0d9e45a1e7' }, "Date"), h("smoothly-input-date", { key: '8afba635563e6833d94a0085b1623aeeb9e1cf00' }, "Date"), h("smoothly-input-date", { key: '43084ccfa8d45e94e0b54d9bb18f9b3540c09a62', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '884a35070dd150e600b40deeb611af0363f2b07a', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '09171749b51c63cc8b6c319114c0bd7d570af033', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'ee0f606241ecec42b70e4f92db3100acf8b1730d', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '976e9376f119bc3e8196ef32177ca898362c0c99', slot: "end", size: "icon" })), h("h2", { key: '055cd19bcf92b14d77818a25b07a737da282c85f' }, "Select"), h("div", { key: '7856e723310021883018078276ad28d38a76e900', class: "select-div" }, h("smoothly-input-select", { key: 'b147b8137ae583d9c3df8be484fcc5fa3034034a', name: "select-dessert", looks: "border" }, h("label", { key: 'cba34105b7c98d4956e4a9ec7931ae6bed50d0e7', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'd085fb3d7667b8baf785660868e57e81603053b4', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'cc9a94fcdd9270e89572a72f258ca1c70640c3a7', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '624c9e9ef3f76ceddb3eb54348739304fc537297', value: "3" }, "Cookie"), h("smoothly-item", { key: 'bfc710e98f216544dc76a68e602f0c16be88a599', value: "4" }, "Croissant"), h("smoothly-item", { key: 'ffc432e8854cc83883e0169cadafd19aff635cb9', value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '2c6ee00939da166c9ce3cb4c72f204e9c88a882a', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '5592d116149f40ab8fc234276aef37d9e38e42a8', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '784bf8122cdcc84641ab9424f7092ad9c6ee5eba', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '4dc7f7b95a38860bad0888999f19ad38f66f414a', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'ad2b235845e8b1490fb2fb9b097e637724663fb4', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'aaf053c467477856fea93b48b61c899ad26b4a02', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '75977992ad2bb03d68b43bd72f387917391a4201', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '26e4d2b1796807ebe3d68a39893096346669bd62', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'f3417f59ced46f59ac7262af4a8a065367732542', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '906591c99263c695520f6f0c09d0d291e0a19bd4', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '1f26bb3c7429fea49657d60502e5a75439cafea9', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '21698bc033c9cfa8059344213b1e714b949f2bc7', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '2728237616137cacc93a23ffac8427ef5093dd06', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '512228c9a18f1b9f7acbad35db98eaadcc5a394e', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b0305ab339117b64d8804b0e8c911b35c73daeb2', value: "folder", selected: true }, h("smoothly-icon", { key: '778c15a8e46b9f5970b64a26d11f376205294075', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'fec4a02325b69e05095690e9f058a011a056a643', value: "camera" }, h("smoothly-icon", { key: '306687342fe6eae48619bb38721dc9cbef1c3cf5', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '36b1d351540b475aa68d78e265cf0f2d7a190990', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'd9f0f8fc58fa3645267bb2c3299e28405e10f42e', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '68f4e45c98c8ae86540d47dda347f7da2a6311c0', slot: "end", size: "icon" })), h("h2", { key: '22fa286405039f0ffad5f3e0699d319e19afab81' }, "Date"), h("smoothly-input-date", { key: '234714e87a3d7758ddb461c2e41d8338b08d1dac' }, "Date"), h("smoothly-input-date", { key: 'ffa9825d1607cfff36c0f905c54f599eb27641df', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '0996c7930dda251e062c3ddeb3913235945c8770', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'f93840584abbe3bcf42b2ef631b9af0ad3777cb9', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '922eba0deb0d83ef492fc6179729784b65d56007', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '1e1922feaf0d74cbd28838910e76aa4996b79379', slot: "end", size: "icon" })), h("h2", { key: '285f1e7ac38d73d1cefd2d09cad980e3bfdb4eef' }, "Select"), h("div", { key: '530acc8bb23dcded52f542fd5776b9915d8747a5', class: "select-div" }, h("smoothly-input-select", { key: '055b09252fe6854519b55355309123649a1d8548', name: "select-dessert", looks: "border" }, h("label", { key: 'eb009b697a58e228e218b03be5c5443f9112813e', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '797c3dacc4cfdfc5dbc844c84792e33bb7717315', value: "1" }, "Ice cream"), h("smoothly-item", { key: '39663fc179e11bb1dde2d11070a071ae2b6c983e', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '07ecb2a92ba7a8d96702cade6cea2352abd9b6ba', value: "3" }, "Cookie"), h("smoothly-item", { key: '199fd2229c654cce7219f1f443c92d0159f688d8', value: "4" }, "Croissant"), h("smoothly-item", { key: 'ca81d64043bed3518c468e9b7889106c28a6c9a3', value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'efbe12f1284be04fa9da11fb06f566ca4e3566f3', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '5f1f71f6e23c2c966774f2400acc19b05ab953ab', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'e05b5b2685a0e43751f543f2007250989f13998f', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '9e6dd82329905758ed38829b83d540d21b700970', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '9b0292116361e68bcb8565269d1c9887231769ba', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'f75d180a17e590e1c6d266f3d54fb14ba0583d77', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '70b55fca1ebf5d1ce143537d0ce0cb59eb1239d9', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '38593ddd022bf1b89e2a1f746bdb78ac25adfaf5', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '73817d432108c84097d89ae6343f4467c2c3dba5', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a02780a198f189e67bd9afb876dfd40d48d8749e', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '6396739580e9c4641f89dfb7b0124a2286d7f80d', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '780d77499458aae22ef7a263254337863263d258', value: "manatee" }, "Manatee"), h("smoothly-item", { key: 'fe2015a62f5df7bf43f47b20970f44956090e515', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '3a3d3e369cafc3a5b4730c45410020edff3847aa', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '8ffb133d23c890286071965e4a81b4f0c1c7a40c', value: "folder", selected: true }, h("smoothly-icon", { key: '1c4258df5c53f0ea7131bbe7f70aa9a0763c590e', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '29b5bf212246c78ad291018ed913571d97c264d9', value: "camera" }, h("smoothly-icon", { key: 'e0c3ee87ca0e922c7791d0ec6122b82788d77b18', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'e1d10123cb5b1a787382817c07e10a3deb74ea34', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c26862e531cb18e66740c61b29211040213acaee', 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: '5020ba6265bc99779adc5650e96e9dabfc10e075', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '24554f38718cf6d7004d259a3ba10ad4fb9f80d4', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'b4963b60050f9efae657feac6e5b571705762ec8', value: "1" }, "January"), h("smoothly-item", { key: 'dd6e1ff7e14942c7b4ca1a64f338c9cf9c4e2fe1', value: "2" }, "February"), h("smoothly-item", { key: '900f59510c01bea81d6781422b168a94c4613982', value: "3" }, "March"), h("smoothly-item", { key: '1f2ff24ab65b57f691e84315294432ad50770ce4', value: "4" }, "April"), h("smoothly-item", { key: '5cb75032b63fc55fc67097658e4f69ad4136107b', value: "5" }, "May"), h("smoothly-item", { key: '9021507682e64aab64ab5de05fa4fce121111525', value: "6" }, "June"), h("smoothly-item", { key: 'a75a032f711d2ea85e201257dc31477687b71e83', value: "7" }, "July"), h("smoothly-item", { key: '3f1866f398b3dc53b922e6e5e04b9462ee915fd1', value: "8" }, "August"), h("smoothly-item", { key: 'a64b2ffece74644ca9a8f9250eb7a4d1d0b706b1', value: "9" }, "September"), h("smoothly-item", { key: '90c89adff7c4ff81e25420bea5f513b0f5f6af3f', value: "10" }, "October"), h("smoothly-item", { key: '7f62a1baccaa22c0d922b6efd66ac7cd3fecca62', value: "11" }, "November"), h("smoothly-item", { key: '653b0c116b9a5b27f1192ebe087acb130fe5f50b', value: "12" }, "December"))), h("h2", { key: 'f99e5afaa18b4c2369abf1d9a619b34ee805fc8d' }, "Duration"), h("smoothly-input", { key: '9e93a731fc53e4a69e5cd9a5c07041160e43516f', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '914bcb2ad740dead0f170ca65d6709ccc074da64', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a0a19f995856bbed75facfd13e8678e2660a3f00', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'b204bf4e58d9e958caa858bef2e6c332d4380aac', value: "1" }, "January"), h("smoothly-item", { key: 'af992fa019db3145e771d99a9d8076ef4d29e8ff', value: "2" }, "February"), h("smoothly-item", { key: 'ad288e51d7da7b7e036c6c03e41e58ace1e9ebba', value: "3" }, "March"), h("smoothly-item", { key: '6eef09ea011660bc8f05890dc8e3b214162c1a8a', value: "4" }, "April"), h("smoothly-item", { key: 'b35f8c9936d3d889820a32a4952bc00d9e207777', value: "5" }, "May"), h("smoothly-item", { key: '6334d689acd1db1ff3371b83845e42fbed12cf97', value: "6" }, "June"), h("smoothly-item", { key: 'e0e6fd95341bc868cfb078c3084087ae1f7116b1', value: "7" }, "July"), h("smoothly-item", { key: 'e1d2110eb9ce3049fad072dbc7b3ee5fdd5417e0', value: "8" }, "August"), h("smoothly-item", { key: '67e1e2e03fe996d3513713777fc5fb173bde40f3', value: "9" }, "September"), h("smoothly-item", { key: '1d339f1b19f2837821e9ad1854ff91c6377a9b46', value: "10" }, "October"), h("smoothly-item", { key: 'f337d69b0cf691004026dcd1fd9fb6e05663e6ab', value: "11" }, "November"), h("smoothly-item", { key: '59e4f576d3682797d304af9de5b034874232edd8', value: "12" }, "December"))), h("h2", { key: '857f8038b0c7eba6cc1cdf809006602895bd50ce' }, "Duration"), h("smoothly-input", { key: '2fe4664cc1c0ccab14c73eace5e3245050ee42e6', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("smoothly-input", { key: '8ef85b5978a8a326278a36a592a926f6eaab6281', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), h("smoothly-input", { key: '4d2c766c08d7668dc950cdf0e79c2376e65cb10e', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '8eb690e348aea96c400404e7992472edac18795a' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '08b42135cc435ddbafb2131d9772accb42c5f4f1', 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: '87aad539e0890e9e5eed23d95358de520aff3317' }, "Identifiers"), h("smoothly-input", { key: '3a9e58436f5ab310fa00bea3aca46ecab5054025', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '6ac9a05ecc748e2dbfbc59b4991d484447ef1eee', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'fbf58d1f86bf1b59a54dbae539d4b4ec7fcb5319', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '284bd28fff1e622993e6c83065d08821676238e3', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '198bb3b455345ef55300defa7411d96af5156985', type: "identifier-camel" }, "Camel"), h("h2", { key: '57326ca3da86d81501ba335b5b0e60ff8b322ef3' }, "Input Alternatives"), h("smoothly-input", { key: 'de23357ca03d0071ccfa4162bb460352c16c5960', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: 'ed79db703b001d8f00599e2798c9189aef87be86', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'cebfd6b49ddd4dd79e0bc8126a77f1247ae4c88e', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'c5eeb09907182ee27f89b6f04ac085a63614fab2', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'ab2ae9b2cea41d42bb7f07a22118ffcb6a1a0672', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '6e4c13216c7b0e363f47ecccea6bd9f63a6340cc', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '3d284b7eb0bef9446f0c72a4a45fce496db0f398', placeholder: "test" }), h("smoothly-input-submit", { key: '1cc1c632686e13887b944ff8404c911ee1097062', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '96f73750c93ebb6f4a50499207a3a1a0d9076073' }, "Smoothly checkboxes"), h("div", { key: 'aa4929a5917cea5bcf8961d5f313805fedd9e109', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '0f907e9eb97671d69efd0cadf0a4b1b002735b68', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '25f477455d12951d0033c06f28a811a6f3255973', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '962bc40f831ddcc142ca159b26a1e2fe555aab89', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'c439fe413fb5341c670c3f7b76e7c2945d021f34', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'b858dec527a132f04e47468fd787757598978f53', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '38657e43d5d220e0bd839ab61bf3a1a0179f4df1', name: "third-checkbox" }, "3rd")), h("h4", { key: 'ec14c6fce7abdd68c29448feba56d19e64385ae0' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '2e478fb1582c26ef129ff6828d61598195f1803d', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'c940cf5f00400fd7d44907ffa14e7ac37628c32f', name: "checkmark-circle", slot: "start" }), h("label", { key: 'fa0a5525d6c1bfff1eb43a4e9b05ead8560617a6', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '61241218e980c5709132079759b1b84c27e2ae98', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '91e2ec2e00a856e63c3d39075751dea0347c1cd4', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '65e6dc162f6c63e2b3c23b2be07a77f1c25854b3', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '394c9e6f5c267f756008170e51c66552632883aa', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '7a8ad22f29f4b8f835d5ac6579a053547e408102', name: "radioSecondInput" }, h("label", { key: '8ee8c01660d6cc0d29288b2eca40316fc6038d1a', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'db0299fefc79b9467c2949c0a201dab87f08dbe9', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '11e05b7d42219a3053fa25521812244f2f0e7428', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'f725a62deff05d78b6ca6cabefa4343193c7589f', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '85d184fca2e5f1283f0775ebb544060d3bc8b8d6', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '7d8aaafc412c456769667ed7174b86e025ce3ec0', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '5b22de409c7c057c6d2e3b4bc5ac20e5313ac3ea', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '8d51603cec738f75d64420c892d4f3ed70e56c0e' }), h("smoothly-input-color-demo", { key: 'e5b826ed6916c0b1ed09ed126aa0d22cedaa0c13' }), h("smoothly-input-price-demo", { key: '9471cc31ced0f7a56855e9f31467bbfae382590d' }), h("smoothly-back-to-top", { key: '0ac3807cb7f8e57a286b8ee4a0beedbd6a0e5704' }))));
+            } }, "Duration"), h("h2", { key: 'ebe91cd09ac5eaf64582d32e2d19020e28a8e431' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: 'c5a54e12f1e6bc615e82820adb9808028963ee62', 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: '436d524f5d496de80f178eb48967707ef2c371cc' }, "Identifiers"), h("smoothly-input", { key: 'e81c1ea987dbae312c926b4c23e484d5224c369c', type: "identifier-code" }, "Code"), h("smoothly-input", { key: 'c8e035329dfce2d45feb2584dc9bdea751f780d6', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '0c601277a87d76107c59ff9ed9a972220c9ce8ae', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '02c6999478f3c1bba98afdde77a3d0423947ea4b', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '6192de09d6ee62b9a94f26d144edd0f31b9094fe', type: "identifier-camel" }, "Camel"), h("h2", { key: '031f9e449e3c161737d14f175b1c125bc7c42b23' }, "Input Alternatives"), h("smoothly-input", { key: '9d0ccf91ea643a35949fce4e127e4da41404d84c', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: 'b700bb685a07e1506639e01e2635a423b5082cd5', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '3e2556fb2f33499792dd69becf68a6042a7e4027', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '7020584ecc47e9e3ee55834f3340ae1a5fb31dd0', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'c32269531a2cce3ce8600884e33f477a804091a6', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '5807e5e4b0eafbf9a45fcd4612fadbdd2b1b1a84', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '6ad0ed7ca5fc6fbcadd643c956e83cf40b83c86d', placeholder: "test" }), h("smoothly-input-submit", { key: 'fefaf76c25fbca0e52c03b013db854215775278e', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'a21b1ac255ec749e48b8f3600f50aa60742065af' }, "Smoothly checkboxes"), h("div", { key: '0f174810638970840571e784396f5386f9a728a1', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '4d3919ee270974bee934702b45c0e43fbf391991', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'e1947db3f4e0cb37b86621b532d5123e0de24a12', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '5db66f0e920a5ce03c9bf0c4829b042eae9adbc0', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '93b2170be8dbbe239e75079a45fe0d4acf3ed40a', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'e8ec74b50cf2be6e30a37e787a61e904df1b9154', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '7e44d27a76d61736ec42a2e8d8531132c5ac86b2', name: "third-checkbox" }, "3rd")), h("h4", { key: '3751c4486172886d76699dd0b4c2685201ef2c6a' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '999bd3f7ebc3b66dad5dfcb419e3f89dc80efae0', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '0df5464e535813443495fc3ea18310878697ce8b', name: "checkmark-circle", slot: "start" }), h("label", { key: '0561365fd4133d9cc73f3abb2c50970074fbb1ca', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'fa9180e66a63c3804c9d93976fd427cb6416c0ff', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '0aa37e8ac6dbb5796ae4bbdaa6b04990f6e627f8', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '1fa790e6efe4c1a4c3a647ab75fa1bd8ff5cd1f2', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '6f6470d0341663a35e904ce3a26a25b0ab357838', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '8971a429e5e231b283864c2a50c9a4d8e5026d3d', name: "radioSecondInput" }, h("label", { key: 'fceed2bb3cd4e69e3f5478cee6f9c31682470da1', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '285d7046af2ebe57f66932d843f2db35f2927c83', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '990ce64efece7e1f27572bb1ac983c7d695ab4bf', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6367bbe2e7e5f80ec66854ce8e1d59cafd7e6006', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'd5ba0827aac67b46b29d0c6cd9ffffcaf3f75fa6', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '77f0e308ff8a0632005246f0f3d7cd39fa4720f9', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '9a50b5807b38dd21431e0bcfd7a741ae5f1f7858', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'a026639b8abb9a20214d26ef4e745104aab9f3b5' }), h("smoothly-input-color-demo", { key: 'a1d742e35900ee52300d94461e848182a811687c' }), h("smoothly-input-price-demo", { key: '13548eae0e3e92ab25cbab2dba88e771990feb2f' }), h("smoothly-back-to-top", { key: '7dd86bfc6d190cb82949d74faa1b7e76fa6443a0' }))));
     }
     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: 'e0130489f4c93fd3d843f2462b2c5149f157b3fe' }, h("h2", { key: '1995cbab87f15c67f143d463564ea7f36daae94f' }, "State demo on smoothly-input"), h("p", { key: '125ab5ad3c3edd286fdeec42a751412dd0f48fd8' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'f7cb859f06e3e22661346c8784ab639410b72aaf' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '0cf33db6e4b836c71a5847e5a1ae084a75774b13', 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: '51f7e92ad5e05e7f0272859aa80fe65c01eb5874', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '9c6661ac8c89ced4284ae6b68958201d22211cd8' }, h("h2", { key: '7165928dd4c25bb176f5d596f2439100e18e04e1' }, "State demo on smoothly-input"), h("p", { key: 'af13231e44288235e7511982059c57aee82b3344' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'e238336b2827ea5ee5d9aadd057c3e472ec0348d' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'a36f517404fa3cc2a32a6c1a3f2e7bc3bf2845cb', 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: '5880eaca14ffeabea917edb4f1100b07e0a6b943', 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

@@ -21,7 +21,7 @@ export class SmoothlyInputDemoStandard {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (h(Host, { key: '044fa8c4b9d8f5e7bfc3e57e4ec8c5549da8a011', class: { vertical: !!this.options.vertical } }, h("div", { key: '3662aa7286e3c71ee96b38446ed734c370ad11fe', class: "description" }, h("h2", { key: '831d2d5567a4a520b02730521c8e81a2973eaf5c' }, "Input Standard"), h("p", { key: '05480bcb96442c64da4323f707781d27e3aae2ee' }, "Height of input should be ", h("code", { key: '6c6c7ac45af02f09c11b1a4d62a5164e426a94ec' }, "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: '0ce7d4bd476dfd902f835e858ab5f6ebe645a16f', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '25f2571c6d3f5ddbc9efd0899756024010e2773d', name: "looks" }, h("span", { key: 'ec4db36ee38f76903ff8df4379af65f2f0766646', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: 'ebb2fc0c074c89af17e6df50d38a4caef91024bf', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: 'bd5cef034392cebc5c6000cd43b7c473368421b0', name: "color" }, h("span", { key: 'b6722cf63cb9f995f829704c21833e20d5d31232', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'd29d56ccb184ff45572f0b67e6a341a9a1ba2825', slot: "end" })), h("smoothly-input-checkbox", { key: '83d811121a1be17b1fed20014014e5c3c556881e', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: '68aac64ededa8b02b761f3cd56cb3d6f31b45bdb', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '128e2f5022cf0cedc5d2f69195e16458b9fc8c61', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '787c162c2497211a78a0b68d44f6329d0858371b', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '35c08c03e943a73a875ed852d739d738db13fabf', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'a0564063144d6db7656baff3776990e1ddf7fe70', class: "width" }, "100%"), h("div", { key: 'af1770e8636f7f4864b1e9f8d79d21310fc6d5a5', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: '684c9e2fb3f232b3a13b7f87dda970a273e06ffe', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '56e2def6fb71ab72d3a3f156d674c4f0130b56d8' }, "Text"), h("smoothly-input-clear", { key: '7eba7d6a4953d6198e1fda0ed2fdadc97b1ea3c1', slot: "end" })), h("div", { key: '78a7aae500ccc6197dfc64190a8b5e282adbdb35', class: "height" }), h("smoothly-input-select", { key: '064cbc97f54d9efea21c318c5598c2ea9e6a321e', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: 'ca332bfd4e40666e4454a9b10115f8adc345f6be', slot: "label" }, "Select"), h("smoothly-item", { key: 'c93d3bdbb3f77f4599552638a535bec594847468', value: "1" }, "January"), h("smoothly-item", { key: '0c3d8ecce9c8dff3fe3ac0c13fcbc1d85a8a3d84', value: "2" }, "February"), h("smoothly-item", { key: '47f2a838b2f26507d7f52559f5655dd0f6796b1d', value: "3" }, "March"), h("smoothly-item", { key: '42a4dfe12c71630f4896003dde6b8acd96b02655', value: "4" }, "April"), h("smoothly-item", { key: '4bb5861ee318b39b3ac1fa35ecd4f9b640a8229e', value: "5" }, "May"), h("smoothly-item", { key: '3c43648f442f21c2856d4220aef7f1f622c70507', value: "6" }, "June"), h("smoothly-item", { key: 'd470ea78848fb51a989655d6de6c722cd2aaa9e8', value: "7" }, "July"), h("smoothly-item", { key: '5bf658eb99e5d7ea1db8013de92f23e381d2f8b0', value: "8" }, "August"), h("smoothly-item", { key: 'd494ba5400321c08a46bb542717f734d49d5417d', value: "9" }, "September"), h("smoothly-item", { key: 'c75a04e1aaef26dc8ab3869671db48d2e39c097c', value: "10" }, "October"), h("smoothly-item", { key: '9c996849ae914f908d0719a7cf08415b7509e951', value: "11" }, "November"), h("smoothly-item", { key: '1bbdcd5845e428fbfeb91d773c0198ffb9c1cc60', value: "12" }, "December"), h("smoothly-input-clear", { key: 'cc274431a7236faef0147eef2c29c70403ae44b5', slot: "end" })), h("div", { key: '965e84ff3436d07777084992f391349e3e4e0969', class: "height" }), h("smoothly-input-checkbox", { key: 'e25d58dee03f22d22708da8a26783944da473b19', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'f429538b28976aa446799e160a909f7b57c69ce9', class: "height" }), h("smoothly-input-radio", { key: '9854849f5c559481ca4c2b9e94f3b690f3818d0b', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '318f3a3e48ce06b6af452f717cdc63ca1e3257c7', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'cb47131f2fbbca8f080277e9185a726f59a8f831', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '221e96bbddd2cfff9f587d1ff4fb1b87cae9bc9f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e55e72b32046dd8ad8a7cfcb1c851a98ecc90fec', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '091bd8d97c1181c7cc279e1d3ae9308734408f07', slot: "end" })), h("div", { key: 'db06d7584c5aa208ee858e53f9ed5d0c5e0d95ba', class: "height" }), h("smoothly-input-file", { key: '39b93bde42d37989305380fba2979d33eded3156', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '9c6247a33d43de0e5ed649515f33109caeacbe06', slot: "label" }, "File"), h("smoothly-input-clear", { key: '1671d4ce52d245ee1e4cb0985e74dfc358e7c881', slot: "end" })), h("div", { key: '07677318b0ebcb654d4cdb53440380e1ad37e7a0', class: "height" }), h("smoothly-input-range", { key: '4e284dec0fc57a37eb4ab06d32d01d10ed3a5c6f', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: 'cdbb48fd450975c3781c6b95bad242634fa080c1', slot: "end" })), h("div", { key: 'c24c1881a74e91831c2e4559ae13505d1027d376', class: "height" }), h("smoothly-input-color", { key: 'b617db1b66a73dfd298aa6a17b48b0a537eec64a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '21e5c0b4f020c63031da90d7668f70d659eb2bd4' }, "Color"), h("smoothly-input-clear", { key: '33b518103b68f12837a4ee25d5f72ccfcbb3b8e7', slot: "end" })), h("div", { key: 'e7706aa12b6cfabc23ae1d9499641d5b3df6bda2', class: "height" }), h("smoothly-input-date", { key: '47c0964845648b7ff59eafc7d9080692b11f8614', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '0a85480963e8f78279a9ee5751643576de0c7c26' }, "Date"), h("smoothly-input-clear", { key: '3f1b5355882e84c53bfd571be1ee73754f257bcc', slot: "end" })), h("div", { key: '35a82c5f250b6e4d24ece68a0b02c01e53272441', class: "height" }), h("smoothly-input-date-range", { key: '8c06cad779884cadeaaced5c5f934b16776fca70', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a08d77047d018b960f60754359229a3681f2ce03' }, "Date Range"), h("smoothly-input-clear", { key: '8ba119dc695c705749677ff7eafa7bde2d5eeb5f', slot: "end" })), h("div", { key: '216ac78045d830384411de3d5d2f4ee3bd4bca41', class: "height" }), h("div", { key: '24241b7d95382f3a3cd509e86d4a784195c825ff', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (h(Host, { key: '784cd389b73ec998cfc33687554c6ce89652079d', class: { vertical: !!this.options.vertical } }, h("div", { key: '922dcb022d6102729c23cf6b3e4eb9d181104791', class: "description" }, h("h2", { key: '25394f0be9723506febc2d87d1fd5c4120b4ca39' }, "Input Standard"), h("p", { key: '062ca48b69560e7237a419f182bf77dd5d549698' }, "Height of input should be ", h("code", { key: '6f3d6eb77059d1e485b802b4882720980077c0b3' }, "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: '04bcc3858224312058187a41bfb6f99ca314aa44', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '0d2abfaec915f58a4f43024fab1723d597fd2dc5', name: "looks" }, h("span", { key: 'ef60b294b701aedeb1540007cc0e6c4f7fc196e7', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '49f2bf14f8ad5734097b0aa7e58b5216d803be62', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: 'b4da34fe37a43cc44a6f5a779740e793724fc446', name: "color" }, h("span", { key: '40ab845ccf5250bce39c7f70d76c093cffc93c26', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '4506d88ad3a4a4863b48ce00bca5b40d48204cb3', slot: "end" })), h("smoothly-input-checkbox", { key: '8d20deeda95a6afbbd75a4788963fe6cb21e34a0', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'fab8770e50db7c6263fe5dd8768c5a049e3005ad', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: 'a3f6d6aced12a9d905f5b3f73530dc145735a17f', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '6685791a655b9de1499a1f738fc5197ecb9a67a0', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '1b4d02bdb4dc4c1e992eeb6040ae158e2748d50f', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '2608d0af230ddc45a5e305f5cd50306d7944f13f', class: "width" }, "100%"), h("div", { key: '2f86b418dc79ec24e6f76c8f66351dd5d06acb6d', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: '5d2355bd0874b9717f29a347042b855caf3735e2', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'df7abc3274a87b70abd7e440fc93f778e9e88d77' }, "Text"), h("smoothly-input-clear", { key: '88e2456ddb005705f7ba71cd60bec4cf9ee95f8d', slot: "end" })), h("div", { key: '44e12dede8311dd568518f72c42530b3ecfb66af', class: "height" }), h("smoothly-input-select", { key: '5019fe1b9518e783aa7da0e7fc2a5a83dc93a128', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '0cb0541a87e4dcca91ce0d80dafdba72f85b9e03', slot: "label" }, "Select"), h("smoothly-item", { key: 'e5b3071fea883db86b9e231f4b2c20732173536c', value: "1" }, "January"), h("smoothly-item", { key: '495795fabf01a9070b762cd66e5ed770f228bf4d', value: "2" }, "February"), h("smoothly-item", { key: 'faaac29a98b1ec33c26bdf5f6514a76412f32228', value: "3" }, "March"), h("smoothly-item", { key: 'b1426ae59bb51ade1e7dad20fb6e1949b3a5c0f8', value: "4" }, "April"), h("smoothly-item", { key: 'e9d3f4dfe7ee79709e5a8b290a7fd9518fde709e', value: "5" }, "May"), h("smoothly-item", { key: '4d4d17f2c6fc5bd16287bc4b61fc98e647745839', value: "6" }, "June"), h("smoothly-item", { key: 'bf85ab8cc41ce12e4f39128fc346354e90e4a818', value: "7" }, "July"), h("smoothly-item", { key: '4ac673d58a2720c0faa744d48d6396e3b1bde9dd', value: "8" }, "August"), h("smoothly-item", { key: '1d9f93d1104446b13c7acd9600d17644f1e1b0b3', value: "9" }, "September"), h("smoothly-item", { key: '4c7879c0c8f1fb4a1e5fffdac85d70fddbee6be1', value: "10" }, "October"), h("smoothly-item", { key: '39af8225cc806f8ecd6baef04179bd8641c4f45c', value: "11" }, "November"), h("smoothly-item", { key: '91181c350899880d8d557464eb2d73233a745725', value: "12" }, "December"), h("smoothly-input-clear", { key: '38bf44afab753632846ae8f1e06da14396a069d2', slot: "end" })), h("div", { key: 'f3f4a148d023e69f350d584f676f3f9230d50b81', class: "height" }), h("smoothly-input-checkbox", { key: '04145e3352cb19b808b667bc7f915aa4ed11b139', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: '9730c4383240e7dfd827f6363a51af1e20f2b0d2', class: "height" }), h("smoothly-input-radio", { key: '80016b96d58dd97c3e76b1a58896011005793bc5', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'e352df7b302d99455e10aba7dec3c80c463c8d12', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '1f64692c6c834c37ceb0a13ab68dc65468cba491', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '003bddef9a78f0380abd81a12c3588b52c5f3a96', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '4846a126e904c491bcb8377ee6a00911777d882e', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'b14968dc755270099340bfccf8a1909155fb9211', slot: "end" })), h("div", { key: 'cb18de85115b554d5e9d4e1490531a7083dd8a77', class: "height" }), h("smoothly-input-file", { key: 'b97675882d95e04f8692c5b3460b4ccabfc1e975', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '7fa640ef3e6db9e981dcab96857df59cec8e576d', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'c0a80dea47043e132bff876dddbdcf0283c7c998', slot: "end" })), h("div", { key: '29b5b4dbfc7b547cc6defb6dd3d7971d92d3a57e', class: "height" }), h("smoothly-input-range", { key: '2913c10df0c8f821f96e6380c96c142322e2beaf', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '2927d9e4292279ffe1d3e0d430214764e3112535', slot: "end" })), h("div", { key: '76d623669ac24a878c40044d96182d84e8e9dddc', class: "height" }), h("smoothly-input-color", { key: '2e2bf08a782668b937eec20119d59245486a3b8c', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'b152d46dd05edd95214cd4bc00feda7e14102a92' }, "Color"), h("smoothly-input-clear", { key: '688575ba0e75c9fd8089a51618b3df6691e0b6d0', slot: "end" })), h("div", { key: 'a288a016a8aba3a666004d1745af57a9a49c4a84', class: "height" }), h("smoothly-input-date", { key: '50c9171499d5ee91181babfcaeb01884483e5430', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '3a738742111958ee0b4e520d3882bfc122f25764' }, "Date"), h("smoothly-input-clear", { key: '1eb81c4f1c3d838825d02cde5dab3ec1c778203b', slot: "end" })), h("div", { key: 'b2ef4db841230f6b80bc540c7f37ff1aeebb6cab', class: "height" }), h("smoothly-input-date-range", { key: 'f64d6d45d5efd6f3c19a5f8739b43b7bfcee5de3', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'd419575d64589b4b2817b90fd2ae4f0d3440880e' }, "Date Range"), h("smoothly-input-clear", { key: '3e305c54a0d42326b5eea572ce62f3dccb15cc6c', slot: "end" })), h("div", { key: '96094b6ec9150edb1f8c5a64f51b3646296be49c', class: "height" }), h("div", { key: '2bce35052b55dc97f8da3e995110cbb2a22fde28', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     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: '0b15d6fa5f06856dcf50fa85e6c70574cfb8f22e', title: this.toolTip }, h("smoothly-button", { key: 'ac8f4e69cc564c1c580b8d9650626f9c34486d0e', 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: 'dedf30644a1b42cfdf39be7df53094457da4e698' }), h("smoothly-icon", { key: 'f1237a29936486379e732f82f47595643e45596f', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: 'c4187c46bdcb80dac6991e3b3e72cb04a1f019db', title: this.toolTip }, h("smoothly-button", { key: '44d5368b74918d0686d13f03a5c915630e5a80e7', 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: 'fcdc2c3e243dd00405415fc700a466a62e4b3c1a' }), h("smoothly-icon", { key: 'b653b0fb812c845b15d56096052e2672e019aadf', 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

@@ -101,7 +101,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '6a8f4866c1fe41c863df77fc56867ea9ef894a1d', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '1f4e0aa503fa8c7434d782e6255e270615d6dcba' }, h("slot", { key: '40c4a96f6e5140cb0c42bfc3cbc2a76c3d8bd430', name: "label" })), h("div", { key: 'ad4a5eba13f8743a7454d92c699a9356d8f7f1b8', class: "input" }, h("smoothly-button", { key: '1ca0073fdfbaefc1c95cff97198ee0a846902857', color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '8504273921a1b3ff6795592ccb4ad7a2d9242f84', name: "button" })), h("span", { key: '2d1d1293ec1d7621375598821e6e9607f45139bb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'b877d7af3e3cd96238b95e7b3599087c6e09b7d8', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '816248a36d060bd217a01bd6b6dd4b5e9b7560fe', name: "document-attach-outline" })), h("input", { key: 'cbe1e61cd982f89843f91652c728ff2c95cd4a00', ref: element => (this.input = element), type: "file", 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("div", { key: 'dc9dde4d839683bed42ede9090308921479dc84c', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '9ac84050b1dd036501fcfe89ccb59be8a3ac3589', name: "end" }))));
+        return (h(Host, { key: 'f928458bd935387c53e72bb413ece3afc4951f2d', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '2d6bf1fa20f3fcdf481eacd8f8c70ea109b736cc' }, h("slot", { key: 'e0e1489ae90b378b32f295fda00d1152fee04d26', name: "label" })), h("div", { key: 'f27c32bfdfa5c6d13763e644efb968c71c4d12b4', class: "input" }, h("smoothly-button", { key: '6a62af23186cd52fdb03e28881aeba4177efbda3', color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: 'fe91571962e0f92b91cb8003717475707d09da59', name: "button" })), h("span", { key: '7130a835cd0994789df802bb8b6146928e9feb15' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '860c4a93cf0858bd933286f3c2e7ee0f71bb6118', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '19023ba2c6091461988b4c3147199e04df3a973b', name: "document-attach-outline" })), h("input", { key: '1aab90d2db03d735a147d0c3a221e221fafacf22', ref: element => (this.input = element), type: "file", 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("div", { key: 'c1944bd9f359ac18bae5dad4bc045d5f2f19e346', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '425e766d0c38f8f758e8bd4a0b795f89511910df', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -122,7 +122,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: 'd570a6df90112060966459ec070cc49670988162', 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: '99187b7b55f338947c3103d411069a6f5d04eaef', name: "start" }), h("div", { key: 'f0ff9602882718a92f178b29f7e702bc94076876' }, h("div", { key: 'f6f9d41e20311c5d21748eb4f2ef4ba43cf85114', class: "ghost" }, h("div", { key: 'a14612b0fe61fe024951bea1b5168a95efb73e33', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: 'd99405f3f2d1d6f5f6e62907e52eb397fdb02d82', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'fabb2edec07c6a48503013ddc72f44e342b09d93', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (h(Host, { key: '3fc905423d5254b46e48b2f433ea0339d00fcf19', 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: '61d0acc825f8c09c416320291991a9f7e8747635', name: "start" }), h("div", { key: '80a86d79a71c2e3706925fd2afcd1d4173784cfd' }, h("div", { key: '87275f36e4fdf6d02e85bec867b8d7d538e16269', class: "ghost" }, h("div", { key: '51ad2aabffe421d21f67b0f7c2353c3ee83f75e1', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '3fa1c2a8ab779dd79de96a63425d5b5830ec9b38', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'fa6c3c58f831f5a2f45786d2ed28244c9151d510', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (event.key == "Enter")
                     this.smoothlyBlur.emit();
@@ -135,7 +135,7 @@ export class SmoothlyInput {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), h("label", { key: '5ab290082747dad2c901ad348a680f6b47c0b52c', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '0b2125cc9efef1d8e4bf279295429d0e40468080' })), h("smoothly-icon", { key: '75e73932b48bfebd2ba219c4ed02f0dc20d13d64', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: 'f7bef2a0a645b33d96d2ee5873c2de29b7f35124', name: "end" })));
+            } }), h("label", { key: 'd5028b886068594878aafe45fbd0717ffb8fe967', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'a7d06eddc4e537e75097bb884cb04335a9094002' })), h("smoothly-icon", { key: '37a6af033a22bed6ec0ab7935826b9bb8bfe4b98', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: 'ffeffc908bd319a22aa0c1d43ef4851e218275c1', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -106,9 +106,9 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '8326dd10b2cb03a49c3df12c484d794ee42422e5' }, h("smoothly-icon", { key: '03d5ab4562e48c9d345dd28f8ba7260d8ca84534', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '1943685acea16f3f7365d4726c155bb4c9f08a08' }, h("smoothly-icon", { key: '029ae9819e734d3abc9831387dedd0785eb9b682', 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: 'cd2085f09d9ccf1c49ab6e7716301b270449cb8c', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '026788ad6b0d4f12b71478b04fee7ab9ec5f705c', slot: "label" }, h("slot", { key: '911d041691ed519c2485ba979f50a9936bd76611', 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: '08ada4e1dfd316a7c406e5e19f8c826f4e8a855e', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '8eff1f76b4388c488a773b234604794b83268bfa', slot: "label" }, h("slot", { key: 'c15e6145cb9bacc40843abdd1ad1a9cb7afe4baa', 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: 'f5f0e3b60b17279611012998265600b1a59f54e5', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '86c6c640f18a3d4eec43174875151e40b3312516', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '41e72d8ce92de46f25a5a7fb4f3ce3199e13901c', slot: "label" }, h("slot", { key: '553a753f930ec75d6a22503caf8d9daa10bffac1', 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: '14395761ce8d660b900d33a9788ef7dea8d94fdf', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '0008803d6e9729e35cf873dfcdeed8b85aa0ab63', slot: "label" }, h("slot", { key: '9a71e838cb19a0ebecf2bdf0d37910caec36b3a9', 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: '74682dfc3b0108a34014cad5229d14bd7ececf51', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }

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

@@ -96,7 +96,7 @@ export class SmoothlyInputRadio {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (h(Host, { key: '94325a8156ac640837a500e5c28f68ce2c06e72d', class: "floating-label" }, h("slot", { key: '61a87a363ffc2667860db9af4ad52a08edd99b62', name: "start" }), h("div", { key: '6b7a40b69d699f420f3c610b3fbaddd477fe37ca' }, h("slot", { key: 'a6676f95118a14e4814a3704fbc9808077bd8c1a', name: "label" }), h("div", { key: 'b8a3e6e7b6e173501e5e160db39791f6be61425a', class: "options" }, h("slot", { key: 'ecbed40f61155505265f5f8d6b3c7601dd6635e6' }))), h("slot", { key: '8dd360a537b119abb284c51243d3427d1a95c630', name: "end" })));
+        return (h(Host, { key: '922330dfeb58cc9bbd47acfda45b0cc727c2ee78', class: "floating-label" }, h("slot", { key: '7d84c2fcbda1d0b8b98bd3dfb2122854f8d4ba48', name: "start" }), h("div", { key: '0d170f8d4695171d2e2ee7224e502dbbf74fd2b8' }, h("slot", { key: 'ff9b06c3ac6e6d3d4866d22769a17b5f37fca91e', name: "label" }), h("div", { key: 'd1d39e3d5d4463d152f63e5b91a858342f621fd0', class: "options" }, h("slot", { key: 'd6931cfb09a492a962a45df852ddb7b76954866d' }))), h("slot", { key: 'd8b3b53070739d0da4fac4449d5b404df26eef93', name: "end" })));
     }
     static get is() { return "smoothly-input-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -14,7 +14,7 @@ export class SmoothlyInputRadioItem {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (h(Host, { key: 'd881877d7a8cd254071fe0202554e25e359a78e5', onClick: () => this.inputHandler() }, h("input", { key: 'ebd98073073f29821aae7ab753f19c3ffea0aec6', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: 'ced600a185b7853039c093d855a699950c8e221c', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: 'fc9b714d55603e377ffe0c9341ec8ce242dc5881' }, h("slot", { key: '6bb1ab286ea926069e31e48fb23415257299ab00' }))));
+        return (h(Host, { key: '002e26f56eaf8b6a5a1d82831ca8d6e75640c6b5', onClick: () => this.inputHandler() }, h("input", { key: 'cce7006d1e987923e10bc472f80d1b9d3eb94799', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: '92560203ac82ea5bc172ad2b928be1f127be7da6', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: '3d3c5a6b68bce65f4556f9159542d42c3b0b5fd6' }, h("slot", { key: 'f69d8bf5a6bb8d25493ab82cd31ec46b5a576826' }))));
     }
     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: '4051df0b6e7e3616d4003fbf6041d7114e42bca5' }, h("h2", { key: '1bc9976be3dd1bdd9cafb957804721bfc2d35e8f' }, "Range"), h("h3", { key: 'c2d36a50622ab5aa5a91e7d07128710042ead62b' }, "Phone Number"), h("smoothly-input-range", { key: '9e3df23e6f60dee8edcb2dca05ff8fabc3f3f0b6', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '30124f483876140e0b75fbbeea412e34430c00ee' }, "Stars out of ten"), h("smoothly-input-range", { key: 'd4aa30a14fea1abe86520faa74db9671397c75c9', max: 10, step: 1, label: "Stars" }), h("h3", { key: '855cdcf0cf5968c42dc038d3cb636a4aa0c4c75c' }, "Percent"), h("smoothly-input-range", { key: '78a4f0ddb5615947071bcc05cd2bdd6e14c83a96', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '3ccd439f2d386f40d87d92d22b5e9539bb7a2b9c' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '3c1aa4fa46ac4c7e73fdf9df8628bf2459b354e5', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '989b64f1e98a59d34e710eff806cdf7a2fec2e9b', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '3cfabb3409c3ba4a3bb1ecd63dd51c2b79277552', size: "icon", slot: "end" }))));
+        return (h(Host, { key: 'd80b7d97e5938f89b114bd6cefe2379bd7d539ff' }, h("h2", { key: 'e130c40a42caf8099c73ddd602b4729dfcd6d6aa' }, "Range"), h("h3", { key: 'c250412bad7b95f15a82b697e458322b67a04bf8' }, "Phone Number"), h("smoothly-input-range", { key: '091a7a33a8e295785984bf44f25807e5e792161f', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '5a5e3026b334ea2abb62dada30ca121b6c02bf65' }, "Stars out of ten"), h("smoothly-input-range", { key: '41402636155c1518d6d4e008743416d4146c2579', max: 10, step: 1, label: "Stars" }), h("h3", { key: '7624a9d0ef702c6f3e9b8f254196bcccd92e278e' }, "Percent"), h("smoothly-input-range", { key: 'a2ca37d7755949003438c9370e74091862f42555', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: 'e492ba09bcba0cdaa2df72a1d1fc584a742f5090' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '0a69b9be845fd9150cd6159132ee4047f8da60b1', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '11a3f47010f5c2ae24328a154c861d3b2e72cc15', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '131a8a23a1333f7ddc8472675ec20b4154dac055', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

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

@@ -90,17 +90,17 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '90232044ed7c86886c63e0f3a3247cd9615416bb', class: {
+        return (h(Host, { key: 'f30307fb1bb01d0a1cbe061b729895d05e4d0a71', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '7504c2e4c61bfa725571afed2f9081f4b86e8fb8', name: "start" }), h("div", { key: 'd62e225b32966530fb7ec9c82c39520ac3bc1238' }, h("label", { key: '5547ce5921cb8fda0a25a32c132c639c5eba10b9', htmlFor: this.name }, this.label), h("smoothly-input", { key: '08d86ea1cb133fede356dc71d4342fe6802f738e', 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: 'ab94b178299760c8f203d1e1e06d3122db81ffbf', name: "start" }), h("div", { key: '66717b13b3025f6645bf9f58f4d3255787fcf162' }, h("label", { key: '1a8458d9a4fb5b17d3d05794d6b536de0cadd4e9', htmlFor: this.name }, this.label), h("smoothly-input", { key: '9e495879fc7c32a01ce945cbc9902a94be1e5910', 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 }, this.label), h("smoothly-display", { key: '7ee11f59b572f7ad3bc943154981ae582ea18bec', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '4c96c9a690942a98638725062656861f331d66d1', 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, 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 }, this.label), h("smoothly-display", { key: 'facaa91f246feae01d65b14a2169a65130329686', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'dfa426ae80bfd8a52c03e0b872747655e8d04d77', 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, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '85d93077d0dfed541c2979132616981d1f5d231c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'c671e7d73d701eab03855ec487bdcb967df01cc4', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '8a36e5c707c72ede4b326b9b6c17236235a0770c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '47baf47817df9f2c93e4c65413bb2342b10a96e5', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -39,7 +39,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3783efaed2304cc336fa8659579dfce6801fcd07', title: this.tooltip }, h("smoothly-button", { key: 'fbea13e6f94c40b97ff55ce8a6cc86bc50f4ce73', 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: 'ad1384e929cb9414dfdfec1a3863b5b4106b041f' }), h("smoothly-icon", { key: '36d9df6c1bc74b62940a4de263cfc260e604bbdc', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: 'e866598d780286347fd99ae758bf3007b51d9b96', title: this.tooltip }, h("smoothly-button", { key: 'b6f884b563fcb7e77435c8bd2f133b8fb5c7efa1', 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: '324001fa4903bb6c2fba3320ef75393ca2a68c64' }), h("smoothly-icon", { key: '168b29242d33e6bc8f7dcf3dbe4068bca86adb5d', 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

@@ -281,14 +281,14 @@ export class SmoothlyInputSelect {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (h(Host, { key: 'd1c9b93fad2d17379884f60c0629fdbee3982b33', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: 'd1ce88ad0cb990e44f3bbafcb07cd3ccb7477532', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'ea9aaf7bdb1869f59bed2faaaae2634e40d7410b', class: "icons", ref: element => (this.iconsDiv = element) }, h("slot", { key: 'fb62b83e6963f00b00d342bc7402c104bc80cd66', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '2ca62cfc6d36dba10862225ac2fc09e44a65fffc', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-icon", { key: '73a043a0f8ccb418a12391d3f4ab20bc1218a484', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), h("slot", { key: '01c93c6030d690fb9bd861a5b7f3c552dd426adb', name: "label" }), h("div", { key: '4d24b8e8614bb04edb492ce561d5ca76138936c4', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("smoothly-item", { key: 'a6e327236bbd8f883e171814f3e63da132e1f8a9', selectable: false }, h("smoothly-icon", { key: '8e7f7ec093b93f555344fa6e4ffa3d6c8fe1f46c', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: 'cf74cf7b4cc2064b7f4b5f9072ac55f49abefb2a', name: "backspace-outline", size: "small", onClick: e => {
+        return (h(Host, { key: '5b7c85699f51b843232ef7b355a33c3c5c96ed64', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '391926d97a5026dce32bdfb07be5b9dabc38f56b', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: '70720e567f0ba06f6ece6ae36b843f099e948a67', class: "icons", ref: element => (this.iconsDiv = element) }, h("slot", { key: '768e0485bdb18c93c72de159529e6e7121c7e619', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '03ecc5d50a13464e28185ac73279e9167a051768', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-icon", { key: '3707e5940fd443a28609f83d8697daad4aae4d16', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), h("slot", { key: '21fd05ee6339d7678394876cf3098f04be5cef51', name: "label" }), h("div", { key: 'e7c54a182d1f8764b27eae5473e580d0c0d06837', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("smoothly-item", { key: 'dd2f141af2770ed76cc395b9a280ecbee43d97ca', selectable: false }, h("smoothly-icon", { key: '852372b4c0e2a5d40bacabec4192bc45f0afbf5d', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: 'dae65bfcb83add2b1c37fe1104f8e9c4b52c68c3', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: '54e9d15f103ffbf92b3ef7cd97d98093b733c322', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (h("smoothly-icon", { key: '1ea0a67803af3b863f5c753e99450d8ee6c7b0a4', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), h("slot", { key: '5d7742c0f63cc8acabde6edf5ac675f5f2548b56' }), this.addedItems)));
+            } })))), h("slot", { key: '25ee7f5852ac9d21ccf6e803e5a1d8869d2d8b3d' }), this.addedItems)));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '5768d9069f8002611288580dec67d6119f4f4559', 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: 'dcf2c85088947c0dc6f5e89492133563a3828d1d', 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

@@ -30,7 +30,7 @@ export class SmoothlyItem {
                 : false;
     }
     render() {
-        return (h(Host, { key: '1ad7925c7766f48131a3b868e29a8d3b4ef81167', tabIndex: -1 }, h("slot", { key: '9b813b0b3f1caafd72cefebed40b6e6c48aace9e' })));
+        return (h(Host, { key: '4496214f6929152ee69c108766f5069c12ac341b', tabIndex: -1 }, h("slot", { key: 'be282f9e111d5a681f08cd27c8b98d063cd8df2a' })));
     }
     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: '2e33f0d93baee1a2589bdcad782c57b52a63bc33', title: this.description, style: {
+        return (h(Host, { key: '43fe16ebaa7bbc29415b7e32ca1d8a524d573989', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '645b66d7fea66cb7b5bf1045e7e2400358a22608' })));
+            } }, h("slot", { key: '3a12dd1b1780022a08bc21a542580a07d0d3ecd4' })));
     }
     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: '35a95fb4af778600b397523dd64bdc8f36db6624' }, h("slot", { key: 'b5aa77a8c758fe97602d099e7cfa5af3cf981199', name: "before" }), h("smoothly-load-more", { key: 'f469461edc4759aa9c898ae6edf8d0461b253c87', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '41e879c9ddcebe32934aa54de2b34b700b6fb146' })));
+        return (h(Host, { key: '2d06454e832d780979279d9125d049caf6bbbbc3' }, h("slot", { key: '5369abfe98a9c6b4152405908f3610aa451820a4', name: "before" }), h("smoothly-load-more", { key: '89f8af60faec0338c00047c5fa00166640590ddb', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'defa87bd198b7265dca41759fb5a51508dcdfcfa' })));
     }
     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: '828ce432656973cd3dc94015a4f7a350cffc2814' });
+        return h(Host, { key: '54a43e14bf0d37a774435917c1a93ad6458c33d2' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,7 @@ export class SmoothlyModal {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (h(Host, { key: 'ca8c015be405179688f7eacb9becfd437733d136', role: "alertdialog" }, h("div", { key: '05afa423533ecfe7eb42578bb32e93d3b0189916', class: "modal" }, h("div", { key: 'a1ad92a2aa33376be6a210cc3d2b356c61a6b612', class: "header" }, h("slot", { key: 'e446def80df406f67a7db346e665cc72ab6c3994', name: "header" }), this.closable && h("smoothly-icon", { key: '73df336557af04d2cdc601c3e8d2f5c8a8a19222', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), h("slot", { key: 'aca2bb1c7221fbce49a00a2fd33539463414dbc5' }), h("div", { key: '802d7b631ae8fd42853120dc1c857fadb8c289ce', class: "actions" }, h("slot", { key: '31e0f0cc09d4567cc4ddb8a0a4e1b46c5229f11b', name: "actions" })))));
+        return (h(Host, { key: 'd9e159e312462b3d3e135005c9ca7a4b79185eb9', role: "alertdialog" }, h("div", { key: 'd534202354a2412331dbbf68f86ea8dc38a45002', class: "modal" }, h("div", { key: '50b7c7acefba7a6d5bd304f09fd38d6a4a3fccbe', class: "header" }, h("slot", { key: '418a8c84295c7541acad0a89b0dbdd7f39ed57b9', name: "header" }), this.closable && h("smoothly-icon", { key: 'fba5fbe0f58a56ec487da0aef4b71600cbe3e621', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), h("slot", { key: '1475235e478fe491f300ffbc5b2916f42d504aa1' }), h("div", { key: 'bcf6188af093fbfce98b03d258d28a886bb5ffba', class: "actions" }, h("slot", { key: 'c59c355e521ebdff33ea0e1d633c69b6d8f521aa', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/next/demo/colspan/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyNextDemoColspan {
     render() {
-        return (h(Host, { key: '9fae5ae5fd52417900b85cd1b7286226211988ae' }, h("smoothly-next-table", { key: '7fa918696ff0cbc055fc9679fada1682d83c30db', columns: 3 }, h("smoothly-next-table-head", { key: '953b379bc04dfbc70c48555be37634cc633bbe89' }, h("smoothly-next-table-row", { key: 'a57b92a5a37e839f5de4e33d2d0b1c36dfea9c4d' }, h("smoothly-next-table-cell", { key: '93aae315bf7dd8067602f31497c7d88453551d4c' }, "Date"), h("smoothly-next-table-cell", { key: '691050621549e189413af27ad3abebd7b1d06631' }, "Skip"), h("smoothly-next-table-cell", { key: '769cca5e01095fd8c4a99f9c88d0c5ee605c0ce6' }, "Total"))), h("smoothly-next-table-body", { key: 'ba10a91dc9b7dd6e36c5251316365054190e5f65' }, h("smoothly-next-table-row", { key: '0ef1e28d588a03cd17c49ec4b311d049404722df' }, h("smoothly-next-table-cell", { key: '2f01f179122351a37aa4d9bfee49c3a9f7a9f1b0', span: 2 }, h("smoothly-display", { key: 'cdce0e78b6cc01a43fcad4cf4f8f2ef985b3b51e', type: "date", value: "2024-01-01" })), h("smoothly-next-table-cell", { key: '5d17373e81827518dfb5e719b6501aa2cad32f56' }, h("smoothly-display", { key: 'ac37b31a93d75ec0cc51b8f026a044fd5c38968c', type: "price", value: 120, currency: "EUR" }))), h("smoothly-next-table-row", { key: '96632fe65093c0a5ffb0a99f13bbe673144e3cf6' }, h("smoothly-next-table-expandable-cell", { key: 'ccfd950b1e3f891501de681727fb04e30eb3e644', span: 2 }, h("smoothly-display", { key: '133eab18da8f74a9b5a1b062c503d517fd6f5483', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '0038fc2344f62cd389599c8259b1c688c6d84e1f', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-next-table-expandable-cell", { key: '52ca0b3bc98dd236105cbd1070840f911f7088b1' }, h("smoothly-display", { key: '835f4f495f37982e3eeccf4fd1fd52b3bf06a884', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '294b4a0bd1348ceafeb2bc97e7dd91ca7adfd1c2', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-next-table-row", { key: 'a816070b9f7e2452e454c068ba820936158d32a9' }, h("smoothly-next-table-cell", { key: 'ba8caee508c08f738a05f94d77f94afff212a044' }, h("smoothly-display", { key: '12e4191c74895446481c8ef2b18c562139f63781', type: "date", value: "2024-01-02" })), h("smoothly-next-table-cell", { key: 'ac0a9f374fa3213b236b61eb703b8817f7e36faf' }, "Not Skipped"), h("smoothly-next-table-cell", { key: '1281d3957bb7ba877a594c1b3fd39e659ebe6a95' }, h("smoothly-display", { key: 'e861b9022b6ade127f99014d24cb2a4767733f51', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '488976738e54fe7baf9e74f42344fe7b1e98e3fb' }, h("smoothly-next-table", { key: '82a93a63188133f2d04ce24ef7b143f6fa2de4cd', columns: 3 }, h("smoothly-next-table-head", { key: '89bddc285955f8fc60f851d9b7684d844ad0aaca' }, h("smoothly-next-table-row", { key: 'b6bac346038a04cd1622456367180e7c7c35193f' }, h("smoothly-next-table-cell", { key: '44d8e9466d1c5176b74eafd80fdecce612f4f227' }, "Date"), h("smoothly-next-table-cell", { key: 'efb9740506adf2c568e3262ef740480acaf7a4c6' }, "Skip"), h("smoothly-next-table-cell", { key: 'b265b78176bce89426c64bef1359397f88d8e22b' }, "Total"))), h("smoothly-next-table-body", { key: 'df5616f10c1d5579dfa2d39406cacbc7980318fa' }, h("smoothly-next-table-row", { key: 'fc61d9e1bd606ab7067c1d02cd33f3464e372dbb' }, h("smoothly-next-table-cell", { key: '684dd628487396dab30035ff5c9496eb463f2dbc', span: 2 }, h("smoothly-display", { key: '0a2977c12d50e3969014be7653963ad77ac5edda', type: "date", value: "2024-01-01" })), h("smoothly-next-table-cell", { key: '9e58d24032d52652961a6a43d94b907eeb5f006b' }, h("smoothly-display", { key: '37c76375bccc7cd9cea03b8b1be97294eee42ab1', type: "price", value: 120, currency: "EUR" }))), h("smoothly-next-table-row", { key: '8c39aec297e4f7dd8ba768ce828f71a2ac7c0439' }, h("smoothly-next-table-expandable-cell", { key: 'c2911ffccca9d3f23fd158679a5a2892887dd50c', span: 2 }, h("smoothly-display", { key: 'f462fc5572f5b87bee43427a056878d27b895f0d', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'b032bba062c484b9b1c9328605444f308a39ef85', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-next-table-expandable-cell", { key: 'a25e49f7aaba75ecd1cd5223ac378cb9f8d44be7' }, h("smoothly-display", { key: '96fba2bc8dd413a449b68d2e10ab9c34eeb13148', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '47ab93b1ad2ade9210be22892305329328763f57', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-next-table-row", { key: '6e39d072882582b22a019473ae68a85fbac3b2e3' }, h("smoothly-next-table-cell", { key: '5984a3b8cd4dda298a40f2bec180a70f82421877' }, h("smoothly-display", { key: 'f1c278506c6aceb8ffec23191a5eb246cdef321b', type: "date", value: "2024-01-02" })), h("smoothly-next-table-cell", { key: '60e4e11a34fea1b24eefa7de4474e5364ec73df7' }, "Not Skipped"), h("smoothly-next-table-cell", { key: '1d02c9cfc12335a59ba489f48d71de08bed55459' }, h("smoothly-display", { key: '954a2b7822d289678ff75c2fea90e92f69426b05', type: "price", value: 320, currency: "EUR" })))))));
     }
     static get is() { return "smoothly-next-demo-colspan"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/next/demo/fillerRow/filleRowDemo.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyNextDemoFillerRowDemo {
+    constructor() {
+        this.cats = [];
+    }
+    async componentDidLoad() {
+        window.setTimeout(() => {
+            this.cats = undefined;
+        }, 3000);
+    }
+    render() {
+        return (h(Host, { key: 'b7e5fddaa2acf3e9f92f00cf90dca4701485dc47' }, h("smoothly-display", { key: '3d0e8e789be4d9c2b00bf0b5e86d122e70d87eca', type: "text", value: "Filler row" }), h("smoothly-next-table", { key: '5fc7d8d7fa92fc4d759d0e2dbf603432e2a967e6', color: "primary", columns: 4 }, h("smoothly-next-table-head", { key: '9e5d6762630530c3885d7bbf974dfbadb5fff225' }, h("smoothly-next-table-row", { key: 'd77fc3f96385f037859b82d64015695fd0b4317b' }, h("smoothly-next-table-cell", { key: '3ec5afafef17365a3e7d707d638c0af1e30df0ef' }, "Breed"), h("smoothly-next-table-cell", { key: 'ed0c6df720f0b3abb969297f745024a8284b39e6' }, "Country"), h("smoothly-next-table-cell", { key: 'b4003ba900cf958290b0fc6bdb72d33380e92e81' }, "Coat"), h("smoothly-next-table-cell", { key: 'e3a4f14716109b4dc52293248f2bff3287b437dd' }, "Origin"))), h("smoothly-next-table-body", { key: 'dbeaea2b089b7e27f4052e154505d26f486ce3cf' }, this.cats === undefined ? (h("smoothly-next-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-next-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-next-table-row", null, h("smoothly-next-table-cell", null, a.breed), h("smoothly-next-table-cell", null, a.country), h("smoothly-next-table-cell", null, a.coat), h("smoothly-next-table-cell", null, a.origin)))))))));
+    }
+    static get is() { return "smoothly-next-demo-filler-row-demo"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["style.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["style.css"]
+        };
+    }
+    static get states() {
+        return {
+            "cats": {}
+        };
+    }
+}
+//# sourceMappingURL=filleRowDemo.js.map

package/dist/collection/components/next/demo/fillerRow/filleRowDemo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"filleRowDemo.js","sourceRoot":"","sources":["../../../../../src/components/next/demo/fillerRow/filleRowDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAA;AAOhE,MAAM,OAAO,6BAA6B;;oBACjB,EAAE;;IAE1B,KAAK,CAAC,gBAAgB;QACrB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;QACtB,CAAC,EAAE,IAAI,CAAC,CAAA;IACT,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,yEAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG;YACnD,4EAAqB,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,CAAC;gBAC9C;oBACC;wBACC,2FAA0D;wBAC1D,6FAA4D;wBAC5D,0FAAyD;wBACzD,4FAA2D,CAClC,CACA;gBAC3B,mFACE,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,+DAAmF,CACnF,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC5B;oBACC,wBAAkB,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,CAC5C,CACjC,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAClB;oBACC,oCAA2B,CAAC,CAAC,KAAK,CAA4B;oBAC9D,oCAA2B,CAAC,CAAC,OAAO,CAA4B;oBAChE,oCAA2B,CAAC,CAAC,IAAI,CAA4B;oBAC7D,oCAA2B,CAAC,CAAC,MAAM,CAA4B,CACtC,CAC1B,CAAC,CACF,CACyB,CACN,CAChB,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, State, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-next-demo-filler-row-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyNextDemoFillerRowDemo {\n\t@State() cats?: Cat[] = []\n\n\tasync componentDidLoad(): Promise<void> {\n\t\twindow.setTimeout(() => {\n\t\t\tthis.cats = undefined\n\t\t}, 3000)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-display type=\"text\" value=\"Filler row\" />\n\t\t\t\t<smoothly-next-table color=\"primary\" columns={4}>\n\t\t\t\t\t<smoothly-next-table-head>\n\t\t\t\t\t\t<smoothly-next-table-row>\n\t\t\t\t\t\t\t<smoothly-next-table-cell>Breed</smoothly-next-table-cell>\n\t\t\t\t\t\t\t<smoothly-next-table-cell>Country</smoothly-next-table-cell>\n\t\t\t\t\t\t\t<smoothly-next-table-cell>Coat</smoothly-next-table-cell>\n\t\t\t\t\t\t\t<smoothly-next-table-cell>Origin</smoothly-next-table-cell>\n\t\t\t\t\t\t</smoothly-next-table-row>\n\t\t\t\t\t</smoothly-next-table-head>\n\t\t\t\t\t<smoothly-next-table-body>\n\t\t\t\t\t\t{this.cats === undefined ? (\n\t\t\t\t\t\t\t<smoothly-next-table-filler-row>No data to display</smoothly-next-table-filler-row>\n\t\t\t\t\t\t) : this.cats.length === 0 ? (\n\t\t\t\t\t\t\t<smoothly-next-table-filler-row>\n\t\t\t\t\t\t\t\t<smoothly-spinner style={{ margin: \"auto\" }} color=\"default\" size=\"small\" />\n\t\t\t\t\t\t\t</smoothly-next-table-filler-row>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tthis.cats.map(a => (\n\t\t\t\t\t\t\t\t<smoothly-next-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-next-table-cell>{a.breed}</smoothly-next-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-next-table-cell>{a.country}</smoothly-next-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-next-table-cell>{a.coat}</smoothly-next-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-next-table-cell>{a.origin}</smoothly-next-table-cell>\n\t\t\t\t\t\t\t\t</smoothly-next-table-row>\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t)}\n\t\t\t\t\t</smoothly-next-table-body>\n\t\t\t\t</smoothly-next-table>\n\t\t\t</Host>\n\t\t)\n\t}\n}\nexport interface Cat {\n\tbreed: string\n\tcountry: string\n\torigin: string\n\tcoat: string\n\tpattern: string\n}\n"]}

package/dist/collection/components/next/demo/fillerRow/style.css ADDED Viewed

@@ -0,0 +1,9 @@
+:host {
+	display: block;
+}
+:host>smoothly-display {
+	font-size: 2em;
+}
+:host>* {
+	margin-bottom: 2rem;
+}