{"version":3,"file":"styles.css","mappings":"AA4FA,gBASA,qDACA,kDACA,4CACA,oDARA,eAFA,qBACA,cAFA,kBAIA,yCAQA,CAEA,gBAaA,wCAPA,oDACA,qCACA,kBAPA,sBAQA,eANA,YACA,SACA,UAKA,oDAEA,CAVA,UAkCA,CArBA,4BACA,YACA,CAEA,wBACA,+BACA,CAEA,wBACA,qCACA,gCACA,CAEA,8CACA,sCACA,CAEA,gCACA,oCACA,+BACA,CAGA,gBASA,UACA,0CACA,iBACA,qBACA,sBARA,YAFA,SAGA,UAEA,oBAPA,kBACA,QAKA,4BAHA,UAUA,CAEA,wCACA,SACA","sources":["webpack://@square/maker/./src/components/Checkbox/src/CheckboxControl.vue"],"sourcesContent":["<template>\n\t<div :class=\"$s.CheckboxContainer\">\n\t\t<input\n\t\t\tref=\"checkbox\"\n\t\t\tv-model=\"checkVal\"\n\t\t\t:value=\"value\"\n\t\t\ttype=\"checkbox\"\n\t\t\t:class=\"$s.Checkbox\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"$listeners\"\n\t\t>\n\t\t<svg :class=\"$s.Check\">\n\t\t\t<path d=\"M1 4L5.5 8.5L13 1\" />\n\t\t</svg>\n\t</div>\n</template>\n\n<script>\n/**\n * Checkbox control\n * @inheritAttrs input[type=\"checkbox\"]\n * @inheritListeners input[type=\"checkbox\"]\n */\nexport default {\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'checked',\n\t\tevent: 'checkbox:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Toggles checkbox checked state\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Value to return from v-model\n\t\t */\n\t\tvalue: {\n\t\t\ttype: undefined,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Toggles checkbox invalid state\n\t\t */\n\t\tinvalid: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Toggles checkbox disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcheckVal: {\n\t\t\tget() {\n\t\t\t\treturn this.checked;\n\t\t\t},\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('checkbox:update', newValue);\n\t\t\t},\n\t\t},\n\t},\n\n\twatch: {\n\t\tinvalid: 'setCustomValidity',\n\t},\n\n\tmounted() {\n\t\tthis.setCustomValidity();\n\t},\n\n\tmethods: {\n\t\t// sets element's internal :invalid flag\n\t\tsetCustomValidity() {\n\t\t\tthis.$refs.checkbox.setCustomValidity(this.invalid ? 'invalid' : '');\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.CheckboxContainer {\n\tposition: relative;\n\tdisplay: inline-block;\n\tline-height: 0;\n\tcursor: inherit;\n\tuser-select: none;\n\n\t/* these should later be pulled from\n\tthe ThemeProvider component */\n\t--color-border: $maker-color-neutral-20;\n\t--color-border-focus: $maker-color-body;\n\t--color-active: $maker-color-body;\n\t--color-error: $maker-color-error-fill;\n}\n\n.Checkbox {\n\tbox-sizing: border-box;\n\twidth: 20px;\n\theight: 20px;\n\tmargin: 0;\n\tpadding: 0;\n\tbackground-color: $maker-color-background;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: 4px;\n\tcursor: inherit;\n\ttransition:\n\t\tborder 0.2s ease,\n\t\tbackground-color 0.2s ease;\n\tappearance: none;\n\n\t&:not(:focus) {\n\t\toutline: none;\n\t}\n\n\t&:invalid {\n\t\tborder-color: var(--color-error);\n\t}\n\n\t&:checked {\n\t\tbackground-color: var(--color-active);\n\t\tborder-color: var(--color-active);\n\t}\n\n\t&:hover:not(:disabled, :invalid) {\n\t\tborder-color: var(--color-border-focus);\n\t}\n\n\t&:checked:invalid {\n\t\tbackground-color: var(--color-error);\n\t\tborder-color: var(--color-error);\n\t}\n}\n\n.Check {\n\tposition: absolute;\n\ttop: 5px;\n\tleft: 3px;\n\twidth: 14px;\n\theight: 14px;\n\topacity: 0;\n\ttransition: opacity 0.2s ease;\n\tpointer-events: none;\n\tfill: none;\n\tstroke: $maker-color-background;\n\tstroke-width: 2px;\n\tstroke-linecap: round;\n\tstroke-linejoin: round;\n}\n\n.Checkbox:checked + .Check {\n\topacity: 1;\n}\n</style>\n"],"names":[],"sourceRoot":""}