smoothly 1.119.0 → 1.121.0

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

@@ -20,7 +20,7 @@ export class SmoothlyInputDemoStandard {
         });
     }
     render() {
-        return (h(Host, { key: '2e355c9aa093b8466d23357c9aae6d88011170be' }, h("div", { key: 'b212cbda84e5965666cce503713c85baaa045d32', class: "description" }, h("h2", { key: '21f4edf40038c44f1b745a0f0ae5c15a4d909ee6' }, "Input Standard"), h("p", { key: '3f4cf3c1e07effe5cb728f54311cf92f438eecf5' }, "Height of input should be ", h("code", { key: 'e5c546b13ce7c73522216a1509e50022c786a36a' }, "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: '6c3be1205cf4699ae45248278c21a217f5d35e9c', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: 'c76494d9a20e705a7a9350f621104aec46b0e857', name: "color" }, h("span", { key: 'c1ccb2f1c17b46e976fadd5331f07c4d7a699791', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'dbaa782144733cdcbec4d5257e21b0a4f170e5e5', slot: "end" })), h("smoothly-input-select", { key: '28b28e354ac6fc5637ecf14acccfe30bfef11ff6', name: "looks" }, h("span", { key: 'f1452804684f0a76d78542a9cb64928a478f03ec', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ca928155a582e8b5ab68ebdc2de073c390b58ed', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '99e0f80359bb1d1813b4445fc642aeff881d0d12', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'fb4e997a1751c7a05fb97d40ae5e151ad62e7a53', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '78a9cf0fe349660d1f6869a4051051006b0f13ac', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '01b1d2c7089b8d24d40de9799f6296d8e2e1c34a', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '3a8c24b67d02e7e040ea452bcb74dfcf8176eb6c', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '143f2e8974ac80899bcac6c582cfe071c370b491', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: 'd16643507059700194c9b5b5d402d83d68ac7d42', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: '5c3a8ad043a7d87f872343009acf3b09c9c61b40', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '2f5cde81d501ffd5c2bce64e1b54586f489cd11f', class: "width" }, "width: 100%"), h("div", { key: 'a055e7019d888ca2c12161581c2c77a35fa247ba', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f7840a4c2c7197895adabac250b283dd1209d440', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '5983ef639593b4f877b77b99d58f08d9fd47b98d' }, "Text"), h("smoothly-input-clear", { key: '252b68a3efdc6b70a0532eacb18cbcd137b207b3', slot: "end" })), h("div", { key: '37c4139e98071dec4901519ba10a075219e270bf', class: "height" }), h("smoothly-input-select", { key: '6ed894124eadea113968089eba5c38c7fff2caf4', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '2229eee3d5a4cab69d203a4f3b8f313693d1852c', slot: "label" }, "Select"), h("smoothly-item", { key: 'bfb7e1e1302677b556256f5c871eaabf83a1a22d', value: "1" }, "January"), h("smoothly-item", { key: '37b4e1404f0d93c3cfec6ae778a009cccc481f37', value: "2" }, "February"), h("smoothly-item", { key: '7804e2f534c4cd279e5f29e212bc8b3f07d3be9e', value: "3" }, "March"), h("smoothly-item", { key: '7de014b6870276d1afbc3f8b4780dd789b42501e', value: "4" }, "April"), h("smoothly-item", { key: 'e30eac74368b6ae4eaf58f371c8bdd0d030c76c1', value: "5" }, "May"), h("smoothly-item", { key: '90e999da893c3c3d6c9aea57d500808fac2f64d4', value: "6" }, "June"), h("smoothly-item", { key: '0c3ae02ce9a1c9ab4fca7c06fd3809ee8067bce5', value: "7" }, "July"), h("smoothly-item", { key: '689c71f20be3bc6fb057445c5ceaa60718f05603', value: "8" }, "August"), h("smoothly-item", { key: 'b1443376f5fa483d15873c9232290f6b6e270f1c', value: "9" }, "September"), h("smoothly-item", { key: '5055f6a2b1e136f911f32bc053d35c1931faaf02', value: "10" }, "October"), h("smoothly-item", { key: '512f871512f7bdd02462b286f724b66b7a845c48', value: "11" }, "November"), h("smoothly-item", { key: '4b6c5608cd060744cdd798803e67f2188ada562f', value: "12" }, "December"), h("smoothly-input-clear", { key: '7fd619f654ad16a0048a12793092d214bb87a7dc', slot: "end" })), h("div", { key: 'ab13b70b196dbc83d694145abd870bee5d121be1', class: "height" }), h("smoothly-input-checkbox", { key: '2eb487f1b741e7b12b50bc1b6eed8990a89b059e', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'df9db551b674bb4df52b7c84bafbf25adab266fa', slot: "end" })), h("div", { key: 'bb29d6b57fdf27d523c4690ce4903187590c5b18', class: "height" }), h("smoothly-input-radio", { key: '12e400081cb687023137e7f1a3834915c846ac3f', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'd0646e2ca2ddd5ec6d7b6cdcddace55e907f4f59', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '5f2dd2ecb3289f99f82367cc0ab4c14b578ca0a3', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5abdb6fb7897c18e088c85ec08313769e744583c', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '2bba28393706691b0973bd9f92836bd28c890b07', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '5853dbcda5ed68ce1401245bba244f19a248ccbe', slot: "end" })), h("div", { key: '7b1fc6de01785728d758ea07c55c3f2ff47415c8', class: "height" }), h("smoothly-input-file", { key: '1eac17bd99f215911b95f67312164ed294952b6d', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '43d11a34c076520aed899bceb035c829836fd725', slot: "label" }, "File"), h("smoothly-input-clear", { key: '106b3c31ae10b64bdc4bc309a3512d58e929f4e2', slot: "end" })), h("div", { key: 'd13c20742bb1e088160b7cc59efb5f75dbfa4eaf', class: "height" }), h("smoothly-input-range", { key: 'd81378e953c5fe82ec020e544de7cf15d0e76434', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '27e6247aa7c628859ebab11d8da32cf8be3dfd03', slot: "end" })), h("div", { key: 'ae21676a75148c438d070bf932e96b09f2237325', class: "height" }), h("smoothly-input-color", { key: '718f8309dd37c5e4552de5a2d5c00483b6397127', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'eaadb8d6f5fa9f6143f2d2549e1b7901e32b2bef' }, "Color"), h("smoothly-input-clear", { key: 'f396f11146e3fb840e559086cf45ec745fe9dad8', slot: "end" })), h("div", { key: '60c4fcb685302ae33a5ff3f700b1b3c0010fd316', class: "height" }), h("smoothly-input-date", { key: '9eadbb8a6648c0986b83bc6c044683ddc7012472', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'f2502eeec674553779739ba3bf9d6beaa55566a2' }, "Date"), h("smoothly-input-clear", { key: 'f36a9a9403e5aa756a5c1a955cc526b2b349aeb3', slot: "end" })), h("div", { key: 'd0a81dd6a18ae37f0c55e7aa448d4323197b4e40', class: "height" }), h("smoothly-input-date-time", { key: 'a2c25b754dab6b88d1e25a8abecbe227153eab18', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '8e392cdd2f0c92a9aca8f1e468c236065fd3c2b0', slot: "end" })), h("div", { key: '76f81fc46a552dd4ebe1b15b888b85e0faabf5bb', class: "height" }), h("smoothly-input-date-range", { key: '3837975fd0e591d52386c1b12f3171d64e91cf80', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '676c2f53a26198524881f0221c73e6b654bb13dc' }, "Date Range"), h("smoothly-input-clear", { key: '1e4740db4bf043f74cfafa1e7e91312878b71b86', slot: "end" })), h("div", { key: 'db0449b44b24dd20fccdb99329b876d938d5f68c', class: "height" }))));
+        return (h(Host, { key: '54cf2b88dfb0ae3326c332e0d608b5e2aab4e2af' }, h("div", { key: 'c549a1f2bf55faa1db79e85170fd5106269400d0', class: "description" }, h("h2", { key: '4cd8be6f457b84c4363c93262a0a8c57d6ad794a' }, "Input Standard"), h("p", { key: 'd704b09fb11c51a92fa618c106039ed01695ce58' }, "Height of input should be ", h("code", { key: 'abee88ddb4d762af1cde9a6f7c94ad13fd069152' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '0922d6713e44cffa51cc253e94fb1ae98a823f24', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '1cdba85a6cddb32a49a763394b8cdb7b36d2c24a', name: "color" }, h("span", { key: '58013cb8ab43cc7cc05f6ab58670ec5f41eab179', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '0eae109840ebc9b0101fb08f7daa61253826da9c', slot: "end" })), h("smoothly-input-select", { key: 'f48cf9bd8f86d1eb5e68e3383bf9178ea27b5f22', name: "looks" }, h("span", { key: 'd6f665f4cbc8e871229312e611180bc0bf9607d1', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '955d191d8da75e9dace4c57e6f6f3d427bdac864', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'cbd64dab264df038bf40efa6c2d8733f6c767185', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'e5a2a80fba021019871563ac7197360060ccb451', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: 'f1bca93555a7cc9fa7a56a39e6bbdfc5b7570edc', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '15361ba7d104e800e627aebc52d8fff1623782b9', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '649cc21e6575e27e765e17443678f14ac73ba84f', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '59125e661fdf79f98c9d5a0f8f2c97eeb52f2b52', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: 'bc3803d7f0e97f5f8b7c863153aa0ce0d382e1de', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: '44d87477325a59e8b62c1f7ce3a29cdc29705916', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '0adfeb398a2f6f969d206cb46eb4776808fd4fc9', class: "width" }, "width: 100%"), h("div", { key: '1e617acd8e12c75a00259062602a8ef8775651cf', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '9521d2afdc06788925f96c2d0702fd3f00466359', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '75e835255286d02e1b8185902b4df7fc2b0a1147' }, "Text"), h("smoothly-input-clear", { key: 'ddd739321caa1aad97518efcde5068fef178b456', slot: "end" })), h("div", { key: 'a4ad7dae327fc4cf6fb5caa803f388f31d06ecff', class: "height" }), h("smoothly-input-select", { key: 'f231934cefc5d3821b6f520e72ce616c8df1edf2', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: 'a2b4eebb1dea9f2d1b22fd1be6b93a93b0597f7c', slot: "label" }, "Select"), h("smoothly-item", { key: '1fb2b0202b27ce56ca8e2fa06caed522ff0b5b3a', value: "1" }, "January"), h("smoothly-item", { key: '72aa6742664a98052cc7141e5a687b1cf813faff', value: "2" }, "February"), h("smoothly-item", { key: '27a92cf4d1d270763606d11a1b2b863d714a18b9', value: "3" }, "March"), h("smoothly-item", { key: '376e37b6c878d72052c0567c7ea8c5ddaedde42c', value: "4" }, "April"), h("smoothly-item", { key: 'ee5cb30a384b68ac775d4f2dd14d999876cc6e01', value: "5" }, "May"), h("smoothly-item", { key: '1cccb653d2ba1e1c26f71b9d6d8d21b10c21640b', value: "6" }, "June"), h("smoothly-item", { key: '53d755ca36cda89d4940b7870a2deab407b4aa8e', value: "7" }, "July"), h("smoothly-item", { key: 'bd2d030a7572e8deab0c4fb4bb5d46909e2152f5', value: "8" }, "August"), h("smoothly-item", { key: '4aced24179d7ea64fd2e2974d121ede5530cbc4e', value: "9" }, "September"), h("smoothly-item", { key: '175e1169c83cc572769b74b6e3423ed8c2cf16ff', value: "10" }, "October"), h("smoothly-item", { key: 'c9c658f19451bb0fa45deb3b1474ea26d303ec6d', value: "11" }, "November"), h("smoothly-item", { key: '02072c3b0f758a906a37c389d74dc9d1f5afd448', value: "12" }, "December"), h("smoothly-input-clear", { key: '363af4a49d65196a12635c968b2c8c4af91a056f', slot: "end" })), h("div", { key: 'c81bee8b491579b8707397127ecbf54f3539034b', class: "height" }), h("smoothly-input-checkbox", { key: 'edf6953cc408b492b44e68c62607a530a8874438', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'eb5e4c9ac0a1589a42aa19923232cfe13fa64361', slot: "end" })), h("div", { key: '97202244d11753ea46184bec8c5b9dfe31e2e0d3', class: "height" }), h("smoothly-input-radio", { key: '8302f3b0ed032f66c75c286b4f0cf4aae285c35a', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'cd39ed8dc900e22b6efa93e2ef5b4255dad1660d', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '8bb8c65b1e90e4e442de1d1329965112667d2eba', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '933fbb50487b72cd8f1ecc196547de5aee5e1e3a', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6ae375b8ea906bc5f8cfa8f8407a9aee8eb29ab0', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '78c245bd8bf62b9df6937d572f3f815e84cd9bd3', slot: "end" })), h("div", { key: 'f5df508ced55175718eaa0f19431f900ff0d2788', class: "height" }), h("smoothly-input-file", { key: '5d4ae4418d3f7013cf22f8fb0f78bd93f0ecb979', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: 'd462612c0e9e13643f4a7df616edcbee8f006b1d', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'ffc7bd441f3dff66eacb3ed51f5844d63aee7ef5', slot: "end" })), h("div", { key: 'c29124164ed913c99cfe804486c354ffa7653132', class: "height" }), h("smoothly-input-range", { key: '6aa933677354590b9ddd1f95fea3a1cf541f7696', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '46d9c421bf413d7af9f4a8d2cdd695600af7ded5', slot: "end" })), h("div", { key: '93acf05936faabd3aa658e2ea7bb9dcf012d908d', class: "height" }), h("smoothly-input-color", { key: '93b1fe1b0383b938248d54827bf9983a9914b3ef', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'b796f92deb8e0d60d1ac58cd8106009e2ed1c2cd' }, "Color"), h("smoothly-input-clear", { key: 'b28f8a1870a419d0afe6cfa8e0f9fc7302909e86', slot: "end" })), h("div", { key: 'aea88b754fff22bae5ab652fbcd1a41d9c8cf895', class: "height" }), h("smoothly-input-date", { key: '1c910d8bc7eb1d7348afc5206d6d934e645cec82', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'ba7c7b9530c8890283b2357bb21e92bc25d64f7f' }, "Date"), h("smoothly-input-clear", { key: '6abc2e55907861115339e3e13171751c0db11bac', slot: "end" })), h("div", { key: '164956934ba95e7edaf0631840da001d195ac246', class: "height" }), h("smoothly-input-date-time", { key: '6cfe15912a517a36a9398bb9aaa8bf0d18a67171', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '79304b822a99ca3c24573e6383bf53855352ce0e', slot: "end" })), h("div", { key: '8a7d1e32a5e7599813f9e3e1c6e53ccfcb0ac546', class: "height" }), h("smoothly-input-date-range", { key: 'ad46ae4f0436a0387daf5a8f4dd9f408d96454f8', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'f2855738add5a20423d72a6faeacf9184feb27af' }, "Date Range"), h("smoothly-input-clear", { key: 'f84b6db52dafa6b2c85f8cb807daf0c6199007a1', slot: "end" })), h("div", { key: '54f5a41d2d404c7d17ab212ddbd07c85a2b45966', class: "height" }))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,11 +10,11 @@ export class SmoothlyInputDemoUserInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '3707001c9bf5406f3770f566924f8983d4444e18' }, h("div", { key: '6970bb763108f56a34284bb1f3cb73545f2dba2c' }, h("h2", { key: 'e5f96a2b6c360e8f9a81dd90d148822758719850' }, "User Input Event"), h("p", { key: 'e1fb246660c29ddb2791f4dc6f9779ed5f1c18a7' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '5a9145c2d8517baff49e70fd4aeed1f38600ba7f' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '15459234d2bf75b83479ff0786a20d2433e2dec3' }), "Check the console to see the details of each ", h("code", { key: 'bc857f9996667580c4ba88a74eca429fbc0d9c83' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '66a1190b2266b0650ba087572545780f93d86ac0', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: 'a8630cec4bbada0c7084172822b3eeef576066ce', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '74fe6cc20fa495f2d6c79d13bb016bc76cada1bc', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '5f1ad8448db267de3fc98b820be7aca9b64c2a9e', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '507fcecb4e27938be38144991221dfe3603c0667', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '883f987123234566bdfd192ebd71605b078434ab', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '26a326a43a44339392cca252cace5148c55305d9', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '39dfbc581f8468c49969d5186c9a39304c8b805c', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'f26209ed69e401cacbf6ea0094c1e3c8c6640181', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '30b7f2d96d68bbeef6578e5c3fa07d5c56e8131e', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '7d1e0c7d7175bae2453a2392e47a84e21faaa4ea', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: '0d90079afa3c0beaf9562af7b6db39c0a2795008', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '2161ee4b978c2c37049cfc3d1bfd6ea5de6e16ea', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '271b3aaeba445473425259990276cf6803eeba55', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '5d21c601bdd2b921e6d6cd6596e871fe0ce0d486', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '176fda15f938f2b90134e186c75869db175621a3', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '50ee6d7e90187eca79dea958e43fe4d38bb4e544', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: '3835c578ea7d246169e793bf4aa2c7a51fa5363d' }, h("div", { key: '7b58c28df58685c05871b3b2e0ac1be312929ade' }, h("h2", { key: '51ad8ea9e3aac7d2b86c8fd174f3e9a48697c15e' }, "User Input Event"), h("p", { key: '47cea5b74881ab7616adfae6ebce65da42dbb313' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '2866d17687a295b23b453f5b1379e5e66bcbff41' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: 'e16f064c937a6f9308630304c583ea341f832ad9' }), "Check the console to see the details of each ", h("code", { key: '78979ae82ed46d5a06a595e02df97ba33c89d2c0' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '138b41ca59399b09ff53e52b129ae97748ed387f', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '7d09fa4861e311009ab12e3c60002de3301927ec', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '0d502c95cb5db26bdce3ba41d15556da80d64433', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '435dd06d5ce59811c106ca7c69b6dfa1be50c12a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '33a6bd3e72cf03ec750a14924a837b7e684a8773', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '21adcb09ac47b9478957c45905170a860c49e1a8', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '359e7c7c033b09f9245ebc6be57bd34219d78ecf', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '51fa448a76d00d5f1998ad57f03d21a054e8113a', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'b59321ca66af38b90a01d2eb3d0e17f18a904095', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: 'fc5fb9f656c6c6e999a552dced58d28a8acd1ef8', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: 'b200be8a41c98d4f219a9f3530f3558fa971689c', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'dd284aa8c1ea6ad1cf4f0881250c105cb2a6ff0c', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '20cc5a84fa556220aef39a2ae15ae412ea2fef0c', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '7590af1c0425b6219743d81726e05164b970187c', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3b3cc2b584fc194bd1386a710cbbbbf50e2968fc', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'f38b4dd2f3e9bbf56f998ba8ede15b3c47b8dfee', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: 'dc47c4b5003bfe3c2b9408d56a2b0646fa7d60b9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'b688a44b6ae626c27a5e3e26d4c9be570d0f59f1', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '9172cca5a258985cda5f244d38d56b692ea75e00', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '564c412728fabb0a62c8344fb4f8f833805eda2a', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '4028e3bc5a9625b4c0d302c1e856f618bf59fb22', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '4ee747fb66efa022a9e31fda59f4ca839e4b0c5d', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '6416081389e857c3c18d2fad0dc11159a2aa93a6', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
     static get is() { return "smoothly-input-demo-user-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,7 +24,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9a5ec7132b415604c425c43a2ac7c460c6ca784b', title: this.tooltip }, h("smoothly-button", { key: '68711cee29eb01755e85b9acb21bd153ef88f2df', 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: '73063df194c9194a5d06dc2c1d0fee8d03d0cdfa' }), h("smoothly-icon", { key: '39b4f6d6a588feeedfd6610777e323dc0da34f32', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '5a29f86218e6badfd620668a6c506fd9a028710d', title: this.tooltip }, h("smoothly-button", { key: '3fd484afcf17e8fd985b38fbc0b04c4520e584c5', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'b3c2a52b3b1548816d6c6ff935cf0aa61acbfa64' }), h("smoothly-icon", { key: '3858475de79ce842dd4c1e5b7007281d7af36d5d', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -104,7 +104,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '2e050fb7cb01d7ca5883d61d758ac5977e4dc924', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'f86995572138b5b55929705c4aa61bb3b3c8a1d1' }, h("slot", { key: '52a4f69b13363d0a1fce31f90606ff4d21208121', name: "label" })), h("div", { key: 'c54b40386b0d0efba68b056be954938879ed7df9', class: "input" }, h("smoothly-button", { key: '9e410cfb7cb0fc2b978f4f74256a753c43491f17', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '41b301b936471d3c57001a1dbd44ca8372624c3a', name: "button" })), h("span", { key: '619c56a1f7e01df014208f2b4372db8a3da3daeb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '22bc6bb85102cb5863ed88a7d6cbd51fd931c646', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '6614887b4520638121de556ee1b22cbb7da6ed7f', name: "document-attach-outline" })), h("input", { key: 'f93e131c684891ac1b7f956a699db014dde8108c', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '0d1d1835e479070204bc72f083a6747d05387c82', onClick: (e) => e.stopPropagation() }, h("slot", { key: '7df7be0bc7f23c18e349bf5bba640a6cfa83813d', name: "end" }))));
+        return (h(Host, { key: '6ea6dc53a6eb337bb6c5f87535cfbb4cc51d4233', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '8d1c4b21e5dcf4dc4e4c02a5d6492964fa25df0a' }, h("slot", { key: 'd29618d938fa828877f7bc08885c8ae0ddb84583', name: "label" })), h("div", { key: 'ad66b522311cf41cf03477c9e6eb3654f5c5acc2', class: "input" }, h("smoothly-button", { key: '11e2a2d526d1667817115fa8145353b0fc8ea4c1', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: 'ddea3b18a6d43d4347da9a9c6b0b3657399f4ff5', name: "button" })), h("span", { key: '5390e1365f1d6d46828330d0a25917f973a90b59' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '1056e639ed54e7945ac316122deb893415d0f427', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'fc737003eaa5939ca734fb56961a5652500ae663', name: "document-attach-outline" })), h("input", { key: 'b4e6d41f124ee2eb3b9348cc91fda0ec9df3be48', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '02db98c3712e669dc3934be7f148746744dbaae3', onClick: (e) => e.stopPropagation() }, h("slot", { key: '0fa43441ac10f081ecae36f6a56d199534e72de1', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/file/style.css

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

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

@@ -134,7 +134,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: 'fab11232a335374619f88d481c37d4e5b3d11f8e', 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: 'a0c8cae6adbad3694a28ec8e1e043fa7a8ceb98a', name: "start" }), h("div", { key: 'a2d20222eaa4b3edbc42360bc290f7216d17cca1', class: "smoothly-input-container" }, h("div", { key: '7f076aae537f15217e7bc960c495438729e06c8a', class: "guide" }, h("div", { key: '3b0078359bcc30eb6932c8f667abff7d4f0fe38b', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '2e5bc6a765e9249235b34ec25b6d3e67ee0a475e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '6062569e9a2fbb73e9785005061a204784cef36f', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (h(Host, { key: 'dc56c8b63c3a0402640a20a811dae85468138f3b', 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: 'f3372746df6932f07cea568a5f16d9bbdeef39cd', name: "start" }), h("div", { key: '1d50dc7ea1c62c4835af80ec08c708d2162452c5', class: "smoothly-input-container" }, h("div", { key: 'f562dd8ffdda755718f02c742e0b96bc1c823071', class: "guide" }, h("div", { key: '1f02c40d673223061f83933a252caf01ccede774', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '12c0b824734da7fbd20de68ce033b0da60149ecf', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '89ff5f54533362d8776d4f500c019aef7a951b58', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled) {
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -150,7 +150,7 @@ export class SmoothlyInput {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), h("label", { key: '43e8d3ad1afdaa8a8b6fa55583c0d40a3bf24acd', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '3614b3dc27033e9c7b382cfe839adab598f35447' }))), this.copyable && this.value && (h("span", { key: '5e2cb462b6cdde196955d26bf481f9bbcad7e331', class: "copyable" }, h("small", { key: 'c3730452979b2edd6b675990ac627a4e5dd839e4' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '9d18b939ea4e9b83e5d114b6cea73c66dad07503', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: 'c730f983b4a58c59ac60eb8539a199811655e4f0', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '00a182be5038019d825ec5b6fa8a87026c50cfa3', name: "end" })));
+            } }), h("label", { key: '0773d2f8eac3c880558ed831dca5903f4da1f5aa', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'fbce8ed1251aa8b97937ee81ec4e07c36941de52' }))), this.copyable && this.value && (h("span", { key: 'a0ffe7c27427df173276dbedd1159d1a3428ec36', class: "copyable" }, h("small", { key: 'da9740e6bc386abe42a23d4e0d428a72da6ee4de' }, this.copied ? "Copied!" : "Copy"), h("smoothly-icon", { key: '7b3eaa57b44c623c09a55ef143dd98fd90a6a660', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), h("smoothly-icon", { key: 'b89c81c66a99efab0dcb5aa0f751c41c28723f64', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '0f84b621e6860ab9b6477ee2a5aff5d0e099d1d9', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }
@@ -571,6 +571,25 @@ export class SmoothlyInput {
                 "setter": false,
                 "reflect": true,
                 "attribute": "copyable"
+            },
+            "right": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "right"
             }
         };
     }

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

@@ -1 +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 { Key } from \"./Key\"\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({ reflect: true }) 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() min?: number\n\t@Prop() max?: number\n\t@Prop() pad?: number\n\t@Prop({ reflect: true }) invalid?: boolean = false\n\t@Prop({ reflect: true }) errorMessage?: string\n\t@Prop({ reflect: true }) copyable?: boolean\n\t@State() initialValue?: any\n\t@State() state: Readonly<tidily.State> & Readonly<tidily.Settings>\n\t@State() copied = false\n\tisDifferentFromInitial = false\n\tparent: Editable | undefined\n\tprivate stateHandler: InputStateHandler\n\tprivate inputElement: HTMLInputElement | undefined\n\tprivate uneditable = this.readonly\n\tprivate observer = Editable.Observer.create(this)\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() smoothlyKeydown: EventEmitter<Key>\n\t@Event() smoothlyBlur: EventEmitter<void>\n\t@Event() smoothlyChange: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyUserInput: EventEmitter<Input.UserInput>\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 setValue(value: any): Promise<void> {\n\t\tif (this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setValue(this.inputElement, this.state, value)\n\t\t}\n\t}\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.inputElement?.focus()\n\t}\n\t@Method()\n\tasync setSelection(start: number, end: number): Promise<void> {\n\t\tif (this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setSelection(\n\t\t\t\tthis.inputElement,\n\t\t\t\tthis.state,\n\t\t\t\tstart,\n\t\t\t\tend < 0 ? this.inputElement.value.length + end + 1 : end\n\t\t\t)\n\t\t}\n\t}\n\t@Method()\n\tasync listen(listener: Editable.Observer.Listener): Promise<void> {\n\t\tthis.observer.subscribe(listener)\n\t}\n\t@Watch(\"name\")\n\tnameChange(_: string | undefined, oldName: string | undefined) {\n\t\tInput.formRename(this, oldName)\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.isDifferentFromInitial = false\n\t\tthis.initialValue = this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t}\n\t@Method()\n\tasync setCustomInitialValue(value: any): Promise<void> {\n\t\tthis.initialValue = value\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\tcase \"integer\":\n\t\t\t\tthis.stateHandler = InputStateHandler.create(\"integer\", { min: this.min, max: this.max, pad: this.pad })\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, this.inputElement)\n\t}\n\t@Watch(\"state\")\n\tstateChange() {\n\t\tconst value = this.stateHandler.getValue(this.state)\n\t\tthis.isDifferentFromInitial = Deep.notEqual(this.initialValue, value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.observer.publish()\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(\"disabled\")\n\t@Watch(\"readonly\")\n\treadonlyChange() {\n\t\tthis.observer.publish()\n\t}\n\tcomponentWillLoad() {\n\t\tthis.initialValue = this.value\n\t\tthis.typeChange()\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.observer.publish()\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.inputElement) {\n\t\t\tthis.inputElement.value = this.state.value\n\t\t}\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected) {\n\t\t\tawait this.unregister()\n\t\t}\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\tif (event.type == \"input\" || event.defaultPrevented) {\n\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) })\n\t\t}\n\t}\n\tcopyText(value?: string) {\n\t\tif (value) {\n\t\t\tnavigator.clipboard.writeText(value)\n\t\t\tthis.copied = true\n\t\t}\n\t}\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 class=\"smoothly-input-container\">\n\t\t\t\t\t<div class={\"guide\"}>\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={async event => {\n\t\t\t\t\t\t\tthis.state = this.stateHandler.onKeyDown(event, this.state)\n\t\t\t\t\t\t\tif (!this.readonly && !this.disabled) {\n\t\t\t\t\t\t\t\tthis.smoothlyKeydown.emit(Key.create(this.name, event))\n\t\t\t\t\t\t\t}\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\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) })\n\t\t\t\t\t\t\t\t}\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</div>\n\t\t\t\t{this.copyable && this.value && (\n\t\t\t\t\t<span class=\"copyable\">\n\t\t\t\t\t\t<small>{this.copied ? \"Copied!\" : \"Copy\"}</small>\n\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\tname=\"copy-outline\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={() => this.copyText(this.value)}\n\t\t\t\t\t\t\tonMouseLeave={() => (this.copied = false)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<smoothly-icon class=\"smoothly-invalid\" name=\"alert-circle\" size=\"small\" tooltip={this.errorMessage} />\n\t\t\t\t<slot name=\"end\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"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 { Key } from \"./Key\"\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({ reflect: true }) 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() min?: number\n\t@Prop() max?: number\n\t@Prop() pad?: number\n\t@Prop({ reflect: true }) invalid?: boolean = false\n\t@Prop({ reflect: true }) errorMessage?: string\n\t@Prop({ reflect: true }) copyable?: boolean\n\t@Prop({ reflect: true }) right?: boolean\n\t@State() initialValue?: any\n\t@State() state: Readonly<tidily.State> & Readonly<tidily.Settings>\n\t@State() copied = false\n\tisDifferentFromInitial = false\n\tparent: Editable | undefined\n\tprivate stateHandler: InputStateHandler\n\tprivate inputElement: HTMLInputElement | undefined\n\tprivate uneditable = this.readonly\n\tprivate observer = Editable.Observer.create(this)\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() smoothlyKeydown: EventEmitter<Key>\n\t@Event() smoothlyBlur: EventEmitter<void>\n\t@Event() smoothlyChange: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyUserInput: EventEmitter<Input.UserInput>\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 setValue(value: any): Promise<void> {\n\t\tif (this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setValue(this.inputElement, this.state, value)\n\t\t}\n\t}\n\t@Method()\n\tasync setFocus(): Promise<void> {\n\t\tthis.inputElement?.focus()\n\t}\n\t@Method()\n\tasync setSelection(start: number, end: number): Promise<void> {\n\t\tif (this.inputElement) {\n\t\t\tthis.state = this.stateHandler.setSelection(\n\t\t\t\tthis.inputElement,\n\t\t\t\tthis.state,\n\t\t\t\tstart,\n\t\t\t\tend < 0 ? this.inputElement.value.length + end + 1 : end\n\t\t\t)\n\t\t}\n\t}\n\t@Method()\n\tasync listen(listener: Editable.Observer.Listener): Promise<void> {\n\t\tthis.observer.subscribe(listener)\n\t}\n\t@Watch(\"name\")\n\tnameChange(_: string | undefined, oldName: string | undefined) {\n\t\tInput.formRename(this, oldName)\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.isDifferentFromInitial = false\n\t\tthis.initialValue = this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: await this.getValue() })\n\t}\n\t@Method()\n\tasync setCustomInitialValue(value: any): Promise<void> {\n\t\tthis.initialValue = value\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\tcase \"integer\":\n\t\t\t\tthis.stateHandler = InputStateHandler.create(\"integer\", { min: this.min, max: this.max, pad: this.pad })\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, this.inputElement)\n\t}\n\t@Watch(\"state\")\n\tstateChange() {\n\t\tconst value = this.stateHandler.getValue(this.state)\n\t\tthis.isDifferentFromInitial = Deep.notEqual(this.initialValue, value)\n\t\tthis.smoothlyInput.emit({ [this.name]: value })\n\t\tthis.observer.publish()\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(\"disabled\")\n\t@Watch(\"readonly\")\n\treadonlyChange() {\n\t\tthis.observer.publish()\n\t}\n\tcomponentWillLoad() {\n\t\tthis.initialValue = this.value\n\t\tthis.typeChange()\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.observer.publish()\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.inputElement) {\n\t\t\tthis.inputElement.value = this.state.value\n\t\t}\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected) {\n\t\t\tawait this.unregister()\n\t\t}\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\tif (event.type == \"input\" || event.defaultPrevented) {\n\t\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) })\n\t\t}\n\t}\n\tcopyText(value?: string) {\n\t\tif (value) {\n\t\t\tnavigator.clipboard.writeText(value)\n\t\t\tthis.copied = true\n\t\t}\n\t}\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 class=\"smoothly-input-container\">\n\t\t\t\t\t<div class={\"guide\"}>\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={async event => {\n\t\t\t\t\t\t\tthis.state = this.stateHandler.onKeyDown(event, this.state)\n\t\t\t\t\t\t\tif (!this.readonly && !this.disabled) {\n\t\t\t\t\t\t\t\tthis.smoothlyKeydown.emit(Key.create(this.name, event))\n\t\t\t\t\t\t\t}\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\t\tthis.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) })\n\t\t\t\t\t\t\t\t}\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</div>\n\t\t\t\t{this.copyable && this.value && (\n\t\t\t\t\t<span class=\"copyable\">\n\t\t\t\t\t\t<small>{this.copied ? \"Copied!\" : \"Copy\"}</small>\n\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\tname=\"copy-outline\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={() => this.copyText(this.value)}\n\t\t\t\t\t\t\tonMouseLeave={() => (this.copied = false)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<smoothly-icon class=\"smoothly-invalid\" name=\"alert-circle\" size=\"small\" tooltip={this.errorMessage} />\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

@@ -107,21 +107,21 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '0916e28b908af47e518baff4c2953a15c4e5b93e' }, h("smoothly-icon", { key: 'fd4d9e582a0feb692b8fc4455e0fef445326d929', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '6961d2bfa73e6ebeac106cb5e20a67c33db81757' }, h("smoothly-icon", { key: 'ae629d1af60656eed05f26e61aff23a7659b1cce', 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: 'b09547849f9f3e7f3780ea4e6231bcd47c4ae175', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: '8abd101ed10fdf906cbc5ce558bfd520b7149304', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && isoly.Date.is(month)) {
                     const value = isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'e1f4f143cfef863419a68b24e887579ecf3fe9d9', slot: "label" }, h("slot", { key: '01b386aa3ec76ba077158774c26256b1c25c97ca', 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: 'c7193a5c1430db7fbb14766b5e1985e1258cdb77', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, h("div", { key: 'f207c4c4078b0e06b9271e84f9a9c13acfe375e5', slot: "label" }, h("slot", { key: 'c3e5b86f8de7a94027625c455ca90a410a6e0376', 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: '1681d220124e615137b47fa559b029a7e0a9d817', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && isoly.Date.is(year)) {
                     const value = isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: '0d5bc697879c2c018331583326029b20fc7a442c', slot: "label" }, h("slot", { key: '3909a5c34b455c6ed65f6bebf7a2174e0577de2b', 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: '441a3228fcb722ab8ebbcb1138aba71e0306625a', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, h("div", { key: 'fc7d8b8bcaf3fb5d1f3751cfee4d50d7c8933651', slot: "label" }, h("slot", { key: '4f60fb1c4b5f8a17e4c27f614201f1e024dc2f30', 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: '9a79babdcef483316c46a524a66c48c7f32fc490', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     static get is() { return "smoothly-input-month"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,7 +24,7 @@ export class SmoothlyInputRadioItem {
         });
     }
     render() {
-        return (h(Host, { key: '6cda60049d14ae191ab196ba44e1b865b337638c', onClick: () => this.inputHandler(true) }, h("input", { key: '5e312eb0fef6fde4eeaa6f450447b0d2cd0536fe', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: 'ac4eed680c8cb314f1b5f4a9857e6646aac6cb82', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'c96f7fcd07b7687db703519960ae88101abb17c6' }, h("slot", { key: 'a3628941ed9b7a933c3a92908b0b5fd03d20d98e' })), h("slot", { key: 'f689489ccc1616f2715c1336979f674d64f56a9c', name: "detail" })));
+        return (h(Host, { key: 'ba40442e0cfa56832fda03a30ae5eef5350bbbd4', onClick: () => this.inputHandler(true) }, h("input", { key: 'd4dd1a20cb0df6caa6b2c8c7e1049ea79b5d14dc', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '886da298d551259c886758a4cc92c1b2ab8c218f', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '4d0aaa685928491791b1b83994f354383202879d' }, h("slot", { key: '19ae10f4d377e166b12656ffe2ef234e3ebb13b8' })), h("slot", { key: '9411d93a2e3e753fbcc30d968cb010f4f4db536f', name: "detail" })));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/radio/style.css

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

package/dist/collection/components/input/range/Range.js

@@ -0,0 +1,45 @@
+export var Range;
+(function (Range) {
+    function is(value) {
+        return typeof value == "object" && value != undefined && "start" in value && "end" in value;
+    }
+    Range.is = is;
+    function clamp(value, min, max) {
+        return value < min ? min : value > max ? max : value;
+    }
+    Range.clamp = clamp;
+    function round(value, step) {
+        var _a, _b;
+        const decimals = !step ? undefined : ((_b = (_a = step.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+        return +value.toFixed(decimals);
+    }
+    Range.round = round;
+    function setPart(current, part, value, min, max) {
+        const clamped = clamp(value, min, max);
+        return part == "start"
+            ? { start: Math.min(clamped, current.end), end: current.end }
+            : { start: current.start, end: Math.max(clamped, current.start) };
+    }
+    Range.setPart = setPart;
+    function normalize(value, step) {
+        return is(value)
+            ? { start: round(value.start, step), end: round(value.end, step) }
+            : value == undefined || Number.isNaN(value)
+                ? undefined
+                : round(value, step);
+    }
+    Range.normalize = normalize;
+    function equals(a, b) {
+        return is(a) && is(b) ? a.start === b.start && a.end === b.end : a === b;
+    }
+    Range.equals = equals;
+    function defined(value) {
+        return is(value) ? typeof value.start == "number" && typeof value.end == "number" : typeof value == "number";
+    }
+    Range.defined = defined;
+    function percent(value, min, max) {
+        return max == min ? 0 : ((value - min) / (max - min)) * 100;
+    }
+    Range.percent = percent;
+})(Range || (Range = {}));
+//# sourceMappingURL=Range.js.map

package/dist/collection/components/input/range/Range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.js","sourceRoot":"","sources":["../../../../src/components/input/range/Range.ts"],"names":[],"mappings":"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","sourcesContent":["export type Range = { start: number; end: number }\n\nexport namespace Range {\n\texport type Value = number | Range\n\texport function is(value: Value | undefined): value is Range {\n\t\treturn typeof value == \"object\" && value != undefined && \"start\" in value && \"end\" in value\n\t}\n\texport function clamp(value: number, min: number, max: number): number {\n\t\treturn value < min ? min : value > max ? max : value\n\t}\n\texport function round(value: number, step: number | undefined): number {\n\t\tconst decimals = !step ? undefined : (step.toString().split(\".\")[1]?.length ?? 0)\n\t\treturn +value.toFixed(decimals)\n\t}\n\texport function setPart(current: Range, part: \"start\" | \"end\", value: number, min: number, max: number): Range {\n\t\tconst clamped = clamp(value, min, max)\n\t\treturn part == \"start\"\n\t\t\t? { start: Math.min(clamped, current.end), end: current.end }\n\t\t\t: { start: current.start, end: Math.max(clamped, current.start) }\n\t}\n\texport function normalize(value: Value | undefined, step: number | undefined): Value | undefined {\n\t\treturn is(value)\n\t\t\t? { start: round(value.start, step), end: round(value.end, step) }\n\t\t\t: value == undefined || Number.isNaN(value)\n\t\t\t\t? undefined\n\t\t\t\t: round(value, step)\n\t}\n\texport function equals(a: Value | undefined, b: Value | undefined): boolean {\n\t\treturn is(a) && is(b) ? a.start === b.start && a.end === b.end : a === b\n\t}\n\texport function defined(value: Value | undefined): boolean {\n\t\treturn is(value) ? typeof value.start == \"number\" && typeof value.end == \"number\" : typeof value == \"number\"\n\t}\n\texport function percent(value: number, min: number, max: number): number {\n\t\treturn max == min ? 0 : ((value - min) / (max - min)) * 100\n\t}\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputRangeDemo {
     render() {
-        return (h(Host, { key: 'fd572625434e3a3a511d2fdc4e39a11734eee8fb' }, h("h2", { key: '0bf7d54f8cf11e3e870d6c1152fdad2665baf305' }, "Range"), h("h3", { key: '37f05494fea8a36a05684fb0ad0aede0d27630aa' }, "Phone Number"), h("smoothly-input-range", { key: '68d94bdeb4db077a49a011c4849e99a1b33db40b', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'd1b81f1dae6424d685997bd8dfe02a10832a1b2a' }, "Stars out of ten"), h("smoothly-input-range", { key: 'dca3283520395117ed946a844bb46f7fc52c0212', max: 10, step: 1, label: "Stars" }), h("h3", { key: '8670432a44d93f9f7dbc315c1f0a51d9aa79100a' }, "Percent"), h("smoothly-input-range", { key: '78863ada16280bb963e15f1682aa8131667a1bd3', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '1b4a9ba5d75f92f1f90dc46a4710a35edd2fe2e9' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '95c8798a86fc50de7ad65b67f837a71e2743c2ae', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: 'f44529bf690bcf4ceff1dfa1520d2cf92a456f2f', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '27ef758b1ba28f93ae5a19cc14fb1bdbf1415c70', size: "icon", slot: "end" }))));
+        return (h(Host, { key: '850a5ea8cc3b512e2661333525b28eb5019287b3' }, h("h2", { key: '0a0f623f23a6739f5aeb96c4b5f1679e9e0fcb34' }, "Range"), h("h3", { key: '53535b3d6a89421a97851d0bd9fae947cc13b9ac' }, "Phone Number"), h("smoothly-input-range", { key: '87041e028b3e3679261c04f13a0a191f382a19a5', name: "first", min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '9875d80de18b17eca10c223004f8860e49057b8d' }, "Stars out of ten"), h("smoothly-input-range", { key: '45a7669fc4115edec078db9d7d02038f5ebd0b7d', name: "stars", max: 10, step: 1, label: "Stars" }), h("h3", { key: '7b0dfeef448af88731df524c2616062d97fade53' }, "Percent"), h("smoothly-input-range", { key: '16cc894decd70155beb121fd8ca3d6e4e743f3b3', name: "percent", type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: 'f71216975dea018c658b0501eb20cf266750e210' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '2acb17d8d7173d3c8f2cbddf7b0626fba989fdb0', step: 1, name: "withClear", label: "Select" }, h("smoothly-icon", { key: '773be31ffa04141dac37b6a9b54fde28c1499cf2', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: 'c72262a6951103b03fa1af298a94152937e76338', size: "icon", slot: "end" })), h("h3", { key: 'de256bcef1e529daf7df1f49c5874def1e5e6248' }, "Dual (start / end)"), h("smoothly-input-range", { key: '0021e39e8db099b1afa54c9716e6923f535a2a05', dual: true, min: 90.86, max: 10000000, step: 1, name: "dualRange", label: "Range" }), h("h3", { key: 'add2d05dc7abb04da120eaea454b8ea2bd2cc552' }, "Dual percent"), h("smoothly-input-range", { key: '65fc586b860a04e5253b560800d1dd55ba05b2d4', dual: true, name: "dualRangePercent", type: "percent", min: 0, max: 1, step: 0.01, label: "Percent range" }, h("smoothly-input-clear", { key: '0ab70bea08f1d4473f85652f8f1ef1a1ae22f10c', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

package/dist/collection/components/input/range/demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/range/demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAKlD,MAAM,OAAO,sBAAsB;IAClC,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,qEAAc;YACd,4EAAqB;YACrB,6EAAsB,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,GAAI;YACxF,gFAAyB;YACzB,6EAAsB,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,GAAI;YAC1D,uEAAgB;YAChB,6EAAsB,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI;YAC7E,mGAA4C;YAC5C,6EAAsB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ;gBAC1D,sEAAe,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,GAAG;gBACtD,6EAAsB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,GAAG,CACzB,CACjB,CACP,CAAA;IACF,CAAC;;CACD","sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-input-range-demo\",\n})\nexport class SmoothlyInputRangeDemo {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Range</h2>\n\t\t\t\t<h3>Phone Number</h3>\n\t\t\t\t<smoothly-input-range min={700000000} max={799999999} step={1} label={\"Phone Number\"} />\n\t\t\t\t<h3>Stars out of ten</h3>\n\t\t\t\t<smoothly-input-range max={10} step={1} label={\"Stars\"} />\n\t\t\t\t<h3>Percent</h3>\n\t\t\t\t<smoothly-input-range type=\"percent\" max={1} step={0.01} label={\"Percent\"} />\n\t\t\t\t<h3>With icon at start and clear button</h3>\n\t\t\t\t<smoothly-input-range step={1} name=\"range2\" label=\"Select\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t</smoothly-input-range>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/range/demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAKlD,MAAM,OAAO,sBAAsB;IAClC,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,qEAAc;YACd,4EAAqB;YACrB,6EAAsB,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,GAAI;YACrG,gFAAyB;YACzB,6EAAsB,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,GAAI;YACvE,uEAAgB;YAChB,6EAAsB,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI;YAC5F,mGAA4C;YAC5C,6EAAsB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ;gBAC7D,sEAAe,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,GAAG;gBACtD,6EAAsB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,GAAG,CACzB;YACvB,kFAA2B;YAC3B,6EAAsB,IAAI,QAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,OAAO,GAAG;YAChG,4EAAqB;YACrB,6EACC,IAAI,QACJ,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,eAAe;gBACrB,6EAAsB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,GAAG,CACzB,CACjB,CACP,CAAA;IACF,CAAC;;CACD","sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-input-range-demo\",\n})\nexport class SmoothlyInputRangeDemo {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Range</h2>\n\t\t\t\t<h3>Phone Number</h3>\n\t\t\t\t<smoothly-input-range name=\"first\" min={700000000} max={799999999} step={1} label={\"Phone Number\"} />\n\t\t\t\t<h3>Stars out of ten</h3>\n\t\t\t\t<smoothly-input-range name=\"stars\" max={10} step={1} label={\"Stars\"} />\n\t\t\t\t<h3>Percent</h3>\n\t\t\t\t<smoothly-input-range name=\"percent\" type=\"percent\" max={1} step={0.01} label={\"Percent\"} />\n\t\t\t\t<h3>With icon at start and clear button</h3>\n\t\t\t\t<smoothly-input-range step={1} name=\"withClear\" label=\"Select\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t</smoothly-input-range>\n\t\t\t\t<h3>Dual (start / end)</h3>\n\t\t\t\t<smoothly-input-range dual min={90.86} max={10000000} step={1} name=\"dualRange\" label=\"Range\" />\n\t\t\t\t<h3>Dual percent</h3>\n\t\t\t\t<smoothly-input-range\n\t\t\t\t\tdual\n\t\t\t\t\tname=\"dualRangePercent\"\n\t\t\t\t\ttype=\"percent\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={1}\n\t\t\t\t\tstep={0.01}\n\t\t\t\t\tlabel=\"Percent range\">\n\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t</smoothly-input-range>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}