npm - smoothly - Versions diffs - 1.2.1-alpha.33 → 1.2.1-alpha.35 - Mend

smoothly 1.2.1-alpha.33 → 1.2.1-alpha.35

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

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

@@ -6,17 +6,17 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '45d876a84adb21d0291e507d75c98a34e245bae1' }, h("smoothly-input-demo-standard", { key: '16b4efe4bf9ce4cab767abde418c9475f39c07e6' }), h("div", { key: '456df927db12dd6155230497db1a18744eea9071', class: "inputs" }, h("h2", { key: 'afa11b76643c5d38c4504533764882e14d7c2021' }, "Calendar"), h("smoothly-input-date", { key: '197aeba701d9212d1ab5e2aefd6ec6e7a044b712', name: "some-date" }, "Calendar"), h("h2", { key: '9798bc7d87dd4230607124b44b44949a20146afc' }, "Date Range"), h("smoothly-input-date-range", { key: '94578e52eb50923c8133d93d694a155c87f5fbf8', 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: '1e96bb6c94fb3bb317b8bf3dced22de39752498e', 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: '504540317c63eb41b0ddd7486fb04906e67f2c16', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '98b5ad4e2292332df7f80358ba9fd8d81ca06c17', 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: '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: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: 'c3e320f9691a8bc94892b255ade54478ea168ba1', slot: "end", size: "icon" })), h("h2", { key: '18f4ccaa84069d1f35cbc527bf16b4d19b7d6740' }, "Date"), h("smoothly-input-date", { key: 'eb41b2588fb53ae7efe0a1bc0a2ae02df7ac2b23' }, "Date"), h("smoothly-input-date", { key: '8b1aa0fe4c3ce6df32d39bb74354cb5d91e4cbe9', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '979c0d7255ee9e07decafac7d254418febf65658', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '76a94f4c2bfdedab350fdffd91e5e476b0175ae3', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '9be7b95ec68a988dbedcf1f59b65580588648c7e', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'f7504782876de6185bcc79cf783a8fe7b98cb549', slot: "end", size: "icon" })), h("h2", { key: '3a0973234d9ac25836a715c81df129e0ad3ad37f' }, "Select"), h("div", { key: '4f0340883b64ad65c265c3dc5d29587369fc7dfb', class: "select-div" }, h("smoothly-input-select", { key: '10969d77083f28f2b12000366a5962d96f1bf849', name: "select-dessert", looks: "border" }, h("label", { key: '2c653456ff8f9fd3a87b262ef71b590f172c471e', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '46dd6cdc25b1dfae027635a0b3015e43f6d2878f', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'c11274fe1700acbc9c5c33cad6529d6a122139dc', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'f1d5905d3c0cd636e89dee3a8d840320fd71ee80', value: "3" }, "Cookie"), h("smoothly-item", { key: 'c53b070e0ab7884fc69275f06596b5745978e910', value: "4" }, "Croissant"), h("smoothly-item", { key: '36ae534d31120ca947763f1c6b155101104a97bd', value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '86d5f2599981381dc196816e4f11fd9515e44f41', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'c7f6268322db571e2ec693788d5b2c35c33fa786', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '70c564d21f49b5ccd96fd3a9d870da2ae2e75557', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '789b5d9c4fa6c415dbfae4515396e7f567b59c98', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '71bcd00cb118bd50a466162993989e3fbd5a6354', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '7ea430156ec346e59c74972904b2c3ac6c25735e', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'a76b2c4923f730340093006b3a95b5383db29f0f', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '09e6d0a3f2aa8ef2b1d0af9dc975e68e6f7fcb2f', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'd12503973564a3dd906214209a413ba35599d974', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '36322f82ee3c4a5fdb52157d7c80edff03f2f6f1', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: 'bd284222ea57418c09ee55e37c013f2fa77636e2', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '587ec3f9eb650fa9f7b693687d188be450605669', value: "manatee" }, "Manatee"), h("smoothly-item", { key: 'afc72e2025c7ab491f5b792329b00ebb633681e5', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: 'a449e76b493045c893ff6d20848b44416fb698af', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '9a14e0ce1733fc4b3d86f10c2b45f52d6e372bf6', value: "folder", selected: true }, h("smoothly-icon", { key: 'f58ce43ecfcb6863052c6302513c0c113e13c074', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'fbfd64ede3b76bb7c0ad0775c257d3f9006efb7d', value: "camera" }, h("smoothly-icon", { key: '600cb76b3fded1923df8e9797addbe5801e1ee9a', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'b5e86cfa6210481b2bd4c1171ba71f19f326d391', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c6d4e7901e4f0da5c1f889cf1c81fc49b040777f', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, 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 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '16862fd74a850873d4d094365a00f2eac36086dd', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '937e851b80d06e8d3b9b0e9fd381d9c0349e7385', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '3d227a817b2824c4b1f204fd671ccbe98c1c21a2', value: "1" }, "January"), h("smoothly-item", { key: '1e0fb723814aa1c6437543a2464f38f279ceef40', value: "2" }, "February"), h("smoothly-item", { key: '9709969f5373affae2dd1bc3d6f3564e7103f002', value: "3" }, "March"), h("smoothly-item", { key: 'dbe741500b2f19e346cfbc6b66bf44f5b151a8c8', value: "4" }, "April"), h("smoothly-item", { key: '07ff330954c255975db4dbc745cf187ed2f65d84', value: "5" }, "May"), h("smoothly-item", { key: 'fe531ab3dac3085d671dcbe2a79ae84f6cc1a5bf', value: "6" }, "June"), h("smoothly-item", { key: 'b89b2b1c6cefb1177caa53945d71737ddf3c0207', value: "7" }, "July"), h("smoothly-item", { key: '987e87174bdf424d244850d36563c8d003369847', value: "8" }, "August"), h("smoothly-item", { key: '5fc0fdc4b5a7fa5fe963e079c78e6e0b0986eb48', value: "9" }, "September"), h("smoothly-item", { key: 'b853ce420e91173007c0307e34f59cc17537368a', value: "10" }, "October"), h("smoothly-item", { key: '70d74d55773802d228419116172e65ef2949e1f8', value: "11" }, "November"), h("smoothly-item", { key: '43cea0f2a57d291703c0c727a6addae322a776fd', value: "12" }, "December"))), h("h2", { key: 'd0d6d95cb4eb3e1457fc8f7094d5fe2860a34e1f' }, "Duration"), h("smoothly-input", { key: 'cafe6f776e1865e6ee5f4553a13b7e2cc265f852', 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: '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 => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("smoothly-input", { key: '17be7c32f4e12254ad7958d7887170a1080289f7', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            } }, "Duration"), h("smoothly-input", { key: '8ef85b5978a8a326278a36a592a926f6eaab6281', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '8813e27ef8a826c4a2b3f1b6e4e9220ceef27e68' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '7e157d862f37c77c609dc9497141ca1148cc89ee', 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: 'c4e7a69935914e657d61411739bbba893e093968' }, "Identifiers"), h("smoothly-input", { key: '27048a5bdcd7d4254bafb54d80bcf0bf3555db81', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '87c0d7c72551176e387a286932506a15be1ad249', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '410e405637554b7c79d93e66691b11490ed605bd', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: 'ed5079bbee4cda88f40c30d068ac024faf37ff91', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '0c6154d7840f7d5a343dc68e06bf83ae72c54ca9', type: "identifier-camel" }, "Camel"), h("h2", { key: '2771a8ca39782d11fab286fcb65b867c0286f45a' }, "Input Alternatives"), h("smoothly-input", { key: 'ace3e3a84d1facb340e8c5ddb01c26f602968639', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: 'ce6af347f6575b124b9b9d85bd02a13b85952a20', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'c95173bd3d21e9cd7c3647ea11704477c6c3beac', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '6f376745f55be6313e0fed61f88edd794ecf6034', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '00a544d3585f9182c8e69f3cb1a103e7e962afa2', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'ea1b82aaa7211dae9589b5787c4b1a7b514b8804', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '80ecbd1fab6e742af5c45d7eeda8e82ac57f2a50', placeholder: "test" }), h("smoothly-input-submit", { key: 'f8efd49b66f1fdda88abecdb861544af96f3be22', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'a32d6eed0e38bb61824ed6770c89690a8ec304f7' }, "Smoothly checkboxes"), h("div", { key: 'd6765a03ee964713d33dafe7101f3944f8a87c89', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '22a994ef413c7daf2755dcd58f6801e39b9011cf', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'a17a92b4b844b6fcbfa078e5ce7628d1a06177ad', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'dbb134399456e3214b5108bab40a31b5c9ba7d4b', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '6670e21d997952d04e3c1b772800e1ff37d0819f', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'a7580f0e29239604403b1baab6fdc72fb67a0c17', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '2c2c505ee8085c1581bbd7c89e057d963c1ae393', name: "third-checkbox" }, "3rd")), h("h4", { key: '827b1070f1cd62e1059ebebd1325dca037f7b649' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '072e0eb8354773a26ada02942b832086670d1ac5', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'fd636989ea41124dd7c635d847dacb6963300dbd', name: "checkmark-circle", slot: "start" }), h("label", { key: 'dee55d551b2d3a7ab2d19c52e0f263c91b943ca7', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '9bf269d4ecbe875330b1e524b1676421f7abe405', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '7d45cf02303833971971bc478d325fa5da620e6b', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '1289212d68348cf167de9bd1868ca0fc93f26d4f', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '806f9888175db03b6e150605877d52ee70f1a5f5', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'a56240825efef2cbe63ddb3d5880d699b6b35e0e', name: "radioSecondInput" }, h("label", { key: 'bfc81c30b70f9522737364fcf563b053cf114e15', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'abc6805ce48dffd368ed7b639eb86b3fce5cce21', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '88dfb557ed1aed288f40353a900bc404364dc7bf', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '54f6440c82947c146785299f1f14f1fb4e197d86', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '905278887964aa51a4c237ffdd3e9c70bc2f0497', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'f5a53e4b02d3fcbaccb9d7eac3cb3308b8a19db1', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'd29681b24c56db5ca50f8f78c73d7faee68b944e', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '544ca889f35883c24e027bbf7282860e5b6cff28' }), h("smoothly-input-color-demo", { key: '306ce7a9603429c5f42bc7787db356d9e372281a' }), h("smoothly-input-price-demo", { key: '447e3ce8b8fb1e211ad8be0a92ea33200f3e945e' }), h("smoothly-back-to-top", { key: '081f592e35f68264a60da244ebbbd25f7fc256b0' }))));
+            } }, "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' }))));
     }
     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: 'e4342c6db7e1e4c6281497cd786e4d499257c504' }, h("h2", { key: '26aa0c16aa87d5dea4bb092e7104a31e2fb26d36' }, "State demo on smoothly-input"), h("p", { key: '163708f05a50f636cc0b9c71d45a692ebac5805f' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '7799fc8b8d38da3dc473c2a65fa51d0521db7ea7' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f55a75be6fa0090e8e55f6ea342bcd157167f0fb', 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: '6a6e28e0695faddf47599305fc6941fd5dd2e690', type: "price", currency: this.currency }, "price")));
+        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")));
     }
     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: '5264c1c9cf0f92f86ff0d368522287f8580122c2', class: { vertical: !!this.options.vertical } }, h("div", { key: 'ffafa5f6546434d2287a1f07469a8e251e9cde9f', class: "description" }, h("h2", { key: 'bccc24c712d54c8b6efc2308a8ac73c9f6fda677' }, "Input Standard"), h("p", { key: '4955d39f7be77b2c88ba56d759d386a8f389b797' }, "Height of input should be ", h("code", { key: '2cba3f4631613cf6c1892c678cf3b6d2489c610a' }, "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: '1ede0f00d2816bb598704f5ad828a95410fffb1e', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '0d7dfc6ef6b3df8c79f863b4c4849d6eea0cf4d8', name: "looks" }, h("span", { key: '3815a6dfb52bcdc791082f5c7aa6dab4ccca9047', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '1849cc0bfa3811add3bba272ce7eb36932b5f4ab', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '37de4eaca616147ea628e0005e1066b0db500853', name: "color" }, h("span", { key: '135dac6d13c87b5a70e76fcca9ecea2187bb6012', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '87af07afc6a4a46c8cc785d477a333745e843e53', slot: "end" })), h("smoothly-input-checkbox", { key: '1d58c89cb01bcc24a928495ca511c38856c0215d', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'f6fbabb433bd48583aebca2d12ccb47f819dbb98', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '78b1007ac65662cdc82794bf4319267a3cb230a4', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '0d67c1750a475010c2f555c6d7ffa56f9b616843', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '4ff5e67eb421082c3010756b918ab8788dbbd81e', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '09fcde40dd103c81c550ca71bd96e522c840ca4c', class: "width" }, "100%"), h("div", { key: 'd5a14854ee79918e0857d533e37221c5ee088d4d', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'a126b8db655f22b7daf861eece15b3f031cbc605', 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: '33f2cc7f357a3846ccbcaa75201ae42aa369fe1c' }, "Text"), h("smoothly-input-clear", { key: '7b06802ce6ec1cf6e66464454f7e2c08c5509cea', slot: "end" })), h("div", { key: '74036c4691e7dec9f203a6a36987cec8644b7b17', class: "height" }), h("smoothly-input-select", { key: 'd24c977332de2ac0d09e08736dbe68c54fe82f42', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '5413660ea9e0d9779811ce432ea958cd83d9ebed', slot: "label" }, "Select"), h("smoothly-item", { key: '2ac5c27083962fa8e1a25c5d15d3843a34d02b41', value: "1" }, "January"), h("smoothly-item", { key: '521a8845b6f331ddf040ee52c1f7724fd94f64d3', value: "2" }, "February"), h("smoothly-item", { key: '637195be2eb8ebe0faf80b7fb1c5d3860d33df80', value: "3" }, "March"), h("smoothly-item", { key: '2527e90e5171d97f3bc8b072d03d561c021188bc', value: "4" }, "April"), h("smoothly-item", { key: '5ba652f3e666f2afba3a945bfc674af42fdff10b', value: "5" }, "May"), h("smoothly-item", { key: 'e8898598c2132dc1e3dc47bf8b34443d217fdb6d', value: "6" }, "June"), h("smoothly-item", { key: '8c1797ec614431add028845b98b32d264a36a036', value: "7" }, "July"), h("smoothly-item", { key: '62ac28227f5a066bb5073f1fd90b0b4b1efd3afa', value: "8" }, "August"), h("smoothly-item", { key: '70764eeca66cf56ca620cdb1d963d56defdbdb83', value: "9" }, "September"), h("smoothly-item", { key: '4d132d530b45db4f8829bfe2bf25afc13a38e158', value: "10" }, "October"), h("smoothly-item", { key: 'a4d1ef299f0da9db3bd9973c8452e037c0173305', value: "11" }, "November"), h("smoothly-item", { key: '9e72c334c00b4cdcc74fe00086b2a028e33b6408', value: "12" }, "December"), h("smoothly-input-clear", { key: '1cf2720994c6f70830425ca2066ad370502dbc65', slot: "end" })), h("div", { key: '7b2bd944723409bc21be49273dee40dbe88e8e69', class: "height" }), h("smoothly-input-checkbox", { key: '648dbe1784e117de725a16ba4f70b3c8310c415e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'd83bdbe0e7deafdaf375fc92bed15185315f1120', class: "height" }), h("smoothly-input-radio", { key: '2d9a8f739f4177bbebb8a3c7f7e4d51accb4a269', 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: '8e7b75b87d6b097a2820c1f63fbff106c0b3cac2', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '84f9d894f3608bbf6f6fd18166f148142cd59460', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'f2a62709db12077c1e46d70737a2de14792cf4e0', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '805e4c62d987029192f924a6e305451abcb95feb', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '845398abbf6f72f30060b7e080b2e9d024ab2e45', slot: "end" })), h("div", { key: '9b32f05a7587f50d6f02d5606f275f8b636745d8', class: "height" }), h("smoothly-input-file", { key: '05d07fd09bc51cf12855458bfeacb0a9a6f661e9', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '696715b9f104cceb8b20b46f8ca0a1eefecc34b6', slot: "label" }, "File"), h("smoothly-input-clear", { key: '72d276a80a33794c9bcc3e8865ba2c9c2988f6cc', slot: "end" })), h("div", { key: '9dbed3e714e898e5c615b6f24ba5ecdc555c056c', class: "height" }), h("smoothly-input-range", { key: '7357abaf96f5b24b86b150735b9b0c944a642008', 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: '87a942e9be397f8876a099313c67fe292e8f6a34', slot: "end" })), h("div", { key: 'f29eea42ea273adf8014fc721040994704c053fa', class: "height" }), h("smoothly-input-color", { key: 'b97507b13cb5d9d256466c08981980a8299bf999', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '31bcb93fc12b7d03b0aa0a731d769850ec9ae2ec' }, "Color"), h("smoothly-input-clear", { key: 'c12b3d0d204f98c05c27e3df8200bd88b13baae7', slot: "end" })), h("div", { key: '41543b5fae1c2e80c6e249f6d2927c56fc92687c', class: "height" }), h("smoothly-input-date", { key: '4ea99e2b45a8d67fb109177f828dbfcef5a0b97a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'e570d7d9be3c0de7f94253d830fd1915c09f649c' }, "Date"), h("smoothly-input-clear", { key: 'adf60c1a6e47fd6bb04c44a00b485922148a7c59', slot: "end" })), h("div", { key: '8cf5257d16d031fb2f8b5da4f43b18d6ceb51bd5', class: "height" }), h("smoothly-input-date-range", { key: '9b658f7d3a95228035d1a431ef44ee4a7e9d7e4e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '370a96c354d6e8cb3ef2b50f390deda2dca7e793' }, "Date Range"), h("smoothly-input-clear", { key: '1735d46c5dd3d104680cf0f44768a8d524c5c294', slot: "end" })), h("div", { key: '8bc4fbd1c76eaeaccecf66bb390332d908adaead', class: "height" }), h("div", { key: '999019f00da141e750ee11e5c891e5b85f10ce7d', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        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"))));
     }
     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: '21b58cd9091410ccd7e18bfd0e7ef4cbf7f8c496', title: this.toolTip }, h("smoothly-button", { key: '9adc403f9d4408ab31aa49235b04ece843f49d94', 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: '141483162e42d7d8ea60ada89c08e61e8fedc28d' }), h("smoothly-icon", { key: '2a09d27319264c6ea07b0a98876ad8840983f286', class: "default", name: "create-outline", size: "tiny" }))));
+        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" }))));
     }
     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: 'b39d3e741149d0b0e442b352e61b558cdc2bb13a', 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: '475bd4fb9ff30dc19b9c518c76556c4f3bf1e2a7' }, h("slot", { key: 'e19aa48c27ec6240b01766013a5004d0b87bdc95', name: "label" })), h("div", { key: 'a6d5c0ecb60b1b66ecb346c33f417fefb7414278', class: "input" }, h("smoothly-button", { key: 'd7e74af6c6c97b9c545a9c8d4d638bee9cdb45a0', color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '3194230dd2b45a1a6f808f36e0a8eea187a69584', name: "button" })), h("span", { key: 'ce4913a9f28977541b85fe2efa8e173f28b102a2' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '7d5c8206a2f424da4f3d042a2f21a2a2600b6dbf', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '12a26ab3030ff6c43252bb9b735964a89592fb94', name: "document-attach-outline" })), h("input", { key: '60b903e6e81a5e4447ea4c87b1316972a1ac5ceb', 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: '554dbf6b985f049bf1edcd41d356ba3ad22eb254', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '47f15c7c35b9753684db8dd60f851e1681ee60f1', name: "end" }))));
+        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" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,13 +40,17 @@ export class SmoothlyInput {
         Input.formRemove(this);
     }
     async clear() {
-        !this.uneditable && (this.state = this.stateHandler.initialState(undefined));
+        if (!this.uneditable && this.inputElement) {
+            this.state = this.stateHandler.setValue(this.inputElement, this.state, undefined);
+        }
     }
     async edit(editable) {
         !this.uneditable && (this.readonly = !editable);
     }
     async reset() {
-        !this.uneditable && (this.state = this.stateHandler.initialState(this.initialValue));
+        if (!this.uneditable && this.inputElement) {
+            this.state = this.stateHandler.setValue(this.inputElement, this.state, this.initialValue);
+        }
     }
     async setInitialValue() {
         this.changed = false;
@@ -60,10 +64,7 @@ export class SmoothlyInput {
         var _a, _b;
         switch (this.type) {
             case "price":
-                this.stateHandler = InputStateHandler.create("price", {
-                    currency: this.currency,
-                    toInteger: this.toInteger,
-                });
+                this.stateHandler = InputStateHandler.create("price", { currency: this.currency, toInteger: this.toInteger });
                 break;
             default:
                 this.stateHandler = InputStateHandler.create(this.type, getLocale());
@@ -72,7 +73,9 @@ export class SmoothlyInput {
         this.state = this.stateHandler.initialState((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.state) === null || _b === void 0 ? void 0 : _b.value);
     }
     stateChange() {
+        var _a, _b;
         this.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) });
+        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     valueChange(value) {
         const lastValue = this.stateHandler.getValue(this.state);
@@ -107,7 +110,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '2081a74bf6be0577f1117d3a24ac0cd172fbd2fc', 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: 'cd80fb8059ecf0d717e2d28d0b0e78222233f071', name: "start" }), h("div", { key: 'eb393a5144fba9cfbfe89f708dfdf499239a6f01' }, h("div", { key: '64f8755696e7aa49cd394ea84e2ea7ff0335c1c9', class: "ghost" }, h("div", { key: '1ce701d35eedfbeb594df10a9a9800ab7ee668e9', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '113993f0c4da58f1d98e991232425faab4f72145', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '5dc2888b742e7109bc3de6a2a57364cf1dc70a41', 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: '488da348621b80d3cce00d253fe59ad967d4243f', 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: '0c454e5e090958f8d9be3ba57c5aa2b6bc42be31', name: "start" }), h("div", { key: '7ce07e645553ed5e0ecdf0547ddd4b01c3ef57ed' }, h("div", { key: 'b8f0936c66be5fd781c7acc051fc61e0bb04e248', class: "ghost" }, h("div", { key: '3df46f48fe6831d428d5106d77d8c9d5eb9f5128', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '2f71893d7211225d7add357a7dcd76d3ffaa970c', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '0aee0a897bc4f3794e8d177fba2c6d09d681f06d', 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();
@@ -120,7 +123,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: '61f058ae3ba0a9cf40212284c8f8788e37ed3e55', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'd829477221afec32e766b59e4aa4bdac9e6c9540' })), h("smoothly-icon", { key: 'b9c4b0ad7664c2f386b113e92072eb0224746ab7', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: '96b1f1f375b1442690c903fd7dcbf637f3300d32', name: "end" })));
+            } }), h("label", { key: 'fb3bcebc770543e7811d68c7930c09cf2370859d', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '1881af7df48fab8b47e9f337ef8db3e277b6c3ac' })), h("smoothly-icon", { key: '459cc05ea72fd98cd43d64acdd60c58327a2677c', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: '219c8d02c6ef657d4e972fb667e959f3803ab4f9', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { tidily } from \"tidily\"\nimport { Color } from \"../../model\"\nimport { getLocale } from \"../../model/getLocale\"\nimport { Clearable } from \"./Clearable\"\nimport { Deep } from \"./Deep\"\nimport { Editable } from \"./Editable\"\nimport { Input } from \"./Input\"\nimport { InputStateHandler } from \"./InputStateHandler\"\nimport { Looks } from \"./Looks\"\n\n@Component({\n\ttag: \"smoothly-input\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInput implements Clearable, Input, Editable {\n\t@Element() element: HTMLSmoothlyInputElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ reflect: true }) type: tidily.Type = \"text\"\n\t@Prop({ reflect: true }) required = false\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() autocomplete?: Exclude<tidily.Settings[\"autocomplete\"], undefined>\n\t@Prop({ reflect: true }) placeholder: string \| undefined\n\t@Prop() disabled = false\n\t@Prop({ mutable: true, reflect: true }) readonly = false\n\t@Prop() toInteger?: boolean\n\t@Prop({ reflect: true }) currency?: isoly.Currency\n\t@Prop({ reflect: true }) invalid?: boolean = false\n\t@Prop({ mutable: true }) changed = false\n\t@Prop() errorMessage?: string\n\t@State() initialValue?: any\n\t@State() state: Readonly<tidily.State> & Readonly<tidily.Settings>\n\tparent: Editable \| undefined\n\tprivate stateHandler: InputStateHandler\n\tprivate inputElement: HTMLInputElement \| undefined\n\tprivate uneditable = this.readonly\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyBlur: EventEmitter<void>\n\t@Event() smoothlyChange: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\n\t@Method()\n\tasync getValue(): Promise<any \| undefined> {\n\t\treturn this.stateHandler.getValue(this.state)\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\t!this.uneditable && (this.state = this.stateHandler.initialState(undefined))\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\t!this.uneditable && (this.readonly = !editable)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\t!this.uneditable && (this.state = this.stateHandler.initialState(this.initialValue))\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.changed = false\n\t\tthis.initialValue = this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInput) => void>): Promise<void> {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Watch(\"currency\")\n\t@Watch(\"type\")\n\ttypeChange(): void {\n\t\tswitch (this.type) {\n\t\t\tcase \"price\":\n\t\t\t\tthis.stateHandler = InputStateHandler.create(\"price\", {\n\t\t\t\t\tcurrency: this.currency,\n\t\t\t\t\ttoInteger: this.toInteger,\n\t\t\t\t})\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tthis.stateHandler = InputStateHandler.create(this.type, getLocale())\n\t\t\t\tbreak\n\t\t}\n\t\tthis.state = this.stateHandler.initialState(this.value ?? this.state?.value)\n\t}\n\t@Watch(\"state\")\n\tstateChange() {\n\t\tthis.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t}\n\t@Watch(\"value\")\n\tvalueChange(value: any) {\n\t\tconst lastValue = this.stateHandler.getValue(this.state)\n\t\tif (Deep.notEqual(lastValue, value) && this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setValue(this.inputElement, this.state, value)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\t}\n\t}\n\t@Watch(\"readonly\")\n\treadonlyChange() {\n\t\tthis.listener.changed?.(this)\n\t}\n\tcomponentWillLoad() {\n\t\tthis.typeChange()\n\t\tthis.initialValue = this.value\n\t\tthis.smoothlyInputLooks.emit(\n\t\t\t(looks, color) => ((this.looks = this.looks ?? looks), !this.color && (this.color = color))\n\t\t)\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.listener.changed?.(this)\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.inputElement)\n\t\t\tthis.inputElement.value = this.state.value\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\n\t}\n\t@Listen(\"input\")\n\t@Listen(\"beforeinput\")\n\tonEvent(event: InputEvent) {\n\t\tthis.state = this.stateHandler.onInputEvent(event, this.state)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{ \"has-value\": this.state?.value != undefined && this.state?.value != \"\" }}\n\t\t\t\tonclick={() => this.inputElement?.focus()}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<div class={\"ghost\"}>\n\t\t\t\t\t\t<div class={\"value\"}>{this.state?.value}</div>\n\t\t\t\t\t\t<div class={\"remainder\"}>{this.state?.remainder}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={(el: HTMLInputElement) => (this.inputElement = el)}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\ttype={this.state?.type}\n\t\t\t\t\t\tinputmode={this.state?.inputmode}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tautocomplete={this.autocomplete ?? this.state?.autocomplete}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadOnly={this.readonly}\n\t\t\t\t\t\tpattern={this.state?.pattern && this.state?.pattern.source}\n\t\t\t\t\t\tonKeyDown={event => {\n\t\t\t\t\t\t\tthis.state = this.stateHandler.onKeyDown(event, this.state)\n\t\t\t\t\t\t\tif (event.key == \"Enter\")\n\t\t\t\t\t\t\t\tthis.smoothlyBlur.emit() // TODO: this should be replaced by a smoothlyKeydown event\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={event => !this.readonly && (this.state = this.stateHandler.onFocus(event, this.state))}\n\t\t\t\t\t\tonBlur={event => {\n\t\t\t\t\t\t\tif (!this.readonly) {\n\t\t\t\t\t\t\t\tconst lastValue = this.stateHandler.getValue(this.state)\n\t\t\t\t\t\t\t\tthis.state = this.stateHandler.onBlur(event, this.state)\n\t\t\t\t\t\t\t\tthis.smoothlyBlur.emit()\n\t\t\t\t\t\t\t\tthis.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\t\t\t\t\t\t\tif (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))\n\t\t\t\t\t\t\t\t\tthis.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<label class={\"label float-on-focus\"} htmlFor={this.name}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</label>\n\t\t\t\t\t<smoothly-icon name=\"alert-circle\" color=\"danger\" fill=\"clear\" size=\"small\" toolTip={this.errorMessage} />\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"end\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { tidily } from \"tidily\"\nimport { Color } from \"../../model\"\nimport { getLocale } from \"../../model/getLocale\"\nimport { Clearable } from \"./Clearable\"\nimport { Deep } from \"./Deep\"\nimport { Editable } from \"./Editable\"\nimport { Input } from \"./Input\"\nimport { InputStateHandler } from \"./InputStateHandler\"\nimport { Looks } from \"./Looks\"\n\n@Component({\n\ttag: \"smoothly-input\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInput implements Clearable, Input, Editable {\n\t@Element() element: HTMLSmoothlyInputElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ reflect: true }) type: tidily.Type = \"text\"\n\t@Prop({ reflect: true }) required = false\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() autocomplete?: Exclude<tidily.Settings[\"autocomplete\"], undefined>\n\t@Prop({ reflect: true }) placeholder: string \| undefined\n\t@Prop() disabled = false\n\t@Prop({ mutable: true, reflect: true }) readonly = false\n\t@Prop() toInteger?: boolean\n\t@Prop({ reflect: true }) currency?: isoly.Currency\n\t@Prop({ reflect: true }) invalid?: boolean = false\n\t@Prop({ mutable: true }) changed = false\n\t@Prop() errorMessage?: string\n\t@State() initialValue?: any\n\t@State() state: Readonly<tidily.State> & Readonly<tidily.Settings>\n\tparent: Editable \| undefined\n\tprivate stateHandler: InputStateHandler\n\tprivate inputElement: HTMLInputElement \| undefined\n\tprivate uneditable = this.readonly\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\t@Event() smoothlyBlur: EventEmitter<void>\n\t@Event() smoothlyChange: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\n\t@Method()\n\tasync getValue(): Promise<any \| undefined> {\n\t\treturn this.stateHandler.getValue(this.state)\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\t@Method()\n\tasync register() {\n\t\tInput.formAdd(this)\n\t}\n\t@Method()\n\tasync unregister() {\n\t\tInput.formRemove(this)\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tif (!this.uneditable && this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setValue(this.inputElement, this.state, undefined)\n\t\t}\n\t}\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\t!this.uneditable && (this.readonly = !editable)\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tif (!this.uneditable && this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setValue(this.inputElement, this.state, this.initialValue)\n\t\t}\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.changed = false\n\t\tthis.initialValue = this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync smoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInput) => void>): Promise<void> {\n\t\tInput.registerSubAction(this, event)\n\t}\n\t@Watch(\"currency\")\n\t@Watch(\"type\")\n\ttypeChange(): void {\n\t\tswitch (this.type) {\n\t\t\tcase \"price\":\n\t\t\t\tthis.stateHandler = InputStateHandler.create(\"price\", { currency: this.currency, toInteger: this.toInteger })\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\tthis.stateHandler = InputStateHandler.create(this.type, getLocale())\n\t\t\t\tbreak\n\t\t}\n\t\tthis.state = this.stateHandler.initialState(this.value ?? this.state?.value)\n\t}\n\t@Watch(\"state\")\n\tstateChange() {\n\t\tthis.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\tthis.listener.changed?.(this)\n\t}\n\t@Watch(\"value\")\n\tvalueChange(value: any) {\n\t\tconst lastValue = this.stateHandler.getValue(this.state)\n\t\tif (Deep.notEqual(lastValue, value) && this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setValue(this.inputElement, this.state, value)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\t}\n\t}\n\t@Watch(\"readonly\")\n\treadonlyChange() {\n\t\tthis.listener.changed?.(this)\n\t}\n\tcomponentWillLoad() {\n\t\tthis.typeChange()\n\t\tthis.initialValue = this.value\n\t\tthis.smoothlyInputLooks.emit(\n\t\t\t(looks, color) => ((this.looks = this.looks ?? looks), !this.color && (this.color = color))\n\t\t)\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.listener.changed?.(this)\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.inputElement)\n\t\t\tthis.inputElement.value = this.state.value\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\n\t}\n\t@Listen(\"input\")\n\t@Listen(\"beforeinput\")\n\tonEvent(event: InputEvent) {\n\t\tthis.state = this.stateHandler.onInputEvent(event, this.state)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{ \"has-value\": this.state?.value != undefined && this.state?.value != \"\" }}\n\t\t\t\tonclick={() => this.inputElement?.focus()}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<div class={\"ghost\"}>\n\t\t\t\t\t\t<div class={\"value\"}>{this.state?.value}</div>\n\t\t\t\t\t\t<div class={\"remainder\"}>{this.state?.remainder}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={(el: HTMLInputElement) => (this.inputElement = el)}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\ttype={this.state?.type}\n\t\t\t\t\t\tinputmode={this.state?.inputmode}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tautocomplete={this.autocomplete ?? this.state?.autocomplete}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadOnly={this.readonly}\n\t\t\t\t\t\tpattern={this.state?.pattern && this.state?.pattern.source}\n\t\t\t\t\t\tonKeyDown={event => {\n\t\t\t\t\t\t\tthis.state = this.stateHandler.onKeyDown(event, this.state)\n\t\t\t\t\t\t\tif (event.key == \"Enter\")\n\t\t\t\t\t\t\t\tthis.smoothlyBlur.emit() // TODO: this should be replaced by a smoothlyKeydown event\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonFocus={event => !this.readonly && (this.state = this.stateHandler.onFocus(event, this.state))}\n\t\t\t\t\t\tonBlur={event => {\n\t\t\t\t\t\t\tif (!this.readonly) {\n\t\t\t\t\t\t\t\tconst lastValue = this.stateHandler.getValue(this.state)\n\t\t\t\t\t\t\t\tthis.state = this.stateHandler.onBlur(event, this.state)\n\t\t\t\t\t\t\t\tthis.smoothlyBlur.emit()\n\t\t\t\t\t\t\t\tthis.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\t\t\t\t\t\t\tif (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))\n\t\t\t\t\t\t\t\t\tthis.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<label class={\"label float-on-focus\"} htmlFor={this.name}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</label>\n\t\t\t\t\t<smoothly-icon name=\"alert-circle\" color=\"danger\" fill=\"clear\" size=\"small\" toolTip={this.errorMessage} />\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"end\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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: '7e05d80ebe8162924f86140f2335b7581c719a1b' }, h("smoothly-icon", { key: '2c74fc9ba9e3b9ae40d15f18ec1503270c153bfb', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '8326dd10b2cb03a49c3df12c484d794ee42422e5' }, h("smoothly-icon", { key: '03d5ab4562e48c9d345dd28f8ba7260d8ca84534', 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: '60babf60bf9354c30c4745750259f7b5bf6835f0', 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: '424585680e3e999dc2817dea33be756d350a2d02', slot: "label" }, h("slot", { key: 'b658f5a779d57cf7731ba90fea7bf1ae5407e107', 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: '10a65c08cb5534b9aa34c4b22e933ec13c48c5ac', 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: 'd2d7f290030344d7ebc4ceed10492c9d4fdd45fa', slot: "label" }, h("slot", { key: '45b5a1a76f3e832f3455f717f57d09bdda313af4', 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: '432fdd7e4c46f6694bb7e6461a634bc37053689b', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, 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: {
                 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: 'e57746c2bec5f30fc57caa9e7159436c19bb44e7', class: "floating-label" }, h("slot", { key: '4cde319cff145536d92afc992723d413af4b483c', name: "start" }), h("div", { key: '9acdd7631c4f98059801a62385b94201238c9926' }, h("slot", { key: '2764bc78bf6aea432ee8615cbe06155bcf3be343', name: "label" }), h("div", { key: 'f6aed08f2bc4ab55a5361f4e25f8e503fd5d1e49', class: "options" }, h("slot", { key: 'a7e98902742dd3255fece1692b91ca9e18699fd2' }))), h("slot", { key: '1f90dc67b62832bf374c6abf73612feccecbbff4', name: "end" })));
+        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" })));
     }
     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: 'abf7bcf3e4097671cdb53ec9a7909f10a4a98b73', onClick: () => this.inputHandler() }, h("input", { key: '9a5e3d668f1fdad37f114119a980726025f3fd83', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: '05aa10f3e7f5a8ed0e4e7f8d903df23dcd3d2c14', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: '22f8d1b96b318e90cae673e6405659ccc1bf8b5a' }, h("slot", { key: 'd0a730e5a0cacb96eef896a4a12dfb000fab6bdd' }))));
+        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' }))));
     }
     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: 'c812675343d64f3315f190ad1c908d10ace2c62c' }, h("h2", { key: '7638d925da134a917c195e141e9f5cc0ab501322' }, "Range"), h("h3", { key: '64ea67fce5489026de55211b6de6e5d181de30e1' }, "Phone Number"), h("smoothly-input-range", { key: '932e86e4c6df5b5ce4e64b31db597740628f5113', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'ccb928822f4f87d9069863cc195febea279b58a0' }, "Stars out of ten"), h("smoothly-input-range", { key: '7232e44dd5a8be19b3fd91232b548a090bd100be', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'a8d2891ea79f41a2374030da6c8988b4d63dba2d' }, "Percent"), h("smoothly-input-range", { key: '4f9558319cf15a5926e4abe175af9abf8727e5f8', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '2b939b4330ceead0aa93bb2932baa0ceca932961' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '7000d532a0a3086942c05676c3a200c8b942d4a9', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '9ab62a9e0238046064533134ae9e251d10837c98', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: 'e97a0579668dd6dc631e23b58606882b9955bb6b', size: "icon", slot: "end" }))));
+        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" }))));
     }
     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: '6eb88b4d79900c496a6c0c41ae56fc12b66f34b1', class: {
+        return (h(Host, { key: '90232044ed7c86886c63e0f3a3247cd9615416bb', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '21f1f080b371d4418846270c79019dbb5c13b486', name: "start" }), h("div", { key: '3cf86a0fe223bb050a81e1fa40c33a52d4bd9089' }, h("label", { key: '8fd4d658aa15dfe1841e21bfaca5904e1189ff2a', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'd70471f27095e8ba81dad816068782efd479cef7', 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: '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(),
                 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: 'c4024448438ff16146298c09851089b8b24e2798', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '27569cc45c80a0415098deea69de0d82bc41603a', 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: '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 => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'd74289b20e2645fefba9ee362e5d4c6d4bf40924', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'b4e6ac8ac6ca21e394f3cc74facf06d48226fa85', name: "end" })));
+            }, 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" })));
     }
     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: '71225baa49eaeb96d36c3d5dc2f1880d33ac2861', title: this.tooltip }, h("smoothly-button", { key: '6de9cca047751443fb84b7ab91e24834604f824b', 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: '31f056aa77bbf74bb2457c4999d699e6892ad437' }), h("smoothly-icon", { key: 'cb5f326a194a0ccac34d404d921cc858bf77f8a7', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        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" }))));
     }
     static get is() { return "smoothly-input-reset"; }
     static get encapsulation() { return "scoped"; }

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

@@ -280,14 +280,14 @@ export class SmoothlyInputSelect {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (h(Host, { key: '4e0632f2279150363b616f4fb562b14531d3a4b9', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '3f43ae2df3bf57d85a7f596e444eb7ec890c1dd4', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: '6d6cacb9cca744dfbe6afe9ff04bf24288fa6480', class: "icons", ref: element => (this.iconsDiv = element) }, h("slot", { key: 'e4371a6ea005aad63b7f214bd818ccd889521225', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '86c19de5e8f1ecdcef0c4ac66e1340b5802e9280', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-icon", { key: 'effb63b5a8e00d905b301b31f7c97c35e07fc5b8', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), h("slot", { key: '806bd09cc47d8c35bb01901d7ba20e25dcdc0bb2', name: "label" }), h("div", { key: '8792bdb77b6c63e36a73a18a767dd57dbae6cc21', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("smoothly-item", { key: 'bc8b6ee08d787ccf0e2b6b4e2f32eeccee6effb0', selectable: false }, h("smoothly-icon", { key: '86d925feceb294c2ebfc7a9b427e19d95d203446', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '4e5733106f07af612cbabcfa3d2fa1e248b4e343', name: "backspace-outline", size: "small", onClick: e => {
+        return (h(Host, { key: 'fb0756c6066361bd2287aebc6d28b5f2496bc394', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '9bfa5562754d20fb476b2e31c0ec2893c03d51cf', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'a16dd0637d4a14ce7c0c4087722c0290928f8d05', class: "icons", ref: element => (this.iconsDiv = element) }, h("slot", { key: '1205952806dbbc15ae2f21d6c28bf38f3098c97c', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '4f8ef15bd401a71207b649bea68c1fc1f9459896', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-icon", { key: '8e132252a0c1f1385b2abd12959d677c817c6958', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), h("slot", { key: 'fd83ad097c45d8fff14e9f2283cf98235ff8fba5', name: "label" }), h("div", { key: 'fb839d6052e539a55269290220ac5b6556fd384e', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("smoothly-item", { key: '675b123e1c9dda89f283bc90dd3b5cf187b3913c', selectable: false }, h("smoothly-icon", { key: '98bf2c68ab35af19717bbdcbb4afb70b13eb14ff', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: 'd841fbef1a3ab0cbb0106917d73236a1a06fd2aa', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: 'c0168cd488ff01296ff962a9ff4636d2df244905', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (h("smoothly-icon", { key: '2341fc5864c70c90f2d2629bf1168bb0bb669f95', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), h("slot", { key: '9cd4292d4da25894b44297506ba89e4259ea9cd1' }), this.addedItems)));
+            } })))), h("slot", { key: '9f4727478c8483f3e35ed3e24604f4bb18d9c7c4' }), 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: '438434b7f94ee3a7d8b5cf3ed6c90113221c4494', 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: '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" })))));
     }
     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: 'a6ebadd25393a75972ec92c5860de2381825976d', tabIndex: -1 }, h("slot", { key: '2eefba52d0cc208111208720bb474a3324a79299' })));
+        return (h(Host, { key: '1ad7925c7766f48131a3b868e29a8d3b4ef81167', tabIndex: -1 }, h("slot", { key: '9b813b0b3f1caafd72cefebed40b6e6c48aace9e' })));
     }
     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: '01f79c44a6a9f4d3736efe6e4c0ee5ee3f973a0b', title: this.description, style: {
+        return (h(Host, { key: '2e33f0d93baee1a2589bdcad782c57b52a63bc33', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '14273a6f60d52b740355383bfe7c419bb5ea14a4' })));
+            } }, h("slot", { key: '645b66d7fea66cb7b5bf1045e7e2400358a22608' })));
     }
     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: '88024c5d322957a45010c9898bd110b8f48f1438' }, h("slot", { key: 'a585246e4fc2b4fcd240047b8bb1f2b7530cc25f', name: "before" }), h("smoothly-load-more", { key: 'f259e7ac58e3297a85a0ce9b843062a969b38273', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'a6ad1c4865a75cb75eaae8920fc280a32105ac91' })));
+        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' })));
     }
     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: '28ddc5d3fca6524101b268794c4d83186352f77b' });
+        return h(Host, { key: '828ce432656973cd3dc94015a4f7a350cffc2814' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,12 +3,13 @@ export class SmoothlyModal {
     constructor() {
         this.open = false;
         this.closable = false;
+        this.align = "center";
     }
     openChanged() {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (h(Host, { key: '8bdd830db07503dc5ad7a485ea41fbd14ae633cb', role: "alertdialog" }, h("div", { key: 'd6ba6d97bcae9b4110c3eaef01e6f92dc48d9013', class: "modal" }, h("div", { key: '1174aebeb08e2c9d31bfe264230ac12a79db9923', class: "header" }, h("slot", { key: 'c5422829ad590bae88ff33798fcea80b0df6e555', name: "header" }), this.closable && h("smoothly-icon", { key: '1f54c5792caa7da280803c7eedf2eb5dbac7f0ae', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), h("slot", { key: 'e568a5e424f3be6fdb79917fcfd0c1487c0535ac' }), h("div", { key: '2521bd8a631756db112465be5a04bb34a17ba05c', class: "actions" }, h("slot", { key: '3e6f6cbf6c41feee3c6b33c0d468f0737d3b7981', name: "actions" })))));
+        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" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }
@@ -59,6 +60,24 @@ export class SmoothlyModal {
                 "attribute": "closable",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"center\"",
+                    "resolved": "\"center\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "align",
+                "reflect": true,
+                "defaultValue": "\"center\""
             }
         };
     }