{"version":3,"file":"switch-t8JmaVOi.js","sources":["../../src/atoms/switch.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement } from \"lit/decorators/custom-element.js\";\nimport { sharedStyles } from \"../styles/shared\";\nimport { property } from \"lit/decorators/property.js\";\nimport \"../atoms/progress-spinner\";\nimport \"../atoms/text\";\nimport { Size } from \"shared\";\nimport { live } from \"lit/directives/live.js\";\nimport { when } from \"lit/directives/when.js\";\n\n@customElement(\"bs-switch\")\nexport class BsSwitch extends LitElement {\n\tstatic get styles() {\n\t\treturn [\n\t\t\tsharedStyles,\n\t\t\tcss`\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\tuser-select: none;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\t-webkit-user-select: none;\n\t\t\t\t\t--_switch-width: var(--switch-width, 60px);\n\t\t\t\t\t--_switch-height: var(--switch-height, 34px);\n\t\t\t\t\t--_switch-slider-height: calc(var(--_switch-height) * 0.75);\n\t\t\t\t\t--_switch-slider-left-right-padding: calc((var(--_switch-height) - var(--_switch-slider-height)) / 2);\n\t\t\t\t}\n\n\t\t\t\t:host(:not([loading])) {\n\t\t\t\t\ttransition: 120ms ease-out transform;\n\t\t\t\t}\n\n\t\t\t\t:host([loading]) #label {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t}\n\n\t\t\t\t#label {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tgap: var(--space-s);\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\n\t\t\t\t#switch {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t\twidth: var(--_switch-width);\n\t\t\t\t\theight: var(--_switch-height);\n\t\t\t\t\ttransform: scale(1);\n\t\t\t\t}\n\n\t\t\t\t:host(:hover) #switch {\n\t\t\t\t\ttransform: scale(1.05);\n\t\t\t\t}\n\n\t\t\t\t:host([disabled]) {\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t}\n\n\t\t\t\t:host([size=\"tiny\"]) {\n\t\t\t\t\t--_switch-width: 35px;\n\t\t\t\t\t--_switch-height: 20px;\n\t\t\t\t}\n\n\t\t\t\t:host([size=\"small\"]) {\n\t\t\t\t\t--_switch-width: 52px;\n\t\t\t\t\t--_switch-height: 30px;\n\t\t\t\t}\n\n\t\t\t\t:host([size=\"large\"]) {\n\t\t\t\t\t--_switch-width: 88px;\n\t\t\t\t\t--_switch-height: 50px;\n\t\t\t\t}\n\n\t\t\t\t#input {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\twidth: 0;\n\t\t\t\t\theight: 0;\n\t\t\t\t}\n\n\t\t\t\t#slider {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\ttransition: 120ms ease-out background;\n\t\t\t\t\tborder-radius: 9999px;\n\t\t\t\t\tbackground: var(--switch-bg, var(--shade-normal));\n\t\t\t\t\tcolor: var(--switch-color, var(--background));\n\t\t\t\t}\n\n\t\t\t\t#slider:before {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\theight: var(--_switch-slider-height);\n\t\t\t\t\twidth: var(--_switch-slider-height);\n\t\t\t\t\ttop: 50%;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\tbackground-color: currentColor;\n\t\t\t\t\ttransition: 120ms ease-out transform;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\ttransform: translate(var(--_switch-slider-left-right-padding), -50%);\n\t\t\t\t}\n\n\t\t\t\t#input:checked + #slider {\n\t\t\t\t\tbackground: var(--switch-bg-checked, var(--success-normal));\n\t\t\t\t\tcolor: var(--switch-color-checked, var(--background));\n\t\t\t\t}\n\n\t\t\t\t#input:checked + #slider:before {\n\t\t\t\t\ttransform: translate(\n\t\t\t\t\t\tcalc(var(--_switch-width) - var(--_switch-slider-height) - var(--_switch-slider-left-right-padding)),\n\t\t\t\t\t\t-50%\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t#spinner {\n\t\t\t\t\t--progress-spinner-size: 16px;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 50%;\n\t\t\t\t\ttransform: translateY(-50%);\n\t\t\t\t\tright: 0;\n\t\t\t\t}\n\n\t\t\t\t.text {\n\t\t\t\t\tline-height: 1;\n\t\t\t\t}\n\t\t\t`\n\t\t];\n\t}\n\n\t@property({ type: String, reflect: true }) size: Size = \"medium\";\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) loading = false;\n\t@property({ type: String, attribute: \"after-text\" }) afterText: string | undefined;\n\t@property({ type: String, attribute: \"before-text\" }) beforeText: string | undefined;\n\n\tonCheckboxInput(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked ?? false;\n\t\tthis.dispatchEvent(new CustomEvent(\"update\", { detail: this.checked }));\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t${when(this.loading, () => html`<bs-progress-spinner id=\"spinner\"></bs-progress-spinner>`)}\n\t\t\t<label id=\"label\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t${when(\n\t\t\t\t\tthis.beforeText,\n\t\t\t\t\t() => html`<bs-text class=\"text\" ?label=\"${this.checked}\">${this.beforeText}</bs-text>`\n\t\t\t\t)}\n\t\t\t\t<div id=\"switch\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t?checked=\"${live(this.checked)}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t@input=\"${this.onCheckboxInput}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span id=\"slider\"></span>\n\t\t\t\t</div>\n\t\t\t\t${when(this.afterText, () => html`<bs-text class=\"text\" ?label=\"${!this.checked}\">${this.afterText}</bs-text>`)}\n\t\t\t\t<slot></slot>\n\t\t\t</label>\n\t\t`;\n\t}\n}\n"],"names":["BsSwitch","LitElement","sharedStyles","css","e","html","when","live","__decorateClass","property","customElement"],"mappings":"oVAWa,IAAAA,EAAN,cAAuBC,CAAW,CAAlC,aAAA,CAAA,MAAA,GAAA,SAAA,EA0HkD,KAAA,KAAA,SACF,KAAA,QAAA,GACC,KAAA,SAAA,GACD,KAAA,QAAA,EAAA,CA5HtD,WAAW,QAAS,CACZ,MAAA,CACNC,EACAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IAAA,CAoHF,CASA,gBAAgBC,EAAU,CACpB,KAAA,QAAWA,EAAE,OAA4B,SAAW,GACpD,KAAA,cAAc,IAAI,YAAY,SAAU,CAAE,OAAQ,KAAK,OAAS,CAAA,CAAC,CACvE,CAEA,QAAS,CACD,OAAAC;AAAAA,KACJC,EAAK,KAAK,QAAS,IAAMD,2DAA8D,CAAC;AAAA;AAAA;AAAA,MAGvFC,EACD,KAAK,WACL,IAAMD,kCAAqC,KAAK,OAAO,KAAK,KAAK,UAAU,YAAA,CAC3E;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKaE,EAAK,KAAK,OAAO,CAAC;AAAA,mBACjB,KAAK,QAAQ;AAAA,gBAChB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,MAI9BD,EAAK,KAAK,UAAW,IAAMD,kCAAqC,CAAC,KAAK,OAAO,KAAK,KAAK,SAAS,YAAY,CAAC;AAAA;AAAA;AAAA,GAIlH,CACD,EApC4CG,EAAA,CAA1CC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,CAAA,EA1H7BT,EA0H+B,UAAA,OAAA,CAAA,EACCQ,EAAA,CAA3CC,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAA,EA3H9BT,EA2HgC,UAAA,UAAA,CAAA,EACAQ,EAAA,CAA3CC,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAA,EA5H9BT,EA4HgC,UAAA,WAAA,CAAA,EACAQ,EAAA,CAA3CC,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAA,EA7H9BT,EA6HgC,UAAA,UAAA,CAAA,EACSQ,EAAA,CAApDC,EAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,CAAA,EA9HvCT,EA8HyC,UAAA,YAAA,CAAA,EACCQ,EAAA,CAArDC,EAAS,CAAE,KAAM,OAAQ,UAAW,cAAe,CAAA,EA/HxCT,EA+H0C,UAAA,aAAA,CAAA,EA/H1CA,EAANQ,EAAA,CADNE,EAAc,WAAW,CAAA,EACbV,CAAA"}