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

package/dist/components/{p-c77944e7.js.map → p-62c1780b.js.map}

@@ -1 +1 @@
-{"file":"p-c77944e7.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,miDAAmiD,CAAC;AACrjD,8BAAe,QAAQ;;MCMV,eAAe;;;;oBAC4C,OAAO;;;IAG9E,MAAM;QACL,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,CAAA;QACvG,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE;gBACN,gBAAgB,EACf,IAAI,CAAC,IAAI,IAAI,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,OAAO,GAAG,OAAO;aACvG,IACD,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,EAAE,GAAG,WAAW,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,EAAC,4BAA4B,IAC9G,+DACC,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,kBACG,WAAW,oBACV,OAAO,EACtB,EAAE,EAAE,GAAG,EAAE,GAAG,WAAW,GAAG,CAAC,EAAE,EAC7B,EAAE,EAAE,GAAG,EAAE,GAAG,WAAW,GAAG,CAAC,EAAE,EAC7B,CAAC,EAAC,IAAI,GAAU,CACZ,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/style.css?tag=smoothly-spinner&encapsulation=scoped","src/components/spinner/index.tsx"],"sourcesContent":[":host[hidden] {\n\tdisplay: none;\n}\n\n:host {\n\tcursor: wait;\n\t--spinner-time: 1.4s;\n\t--spinner-color: var(--smoothly-color-contrast);\n\t--spinner-background: var(--smoothly-color);\n\t--spinner-background-opacity: var(--smoothly-semitransparent, 0.8);\n\tdisplay: block;\n\tstroke: rgb(var(--spinner-color));\n\tbackground-color: rgba(var(--spinner-background), var(--spinner-background-opacity));\n}\n\n:host:not([overlay]) {\n\twidth: var(--spinner-size);\n\theight: var(--spinner-size);\n}\n\n:host[overlay] {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 4;\n\tbackground-color: rgba(var(--spinner-background), var(--spinner-background-opacity));\n}\n\n:host[color]:not([overlay]),\n:host[color][overlay] {\n\tbackground-color: rgba(var(--spinner-background), var(--spinner-background-opacity));\n\tstroke: rgb(var(--spinner-color));\n}\n\n:host[overlay]>svg {\n\tposition: absolute;\n\twidth: var(--spinner-size);\n\tleft: calc(50% - var(--spinner-size) / 2);\n\ttop: calc(50% - var(--spinner-size) / 2);\n}\n\n:host>svg {\n\tanimation: SPIN-SVG var(--spinner-time) linear infinite;\n}\n\n:host>svg>circle {\n\ttransform-origin: center;\n\tanimation: SPIN-CIRCLE var(--spinner-time) ease-in-out infinite;\n\tstroke-dasharray: 187;\n\tstroke-dashoffset: 0;\n}\n\n@keyframes SPIN-SVG {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: rotate(270deg);\n\t}\n}\n\n@keyframes SPIN-CIRCLE {\n\t0% {\n\t\tstroke-dashoffset: 187;\n\t}\n\n\t50% {\n\t\tstroke-dashoffset: 46.75;\n\t\ttransform: rotate(135deg);\n\t}\n\n\t100% {\n\t\tstroke-dashoffset: 187;\n\t\ttransform: rotate(450deg);\n\t}\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-spinner\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySpinner {\n\t@Prop({ reflect: true }) size: \"small\" | \"icon\" | \"medium\" | \"large\" = \"large\"\n\t@Prop({ reflect: true }) overlay: boolean\n\n\trender() {\n\t\tconst strokeWidth = this.size == \"large\" ? 6 : this.size == \"medium\" ? 8 : this.size == \"icon\" ? 8 : 12\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--spinner-size\":\n\t\t\t\t\t\tthis.size == \"large\" ? \"5em\" : this.size == \"medium\" ? \"3em\" : this.size == \"icon\" ? \"1.8em\" : \"1.2em\",\n\t\t\t\t}}>\n\t\t\t\t<svg class=\"spinner\" viewBox={`0 0 ${60 + strokeWidth} ${60 + strokeWidth}`} xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"path\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke-width={strokeWidth}\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tcx={`${30 + strokeWidth / 2}`}\n\t\t\t\t\t\tcy={`${30 + strokeWidth / 2}`}\n\t\t\t\t\t\tr=\"30\"></circle>\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-62c1780b.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,miDAAmiD,CAAC;AACrjD,8BAAe,QAAQ;;MCMV,eAAe;;;;oBAC4C,OAAO;;;IAG9E,MAAM;QACL,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,CAAA;QACvG,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE;gBACN,gBAAgB,EACf,IAAI,CAAC,IAAI,IAAI,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,OAAO,GAAG,OAAO;aACvG,IACD,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,EAAE,GAAG,WAAW,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,EAAC,4BAA4B,IAC9G,+DACC,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,kBACG,WAAW,oBACV,OAAO,EACtB,EAAE,EAAE,GAAG,EAAE,GAAG,WAAW,GAAG,CAAC,EAAE,EAC7B,EAAE,EAAE,GAAG,EAAE,GAAG,WAAW,GAAG,CAAC,EAAE,EAC7B,CAAC,EAAC,IAAI,GAAU,CACZ,CACA,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/spinner/style.css?tag=smoothly-spinner&encapsulation=scoped","src/components/spinner/index.tsx"],"sourcesContent":[":host[hidden] {\n\tdisplay: none;\n}\n\n:host {\n\tcursor: wait;\n\t--spinner-time: 1.4s;\n\t--spinner-color: var(--smoothly-color-contrast);\n\t--spinner-background: var(--smoothly-color);\n\t--spinner-background-opacity: var(--smoothly-semitransparent, 0.8);\n\tdisplay: block;\n\tstroke: rgb(var(--spinner-color));\n\tbackground-color: rgba(var(--spinner-background), var(--spinner-background-opacity));\n}\n\n:host:not([overlay]) {\n\twidth: var(--spinner-size);\n\theight: var(--spinner-size);\n}\n\n:host[overlay] {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 4;\n\tbackground-color: rgba(var(--spinner-background), var(--spinner-background-opacity));\n}\n\n:host[color]:not([overlay]),\n:host[color][overlay] {\n\tbackground-color: rgba(var(--spinner-background), var(--spinner-background-opacity));\n\tstroke: rgb(var(--spinner-color));\n}\n\n:host[overlay]>svg {\n\tposition: absolute;\n\twidth: var(--spinner-size);\n\tleft: calc(50% - var(--spinner-size) / 2);\n\ttop: calc(50% - var(--spinner-size) / 2);\n}\n\n:host>svg {\n\tanimation: SPIN-SVG var(--spinner-time) linear infinite;\n}\n\n:host>svg>circle {\n\ttransform-origin: center;\n\tanimation: SPIN-CIRCLE var(--spinner-time) ease-in-out infinite;\n\tstroke-dasharray: 187;\n\tstroke-dashoffset: 0;\n}\n\n@keyframes SPIN-SVG {\n\t0% {\n\t\ttransform: rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: rotate(270deg);\n\t}\n}\n\n@keyframes SPIN-CIRCLE {\n\t0% {\n\t\tstroke-dashoffset: 187;\n\t}\n\n\t50% {\n\t\tstroke-dashoffset: 46.75;\n\t\ttransform: rotate(135deg);\n\t}\n\n\t100% {\n\t\tstroke-dashoffset: 187;\n\t\ttransform: rotate(450deg);\n\t}\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-spinner\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySpinner {\n\t@Prop({ reflect: true }) size: \"small\" | \"icon\" | \"medium\" | \"large\" = \"large\"\n\t@Prop({ reflect: true }) overlay: boolean\n\n\trender() {\n\t\tconst strokeWidth = this.size == \"large\" ? 6 : this.size == \"medium\" ? 8 : this.size == \"icon\" ? 8 : 12\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--spinner-size\":\n\t\t\t\t\t\tthis.size == \"large\" ? \"5em\" : this.size == \"medium\" ? \"3em\" : this.size == \"icon\" ? \"1.8em\" : \"1.2em\",\n\t\t\t\t}}>\n\t\t\t\t<svg class=\"spinner\" viewBox={`0 0 ${60 + strokeWidth} ${60 + strokeWidth}`} xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"path\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke-width={strokeWidth}\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tcx={`${30 + strokeWidth / 2}`}\n\t\t\t\t\t\tcy={`${30 + strokeWidth / 2}`}\n\t\t\t\t\t\tr=\"30\"></circle>\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/p-63ac6b31.js

@@ -0,0 +1,241 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
+import { D as Date } from './p-390767c7.js';
+import { d as defineCustomElement$w } from './p-c090ac4b.js';
+import { d as defineCustomElement$v } from './p-7d0eafb0.js';
+import { d as defineCustomElement$u } from './p-8e13449b.js';
+import { d as defineCustomElement$t } from './p-5d648150.js';
+import { d as defineCustomElement$s } from './p-4f80c811.js';
+import { d as defineCustomElement$r } from './p-f770567b.js';
+import { d as defineCustomElement$q } from './p-96acfe2c.js';
+import { d as defineCustomElement$p } from './p-f46dd8e4.js';
+import { d as defineCustomElement$o } from './p-4c6fe645.js';
+import { d as defineCustomElement$n } from './p-de7367c4.js';
+import { d as defineCustomElement$m } from './p-8e748704.js';
+import { d as defineCustomElement$l } from './p-1cd836ca.js';
+import { d as defineCustomElement$k } from './p-bad6a2f9.js';
+import { d as defineCustomElement$j } from './p-d8318156.js';
+import { d as defineCustomElement$i } from './p-575b902b.js';
+import { d as defineCustomElement$h } from './p-4e8746f6.js';
+import { d as defineCustomElement$g } from './p-9caf65ff.js';
+import { d as defineCustomElement$f } from './p-4b05e229.js';
+import { d as defineCustomElement$e } from './p-1390a195.js';
+import { d as defineCustomElement$d } from './p-864278eb.js';
+import { d as defineCustomElement$c } from './p-751259e1.js';
+import { d as defineCustomElement$b } from './p-ee41db2f.js';
+import { d as defineCustomElement$a } from './p-c0796b72.js';
+import { d as defineCustomElement$9 } from './p-b1e386db.js';
+import { d as defineCustomElement$8 } from './p-67b8cf78.js';
+import { d as defineCustomElement$7 } from './p-e25d0a4a.js';
+import { d as defineCustomElement$6 } from './p-422f3359.js';
+import { d as defineCustomElement$5 } from './p-7c727d4f.js';
+import { d as defineCustomElement$4 } from './p-5ffba444.js';
+import { d as defineCustomElement$3 } from './p-38ce18a1.js';
+import { d as defineCustomElement$2 } from './p-62c1780b.js';
+import { d as defineCustomElement$1 } from './p-4f911ef7.js';
+
+const styleCss = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{margin:auto;width:50%}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>smoothly-color.sc-smoothly-input-demo>*.sc-smoothly-input-demo,.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-basis:49%}";
+const SmoothlyInputDemoStyle0 = styleCss;
+
+const SmoothlyInputDemo = proxyCustomElement(class SmoothlyInputDemo extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.duration = { hours: 8 };
+        this.alphanumeric = "!@##";
+    }
+    render() {
+        return (h(Host, { key: '2c21d84c0c387c41621323eac28a6fb0c7aa9eff' }, h("smoothly-input-demo-standard", { key: '119dd61fec7d5679e7d71ed8b1cbd7cd7676df8e' }), h("div", { key: 'f27fe4ccbce6bcb2bb247a7ca2bdf1a3c0f48eeb', class: "inputs" }, h("h2", { key: '14d1b974cd3d39d9bfce6db4db90390829af27fc' }, "Calendar"), h("smoothly-input-date", { key: '2554c0764e1c3240fed2a60b1f0fed1debc4b288', name: "some-date" }, "Calendar"), h("h2", { key: '566d6aa65ed9d693953c8f16fcfdd84877f948f6' }, "Date Range"), h("smoothly-input-date-range", { key: '888e3043ba1f13b4ee9bd00b214cb422745271e5', name: "testing", start: Date.now(), end: Date.nextMonth(Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '40cc239a477203bcec3950ca8f9d58760662b6f4', name: "testing", start: Date.now(), end: Date.nextMonth(Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '5914ae9340c307ebb9f2d237be1c464489af5e11', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '27f7376080ee0194d9b10c1b67fca176171582ca', looks: "grid", start: Date.now(), end: Date.nextMonth(Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+                "--smoothly-input-border-radius": "0.5rem",
+            } }, h("smoothly-input-clear", { key: '68f4e45c98c8ae86540d47dda347f7da2a6311c0', slot: "end", size: "icon" })), h("h2", { key: '22fa286405039f0ffad5f3e0699d319e19afab81' }, "Date"), h("smoothly-input-date", { key: '234714e87a3d7758ddb461c2e41d8338b08d1dac' }, "Date"), h("smoothly-input-date", { key: 'ffa9825d1607cfff36c0f905c54f599eb27641df', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '0996c7930dda251e062c3ddeb3913235945c8770', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'f93840584abbe3bcf42b2ef631b9af0ad3777cb9', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '922eba0deb0d83ef492fc6179729784b65d56007', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '1e1922feaf0d74cbd28838910e76aa4996b79379', slot: "end", size: "icon" })), h("h2", { key: '285f1e7ac38d73d1cefd2d09cad980e3bfdb4eef' }, "Select"), h("div", { key: '530acc8bb23dcded52f542fd5776b9915d8747a5', class: "select-div" }, h("smoothly-input-select", { key: '055b09252fe6854519b55355309123649a1d8548', name: "select-dessert", looks: "border" }, h("label", { key: 'eb009b697a58e228e218b03be5c5443f9112813e', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '797c3dacc4cfdfc5dbc844c84792e33bb7717315', value: "1" }, "Ice cream"), h("smoothly-item", { key: '39663fc179e11bb1dde2d11070a071ae2b6c983e', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '07ecb2a92ba7a8d96702cade6cea2352abd9b6ba', value: "3" }, "Cookie"), h("smoothly-item", { key: '199fd2229c654cce7219f1f443c92d0159f688d8', value: "4" }, "Croissant"), h("smoothly-item", { key: 'ca81d64043bed3518c468e9b7889106c28a6c9a3', value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'efbe12f1284be04fa9da11fb06f566ca4e3566f3', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '5f1f71f6e23c2c966774f2400acc19b05ab953ab', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'e05b5b2685a0e43751f543f2007250989f13998f', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '9e6dd82329905758ed38829b83d540d21b700970', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '9b0292116361e68bcb8565269d1c9887231769ba', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'f75d180a17e590e1c6d266f3d54fb14ba0583d77', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '70b55fca1ebf5d1ce143537d0ce0cb59eb1239d9', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '38593ddd022bf1b89e2a1f746bdb78ac25adfaf5', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '73817d432108c84097d89ae6343f4467c2c3dba5', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a02780a198f189e67bd9afb876dfd40d48d8749e', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '6396739580e9c4641f89dfb7b0124a2286d7f80d', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '780d77499458aae22ef7a263254337863263d258', value: "manatee" }, "Manatee"), h("smoothly-item", { key: 'fe2015a62f5df7bf43f47b20970f44956090e515', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '3a3d3e369cafc3a5b4730c45410020edff3847aa', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '8ffb133d23c890286071965e4a81b4f0c1c7a40c', value: "folder", selected: true }, h("smoothly-icon", { key: '1c4258df5c53f0ea7131bbe7f70aa9a0763c590e', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '29b5bf212246c78ad291018ed913571d97c264d9', value: "camera" }, h("smoothly-icon", { key: 'e0c3ee87ca0e922c7791d0ec6122b82788d77b18', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'e1d10123cb5b1a787382817c07e10a3deb74ea34', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c26862e531cb18e66740c61b29211040213acaee', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            .map((_, i) => String.fromCharCode(i + 65))
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '914bcb2ad740dead0f170ca65d6709ccc074da64', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a0a19f995856bbed75facfd13e8678e2660a3f00', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'b204bf4e58d9e958caa858bef2e6c332d4380aac', value: "1" }, "January"), h("smoothly-item", { key: 'af992fa019db3145e771d99a9d8076ef4d29e8ff', value: "2" }, "February"), h("smoothly-item", { key: 'ad288e51d7da7b7e036c6c03e41e58ace1e9ebba', value: "3" }, "March"), h("smoothly-item", { key: '6eef09ea011660bc8f05890dc8e3b214162c1a8a', value: "4" }, "April"), h("smoothly-item", { key: 'b35f8c9936d3d889820a32a4952bc00d9e207777', value: "5" }, "May"), h("smoothly-item", { key: '6334d689acd1db1ff3371b83845e42fbed12cf97', value: "6" }, "June"), h("smoothly-item", { key: 'e0e6fd95341bc868cfb078c3084087ae1f7116b1', value: "7" }, "July"), h("smoothly-item", { key: 'e1d2110eb9ce3049fad072dbc7b3ee5fdd5417e0', value: "8" }, "August"), h("smoothly-item", { key: '67e1e2e03fe996d3513713777fc5fb173bde40f3', value: "9" }, "September"), h("smoothly-item", { key: '1d339f1b19f2837821e9ad1854ff91c6377a9b46', value: "10" }, "October"), h("smoothly-item", { key: 'f337d69b0cf691004026dcd1fd9fb6e05663e6ab', value: "11" }, "November"), h("smoothly-item", { key: '59e4f576d3682797d304af9de5b034874232edd8', value: "12" }, "December"))), h("h2", { key: '857f8038b0c7eba6cc1cdf809006602895bd50ce' }, "Duration"), h("smoothly-input", { key: '2fe4664cc1c0ccab14c73eace5e3245050ee42e6', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
+                const duration = e.detail.duration;
+                this.duration = duration;
+            } }, "Duration"), h("smoothly-input", { key: '4d2c766c08d7668dc950cdf0e79c2376e65cb10e', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+                const duration = e.detail.duration;
+                this.duration = duration;
+            } }, "Duration"), h("h2", { key: 'ebe91cd09ac5eaf64582d32e2d19020e28a8e431' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: 'c5a54e12f1e6bc615e82820adb9808028963ee62', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '436d524f5d496de80f178eb48967707ef2c371cc' }, "Identifiers"), h("smoothly-input", { key: 'e81c1ea987dbae312c926b4c23e484d5224c369c', type: "identifier-code" }, "Code"), h("smoothly-input", { key: 'c8e035329dfce2d45feb2584dc9bdea751f780d6', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '0c601277a87d76107c59ff9ed9a972220c9ce8ae', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '02c6999478f3c1bba98afdde77a3d0423947ea4b', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '6192de09d6ee62b9a94f26d144edd0f31b9094fe', type: "identifier-camel" }, "Camel"), h("h2", { key: '031f9e449e3c161737d14f175b1c125bc7c42b23' }, "Input Alternatives"), h("smoothly-input", { key: '9d0ccf91ea643a35949fce4e127e4da41404d84c', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: 'b700bb685a07e1506639e01e2635a423b5082cd5', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '3e2556fb2f33499792dd69becf68a6042a7e4027', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '7020584ecc47e9e3ee55834f3340ae1a5fb31dd0', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'c32269531a2cce3ce8600884e33f477a804091a6', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '5807e5e4b0eafbf9a45fcd4612fadbdd2b1b1a84', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '6ad0ed7ca5fc6fbcadd643c956e83cf40b83c86d', placeholder: "test" }), h("smoothly-input-submit", { key: 'fefaf76c25fbca0e52c03b013db854215775278e', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'a21b1ac255ec749e48b8f3600f50aa60742065af' }, "Smoothly checkboxes"), h("div", { key: '0f174810638970840571e784396f5386f9a728a1', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '4d3919ee270974bee934702b45c0e43fbf391991', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'e1947db3f4e0cb37b86621b532d5123e0de24a12', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '5db66f0e920a5ce03c9bf0c4829b042eae9adbc0', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '93b2170be8dbbe239e75079a45fe0d4acf3ed40a', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'e8ec74b50cf2be6e30a37e787a61e904df1b9154', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '7e44d27a76d61736ec42a2e8d8531132c5ac86b2', name: "third-checkbox" }, "3rd")), h("h4", { key: '3751c4486172886d76699dd0b4c2685201ef2c6a' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '999bd3f7ebc3b66dad5dfcb419e3f89dc80efae0', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '0df5464e535813443495fc3ea18310878697ce8b', name: "checkmark-circle", slot: "start" }), h("label", { key: '0561365fd4133d9cc73f3abb2c50970074fbb1ca', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'fa9180e66a63c3804c9d93976fd427cb6416c0ff', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '0aa37e8ac6dbb5796ae4bbdaa6b04990f6e627f8', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '1fa790e6efe4c1a4c3a647ab75fa1bd8ff5cd1f2', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '6f6470d0341663a35e904ce3a26a25b0ab357838', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '8971a429e5e231b283864c2a50c9a4d8e5026d3d', name: "radioSecondInput" }, h("label", { key: 'fceed2bb3cd4e69e3f5478cee6f9c31682470da1', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '285d7046af2ebe57f66932d843f2db35f2927c83', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '990ce64efece7e1f27572bb1ac983c7d695ab4bf', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '6367bbe2e7e5f80ec66854ce8e1d59cafd7e6006', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'd5ba0827aac67b46b29d0c6cd9ffffcaf3f75fa6', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '77f0e308ff8a0632005246f0f3d7cd39fa4720f9', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '9a50b5807b38dd21431e0bcfd7a741ae5f1f7858', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'a026639b8abb9a20214d26ef4e745104aab9f3b5' }), h("smoothly-input-color-demo", { key: 'a1d742e35900ee52300d94461e848182a811687c' }), h("smoothly-input-price-demo", { key: '13548eae0e3e92ab25cbab2dba88e771990feb2f' }), h("smoothly-back-to-top", { key: '7dd86bfc6d190cb82949d74faa1b7e76fa6443a0' }))));
+    }
+    static get style() { return SmoothlyInputDemoStyle0; }
+}, [2, "smoothly-input-demo", {
+        "duration": [32],
+        "alphanumeric": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["smoothly-input-demo", "smoothly-back-to-top", "smoothly-button", "smoothly-button-confirm", "smoothly-calendar", "smoothly-display", "smoothly-display-json", "smoothly-display-json-object", "smoothly-display-json-primitive", "smoothly-display-json-record-key", "smoothly-form", "smoothly-icon", "smoothly-input", "smoothly-input-checkbox", "smoothly-input-clear", "smoothly-input-color", "smoothly-input-color-demo", "smoothly-input-date", "smoothly-input-date-range", "smoothly-input-demo-standard", "smoothly-input-file", "smoothly-input-month", "smoothly-input-price-demo", "smoothly-input-radio", "smoothly-input-radio-item", "smoothly-input-range", "smoothly-input-range-demo", "smoothly-input-reset", "smoothly-input-select", "smoothly-input-submit", "smoothly-item", "smoothly-spinner", "smoothly-toggle-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "smoothly-input-demo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SmoothlyInputDemo);
+            }
+            break;
+        case "smoothly-back-to-top":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$w();
+            }
+            break;
+        case "smoothly-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$v();
+            }
+            break;
+        case "smoothly-button-confirm":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$u();
+            }
+            break;
+        case "smoothly-calendar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$t();
+            }
+            break;
+        case "smoothly-display":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$s();
+            }
+            break;
+        case "smoothly-display-json":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "smoothly-display-json-object":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "smoothly-display-json-primitive":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "smoothly-display-json-record-key":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "smoothly-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "smoothly-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "smoothly-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "smoothly-input-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "smoothly-input-clear":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "smoothly-input-color":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "smoothly-input-color-demo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "smoothly-input-date":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "smoothly-input-date-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "smoothly-input-demo-standard":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "smoothly-input-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "smoothly-input-month":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "smoothly-input-price-demo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "smoothly-input-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "smoothly-input-radio-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "smoothly-input-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "smoothly-input-range-demo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "smoothly-input-reset":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "smoothly-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "smoothly-input-submit":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "smoothly-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "smoothly-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "smoothly-toggle-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SmoothlyInputDemo as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-63ac6b31.js.map

package/dist/components/{p-606ce249.js.map → p-63ac6b31.js.map}

@@ -1 +1 @@
-{"file":"p-606ce249.js","mappings":"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","names":["isoly.Date"],"sources":["src/components/input/demo/style.css?tag=smoothly-input-demo&encapsulation=scoped","src/components/input/demo/index.tsx"],"sourcesContent":[":host {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-top: 2em;\n\tmargin-bottom: 10rem;\n}\n\nsmoothly-input-demo-standard {\n\tmargin-bottom: 2rem;\n}\n\ndiv.inputs {\n\tmargin: auto;\n\twidth: 50%;\n}\n\ndiv.inputs>h2:not(:first-child) {\n\tpadding-top: 3em;\n\tmargin-top: 3em;\n\tborder-top: 1px solid black;\n}\n\n.checkbox-group {\n\tdisplay: flex;\n\tgap: 1.5em;\n\talign-items: center;\n\tbackground-color: rgb(var(--smoothly-input-background));\n}\n\n.select-div {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tgap: 1em;\n\tflex-wrap: wrap;\n}\n\n.select-div>smoothly-color>*,\n.select-div>* {\n\tflex-basis: 49%;\n}\n","import { Component, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemo {\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() alphanumeric: string = \"!@##\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-input-demo-standard />\n\t\t\t\t<div class=\"inputs\">\n\t\t\t\t\t<h2>Calendar</h2>\n\t\t\t\t\t<smoothly-input-date name=\"some-date\">Calendar</smoothly-input-date>\n\t\t\t\t\t<h2>Date Range</h2>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-01\"\n\t\t\t\t\t\tmax=\"2025-01-31\"></smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2024-12-30\">\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\t\tshowLabel={false}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\"--smoothly-input-border-radius\": \"0.5rem\",\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<h2>Date</h2>\n\t\t\t\t\t<smoothly-input-date>Date</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date showLabel={false} value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<h2>Select</h2>\n\t\t\t\t\t<div class=\"select-div\">\n\t\t\t\t\t\t<smoothly-input-select name=\"select-dessert\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select with clear button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">Cookie</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">Chocolate fondue</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple name=\"select-dessert-multiple\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select multiple with reset button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"ice cream\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"sponge cake\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cookie\">\n\t\t\t\t\t\t\t\tCookie\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"croissant\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"chocolate fondue\">\n\t\t\t\t\t\t\t\tChocolate fondue\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\"></smoothly-input-reset>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"spirit-animals\" looks=\"border\" mutable>\n\t\t\t\t\t\t\t<label slot=\"label\">Select or add new options</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"manatee\">Manatee</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cthulu\">\n\t\t\t\t\t\t\t\tCthulu\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"select-icon\" clearable={false} showSelected={false}>\n\t\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select ordered menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Alphabet ordered select</label>\n\t\t\t\t\t\t\t{Array.from({ length: 26 })\n\t\t\t\t\t\t\t\t.map((_, i) => String.fromCharCode(i + 65))\n\t\t\t\t\t\t\t\t.map(char => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={char} selected={char == \"H\"}>\n\t\t\t\t\t\t\t\t\t\t{char}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Month multiple select</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h2>Duration</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tplaceholder=\"hh:mm\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tplaceholder=\"-hh:mm\"\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Invalid text with warning icon and tooltip</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"alphanumeric\"\n\t\t\t\t\t\tinvalid={!/^[a-zA-Z0-9]+$/.test(this.alphanumeric)}\n\t\t\t\t\t\terrorMessage={\"Only alphanumeric allowed\"}\n\t\t\t\t\t\tvalue={this.alphanumeric}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.alphanumeric = e.detail.alphanumeric)}>\n\t\t\t\t\t\tAlphanumeric\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Identifiers</h2>\n\t\t\t\t\t<smoothly-input type=\"identifier-code\">Code</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-attribute\">Attribute</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-snake\">Snake</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-pascal\">Pascal</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-camel\">Camel</smoothly-input>\n\t\t\t\t\t<h2>Input Alternatives</h2>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tname=\"name.first\"\n\t\t\t\t\t\tplaceholder=\"Smith\"\n\t\t\t\t\t\tonSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input placeholder=\"test\"></smoothly-input>\n\t\t\t\t\t<smoothly-input-submit\n\t\t\t\t\t\tslot=\"submit\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonSubmit={(e: Event) => alert(e)}\n\t\t\t\t\t\tcolor=\"success\"></smoothly-input-submit>\n\t\t\t\t\t<h4>Smoothly checkboxes</h4>\n\t\t\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t\t\t<smoothly-input-checkbox disabled name=\"first-checkbox\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tFirst\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"second-checkbox\" checked>\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tsecond\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"third-checkbox\">3rd</smoothly-input-checkbox>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h4>Smoothly Radio Buttons</h4>\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t\t<label slot=\"label\">Clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-radio name=\"radioSecondInput\">\n\t\t\t\t\t\t<label slot=\"label\">Not clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"second\"}>Label 2</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fourth\"}>Label 4</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fifth\"}>Label 5</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"sixth\"}>Label 6</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-range-demo />\n\t\t\t\t\t<smoothly-input-color-demo />\n\t\t\t\t\t<smoothly-input-price-demo />\n\t\t\t\t\t<smoothly-back-to-top />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-63ac6b31.js","mappings":"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","names":["isoly.Date"],"sources":["src/components/input/demo/style.css?tag=smoothly-input-demo&encapsulation=scoped","src/components/input/demo/index.tsx"],"sourcesContent":[":host {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-top: 2em;\n\tmargin-bottom: 10rem;\n}\n\nsmoothly-input-demo-standard {\n\tmargin-bottom: 2rem;\n}\n\ndiv.inputs {\n\tmargin: auto;\n\twidth: 50%;\n}\n\ndiv.inputs>h2:not(:first-child) {\n\tpadding-top: 3em;\n\tmargin-top: 3em;\n\tborder-top: 1px solid black;\n}\n\n.checkbox-group {\n\tdisplay: flex;\n\tgap: 1.5em;\n\talign-items: center;\n\tbackground-color: rgb(var(--smoothly-input-background));\n}\n\n.select-div {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tgap: 1em;\n\tflex-wrap: wrap;\n}\n\n.select-div>smoothly-color>*,\n.select-div>* {\n\tflex-basis: 49%;\n}\n","import { Component, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemo {\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() alphanumeric: string = \"!@##\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-input-demo-standard />\n\t\t\t\t<div class=\"inputs\">\n\t\t\t\t\t<h2>Calendar</h2>\n\t\t\t\t\t<smoothly-input-date name=\"some-date\">Calendar</smoothly-input-date>\n\t\t\t\t\t<h2>Date Range</h2>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-01\"\n\t\t\t\t\t\tmax=\"2025-01-31\"></smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2024-12-30\">\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\t\tshowLabel={false}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\"--smoothly-input-border-radius\": \"0.5rem\",\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<h2>Date</h2>\n\t\t\t\t\t<smoothly-input-date>Date</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date showLabel={false} value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<h2>Select</h2>\n\t\t\t\t\t<div class=\"select-div\">\n\t\t\t\t\t\t<smoothly-input-select name=\"select-dessert\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select with clear button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">Cookie</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">Chocolate fondue</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple name=\"select-dessert-multiple\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select multiple with reset button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"ice cream\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"sponge cake\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cookie\">\n\t\t\t\t\t\t\t\tCookie\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"croissant\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"chocolate fondue\">\n\t\t\t\t\t\t\t\tChocolate fondue\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\"></smoothly-input-reset>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"spirit-animals\" looks=\"border\" mutable>\n\t\t\t\t\t\t\t<label slot=\"label\">Select or add new options</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"manatee\">Manatee</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cthulu\">\n\t\t\t\t\t\t\t\tCthulu\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"select-icon\" clearable={false} showSelected={false}>\n\t\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select ordered menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Alphabet ordered select</label>\n\t\t\t\t\t\t\t{Array.from({ length: 26 })\n\t\t\t\t\t\t\t\t.map((_, i) => String.fromCharCode(i + 65))\n\t\t\t\t\t\t\t\t.map(char => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={char} selected={char == \"H\"}>\n\t\t\t\t\t\t\t\t\t\t{char}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Month multiple select</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h2>Duration</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tplaceholder=\"hh:mm\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tplaceholder=\"-hh:mm\"\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Invalid text with warning icon and tooltip</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"alphanumeric\"\n\t\t\t\t\t\tinvalid={!/^[a-zA-Z0-9]+$/.test(this.alphanumeric)}\n\t\t\t\t\t\terrorMessage={\"Only alphanumeric allowed\"}\n\t\t\t\t\t\tvalue={this.alphanumeric}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.alphanumeric = e.detail.alphanumeric)}>\n\t\t\t\t\t\tAlphanumeric\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Identifiers</h2>\n\t\t\t\t\t<smoothly-input type=\"identifier-code\">Code</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-attribute\">Attribute</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-snake\">Snake</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-pascal\">Pascal</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-camel\">Camel</smoothly-input>\n\t\t\t\t\t<h2>Input Alternatives</h2>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tname=\"name.first\"\n\t\t\t\t\t\tplaceholder=\"Smith\"\n\t\t\t\t\t\tonSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input placeholder=\"test\"></smoothly-input>\n\t\t\t\t\t<smoothly-input-submit\n\t\t\t\t\t\tslot=\"submit\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonSubmit={(e: Event) => alert(e)}\n\t\t\t\t\t\tcolor=\"success\"></smoothly-input-submit>\n\t\t\t\t\t<h4>Smoothly checkboxes</h4>\n\t\t\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t\t\t<smoothly-input-checkbox disabled name=\"first-checkbox\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tFirst\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"second-checkbox\" checked>\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tsecond\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"third-checkbox\">3rd</smoothly-input-checkbox>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h4>Smoothly Radio Buttons</h4>\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t\t<label slot=\"label\">Clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-radio name=\"radioSecondInput\">\n\t\t\t\t\t\t<label slot=\"label\">Not clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"second\"}>Label 2</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fourth\"}>Label 4</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fifth\"}>Label 5</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"sixth\"}>Label 6</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-range-demo />\n\t\t\t\t\t<smoothly-input-color-demo />\n\t\t\t\t\t<smoothly-input-price-demo />\n\t\t\t\t\t<smoothly-back-to-top />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-9d011d36.js → p-67b8cf78.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f765921a.js';
-import { I as Input } from './p-08d0d254.js';
+import { I as Input } from './p-de7367c4.js';
 import { d as defineCustomElement$7 } from './p-4f80c811.js';
 import { d as defineCustomElement$6 } from './p-f770567b.js';
 import { d as defineCustomElement$5 } from './p-96acfe2c.js';
 import { d as defineCustomElement$4 } from './p-f46dd8e4.js';
 import { d as defineCustomElement$3 } from './p-4c6fe645.js';
-import { d as defineCustomElement$2 } from './p-4922697f.js';
-import { d as defineCustomElement$1 } from './p-2b19c666.js';
+import { d as defineCustomElement$2 } from './p-8e748704.js';
+import { d as defineCustomElement$1 } from './p-1cd836ca.js';
 
 const styleCss = ".sc-smoothly-input-range-h{--input-padding-side:.5rem;--input-value-padding-top:1.25rem;--input-value-padding-bottom:.25rem;--input-min-height:3rem;min-height:var(--input-min-height);box-sizing:border-box;border-radius:var(--smoothly-input-border-radius)}.sc-smoothly-input-range-h[looks=\"border\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-range-h{border:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-range-h{border:transparent solid 1px}.sc-smoothly-input-range-h[looks=\"line\"].sc-smoothly-input-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-range-h{border-bottom:rgb(var(--smoothly-input-border)) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-range-h{border-bottom:transparent solid 1px}[looks=\"grid\"].sc-smoothly-input-range-h{flex-grow:1;flex-basis:40%;box-shadow:0px 0px 0px 1px rgb(var(--smoothly-input-border));border:none}[looks=\"grid\"][readonly].sc-smoothly-input-range-h{box-shadow:0px 0px 0px 1px rgba(var(--smoothly-input-border-readonly))}[looks=\"transparent\"].sc-smoothly-input-range-h{border:none}[looks=\"transparent\"][readonly].sc-smoothly-input-range-h,[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"][readonly].sc-smoothly-input-range-h>input.sc-smoothly-input-range,[looks=\"transparent\"].sc-smoothly-input-range-h:not(:focus-within)>input.sc-smoothly-input-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-range-h:not([readonly]):focus-within{outline:1px solid rgb(var(--smoothly-input-border))}.sc-smoothly-input-range-h.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h .label.sc-smoothly-input-range{position:absolute;top:.6rem;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-range-h.floating-label.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.floating-label .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value.sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h.has-value .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[placeholder] .sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly].sc-smoothly-input-range-s>[slot=label],.sc-smoothly-input-range-h[readonly] .sc-smoothly-input-range-s>[slot=label],.has-value.sc-smoothly-input-range-h .label.sc-smoothly-input-range,[placeholder].sc-smoothly-input-range-h .label.sc-smoothly-input-range,[readonly].sc-smoothly-input-range-h .label.sc-smoothly-input-range,.sc-smoothly-input-range-h:not([readonly]):focus-within .label.float-on-focus.sc-smoothly-input-range{top:.2rem;transform:scale(0.8)}.sc-smoothly-input-range-h:not([show-label]):not(.show-label) .label.sc-smoothly-input-range{display:none}*.sc-smoothly-input-range{box-sizing:border-box}.sc-smoothly-input-range-h{position:relative;width:100%;justify-content:center;align-items:center;display:flex;background-color:rgb(var(--smoothly-input-background));box-sizing:border-box}.sc-smoothly-input-range-h>div.sc-smoothly-input-range:not([slot]){position:relative;display:flex;justify-content:center;align-items:center;width:100%;padding-right:var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{width:12em;--input-min-height:calc(3rem - 2px)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range:focus{outline:none;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{white-space:nowrap}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range{padding:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range{text-align:center;margin-left:var(--input-padding-side);border:none;box-sizing:border-box;width:5em;order:3;margin:0}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-display.sc-smoothly-input-range,.sc-smoothly-input-range-h:not(.output-side-right)>div.sc-smoothly-input-range>label.sc-smoothly-input-range{display:none}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range input.sc-smoothly-input-range{padding:0;text-align:center}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>smoothly-input.sc-smoothly-input-range label.sc-smoothly-input-range{width:100%}.output-side-right.sc-smoothly-input-range-h>div.sc-smoothly-input-range>label.sc-smoothly-input-range{position:static;font-size:inherit;text-align:center;margin:0 var(--input-padding-side)}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range{-webkit-appearance:none;width:100%;background:transparent;height:1.5em;padding:0 .4em}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb{-webkit-appearance:none;height:0.8em;width:0.8em;border-radius:100%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;margin-top:-.25em;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb{height:0.8em;width:0.8em;border-radius:100%;background-color:rgb(var(--smoothly-primary-color));cursor:pointer;border:none}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{width:100%;height:.3em;cursor:pointer;background-color:rgb(var(--smoothly-primary-color));border-radius:20px}.sc-smoothly-input-range-h:not([value])>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track{background-color:rgb(var(--smoothly-primary-tint))}.sc-smoothly-input-range-h:not([value])>dov.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track{background-color:rgb(var(--smoothly-primary-tint))}[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-thumb,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-webkit-slider-runnable-track,[readonly].sc-smoothly-input-range-h>div.sc-smoothly-input-range>input[type=range].sc-smoothly-input-range::-moz-range-track,[readonly].sc-smoothly-input-range-h,[readonly].sc-smoothly-input-range-h *.sc-smoothly-input-range{cursor:not-allowed}input.sc-smoothly-input-range::-webkit-outer-spin-button,input.sc-smoothly-input-range::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}";
 const SmoothlyInputRangeStyle0 = styleCss;
@@ -107,17 +107,17 @@ const SmoothlyInputRange = proxyCustomElement(class SmoothlyInputRange extends H
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '90232044ed7c86886c63e0f3a3247cd9615416bb', class: {
+        return (h(Host, { key: 'f30307fb1bb01d0a1cbe061b729895d05e4d0a71', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '7504c2e4c61bfa725571afed2f9081f4b86e8fb8', name: "start" }), h("div", { key: 'd62e225b32966530fb7ec9c82c39520ac3bc1238' }, h("label", { key: '5547ce5921cb8fda0a25a32c132c639c5eba10b9', htmlFor: this.name }, this.label), h("smoothly-input", { key: '08d86ea1cb133fede356dc71d4342fe6802f738e', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, h("slot", { key: 'ab94b178299760c8f203d1e1e06d3122db81ffbf', name: "start" }), h("div", { key: '66717b13b3025f6645bf9f58f4d3255787fcf162' }, h("label", { key: '1a8458d9a4fb5b17d3d05794d6b536de0cadd4e9', htmlFor: this.name }, this.label), h("smoothly-input", { key: '9e495879fc7c32a01ce945cbc9902a94be1e5910', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), h("smoothly-display", { key: '7ee11f59b572f7ad3bc943154981ae582ea18bec', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '4c96c9a690942a98638725062656861f331d66d1', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), h("smoothly-display", { key: 'facaa91f246feae01d65b14a2169a65130329686', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'dfa426ae80bfd8a52c03e0b872747655e8d04d77', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '85d93077d0dfed541c2979132616981d1f5d231c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'c671e7d73d701eab03855ec487bdcb967df01cc4', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '8a36e5c707c72ede4b326b9b6c17236235a0770c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '47baf47817df9f2c93e4c65413bb2342b10a96e5', name: "end" })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -202,4 +202,4 @@ defineCustomElement();
 
 export { SmoothlyInputRange as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-9d011d36.js.map
+//# sourceMappingURL=p-67b8cf78.js.map

package/dist/components/{p-9d011d36.js.map → p-67b8cf78.js.map}

@@ -1 +1 @@
-{"file":"p-9d011d36.js","mappings":"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","names":[],"sources":["src/components/input/range/style.css?tag=smoothly-input-range&encapsulation=scoped","src/components/input/range/index.tsx"],"sourcesContent":["@import \"../shared.css\";\n\n* {\n\tbox-sizing: border-box;\n}\n:host {\n\tposition: relative;\n\twidth: 100%;\n\tjustify-content: center;\n\talign-items: center;\n\tdisplay: flex;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tbox-sizing: border-box;\n}\n:host>div:not([slot]) {\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 100%;\n\tpadding-right: var(--input-padding-side);\n}\n:host>div>smoothly-input {\n\twidth: 12em;\n\t--input-min-height: calc(3rem - 2px);\n}\n:host>div>smoothly-input:focus {\n\toutline: none;\n\tborder: none\n}\n:host>div>smoothly-input label {\n\twhite-space: nowrap;\n}\n:host.output-side-right>div {\n\tpadding: 0;\n}\n:host.output-side-right>div>smoothly-input {\n\ttext-align: center;\n\tmargin-left: var(--input-padding-side);\n\tborder: none;\n\tbox-sizing: border-box;\n\twidth: 5em;\n\torder: 3;\n\tmargin: 0;\n}\n:host.output-side-right>div>smoothly-display,\n:host:not(.output-side-right)>div>label {\n\tdisplay: none;\n}\n:host.output-side-right>div>smoothly-input input {\n\tpadding: 0;\n\ttext-align: center;\n}\n:host.output-side-right>div>smoothly-input label {\n\twidth: 100%;\n}\n:host.output-side-right>div>label {\n\tposition: static;\n\tfont-size: inherit;\n\ttext-align: center;\n\tmargin: 0 var(--input-padding-side);\n}\n\n/*--------------------Reset browserspecific CSS------------------ */\n:host>div>input[type=range] {\n\t-webkit-appearance: none;\n\t/* Hides the slider so that custom slider can be made */\n\twidth: 100%;\n\t/* Specific width is required for Firefox. */\n\tbackground: transparent;\n\t/* Otherwise white in Chrome */\n\theight: 1.5em;\n\tpadding: 0 .4em;\n}\n\n/*--------------------THUMB------------------ */\n/* WebKit/Blink */\n:host>div>input[type=range]::-webkit-slider-thumb {\n\t-webkit-appearance: none;\n\theight: 0.8em;\n\twidth: 0.8em;\n\tborder-radius: 100%;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tcursor: pointer;\n\tmargin-top: -.25em;\n\tborder: none;\n\t/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */\n}\n\n/* Firefox */\n:host>div>input[type=range]::-moz-range-thumb {\n\theight: 0.8em;\n\twidth: 0.8em;\n\tborder-radius: 100%;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tcursor: pointer;\n\tborder: none;\n}\n\n/*--------------------SLIDER TRACK------------------ */\n:host>div>input[type=range]::-webkit-slider-runnable-track {\n\theight: .3em;\n\tcursor: pointer;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tborder-radius: 20px;\n}\n\n:host>div>input[type=range]::-moz-range-track {\n\twidth: 100%;\n\theight: .3em;\n\tcursor: pointer;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tborder-radius: 20px;\n}\n\n:host(:not([value]))>div>input[type=range]::-webkit-slider-runnable-track {\n\tbackground-color: rgb(var(--smoothly-primary-tint));\n}\n\n:host(:not([value]))>dov>input[type=range]::-moz-range-track {\n\tbackground-color: rgb(var(--smoothly-primary-tint));\n}\n\n:host[readonly]>div>input[type=range]::-webkit-slider-thumb,\n:host[readonly]>div>input[type=range]::-moz-range-thumb,\n:host[readonly]>div>input[type=range]::-webkit-slider-runnable-track,\n:host[readonly]>div>input[type=range]::-moz-range-track,\n:host[readonly],\n:host[readonly] * {\n\tcursor: not-allowed\n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n","import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { tidily } from \"tidily\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRange implements Input, Clearable, Editable, ComponentWillLoad {\n\tparent: Editable | undefined\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\tprivate input?: HTMLSmoothlyInputElement\n\tprivate initialValue: number | undefined = undefined\n\t@Element() element: HTMLSmoothlyInputRangeElement\n\t@Prop({ mutable: true }) value: number | undefined = undefined\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ mutable: true }) defined = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() type: Extract<tidily.Type, \"text\" | \"percent\"> = \"text\"\n\t@Prop() min = 0\n\t@Prop() max = 100\n\t@Prop({ reflect: true }) name = \"range\"\n\t@Prop() step?: number\n\t@Prop() outputSide: \"right\" | \"left\" = \"left\"\n\t@Prop() label: string\n\t@State() showInput = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = this.looks ?? looks), (this.color = color)))\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.value && (this.initialValue = this.value)\n\t\tthis.valueChanged()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: Editable) => void>) {\n\t\tif (event.target != this.element) {\n\t\t\tevent.stopPropagation()\n\t\t\tevent.detail(this)\n\t\t}\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\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 getValue(): Promise<number | undefined> {\n\t\treturn this.value\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\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 edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.valueChanged()\n\t}\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tconst decimals = !this.step ? undefined : this.step.toString().split(\".\")[1]?.length ?? 0\n\t\tthis.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals)\n\t\tthis.changed = this.initialValue !== this.value\n\t\tthis.defined = typeof this.value === \"number\"\n\t\tthis.listener.changed?.(this)\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t}\n\tsetValue(value: number | undefined): void {\n\t\tif (value == undefined)\n\t\t\tthis.value = undefined\n\t\telse if (value < this.min)\n\t\t\tthis.value = this.min\n\t\telse if (value > this.max)\n\t\t\tthis.value = this.max\n\t\telse\n\t\t\tthis.value = value\n\t\tthis.input && (this.input.value = this.type == \"text\" ? this.value?.toString() : this.value)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t\"output-side-right\": this.outputSide === \"right\",\n\t\t\t\t\t\"show-label\": this.outputSide === \"left\" && !!this.label,\n\t\t\t\t}}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label htmlFor={this.name}>{this.label}</label>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tref={e => (this.input = e)}\n\t\t\t\t\t\tlooks={undefined}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tshowLabel={this.outputSide === \"left\" && !!this.label}\n\t\t\t\t\t\ttype={this.type}\n\t\t\t\t\t\tonSmoothlyInputLoad={async e => (\n\t\t\t\t\t\t\te.stopPropagation(),\n\t\t\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={this.type == \"percent\" ? this.value : this.value?.toString()}\n\t\t\t\t\t\tplaceholder={this.outputSide === \"right\" ? \"-\" : undefined}\n\t\t\t\t\t\treadonly={this.readonly}>\n\t\t\t\t\t\t{this.label}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.min * 100 : this.min).toString()}></smoothly-display>\n\t\t\t\t\t<input\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tpart=\"range\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tstep={this.step ?? \"any\"}\n\t\t\t\t\t\tdisabled={this.readonly}\n\t\t\t\t\t\tonInput={event => {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\tthis.setValue((event.target as HTMLInputElement).valueAsNumber)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={this.value ?? this.min}\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.max * 100 : this.max).toString()}></smoothly-display>\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"],"version":3}
+{"file":"p-67b8cf78.js","mappings":"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","names":[],"sources":["src/components/input/range/style.css?tag=smoothly-input-range&encapsulation=scoped","src/components/input/range/index.tsx"],"sourcesContent":["@import \"../shared.css\";\n\n* {\n\tbox-sizing: border-box;\n}\n:host {\n\tposition: relative;\n\twidth: 100%;\n\tjustify-content: center;\n\talign-items: center;\n\tdisplay: flex;\n\tbackground-color: rgb(var(--smoothly-input-background));\n\tbox-sizing: border-box;\n}\n:host>div:not([slot]) {\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 100%;\n\tpadding-right: var(--input-padding-side);\n}\n:host>div>smoothly-input {\n\twidth: 12em;\n\t--input-min-height: calc(3rem - 2px);\n}\n:host>div>smoothly-input:focus {\n\toutline: none;\n\tborder: none\n}\n:host>div>smoothly-input label {\n\twhite-space: nowrap;\n}\n:host.output-side-right>div {\n\tpadding: 0;\n}\n:host.output-side-right>div>smoothly-input {\n\ttext-align: center;\n\tmargin-left: var(--input-padding-side);\n\tborder: none;\n\tbox-sizing: border-box;\n\twidth: 5em;\n\torder: 3;\n\tmargin: 0;\n}\n:host.output-side-right>div>smoothly-display,\n:host:not(.output-side-right)>div>label {\n\tdisplay: none;\n}\n:host.output-side-right>div>smoothly-input input {\n\tpadding: 0;\n\ttext-align: center;\n}\n:host.output-side-right>div>smoothly-input label {\n\twidth: 100%;\n}\n:host.output-side-right>div>label {\n\tposition: static;\n\tfont-size: inherit;\n\ttext-align: center;\n\tmargin: 0 var(--input-padding-side);\n}\n\n/*--------------------Reset browserspecific CSS------------------ */\n:host>div>input[type=range] {\n\t-webkit-appearance: none;\n\t/* Hides the slider so that custom slider can be made */\n\twidth: 100%;\n\t/* Specific width is required for Firefox. */\n\tbackground: transparent;\n\t/* Otherwise white in Chrome */\n\theight: 1.5em;\n\tpadding: 0 .4em;\n}\n\n/*--------------------THUMB------------------ */\n/* WebKit/Blink */\n:host>div>input[type=range]::-webkit-slider-thumb {\n\t-webkit-appearance: none;\n\theight: 0.8em;\n\twidth: 0.8em;\n\tborder-radius: 100%;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tcursor: pointer;\n\tmargin-top: -.25em;\n\tborder: none;\n\t/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */\n}\n\n/* Firefox */\n:host>div>input[type=range]::-moz-range-thumb {\n\theight: 0.8em;\n\twidth: 0.8em;\n\tborder-radius: 100%;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tcursor: pointer;\n\tborder: none;\n}\n\n/*--------------------SLIDER TRACK------------------ */\n:host>div>input[type=range]::-webkit-slider-runnable-track {\n\theight: .3em;\n\tcursor: pointer;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tborder-radius: 20px;\n}\n\n:host>div>input[type=range]::-moz-range-track {\n\twidth: 100%;\n\theight: .3em;\n\tcursor: pointer;\n\tbackground-color: rgb(var(--smoothly-primary-color));\n\tborder-radius: 20px;\n}\n\n:host(:not([value]))>div>input[type=range]::-webkit-slider-runnable-track {\n\tbackground-color: rgb(var(--smoothly-primary-tint));\n}\n\n:host(:not([value]))>dov>input[type=range]::-moz-range-track {\n\tbackground-color: rgb(var(--smoothly-primary-tint));\n}\n\n:host[readonly]>div>input[type=range]::-webkit-slider-thumb,\n:host[readonly]>div>input[type=range]::-moz-range-thumb,\n:host[readonly]>div>input[type=range]::-webkit-slider-runnable-track,\n:host[readonly]>div>input[type=range]::-moz-range-track,\n:host[readonly],\n:host[readonly] * {\n\tcursor: not-allowed\n}\n\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n","import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { tidily } from \"tidily\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRange implements Input, Clearable, Editable, ComponentWillLoad {\n\tparent: Editable | undefined\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\tprivate input?: HTMLSmoothlyInputElement\n\tprivate initialValue: number | undefined = undefined\n\t@Element() element: HTMLSmoothlyInputRangeElement\n\t@Prop({ mutable: true }) value: number | undefined = undefined\n\t@Prop({ reflect: true, mutable: true }) looks?: Looks\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ mutable: true }) defined = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() type: Extract<tidily.Type, \"text\" | \"percent\"> = \"text\"\n\t@Prop() min = 0\n\t@Prop() max = 100\n\t@Prop({ reflect: true }) name = \"range\"\n\t@Prop() step?: number\n\t@Prop() outputSide: \"right\" | \"left\" = \"left\"\n\t@Prop() label: string\n\t@State() showInput = false\n\t@Event() smoothlyInputLooks: EventEmitter<(looks?: Looks, color?: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = this.looks ?? looks), (this.color = color)))\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\tthis.smoothlyInputLoad.emit(parent => (this.parent = parent))\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.value && (this.initialValue = this.value)\n\t\tthis.valueChanged()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: Editable) => void>) {\n\t\tif (event.target != this.element) {\n\t\t\tevent.stopPropagation()\n\t\t\tevent.detail(this)\n\t\t}\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\tasync disconnectedCallback() {\n\t\tif (!this.element.isConnected)\n\t\t\tawait this.unregister()\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 getValue(): Promise<number | undefined> {\n\t\treturn this.value\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\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 edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.valueChanged()\n\t}\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tconst decimals = !this.step ? undefined : this.step.toString().split(\".\")[1]?.length ?? 0\n\t\tthis.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals)\n\t\tthis.changed = this.initialValue !== this.value\n\t\tthis.defined = typeof this.value === \"number\"\n\t\tthis.listener.changed?.(this)\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t}\n\tsetValue(value: number | undefined): void {\n\t\tif (value == undefined)\n\t\t\tthis.value = undefined\n\t\telse if (value < this.min)\n\t\t\tthis.value = this.min\n\t\telse if (value > this.max)\n\t\t\tthis.value = this.max\n\t\telse\n\t\t\tthis.value = value\n\t\tthis.input && (this.input.value = this.type == \"text\" ? this.value?.toString() : this.value)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t\"output-side-right\": this.outputSide === \"right\",\n\t\t\t\t\t\"show-label\": this.outputSide === \"left\" && !!this.label,\n\t\t\t\t}}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label htmlFor={this.name}>{this.label}</label>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tref={e => (this.input = e)}\n\t\t\t\t\t\tlooks={undefined}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tshowLabel={this.outputSide === \"left\" && !!this.label}\n\t\t\t\t\t\ttype={this.type}\n\t\t\t\t\t\tonSmoothlyInputLoad={async e => (\n\t\t\t\t\t\t\te.stopPropagation(),\n\t\t\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}\n\t\t\t\t\t\tonSmoothlyInput={async e => {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tthis.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={this.type == \"percent\" ? this.value : this.value?.toString()}\n\t\t\t\t\t\tplaceholder={this.outputSide === \"right\" ? \"-\" : undefined}\n\t\t\t\t\t\treadonly={this.readonly}>\n\t\t\t\t\t\t{this.label}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.min * 100 : this.min).toString()}></smoothly-display>\n\t\t\t\t\t<input\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tpart=\"range\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tstep={this.step ?? \"any\"}\n\t\t\t\t\t\tdisabled={this.readonly}\n\t\t\t\t\t\tonInput={event => {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\tthis.setValue((event.target as HTMLInputElement).valueAsNumber)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={this.value ?? this.min}\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-display label={(this.type == \"percent\" ? this.max * 100 : this.max).toString()}></smoothly-display>\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"],"version":3}

package/dist/components/{p-d51e9e17.js → p-6b7f1394.js}

@@ -4,18 +4,18 @@ import { d as defineCustomElement$g } from './p-f770567b.js';
 import { d as defineCustomElement$f } from './p-96acfe2c.js';
 import { d as defineCustomElement$e } from './p-f46dd8e4.js';
 import { d as defineCustomElement$d } from './p-4c6fe645.js';
-import { d as defineCustomElement$c } from './p-08d0d254.js';
-import { d as defineCustomElement$b } from './p-4922697f.js';
-import { d as defineCustomElement$a } from './p-2b19c666.js';
-import { d as defineCustomElement$9 } from './p-c77944e7.js';
-import { d as defineCustomElement$8 } from './p-92adf709.js';
-import { d as defineCustomElement$7 } from './p-72b742f3.js';
-import { d as defineCustomElement$6 } from './p-43651317.js';
-import { d as defineCustomElement$5 } from './p-d532422c.js';
-import { d as defineCustomElement$4 } from './p-2951a47f.js';
-import { d as defineCustomElement$3 } from './p-681bfb09.js';
-import { d as defineCustomElement$2 } from './p-90e9aa1f.js';
-import { d as defineCustomElement$1 } from './p-969f9875.js';
+import { d as defineCustomElement$c } from './p-de7367c4.js';
+import { d as defineCustomElement$b } from './p-8e748704.js';
+import { d as defineCustomElement$a } from './p-1cd836ca.js';
+import { d as defineCustomElement$9 } from './p-62c1780b.js';
+import { d as defineCustomElement$8 } from './p-448a256b.js';
+import { d as defineCustomElement$7 } from './p-d51abfe0.js';
+import { d as defineCustomElement$6 } from './p-5bcf58c9.js';
+import { d as defineCustomElement$5 } from './p-78e763a5.js';
+import { d as defineCustomElement$4 } from './p-5501db91.js';
+import { d as defineCustomElement$3 } from './p-562db6b2.js';
+import { d as defineCustomElement$2 } from './p-0d10cb58.js';
+import { d as defineCustomElement$1 } from './p-7e8da083.js';
 
 const data = [
     {
@@ -55,7 +55,7 @@ const SmoothlyTableTesting = proxyCustomElement(class SmoothlyTableTesting exten
         this.counter = 0;
     }
     render() {
-        return (h(Host, { key: '19325eb2444ed608c0e080d3fa2d05632d5b01d5' }, h("smoothly-table", { key: '84b5fc3a45ac4f5fe56deb66edbfe381b72dc905', color: "dark" }, h("smoothly-table-row", { key: '389c265a2ee60633f7967170922d1092f90c4e24' }, h("smoothly-table-header", { key: '4d7ea68b2fe5216e1cfb64ba8bf6f8869c0416df' }, "Type"), h("smoothly-table-header", { key: '9c85bb77bf35c744f4f22943616c1ca041fb4341' }, "Name"), h("smoothly-table-header", { key: '111bafb16e97d7e21f3672b0eab58d00d46f1e09' }, "Age")), data.map(animal => (h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-cell", null, animal.name), h("smoothly-table-cell", null, animal.age), h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (h("smoothly-table-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-expandable-cell", null, animal.name, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-submit", { slot: "submit" }, "Submit!"))), h("smoothly-table-expandable-cell", null, animal.age, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!")))))), h("smoothly-table-footer", { key: '5c635161e1051765ca304cde3b91ed2c235bb773' }, h("td", { key: '12728755d5bd9d560ed68f1cd5a7452f0b8a55af', colSpan: 2 }, h("div", { key: '1f160cf8459caaca8511c1ad7b1fb6244f11908c', class: "footer" }, "Currently viewing content from:", h("smoothly-display", { key: '0b5d373d788d1d6e05ebb5ea9f5ef9038219cf4f', type: "date", value: "2023-10-12" }))), h("smoothly-table-header", { key: 'a1d3f62994b9c015c7fddff0208c88339d25f4f6' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+        return (h(Host, { key: 'd3b16518ab101658dbe4735463079da729849dca' }, h("smoothly-table", { key: 'da39552f4c905f1336eb83b257759e76f0673650', color: "dark" }, h("smoothly-table-row", { key: '529154f440ac887b81890460ac2eabef8e9c6f3e' }, h("smoothly-table-header", { key: 'dd4d3f80169ec1449435ff706400404ca6079e4a' }, "Type"), h("smoothly-table-header", { key: '690683f0d2979eceb25e6e01567eebc605d1a365' }, "Name"), h("smoothly-table-header", { key: '20d8e456c99c639110a20b926d6e8e34d3ab292f' }, "Age")), data.map(animal => (h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-cell", null, animal.name), h("smoothly-table-cell", null, animal.age), h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (h("smoothly-table-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-expandable-cell", null, animal.name, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-submit", { slot: "submit" }, "Submit!"))), h("smoothly-table-expandable-cell", null, animal.age, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!")))))), h("smoothly-table-footer", { key: '3ca1cb2b675c155bf437ee324971fa658496515b' }, h("td", { key: 'a459d5a674c2279123ecefb75d4b4127a3446501', colSpan: 2 }, h("div", { key: '15b23a1a7e89a8ca6f012d7b61cc9661200a527b', class: "footer" }, "Currently viewing content from:", h("smoothly-display", { key: 'ae7a201456fbc2e88d32bd2f09456ffcd4c425c5', type: "date", value: "2023-10-12" }))), h("smoothly-table-header", { key: 'b7b385235081a5497c32e1e774ce2de9006214ae' }, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
     }
     static get style() { return SmoothlyTableTestingStyle0; }
 }, [2, "smoothly-table-testing", {
@@ -163,4 +163,4 @@ defineCustomElement();
 
 export { SmoothlyTableTesting as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-d51e9e17.js.map
+//# sourceMappingURL=p-6b7f1394.js.map