{"version":3,"sources":["webpack:///./src/components/ToggleButton.vue?eaf9","webpack:///src/components/ToggleButton.vue","webpack:///./src/components/ToggleButton.vue?c071","webpack:///./src/components/ToggleButton.vue?9af0","webpack:///./src/components/ToggleButton.vue?f13b"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","style","marginRight","noLabel","class","reverse","reverseLayout","attrs","type","domProps","checked","value","on","change","$event","onToggle","click","_e","innerHTML","_s","text","staticRenderFns","ToggleButtonvue_type_script_lang_js_","name","props","onToggleButton","default","activeColor","data","toggled","computed","cssProps","--active-color","methods","components_ToggleButtonvue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ToggleButton_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ToggleButton_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"4IAAA,IAAAA,EAAA,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,YAAA,gBAAAC,MAAA,CAAoCC,YAAAR,EAAAS,QAAA,WAA2C,CAAAL,EAAA,OAAYE,YAAA,UAAqB,CAAAF,EAAA,OAAYE,YAAA,iBAAAI,MAAA,CAAoCC,QAAAX,EAAAY,eAA2BL,MAAAP,EAAA,UAAsB,CAAAI,EAAA,SAAcS,MAAA,CAAOC,KAAA,YAAkBC,SAAA,CAAWC,QAAAhB,EAAAiB,OAAoBC,GAAA,CAAKC,OAAA,SAAAC,GAA0B,OAAApB,EAAAqB,eAAwBjB,EAAA,QAAaE,YAAA,eAAAI,MAAAV,EAAAiB,MAAA,aAAAC,GAAA,CAA8DI,MAAA,SAAAF,GAAyB,OAAApB,EAAAqB,eAAwBrB,EAAAS,QAA4JT,EAAAuB,KAA5JnB,EAAA,SAA6BE,YAAA,sBAAAS,SAAA,CAA4CS,UAAAxB,EAAAyB,GAAAzB,EAAA0B,OAA6BR,GAAA,CAAKI,MAAA,SAAAF,GAAyB,OAAApB,EAAAqB,sBACxrBM,EAAA,GCcAC,EAAA,CACAC,oBACAC,OACAC,wBACAL,YACAT,cACAL,eACAE,aACAkB,YAEAvB,gBACAwB,aACAnB,YACAkB,8BAGAE,gBACA,OACAC,aAGAC,UACAC,oBACA,OAAAC,iBAAArC,KAAAgC,eAGAM,SACAlB,oBACApB,KAAAkC,SAAAlC,KAAAkC,QACAlC,KAAA8B,oBC5CsVS,EAAA,0BCQtVC,EAAgBC,OAAAC,EAAA,KAAAD,CACdF,EACAzC,EACA4B,GACF,EACA,KACA,KACA,MAIeiB,EAAA,WAAAH,oECnBf,IAAAI,EAAAC,EAAA,QAAAC,EAAAD,EAAAE,EAAAH,GAAkhBE,EAAG","file":"js/lazy-view-components-ToggleButton.26135d48.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"toggle-button\",style:({marginRight: _vm.noLabel ? 0 : 12 + 'px'})},[_c('div',{staticClass:\"toggle\"},[_c('div',{staticClass:\"toggle-wrapper\",class:{reverse: _vm.reverseLayout},style:(_vm.cssProps)},[_c('input',{attrs:{\"type\":\"checkbox\"},domProps:{\"checked\":_vm.value},on:{\"change\":function($event){return _vm.onToggle()}}}),_c('span',{staticClass:\"slider round\",class:_vm.value ? 'checked':'',on:{\"click\":function($event){return _vm.onToggle()}}}),(!_vm.noLabel)?_c('label',{staticClass:\"toggle-button-label\",domProps:{\"innerHTML\":_vm._s(_vm.text)},on:{\"click\":function($event){return _vm.onToggle()}}}):_vm._e()])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"toggle-button\" :style=\"{marginRight: noLabel ? 0 : 12 + 'px'}\">\n\t\t<div class=\"toggle\">\n\t\t\t<div class=\"toggle-wrapper\" :class=\"{reverse: reverseLayout}\" :style=\"cssProps\">\n\t\t\t\t<input type=\"checkbox\" :checked=\"value\" @change=\"onToggle()\">\n\t\n\t\t\t\t<span @click=\"onToggle()\" class=\"slider round\" :class=\"value ? 'checked':''\"></span>\n\t\t\t\t<label v-if=\"!noLabel\" class=\"toggle-button-label\" @click=\"onToggle()\" v-html=\"text\"></label>\n\t\t\t\t<!-- <label @click=\"onToggle()\">{{text}}</label> -->\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tname: 'ToggleButton',\n\t\tprops: {\n            onToggleButton: Function,\n            text: String,\n\t\t\tvalue: Boolean,\n\t\t\treverseLayout: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: false\n\t\t\t},\n\t\t\tnoLabel: Boolean,\n\t\t\tactiveColor: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: \"var(--orange-web)\"\n\t\t\t}\n        },\n        data(){\n            return{\n                toggled: false\n            }\n        },\n\t\tcomputed:{\n\t\t\tcssProps(){\n\t\t\t\treturn {\"--active-color\": this.activeColor}\n\t\t\t}\n\t\t},\n        methods:{\n            onToggle(){\n                this.toggled = !this.toggled\n                this.onToggleButton()\n            }  \n        }\n\t}\n</script>\n\n<style lang=\"less\">\n\t.toggle-button{\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\t// padding: 10px 0;\n\t\t\t\n\n\t\t\t.toggle{\n\t\t\t\tposition: relative;\t\t\n\t\t\t\t.toggle-wrapper{\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\t// justify-content: center;\n\t\t\t\t\n\t\t\t\t}\n\t\t\t\t.reverse{\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row-reverse;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tgap: 12px;\n\t\t\t\t}\n\t\t\t\tlabel.toggle-button-label{\n\t\t\t\t\tmargin:0;\n\t\t\t\t\tpadding-left: 4px;\n\t\t\t\t\t// padding-top: 1px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 13px;\n\t\t\t\t}\n\t\t\t\tinput {\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\tpointer-events: none;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t.slider{\n\t\t\t\t\twidth: 24px;\n\t\t\t\t\theight: 14px;\n\t\t\t\t\tborder-radius: 1px;\n\t\t\t\t\tcolor: #fafafa;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tz-index: 99;\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\tbackground-color: rgba(176, 179, 176, 0.144);\n\t\t\t\t\t-webkit-transition: .4s;\n\t\t\t\t\ttransition: .4s;\n\t\t\t\t\tbox-shadow: 0 0 3px rgba(0, 0, 0, 0.178);;\n\t\t\t\t\t&:before {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\theight: 10px;\n\t\t\t\t\twidth: 10px;\n\t\t\t\t\tleft: 2px;\n\t\t\t\t\tbottom: 2px;\n\t\t\t\t\tborder-radius: 1px;\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t\t-webkit-transition: .4s;\n\t\t\t\t\ttransition: .4s;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tinput:checked + .slider {\n\t\t\t\t\tbackground-color: var(--active-color);\n\t\t\t\t}\n\t\t\t\tinput:focus + .slider {\n\t\t\t\t\tbox-shadow: 0 0 1px var(--active-color);\n\t\t\t\t}\n\t\t\t\t.checked {\n\t\t\t\t\tbackground-color: var(--active-color);\n\t\t\t\t\tbox-shadow: 0 0 1px var(--active-color);\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t&:before{\t\n\t\t\t\t\t\t-webkit-transform: translateX(10px);\n\t\t\t\t\t\t-ms-transform: translateX(10px);\n\t\t\t\t\t\ttransform: translateX(10px);\n\t\t\t\t\t\t}\n\t\t\t\t}\n\t\t\n\n\n\t\t\t\tinput:checked + .slider:before {\n\t\t\t\t-webkit-transform: translateX(10px);\n\t\t\t\t-ms-transform: translateX(10px);\n\t\t\t\ttransform: translateX(10px);\n\t\t\t\t}\n\n\t\t\t\t/* Rounded sliders */\n\t\t\t\t.slider.round {\n\t\t\t\t\tborder-radius: 34px;\n\t\t\t\t}\n\n\t\t\t\t.slider.round:before {\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n</style>\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleButton.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleButton.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ToggleButton.vue?vue&type=template&id=11f71745&\"\nimport script from \"./ToggleButton.vue?vue&type=script&lang=js&\"\nexport * from \"./ToggleButton.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ToggleButton.vue?vue&type=style&index=0&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleButton.vue?vue&type=style&index=0&lang=less&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleButton.vue?vue&type=style&index=0&lang=less&\""],"sourceRoot":""}