npm - smoothly - Versions diffs - 1.113.0 → 1.114.0 - Mend

smoothly 1.113.0 → 1.114.0

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

Files changed (366) hide show

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

@@ -4,7 +4,7 @@ export class SmoothlyInputDemoRadio {
         console.log("selected", this.selected);
     }
     render() {
-        return (h(Host, { key: '52b576841887c998b76f78e137692aacbac7a2b6' }, h("h2", { key: '0c8d936766c24b6948c809e2f6e6468d2aa4420c' }, "radio input - column direction"), h("smoothly-input-radio", { key: '3f2d62940acfdf116a84afcdcab390d6cd2dd4b5', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: '1bf763d55cb64ef808e4a756c42691b6fe17f5c0', value: "1" }, h("span", { key: '885acf73103c0329fdcf008205eb6af697ad3f7d' }, "Option 1"), h("span", { key: '8ffd5831c8ad3fd4ecf98c1947a9716eac3f68bd', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '1d1c4c16d909d34a46c710342c61e47c87a95f70', value: "2", selected: true }, h("span", { key: 'e82706946e78a02f91075a23546ca74a4a6efcba' }, "Option 2"), h("div", { key: '50bf73dc371ba8fa7b6f61dc4647614bc3de92c1', slot: "detail" }, h("smoothly-tabs", { key: 'af9ceaab9bd3a4beea42abc0d645fb55c8394d06' }, h("smoothly-tab", { key: 'db10107a17b64bc198da2aeb103baf88b1f52f28', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '53da582a28e65a22c419c54203d2362f13d54076', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: 'd142440607e5315288e1600a6538f835ed35837e', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        return (h(Host, { key: '040a57805b385a247d202b5e955a7f8eba616010' }, h("h2", { key: 'f09dbab032e5a1236b6917adf732333decd4f304' }, "radio input - column direction"), h("smoothly-input-radio", { key: 'b433eda6893f6ace20301795321958f684f47d57', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: '2d9b7a2edea9639f1edebc73c8caca090765ce61', value: "1" }, h("span", { key: 'e42fdc99169da6f957f0f7d701f07e28ec3b6f75' }, "Option 1"), h("span", { key: 'ffdf79cbc7f98435a01a3a1a6c30c307741a566c', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '0d9d95f1375bca503b1aade350a87119bb329c09', value: "2", selected: true }, h("span", { key: 'dc6d2e6888deb8bf32a626badc8a01d1daeb960d' }, "Option 2"), h("div", { key: '5ab436788acba5bcf290faf1551513a1f1b493b6', slot: "detail" }, h("smoothly-tabs", { key: '097716e9e682a11b5eff9880e94c036a01344de4' }, h("smoothly-tab", { key: '4b4117fbeb2aec641c279690438452f1e0ff15d6', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '4cb637cfdb67a7721dc13348cfe830595d47027b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '1c4873e9b744831a602192bb520236b440d8b547', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
     }
     static get is() { return "smoothly-input-demo-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -20,7 +20,7 @@ export class SmoothlyInputDemoStandard {
         });
     }
     render() {
-        return (h(Host, { key: '0d47a2dd423a8bcdd889139f74ef2ec375d0ea97' }, h("div", { key: 'a884b4c59f663f8c47aa9e3736e6a82235e9d276', class: "description" }, h("h2", { key: '7c0b8da3728fd79d203de1895c6ae146e1eb8aef' }, "Input Standard"), h("p", { key: '10fe94edd162dd158388508c2470359447e6da57' }, "Height of input should be ", h("code", { key: 'dffd62a251af68595f7c5659a2251ada08999b63' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '3f8c09fbdce4b808a430cf7266d40d25a596803d', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '563356600a698bf3c974a61b79520aa8f77c249f', name: "color" }, h("span", { key: 'e12af511b6921b2d9f7d50b45fdbe3d5b34f6817', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '23c642ae01bb6d0f7aaf653c027eb255ee38d90a', slot: "end" })), h("smoothly-input-select", { key: 'fa106dd22e247954860c217692ca37a24fe4f772', name: "looks" }, h("span", { key: 'c42065aac1f357b670cf2a99bb8be554fb314cd9', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: 'c3b585f898718c9f81ef15c1469eccf08988c00e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '8fab112575cb1c02c2019022cee83e5e5e65a9c6', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'c34401c8b28faa79a139869c0766e8f8af357ca8', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '672b5bc96fa9e6886c90b5e8354d7dea8c916270', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'c395fd3b7ca8d1243cd9e9ea4e006f1fd7ef1a27', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '121d1a50813987b2aeac50afe73e40c6a7c4fb8b', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '265ce4b0e44c8fda1b3188929eb5901e1658bfd5', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '1eafaaaa6696f9f1d696742869d10aba19c2f0c9', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'f6a5d34435c177c5dc64c31632dc7a1e65f3e270', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'c4d82ee52f0d44015df7eb734c98aa41f7c92827', class: "width" }, "width: 100%"), h("div", { key: '2ae68895caf503ba92049a32d0054439f069123b', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f5f4ee65ccf3180d2f9181fbc258c79e916e14ee', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'bf32f13cfbfa88add92692bf9ee02b836eeea2be' }, "Text"), h("smoothly-input-clear", { key: '26639066ab906f755f7a42e154b1954f1f34f19d', slot: "end" })), h("div", { key: 'de01a46f39aa6f331c5edf54208a6f9f726337e3', class: "height" }), h("smoothly-input-select", { key: '510076d3203f1fb1e2e506832364710feb15f0c8', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '9bf577f8339bb2c4edde779113b069eeb34ef748', slot: "label" }, "Select"), h("smoothly-item", { key: '60780147390d2cf0e8da424841a50e27417479e6', value: "1" }, "January"), h("smoothly-item", { key: '173c112cb747fe2b85a1633df99fbcb506f58d48', value: "2" }, "February"), h("smoothly-item", { key: 'a7ee7adea1ea9b92362737cc840aca34a6f8d436', value: "3" }, "March"), h("smoothly-item", { key: 'd9640cc6ffef2dd85241ca133b7a145624f4fc9a', value: "4" }, "April"), h("smoothly-item", { key: 'a8481666f7c15b3a0ff0f88602e9dbc4056c415b', value: "5" }, "May"), h("smoothly-item", { key: '0e5303b6e803afe7f7e09e4624319e4ff418a689', value: "6" }, "June"), h("smoothly-item", { key: 'b83eb587d51b7d9921f9d3abef167ff0d936c5ae', value: "7" }, "July"), h("smoothly-item", { key: '3d2b9def6e4a70238e61a0eb84328e90fec966ef', value: "8" }, "August"), h("smoothly-item", { key: '93a12ce1b0e1dd4c9178520a0ecb517df10087a2', value: "9" }, "September"), h("smoothly-item", { key: 'd33c600d87e72fa217a90c2d8ed45d2481cee72f', value: "10" }, "October"), h("smoothly-item", { key: 'fe604dc056ea4a597a8b6d7f1be09c89c879dbdf', value: "11" }, "November"), h("smoothly-item", { key: '51bcb469aa305b0ae7cacfdd875022ec39530e6c', value: "12" }, "December"), h("smoothly-input-clear", { key: '0833dfa02fbc7cff603e37644baed0a6b8c4e4d5', slot: "end" })), h("div", { key: '79f0f6f00a86ddcc2dfdb4a68b0ebe07bc689c00', class: "height" }), h("smoothly-input-checkbox", { key: 'be23f09cb9a5d45fa322399d9990665bb9a4bf34', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'b017bae486a26d0987c569284dcb933c32128870', slot: "end" })), h("div", { key: 'cfcf1788ea24c44ebdc3b66918475fbeadbb7eb3', class: "height" }), h("smoothly-input-radio", { key: 'eb33d705570a661c8a6af35664274d15dadf8651', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '34e9e0a159e7b8132dcb8b83b23b71c7b3315950', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'c3eeacc48f78063b3a22d3b8dcfd7e883254d3f1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '7e268ae592952b97ac20e89519d778b2aadb8fcc', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '79e5d297744e5478f49d68cae946c2ecef34eba6', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'dff06e18033a50015e9108d368824f30b811c264', slot: "end" })), h("div", { key: '9d3c81366b646b71f06c601cf57653ff9c99cc0b', class: "height" }), h("smoothly-input-file", { key: 'b2c1b865f112c22559951812ad2de40d26290a0e', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '4db9c0510129863aeeb39d8752554ae83c69ec5f', slot: "label" }, "File"), h("smoothly-input-clear", { key: '3f5ac4383708baf78c2f916a13c0583a315fcd4a', slot: "end" })), h("div", { key: 'fed8a7e19c81970c362b4795555e27691b04e7bc', class: "height" }), h("smoothly-input-range", { key: '471ff911649f0fff74d0a6a2f1f6ff9836be1e29', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '95cd1bfffa55434df83458f93c72dc7628b9e26d', slot: "end" })), h("div", { key: '89529b1695656c2ddf4eb8ec68186200b0b4054a', class: "height" }), h("smoothly-input-color", { key: '22deff755c1da762df9d27dce227432862a4c3ef', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '62579a646e0c4d6f4a267ab6aa22c1d3a0e24895' }, "Color"), h("smoothly-input-clear", { key: '1f3617c7f813399adcfafaa68e919cca440f2814', slot: "end" })), h("div", { key: 'a0f45e33d4328c5c534f92929617f6fb42577827', class: "height" }), h("smoothly-input-date", { key: 'b2217e88e18bbb4f4bb8ecc768fcd67a022ff05b', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'acc7706396f3923db94d65cc12e25df341052a3f' }, "Date"), h("smoothly-input-clear", { key: '962a1961612037e2171caa40a25397ff501de2fa', slot: "end" })), h("div", { key: 'c2b39662f59227a0feedd322db39055d52f4b3fc', class: "height" }), h("smoothly-input-date-time", { key: '9144e9af51bc9ec45f771eae3b1ab80cec7d3f67', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: 'b40b0db65ab9d9ef61527f14cd951d2e337b3a31', slot: "end" })), h("div", { key: '1e39a4410aae2f4b7bb6501fa7a436c46034028e', class: "height" }), h("smoothly-input-date-range", { key: '8be62583be2bc8955ac923b18155c60ebe7e216a', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a893c51241fd2935145f97dd68ff7fb7226ccdfc' }, "Date Range"), h("smoothly-input-clear", { key: 'de9180934a9b8396e54aaafb39d25a0777433c81', slot: "end" })), h("div", { key: 'a7493fe9750ab795e22aa3fc543405f5d627440a', class: "height" }))));
+        return (h(Host, { key: 'd2a4b3a8e5675b4fe394f551166318902c09ea84' }, h("div", { key: '67b40a89a1cbf17d511c56d966a9173e02a9c92e', class: "description" }, h("h2", { key: 'fdd28a17423a0da06745fc2aad06e1acbde54be4' }, "Input Standard"), h("p", { key: 'e9e84428aa2ebe4ea0b1d04410629ed85de1d329' }, "Height of input should be ", h("code", { key: 'faccb606910cbe8418c176efd45ff05eafd0ffc8' }, "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: 'f8770ba1128622c8b40be48cd26214ed162035e3', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '82ce7ab02f341b560e6347164a19c9273580ed18', name: "color" }, h("span", { key: '4062538c8b4b25d9a1cc1f625df0313383990193', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '659e785d9f5e4043fcf15dc457dde4dc48676215', slot: "end" })), h("smoothly-input-select", { key: '656b68d41b449cde70e4d86b252dc70d994f63ce', name: "looks" }, h("span", { key: '39ef79d28d1dbec7a678b93fa031615457560351', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ae946ee3c4cdcf5b698b0456499c4807e53b257', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'f73361b452096abbda4ebc6908371c397c0a9fd4', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: '7a4762f9122be37ce57099515e0d9fac7c18df94', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '0ac401e2b9e2525dfc899eda4957a61b99947758', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '2ba7f175d8aeef4301598f3c3da5d436a17c45c7', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '5844e0ab1cc53ecd0691d585fa4461f89c9994bc', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '6d46add6231e87d95dd8aea7bd91181c47a56490', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '43af9a815da45bc2ce0e54e8442e3a8ab1bc534c', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'cf6750528c66ee0c0b9e97478de77514cbd39045', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '4fbc0ba2b6b142f6c4ac8379157b2953d88cb062', class: "width" }, "width: 100%"), h("div", { key: '7fb5a3a68f6ed4d14bcab9758a8de0a95de7e80c', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '3d379565ac3335e2ef39e7d616b082fd5247619e', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7d37fa391bb86cf43fe84db4826d8394c04d8af9' }, "Text"), h("smoothly-input-clear", { key: '5c5b48cd36f13a3b50fc49809edb17148993a004', slot: "end" })), h("div", { key: 'c666bcf200205fbe3d4e045ee69530b217d4845d', class: "height" }), h("smoothly-input-select", { key: '9a2bb30a995830fecbc0dc7f9df2895470ac8e3b', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: 'd91f28c2c80c6b95703b9476c8d07b64387f989a', slot: "label" }, "Select"), h("smoothly-item", { key: '61aeaf05ac730b30d7fb29b749dcf6ba59932c9c', value: "1" }, "January"), h("smoothly-item", { key: '131052c2a6ad24d5c93cda5352dd16873e81fc81', value: "2" }, "February"), h("smoothly-item", { key: '599a8b88c0abd24346856c8c653c1adc69d432e0', value: "3" }, "March"), h("smoothly-item", { key: 'e8933cb5d5af0fbb4d898a919a1d0ccc26584c11', value: "4" }, "April"), h("smoothly-item", { key: 'eb7b7c07dd9fcb31eba2b5a8da79da32e14f2c67', value: "5" }, "May"), h("smoothly-item", { key: '48e70f3d930689aed016ac28241e6f8d253f61db', value: "6" }, "June"), h("smoothly-item", { key: '738b7ad9d5286f6afc8ad033d9cbb9e066c4c861', value: "7" }, "July"), h("smoothly-item", { key: 'aad0e64de6bf35b315fb3472c8cad86e3fb195d9', value: "8" }, "August"), h("smoothly-item", { key: '81c533fd3eeaa48ae7917f6064a17724b101b650', value: "9" }, "September"), h("smoothly-item", { key: '69f567c427f80cee633f72ac4dd06a4d4b4a27c7', value: "10" }, "October"), h("smoothly-item", { key: '0d87e5fa94a04a60b527d7a5f1670b1788bd4339', value: "11" }, "November"), h("smoothly-item", { key: '34b1425da536971ffde20fbab5b96c9d23f71fe3', value: "12" }, "December"), h("smoothly-input-clear", { key: 'd16aad09e1f53274a0c6d23c071f2abe1157ce4f', slot: "end" })), h("div", { key: '51931a5ed8ec83b8937cd7899a303569cf8bf7cd', class: "height" }), h("smoothly-input-checkbox", { key: '20d5a02ab8d8f1f709b030a0258598de61250555', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'd36312b0bb0393568cf05e51eea4cfa057dce607', slot: "end" })), h("div", { key: 'c1353494563098fc08fe2c93cceeb80d56a1aa51', class: "height" }), h("smoothly-input-radio", { key: '84976dd68dfe5534f28c02395d2476593bcb3bcd', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'fd87d0cfc047bcaf959908191d798ea774daca25', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '4029068fb2fea98f2b5c19ec87e8dea13cf22365', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1ab27866d3db524f52da4f76a3abb5eff1deeed3', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '9415dd464250d9af68a54de51a9e6b15234f8faf', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '8ea8291c65ca421b0044fe3e0da4127f9fac0c40', slot: "end" })), h("div", { key: 'fa351e941ec780e05a037c2c1948dabd8ef371e8', class: "height" }), h("smoothly-input-file", { key: 'b45c3bf3c7b5e9e8408a6cecacdda30c7ce392df', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7e81668b6bf2a3f72238d18d02c21f19bf6c2756', slot: "label" }, "File"), h("smoothly-input-clear", { key: '4ead6310cb554351b45699cbbc6d84804d26611b', slot: "end" })), h("div", { key: '73cd3845233377057ff16a18b9ad85eb4e4be30f', class: "height" }), h("smoothly-input-range", { key: 'ec0f42a5ee5fddd52fb5c0d283f9add183e429fd', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '49536b00574ad5e0cba72b9a8fdeee599435a886', slot: "end" })), h("div", { key: 'cc112e755aeb5724b6e4bc511ed1b4e32b394d08', class: "height" }), h("smoothly-input-color", { key: 'dbd6daa2196f6ba316721ed338c0638d6c713e00', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '04197c11337298f86531d7ba52d67df221619051' }, "Color"), h("smoothly-input-clear", { key: '6489a29a796e8e443efdf27574df27e4e24111ee', slot: "end" })), h("div", { key: 'e48defb9f45eaa2f935b0108cf3ec6e331d4ecb2', class: "height" }), h("smoothly-input-date", { key: '0a5c51ecc51013f9572ed8cd8ef38f6d92bd4f5b', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '21f21c543ff1df34c50333fba2d1ca8377ea4e37' }, "Date"), h("smoothly-input-clear", { key: 'f8226e817b97c90070b649935ac70d6ba11f7b30', slot: "end" })), h("div", { key: '8920789228e2911822a6b822d1c8c37537a225e4', class: "height" }), h("smoothly-input-date-time", { key: '2e58e0e5f6370f7a4d0dd7f17c56718038167e6a', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '9ebc24b5b639628fd5f3d11a72500bcd6ae9ab0f', slot: "end" })), h("div", { key: 'dddb389df78c212ec451422436e3f0468f523065', class: "height" }), h("smoothly-input-date-range", { key: '76b7832bcf134165961c00e610180ee37b74968d', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '023a98551ba8d1b848665506fdad5282338a2d2e' }, "Date Range"), h("smoothly-input-clear", { key: '078a1ca386a3f814286b35fc0579573b8e4d64c3', slot: "end" })), h("div", { key: '32733c0b81a14c8a982c1607d5635d807894b2ae', class: "height" }))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,11 +10,11 @@ export class SmoothlyInputDemoUserInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'e5373df530143e9be043fef3040f0c28e4e6befd' }, h("div", { key: 'e43682af956adff7d7717bc0460eed3b1bb95d84' }, h("h2", { key: '4332098a4a62650fee3ff36df29bbab86ece7e9d' }, "User Input Event"), h("p", { key: 'b20f95a50866658227c61b92cd110ec481da9aea' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'd7966a4bf162c151d82b4202e72cd090eaf54ea0' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: 'c491689d80addd8399ee02ab7cfc6c14f599bb85' }), "Check the console to see the details of each ", h("code", { key: '919ebbf26937841a5396d0d8b1f7d56a268ac292' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '241df770721275520a479cac831b972062cf0fce', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '1c8afb64233081bd049d91a0dd0e8071aad85856', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '5fe334fb6629980fec2ee42d22df173f86b9bec2', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '0972c18426ec3adf17de6b187c582d875de17c75', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '0e6d5f9596b71bae1f548aaf3cc830e9327dda05', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '66f5d072734363f0457f38252105272c643354ce', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '37bb578799dfb2de20c6ed9c26214acc5a4b3c0b', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: 'a70017b8ad95581ec4361d96350f809942b61d93', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '07558d4cbc286b03af94f0cc93718f35a93a73f6', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1e6fa16c98dbf64e75d4527a5619a37d30631801', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: 'd3d7581a7c25ce7a7add6cc0f318bb738fbfcf56', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'cf1ad804353d6cecc2a92f1c919f0814ddc90293', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: 'ac4215b8764d794d7b2b502e8978eeb066bb482b', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: 'b0f18cbf601c7a7e1b105b6ade6b7738e735c1af', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '353846f23973a62890ca228fce9434606c351eab', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'e4e466950e474177dfd57b95741256ece59aeba7', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: 'e39a9742e3c896ed0b8083b0cb12694971c2f7b3', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: 'eab36e7674fb973f979c4aaed34abadae7576fe0' }, h("div", { key: '8225faa4114dc00127534d7a4400b1d9b23f4ae7' }, h("h2", { key: 'a6e84f195de0a08ef8ea173615663417db7cb4fb' }, "User Input Event"), h("p", { key: 'e6aad349cb3b67654e5eb4499aa0088367862ceb' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'ca92dbe2b5834d176ee33651b5d4287ece6d585c' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '96cfdda6ccf73450ce38e886fbb26681c17667ea' }), "Check the console to see the details of each ", h("code", { key: '13af94b46758e72141f7ba0da21f93f2ef70a052' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '5f3eadf13479a585b26f63bbd14d5a06d4efd82e', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '18606ed8401bc0a7a9146ab7b8da848b9f155971', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '89d848edf493f23af859f999c62788cd58f89b9e', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '223ebf76fcfd12bb61cf78cdafb7cc2a6f9ab95a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1bb540b065fdf0f3571482e0c8a3417a4d9be70a', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: 'c8759cf4029e8910db9eca83c856bbcd203721ae', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: 'a613696a09d76a9410d66e4fc51833db30a8acd6', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '552e86df8bca79435198c9d18258d89471c17f2f', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '83d0d370cfb15750bfec897741493bf51352409e', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '205e6dc2498d0ae6b95a119aba4d19c75cefabea', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '13bc5121320b0982bdcf65c0ea5454841783ef24', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'c6097f9351a54aefda3b9f51694c71d4faa803a5', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '5356c9d3d1ebd1edc281d0802deee76cd098ed7d', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '18d6651482ef0254f9c1dd1cdefd2127c4d67dc1', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3da5ff4f15a19d39a1537fc0f3f738bc840b17c4', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'c20a4edf0546a89bcbd55a1f67840ffb6ca6a98a', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '0ab185dd19fabc2ded8387b5d08b1580d47726c9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '91d54581db356cfcfc093286eb125502398315bd', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '1bfc78adefad21783c035335cf764bdb92c537e4', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '402a80aa4b3b25a460d2acec85964446350501fa', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '89b12f184e5f3c2953b3882fca43dbea273f5178', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '78f36ca1d6a278db6d7bd4644689331be84c488a', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '7c2c3867bb8465daf5da9496c70e717bdfd2616c', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
     static get is() { return "smoothly-input-demo-user-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,7 +24,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9413c465eefd77797e42c791530e44dff3846f28', title: this.tooltip }, h("smoothly-button", { key: '6671fd2c91156be7d9a584e1a99f5b8b4f32eb1e', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'acaa5562e2b97fb0bf0f774fda77efdb33ba66cc' }), h("smoothly-icon", { key: '8defa183091cea2766970860a93f9005085e7325', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '3fa8bd92acf77d574acfe3bd36d305e043376237', title: this.tooltip }, h("smoothly-button", { key: '758777db051b7ed16e62e11c01c74d718cfefea7', 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: '15d7fef684aa41d04a1a5e11ffa18480ae6aeee8' }), h("smoothly-icon", { key: 'd47e6290709546c917d2b15ad60e30fa1df11410', 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

@@ -104,7 +104,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'a1e2fbf3bf30d1fd941de3bd207e16ef0e168407', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '1b2e27e123de65862e6535b4ee4e9760f1541129' }, h("slot", { key: 'aa0b28bb9a49649463084495e47d98d92729a57d', name: "label" })), h("div", { key: 'e7275addeb482256063dae4196f46ff8f45993c4', class: "input" }, h("smoothly-button", { key: 'efb739b21ac1af7cdec628fe67fdf8e38d576e74', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '131edbbc38611bdaf47024837c043d2f094104b0', name: "button" })), h("span", { key: 'dfd5aca4c0112a257fce52f7b2ecddf348b71870' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'b118ce04ee719798fe30fa562c77f60ce85945e6', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '94cd919ab0af8d448bf20fad13cb6a19579d26dc', name: "document-attach-outline" })), h("input", { key: '4f372d0ca5451932574973b4d0d556423acdf320', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '092975f9f5161227ee1907c12918e8256dc88d09', onClick: (e) => e.stopPropagation() }, h("slot", { key: '9039ae566f705c87e542ded409bba07358849829', name: "end" }))));
+        return (h(Host, { key: '92ab54c45c171373ca1202527ac452358b1c8de8', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'e7865d1f743acdb3f262f812e47a7aa33e7f455b' }, h("slot", { key: 'ea009dfb71d55f4de0214c0188abdeca97cfb126', name: "label" })), h("div", { key: '9875aef8a3075c1c93450da31789c263279d2104', class: "input" }, h("smoothly-button", { key: '70c1985a28a92b0df083fcf89caa8bc6798f94ee', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '4b3eb404ef91e9ed042e2fd99b22e012a7f07780', name: "button" })), h("span", { key: 'e41716ae95c78739678c28d50d9ba65f830384fd' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '89f1c26d6d4d7bb4cc52b8897ee30bd1b36717d8', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'b88edd52dcbe45bc147a152cb8550de5487dfd70', name: "document-attach-outline" })), h("input", { key: '44aed5773dc5425b492ef090685df3575a1358e6', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '4a24ad4127a02b97b04369952822aa354509ca0d', onClick: (e) => e.stopPropagation() }, h("slot", { key: '70189241ca504152198d2c20c68bdfc0f31eb71b', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -134,7 +134,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '70b8f1998872650f29f9868082b967534f236f07', 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: 'ea9697662701929b3f97f939bcedf52264e499fa', name: "start" }), h("div", { key: '8438ab65ede2df7cecae8e333877f358a09dc8ba', class: "smoothly-input-container" }, h("div", { key: '498c91553b4672a7439e87ebe01b91fd78e38097', class: "guide" }, h("div", { key: 'a46dd14b4c9dba32d59a5d24067b10d0c89dc577', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '9463bd116c7aa48d36a5f2109cd31fc2968922d2', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'c82970753f25895533f6ed5564edf86578c8ad73', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (h(Host, { key: 'c5d524d1f3afd855836d16272830f435bbea828a', 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: '99bf0a11a07a3aa1622cacb8b16979a08f0ab4ec', name: "start" }), h("div", { key: '230008efd3abd69c42442777c0b2091b8499f42e', class: "smoothly-input-container" }, h("div", { key: '37fbfc2747d5c22d1345df109fa74438261f97d7', class: "guide" }, h("div", { key: 'ae7ef0e2563c7058305457d3b45ee54ad0d8f575', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '3149dc1dc1104e1f7958d71660c634bc9d1532d0', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'c4205c491d6482072762c8cac4f8b9eb06e8c09b', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled) {
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -150,7 +150,7 @@ export class SmoothlyInput {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), h("label", { key: '963b63416e0c77ebc2cfcbcc088efd4728edcd7f', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '49c41be3bf0bf77cd130830b8407c01b1143890f' }))), this.copyable && this.value && (h("span", { key: '3b042352ee3ce520adcdea4c627cddb19dc07d37', class: "copyable" }, h("small", { key: '30e1d95db69cceeef2bcd3a6baccbdd9f64dd57d' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '7de8ce70f20a982f93ad1e33bb15f6d53854344e', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: '9f571de472ee768ad5e6c975378306515f1d252d', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '75bf79f1aca5b93e984d6f731c0f28a768b6c537', name: "end" })));
+            } }), h("label", { key: '009823ce38acac92179f491d72cb504d70f09280', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'b1a6fee2719d4cf37fa73460a3ce42ca40e7ba4b' }))), this.copyable && this.value && (h("span", { key: '575ba5bf3d4fd4bfcc1766e8bed17fb918c15db1', class: "copyable" }, h("small", { key: 'cfcca12301172ebf57db536e4b82faa1f7d430c4' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: 'bc941fd7e23670f3232eb29f00124ce94ef201eb', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: '87bceaa7c79365c97b4757637dee596a3757e8b7', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '39251aaac3bdd727fbfaf16eb79048d2a29231e6', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -107,21 +107,21 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '825ed9c377498394114231b5fba58e1cbd53c321' }, h("smoothly-icon", { key: 'b17668f6747bf7169a0bd6284fec3e414be2b78c', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '28204b265ebea6c0cbb757b8cc4a6a1e01e3b74c' }, h("smoothly-icon", { key: 'f4c14f7bf0825b0baede2c01ff097482ec9d75f5', 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: 'ec12ff50447e0ae9c85b7eefe6abeaf350b3a155', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '08a0e79d5558899bbc60d20b9a3e8b13bd736bed', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && isoly.Date.is(month)) {
                     const value = isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: '03f9af108c9a82b265055a5922371524a9a1485f', slot: "label" }, h("slot", { key: 'e1b37f7f4db3f27951844f1cf0453bc3bc66e141', 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: '4c57f95ca4288fbf6401acfe5f83a9e21a7ad5e7', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, h("div", { key: 'fe85ea22cbf1dda9cbae9ba96b2d6e45343c9a31', slot: "label" }, h("slot", { key: '1f0e5aef19949285791558528dac50ada4cb1f32', 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: 'a5718197e3389df6c5d175ecf362826e5a6dafad', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && isoly.Date.is(year)) {
                     const value = isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: '4c864e162f8fd664bf64d213f044608df5c32052', slot: "label" }, h("slot", { key: '8be0361eafcdda1fe0af35403fafe7268e0e1857', 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: 'a00a80fa415529ddd7fb28b12394ffbc3895e3ca', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, h("div", { key: 'd4d00cd1968bf5766fee52de789f9fe983730210', slot: "label" }, h("slot", { key: '1b0a796b6cb66e6c549cd6eaef2f281ef519816a', 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: 'dc499bc33e59e0f918194a7a4b3a61bcdd270600', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     static get is() { return "smoothly-input-month"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,7 +24,7 @@ export class SmoothlyInputRadioItem {
         });
     }
     render() {
-        return (h(Host, { key: '370000d169e3450e3646936321086771915d4fad', onClick: () => this.inputHandler(true) }, h("input", { key: 'b750a0accdbf51b07e2304cb90387110fd59b618', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '98c9ceaa8bba2beff6477149fc393507da83d79d', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'f3fb78e097edde9b4a6ddfbd951e6614713374fc' }, h("slot", { key: '1f9e1d9419e874fe7dc9dd4696167449c34c14da' })), h("slot", { key: '0165c599564757d6b34944505fa296cd52fadc11', name: "detail" })));
+        return (h(Host, { key: '548451e8afccb134004214398c0b040031bc9592', onClick: () => this.inputHandler(true) }, h("input", { key: '75518c6651b452bce6ec4f805555871bb503d032', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '0edda6108f36a759d2bab5e188c4c336daaa1756', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '0e909f5c587e643e61fb99c3b5458009591ac813' }, h("slot", { key: '026b2f86ba15cbff2b7fc4e2514b82cdf0d7941a' })), h("slot", { key: 'cc688d36199d3de40150f38763035593d96a1799', name: "detail" })));
     }
     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: '513ed764bf3593102fe688e6929f2c3f19c0a1a9' }, h("h2", { key: '25a0e8ad3ef9322ca03f6c64d812148022dc9688' }, "Range"), h("h3", { key: 'f14838850168a97050eab32a4eff767f17e0b3ef' }, "Phone Number"), h("smoothly-input-range", { key: '8ad60bd62396e66ac1338c8937a432bc8580dc23', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'f766bb38a2ae9108ea03e03d02dc6cf5308f3139' }, "Stars out of ten"), h("smoothly-input-range", { key: '67164065098d501e710abe48fa0e8411a56c15c0', max: 10, step: 1, label: "Stars" }), h("h3", { key: '73c4f2da26f0b6d61997b342ad6d4c0976ccc89e' }, "Percent"), h("smoothly-input-range", { key: '9bd55d44e6611c0dfa3bd9e7c1b061d119437326', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '49dc7f9db92e9fbecc53fd0bf1c8804a13febaa2' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '107e975039193ea8d1a9dca98d682c61d2c15096', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'cf0e39c1484399a21532024399ef6b08374a87c6', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: 'd1a3ab9ac2081a365a818d9ce2e453f03a21c049', size: "icon", slot: "end" }))));
+        return (h(Host, { key: '93085adc52dbed67cd824108eaaf64b3bda0fb6e' }, h("h2", { key: 'a91437c641e21986ad592c73f92a14234eddb9b9' }, "Range"), h("h3", { key: '5003225e9af30f278a7f37ccc1daab93df370e80' }, "Phone Number"), h("smoothly-input-range", { key: '5c790737cea0d76367f27072088ee92dec80a662', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '6bff0c3ac7f529787a042a7b02256eae19ad5b4b' }, "Stars out of ten"), h("smoothly-input-range", { key: 'eaee03d21dc424fc65158b29a4a7d3b255209fd3', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'f2124aaca6dccfa59cf65efbb9dfbecebf575740' }, "Percent"), h("smoothly-input-range", { key: 'ce14e10e75cf3320b2699021f99c5757b6598bbe', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: 'a12635fed326ae754cef8e15aa8f728c0bea9639' }, "With icon at start and clear button"), h("smoothly-input-range", { key: 'f8050fdae3ff4e0be8f00914e6580d69df51c18b', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '438d15ceb8cd3360ebc6394ee7aee2b0131ac808', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '98dd0d35d727339290b76dfcf4348a846db22396', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

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

@@ -96,18 +96,18 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '8534047293e77d99f6c8a8e5d87659968516144c', class: {
+        return (h(Host, { key: 'db02e0bee4842a0dcce6ee6856758372481f2fb4', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '6b092b4a1e91bf15f714996ed01a801548a75655', name: "start" }), h("div", { key: 'ca7c4207e37dccd2fbc3b0edae03895a39ec96c8' }, h("label", { key: 'dc1b4d97e1256c4ee1b7f9daa91d25fe523ce418', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'ec6dfec2d8a625897d3a9b6a7fafcd897be8ef1c', 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: '5bcbb8d839800fef403fc14fc981182f6ed9ae30', name: "start" }), h("div", { key: '26827d93b47f12eef2709aea32588c1ec6786337' }, h("label", { key: '20c1213e52d592773db4c68b2bfcfb721d62d364', htmlFor: this.name }, this.label), h("smoothly-input", { key: '5e0bdd6c0467690f2d91cc33f24e7f3710f4b063', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '4e698362ae12d14f9bc217afe8e909b3b13a46bb', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'a8f20e17b2910b97862b3490c1efd0dcb1aa89bf', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: 'a5502d4adaff32f798bc8e8b198d8f5258ab27e3', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'e2afaea01a569f8cafcbfa09dab6ad6551e76f07', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '46b26acc10c408177bf4b77af9c451ac5ec98360', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '1ebbd0cc6dfbf6179f9dc50e1597944571e219c2', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '92c309c4224fe86c16b22445f2ef1ba4168306e8', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'f9373a748b2d160781543f267373f12c43dfd46b', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -41,7 +41,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '07fe387d6e31ee4b8733dd797ccbb6bc2a602450', title: this.tooltip }, h("smoothly-button", { key: 'db64da157afc163be326cc342d344881b0dd665c', 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: '6a6a1f5f60b8dee75d3adeba5a7dfd611a84d256' }), h("smoothly-icon", { key: '5d37c4a5f21cf620ab223979e1b0d0e589b97d73', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '8be31b0878733c9af02d47f85fb2ce160d66f064', title: this.tooltip }, h("smoothly-button", { key: 'ffacca4558cfe1b94c3399ecbb4384ca6730c208', 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: 'a0b3a925b4062d14975cb3479f4cee3f40de7af7' }), h("smoothly-icon", { key: '8ca0aa0f3a534558de7fcefafe9267a1992d9594', 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

@@ -283,11 +283,11 @@ export class SmoothlyInputSelect {
         }
     }
     render() {
-        return (h(Host, { key: 'fc69e6b3aa75a286df61522835899bf05893e887', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: 'dc0215f0d88bb06e505f9392334926e337ede251', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: 'bee374985877632d52d267f69b35bdcf0e59e3a2', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: 'd7a72d5df184d7f9196ee8cab6240a71755f89e3', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'f201848287035627b54f3a0eff16c4b2dbc19164', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '4953076b51e480e34240dfa6378839d4a6c215e0', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '58d76a74b9b1c67b238e63fa267ed091a274c534', name: "label" }), h("div", { key: '4266c5f1701da8c0abd861e0bbb093a972d6c56e', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'b775dddd5cbe75d1fe1bfa5cc1c5fe16315abda1', class: "search" }, h("smoothly-icon", { key: '0399e20f7a99b228ba652b6d1d2202e75a3e84a0', name: "search-outline", size: "small" }), h("input", { key: '950d94085d70803847237e0308eac7a7bea1720f', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: '10e8603c1bb8b5061a7615f15392b1cbc519a0f5', name: "backspace-outline", size: "small", onClick: () => {
+        return (h(Host, { key: '3eb062d5cc34ecef9c9341630243d549aad808c3', class: { "has-value": this.selected.length !== 0, open: this.open, "has-filter": this.filter !== "" }, onClick: (e) => this.onClick(e) }, h("div", { key: 'e605a24480a0b3dafbd1b596fac1725d5e25be84', class: "select-display", ref: element => (this.displayElement = element) }, this.placeholder), h("div", { key: '3366fc93ccab479a0d9d67e206617941ad091340', class: "icons", ref: element => (this.iconsElement = element) }, h("smoothly-icon", { key: '3f64b7dc283062976a7292160917ab7a8c281521', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'be63eaedc949912f5717ecceabb64ac93910dc98', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'e41773f5b431e916f8177e76b877290c5cad7db6', ref: element => (this.toggleElement = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: 'd2c2d0d9a983dfe2609b18eedda29244a339bbd8', name: "label" }), h("div", { key: '5e51033c06fa134e945ff2c27245340bcaed2069', class: "dropdown", ref: (el) => (this.dropdownElement = el) }, h("div", { key: 'f4237bc5b2001f68aa5fc0b30a0df08f4bf2bc4e', class: "search" }, h("smoothly-icon", { key: 'b23bba84f76f4da515ddeffa9a2ae7f62277915b', name: "search-outline", size: "small" }), h("input", { key: '86e28d85b9fd95a039d084db092b098342244813', class: "search-input", ref: el => (this.searchElement = el), disabled: this.searchDisabled, onKeyDown: e => this.onKeyDown(e), onInput: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); }, onPaste: e => { var _a, _b; return (e.stopPropagation(), this.setFilter((_b = (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "")); } }), h("smoothly-icon", { key: 'e585529e50786c3ffc2dab72245230debd60558f', name: "backspace-outline", size: "small", onClick: () => {
                 var _a;
                 this.resetFilter();
                 (_a = this.searchElement) === null || _a === void 0 ? void 0 : _a.focus();
-            } }), this.mutable && h("smoothly-icon", { key: 'bd9f5b3eb6d8ef4f0802878ca327f29ccbd0795e', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: '210cc7a519f44cb0ab8800145aa55e02353fba83', class: "menu", hidden: !this.open }, h("slot", { key: '0d159f5f2ceb3ecc45b314f519505982ca4622be' }), this.addedItems))));
+            } }), this.mutable && h("smoothly-icon", { key: '49866182fe80ba3ad18e1b821e7c2a55852f4bb2', name: "add", size: "small", onClick: () => this.addItem() })), h("div", { key: 'f635f6143d0eeff2e01fa0283f7f7d1c337ef8d8', class: "menu", hidden: !this.open }, h("slot", { key: '7f483cf3b64fb231c724ef4004073cf232d1a7ad' }), this.addedItems))));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,7 +40,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '0fed4a319580841ba1d3281fb084b91a4d7b5a68', 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: '771dbd864209f2f419212813858c654de9352797', 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

@@ -34,7 +34,7 @@ export class SmoothlyItem {
             : false;
     }
     render() {
-        return (h(Host, { key: '5a606bfedb2eb8cf6a503386d2d5e16f0f60c090', tabIndex: -1 }, h("slot", { key: 'a7912c7b3ac7ecb40e61058d949b4cc62806246d' })));
+        return (h(Host, { key: 'a7ee995ec37b480a02715fb95c885152560cc0c1', tabIndex: -1 }, h("slot", { key: 'dcc2403a2253a7059dc88b4658c17c6533876a9f' })));
     }
     static get is() { return "smoothly-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -2,9 +2,9 @@ import { h, Host } from "@stencil/core";
 export class SmoothlyLabel {
     render() {
         var _a;
-        return (h(Host, { key: 'd6dfddb0df4c99de8e075141cf16d3f4ca4c861a', title: this.description, style: {
+        return (h(Host, { key: '2ae229f53b855fbc470064e7ded803a990d98711', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '1f56e22de589b47ac208c96ee5c84edd8484e3a4' })));
+            } }, h("slot", { key: '52d6798bf0fbea2948297aad2fe3a71a000b4f76' })));
     }
     static get is() { return "smoothly-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,7 +8,7 @@ export class SmoothlyLazy {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: '0b17b27ef091a5cbf3efedc7560c0af506f8927a' }, h("slot", { key: '7cb9a362b4540fbdcdc579bf95a273e7c13fad25', name: "before" }), h("smoothly-load-more", { key: '7dde9ba1e78a9a7f0eeeefbe124c3410f367bd3e', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'fbe22ffca8fa781a19bf07537f294be36a8bc212' })));
+        return (h(Host, { key: 'ecab373df940835270db5097a80b0214fc97907f' }, h("slot", { key: 'ac37f8070fab8c51b229f6dc81c9f2e65e64f251', name: "before" }), h("smoothly-load-more", { key: '3e43d4fd0c5f37d7826b7cc7da796fec07c7f7be', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '815b33c3657c84b81f0dd12768f2f2e983df48a9' })));
     }
     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: '1b86dd2400a791b125a24513cb9514face925d3d' });
+        return h(Host, { key: '88150a06ccdec5a72446a3f8dac86339b3007b72' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

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

@@ -15,9 +15,9 @@ export class SmoothlyModal {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: '36caaa17bfd076dd297f58ccb9ac4a12871343a7', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '12ffaa744cfce7d329f9e335be7b63827eb40644', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, h("div", { key: '4c0f2d6537496a8b2392aacddd9ba9db9c5d6052', class: "modal" }, h("div", { key: '0ecf5c976360402e1117570ef10bd3e46f69ff2b', class: "header" }, h("slot", { key: '93b7f39f4a41f83743bc766a3c6e35f3ac1c324f', name: "header" }), this.closable && h("smoothly-icon", { key: 'c61e00a97962890149cb89c0daf5df907c7dfb6e', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: 'fda69f545df08c71f58c85ea096fed500a6c6ff6' }), h("div", { key: 'c7e180ef59712c1096aa12359eac3e97d0c42d6e', class: "actions" }, h("slot", { key: '7cfef8c5cdf40fc9eedb5a0fa2538e02d82be8a7', name: "actions" })))));
+            } }, h("div", { key: '264ba4a63559188eb2fdc52d0b15014ff8991622', class: "modal" }, h("div", { key: 'c99296b4e6b05e4669ffb56b4ae93bf815e2e449', class: "header" }, h("slot", { key: 'cf25306f526a89e8daea125faaecb33d72fa9e4d', name: "header" }), this.closable && h("smoothly-icon", { key: 'd676f4f20a6ee187295a7f7ebc573e3a06a98ed6', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '22955703aec9be9e882bb77cfd0fd327f2436903' }), h("div", { key: 'd8dd03aa8538e9cb373282aab2f55a6793e76c83', class: "actions" }, h("slot", { key: '45b9e1bf4300ea44dbf13b50839ca9689576121e', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -50,7 +50,7 @@ export class Notification {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: '02ae0659b1c3c7e4e5e74ac356bb94cf91ef8835', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '4525814eb8b98479507575f107ea3f89f708bc56', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'd611ae4917fa50ef7d0e397a96fec34aee39cb72', name: "close-circle-outline" }))), h("span", { key: '30b99783d4c02842315a782a4029f97a450f5a2b', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '147a0858cc23b98e8aac82463ab19b1891896d1a', name: this.properties[1] }), h("p", { key: '45d9c9e89189a31941461500868439768c3199e6' }, this.notice.message))));
+        return (h(Host, { key: '6c91fd348be22152c98396a00e0f333901e7edb3', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'dfb962471e36cd4b2b063d81470dd2500c5f52ab', fill: "clear", name: "close" }, h("smoothly-icon", { key: '0552e3732cdc2371b430c565b7bc243a6b855446', name: "close-circle-outline" }))), h("span", { key: 'c7df2fc46e03a56f937d3fcddce3ee9a9a199b88', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '8662182866050fc3aaeeb51b0d79529c0a57e10b', name: this.properties[1] }), h("p", { key: '0f539660c5267a748ba9fc514abdd33429b9042d' }, this.notice.message))));
     }
     static get is() { return "smoothly-notification"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class Notifier {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '6da528516e01fc32e6f17fd480068664b5c9e021' }, h("slot", { key: '1067e9afd266e04d3e0b32a79f974762f3bad7d2' }), h("div", { key: '493f3f5119c9c66fd6e5f9ee90d7b4fea22dc30f', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '00187e7d82c05944c3e4ed5ce6ae2367b113e2fb' }, h("slot", { key: 'ce3b80b8e40d1a745cf910126cde0fa97a16cdc4' }), h("div", { key: '2b8faa5193ebf47c4cb7a8602c3821d44c46dbcb', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
     static get is() { return "smoothly-notifier"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,9 +5,9 @@ export class SmoothlySpinner {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: '9a0cc6ad21f0c3bfce350ba2a2c83272891844d6', style: {
+        return (h(Host, { key: '458303df1f0703dad9d88e9a6c1dfbd063de34e7', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '669a73232e58cb2d87dca969cd32150f2fd010f5', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '31faf5cfc5a15e627ad7875af4cd16f6e9adac09', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: '8065db9227fb249027fe4b7dbc79152de2627ec2', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '8da0fa969c76d3930a14005f951f79f20dc6bf57', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
     static get is() { return "smoothly-spinner"; }
     static get encapsulation() { return "scoped"; }

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

@@ -20,7 +20,7 @@ export class SmoothlySubmit {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (h(Button, { key: 'ae0834363121d13204f7ebb794c44acfe10ca71e', disabled: this.disabled, type: this.type }, h("slot", { key: '7cafd59438f3f509652a416964338f8e6a87b9f4' })));
+        return (h(Button, { key: 'b56bb200c5af6dd9a949ed1989ef150cf5902f33', disabled: this.disabled, type: this.type }, h("slot", { key: 'c3795191df1b9e6c5a696e7821d0fbc865814cfd' })));
     }
     static get is() { return "smoothly-submit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,7 +10,7 @@ export class SmoothlySummary {
         }
     }
     render() {
-        return (h("details", { key: 'd77e78b718fca10f4d8e9e2bdae4112cffb4cfc3', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '5e264e08db22ec0eb85433d3d72f0f12d10cd2c1' }, h("smoothly-icon", { key: '36d49d1d21151034a35fca5b93a064074d49bb84', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '55164da27444d19c18b6b931813d12a3d5a4abe4', name: "summary" })), h("slot", { key: 'b459e14735415bee4c85af02cff23c0675372931', name: "content" })));
+        return (h("details", { key: 'eff4cfcc4681f7ae8a50dffb024ed2a2c7f34a82', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '579a019b8ae584f018c1a039ad2f637eb136db88' }, h("smoothly-icon", { key: '5b13ecddb1ee8805bba66d60aff9f1cfe8cd10b3', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: 'b01c31deaf1bb7574eaa5a383a5385555444845d', name: "summary" })), h("slot", { key: '04fe3aca685b1108f7227f2c45d28d6ef38e9292', name: "content" })));
     }
     static get is() { return "smoothly-summary"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/body/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableBody {
     render() {
-        return (h(Host, { key: '383e7918b3e1e57f2970da2d97f19f2628a53e64' }, h("slot", { key: '8d9059eed589799ad9eea2132a0bd2b10aabc03e' })));
+        return (h(Host, { key: '35794212738d56a6ee77383f2cdee89a57db82f1' }, h("slot", { key: '34c2c0ce45bc87a5ce11c7ded126b1bdb89af320' })));
     }
     static get is() { return "smoothly-table-body"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/cell/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class SmoothlyTableCell {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2c1a6679cabf05342c1e8a783a4a8fb27fd8c6f1', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '3a33c09387abdf5f499ba1f92dcf92b5b7f71a2d' })));
+        return (h(Host, { key: 'c135688a83c65d795da7cbc7e946df1842b7eee1', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '06ae1f08e462da16c0a010a99facdbd2bd41f71f' })));
     }
     static get is() { return "smoothly-table-cell"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemoColspan {
     render() {
-        return (h(Host, { key: '1b9dfde05087d6be2711b86baca19630286b2322' }, h("smoothly-table", { key: '0ba0536e747782d879f6a2cf099388435c881ad5', columns: 3 }, h("smoothly-table-head", { key: 'e14bea187af499007f4173c261526c72f3b89c8e' }, h("smoothly-table-row", { key: '9104850519968b86ba1f48f5ee997a1ccfa49a12' }, h("smoothly-table-cell", { key: '26dd9041355d04f517e3951ce608cc8b60b8caaf' }, "Date"), h("smoothly-table-cell", { key: 'b78eb957ed8ec68b5919362fe0afedc1f6375c5d' }, "Skip"), h("smoothly-table-cell", { key: '1f8ef467f5a9e9ba2157e126fc3adedb2821c9ea' }, "Total"))), h("smoothly-table-body", { key: '6679b94c153ce61b39957e64d453f8f5edd47cf0' }, h("smoothly-table-row", { key: 'd0f0c0b13b0e56b7fc761701897f9304c531c5d9' }, h("smoothly-table-cell", { key: '8e022e2e5befad0983c8d6e0567dc92a8fe1bb0c', span: 2 }, h("smoothly-display", { key: 'efb5e464048093e3855163818b6b38d86f084995', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'c9912c8e499f751cd84323b15b282f58e1a2a052' }, h("smoothly-display", { key: 'f618c45ed3960424e46ef6f40adf2b69c7307a08', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'a8605b2eb3eb80ab039f2cc6e257842045e16909' }, h("smoothly-table-expandable-cell", { key: 'cf8436e7d932f4ff0d92a054c74275551961a1ab', span: 2 }, h("smoothly-display", { key: '2013f65b67bf9f03de31fabae41e2fa4cfab338c', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'e8d3b46995025d2f3af0f2f587b555bf4d1c0daf', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '0409b2d3c90ada5737e6bb9069fb1066ff7063af' }, h("smoothly-display", { key: '82bd4a3cde9062604343fd53161a7d86838f4fed', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '4592efa154194347becf15f00275303577d743b7', 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-table-row", { key: '0aa33698c9d9de3f41d04298d60a15b62f9294e4' }, h("smoothly-table-cell", { key: '5e7265ba2d08b2aba02decd78ad88319cc407f72' }, h("smoothly-display", { key: '5af078d9ea92c4a6865a3f7545ece78d709c85fd', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '606899c1227efff03793e7108f413ca727b77304' }, "Not Skipped"), h("smoothly-table-cell", { key: '9fcdda1bad4686bf2c8a5a78486a05d25d923402' }, h("smoothly-display", { key: '033cf9f7f2f090738f71320df238d26152acdcd1', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '591888818b4300109779447443c6e5aab1b14da8' }, h("smoothly-table", { key: 'c938d62de711c1ccf5f4688757b3513df44e8af8', columns: 3 }, h("smoothly-table-head", { key: '479a91f092d7ab61f5e023187b3962cbcfa752ea' }, h("smoothly-table-row", { key: '09acaf59f4ab8afc3af9931911547c6c9160e96c' }, h("smoothly-table-cell", { key: '7d8343c2153cc0dad70a3b93f713297911b6a999' }, "Date"), h("smoothly-table-cell", { key: 'e383250690b45d63ca6932488089448063a00b59' }, "Skip"), h("smoothly-table-cell", { key: '9249209f1c691bf8b599c19a7c69241b4c375bfc' }, "Total"))), h("smoothly-table-body", { key: '08ae40864961b80b1522166a429f53962f0248c5' }, h("smoothly-table-row", { key: 'ea7dd286a24979f8d193c215fcf97728a165fa16' }, h("smoothly-table-cell", { key: '441dee1ea77f41f61fc110987a62e404a05aa297', span: 2 }, h("smoothly-display", { key: 'b6f97a5c900d27d4cd5c8a3193c08d379c73da0a', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'a3c7b056c9b0af04ec00c95d01422d2f56c3c806' }, h("smoothly-display", { key: 'dc812c579111236c03c21edaafb7906297cb2625', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '004a397622e3facc508a92e645a3ac4fa9532e0a' }, h("smoothly-table-expandable-cell", { key: 'a4b75ba00befe6a8a34fc5c99690cb03c3ade7d7', span: 2 }, h("smoothly-display", { key: 'bb91f39b2d8833ad116268618a9be82aa96a2fc4', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '51e9b4cf9d9a9ef15c04996aef32d7ec916ae79b', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: 'cbce7604964ca0c217d549bc1b1e50758b0217b8' }, h("smoothly-display", { key: '3cabab2c49146b2ac49882b592ce38cae1dd17ce', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '84d7a668b2f59da0df7a95eb1fa3d8221365f2f8', 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-table-row", { key: '8c8cabd1f86d8c435925a3e2386bfe91f9d604da' }, h("smoothly-table-cell", { key: '36d5b65550ad5c09fed7441e9c0892bdf595d979' }, h("smoothly-display", { key: '3580d0ec9bcabc49ba7e3247786c3626760dd405', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'cf38589846b2f9925a79f79d64c298e96a3174b8' }, "Not Skipped"), h("smoothly-table-cell", { key: '2ae25896d0fcfaa3884da36a63bda5bd730797bd' }, h("smoothly-display", { key: '88fed0a43e38e936abc981beac382b83e86263e6', type: "price", value: 320, currency: "EUR" })))))));
     }
     static get is() { return "smoothly-table-demo-colspan"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/filler-row/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class SmoothlyTableDemoFillerRow {
         }, 3000);
     }
     render() {
-        return (h(Host, { key: 'f857bf2706fea0bc7bef38da1231c17460e9c609' }, h("smoothly-display", { key: '56bb55f00ea43d80e8b94460bb2e951bc741aa72', type: "text", value: "Filler row" }), h("smoothly-table", { key: '3a6c43bc37797672d40417395ffdacca1b52f327', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '09289f8564422ceb0f8b7d33040a561d35dc9a02' }, h("smoothly-table-row", { key: '9675f44ce397953bc4b674bc768299d3a018820e' }, h("smoothly-table-cell", { key: '8fde03da5517c6f75c7c8da3c5bb336d2ed5a4b0' }, "Breed"), h("smoothly-table-cell", { key: '721fc804d59cb6dca7b66b2fd38dd700172322be' }, "Country"), h("smoothly-table-cell", { key: 'e8fbd6258f7167841eef83776e00406cd9ed3690' }, "Coat"), h("smoothly-table-cell", { key: '3e514eab5bb013da0d23cdde06324492bb97632b' }, "Origin"))), h("smoothly-table-body", { key: 'a14df5fcfad26c2d54ef13810e409ed65f72ac39' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (h(Host, { key: '38d70dda60dda3debcf93c39712447b147f1f8aa' }, h("smoothly-display", { key: '184a415c969fe7f8067d39b8bca1c60e2cdc525c', type: "text", value: "Filler row" }), h("smoothly-table", { key: 'c25e191ff3a0d83771c8c4057a391af7d29f3aeb', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '6a0abb3c6732c84bbf349fa5564d27d3b0189f36' }, h("smoothly-table-row", { key: '2f91fa838939f85bee7d2fc07bbcf66f19e31af0' }, h("smoothly-table-cell", { key: 'b50f41f05faeb8105905c2d2bc694ceba0291b11' }, "Breed"), h("smoothly-table-cell", { key: '1165986b307056c5356dad70b6ce04059aaebdd1' }, "Country"), h("smoothly-table-cell", { key: '348327ae0225c33862c65c536b31bbab5bd706d9' }, "Coat"), h("smoothly-table-cell", { key: '449b076a7ccb0922362af57fa66bbf081fe73c1d' }, "Origin"))), h("smoothly-table-body", { key: '7b4d12422054f92287036881aaba5156de8adc87' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
     static get is() { return "smoothly-table-demo-filler-row"; }
     static get encapsulation() { return "scoped"; }