{"version":3,"sources":["webpack:///./src/components/ToggleComponent/ToggleComponent.vue?5d77","webpack:///src/components/ToggleComponent/ToggleComponent.vue","webpack:///./src/components/ToggleComponent/ToggleComponent.vue?754c","webpack:///./src/components/ToggleComponent/ToggleComponent.vue?4c62","webpack:///./src/components/ToggleComponent/ToggleComponent.vue?3139"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","switchValue","_v","_s","label1","label2","_b","directives","name","rawName","value","expression","attrs","domProps","Array","isArray","_i","on","$event","$$a","$$el","target","$$c","checked","$$v","$$i","concat","slice","changeValue","$attrs","staticRenderFns","props","default","type","data","computed","watch","methods","mounted","component"],"mappings":"gJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,MAAM,CAACE,YAAY,aAAaC,MAAOP,EAAIQ,YAA+B,mBAAjB,gBAAqC,CAACR,EAAIS,GAAG,IAAIT,EAAIU,GAAGV,EAAIW,QAAQ,OAAOP,EAAG,MAAM,CAACE,YAAY,aAAaF,EAAG,MAAM,CAACE,YAAY,aAAaC,MAAMP,EAAIQ,YAAc,eAAiB,oBAAoB,CAACR,EAAIS,GAAG,IAAIT,EAAIU,GAAGV,EAAIY,QAAQ,SAASR,EAAG,MAAM,CAACE,YAAY,8BAA8B,CAACF,EAAG,QAAQ,CAACE,YAAY,UAAU,CAACF,EAAG,QAAQJ,EAAIa,GAAG,CAACC,WAAW,CAAC,CAACC,KAAK,QAAQC,QAAQ,UAAUC,MAAOjB,EAAe,YAAEkB,WAAW,gBAAgBZ,YAAY,kBAAkBa,MAAM,CAAC,KAAO,YAAYC,SAAS,CAAC,QAAUC,MAAMC,QAAQtB,EAAIQ,aAAaR,EAAIuB,GAAGvB,EAAIQ,YAAY,OAAO,EAAGR,EAAe,aAAGwB,GAAG,CAAC,OAAS,CAAC,SAASC,GAAQ,IAAIC,EAAI1B,EAAIQ,YAAYmB,EAAKF,EAAOG,OAAOC,IAAIF,EAAKG,QAAuB,GAAGT,MAAMC,QAAQI,GAAK,CAAC,IAAIK,EAAI,KAAKC,EAAIhC,EAAIuB,GAAGG,EAAIK,GAAQJ,EAAKG,QAASE,EAAI,IAAIhC,EAAIQ,YAAYkB,EAAIO,OAAO,CAACF,KAAYC,GAAK,IAAIhC,EAAIQ,YAAYkB,EAAIQ,MAAM,EAAEF,GAAKC,OAAOP,EAAIQ,MAAMF,EAAI,UAAWhC,EAAIQ,YAAYqB,GAAM7B,EAAImC,eAAe,QAAQnC,EAAIoC,QAAO,IAAQhC,EAAG,MAAM,CAACE,YAAY,yBACxqC+B,EAAkB,GCyBP,GACftB,uBACAuB,OACA3B,QACA4B,iBACAC,aAEA5B,QACA2B,qBACAC,aAEAvB,UAEAwB,gBACA,OACAjC,iBAGAkC,YACAC,SACAC,SACAT,uBACA,4BAEA,iCAGAU,sBCrDwW,I,wBCQpWC,EAAY,eACd,EACA/C,EACAsC,GACA,EACA,KACA,WACA,MAIa,aAAAS,E,2CCnBf","file":"js/chunk-53948848.73f388a1.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"d-flex\"},[_c('div',{staticClass:\"label_font\",class:!_vm.switchValue ? 'active_label' : 'non_active_label'},[_vm._v(\" \"+_vm._s(_vm.label1)+\" \")]),_c('div',{staticClass:\"line_box\"}),_c('div',{staticClass:\"label_font\",class:_vm.switchValue ? 'active_label' : 'non_active_label'},[_vm._v(\" \"+_vm._s(_vm.label2)+\" \")])]),_c('div',{staticClass:\"d-flex justify-center pt-1\"},[_c('label',{staticClass:\"toggle\"},[_c('input',_vm._b({directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.switchValue),expression:\"switchValue\"}],staticClass:\"toggle-checkbox\",attrs:{\"type\":\"checkbox\"},domProps:{\"checked\":Array.isArray(_vm.switchValue)?_vm._i(_vm.switchValue,null)>-1:(_vm.switchValue)},on:{\"change\":[function($event){var $$a=_vm.switchValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.switchValue=$$a.concat([$$v]))}else{$$i>-1&&(_vm.switchValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.switchValue=$$c}},_vm.changeValue]}},'input',_vm.$attrs,false)),_c('div',{staticClass:\"toggle-switch\"})])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <div class=\"d-flex\">\n      <div :class=\"!switchValue ? 'active_label' : 'non_active_label'\" class=\"label_font\">\n        {{ label1 }}\n      </div>\n      <div class=\"line_box\"></div>\n      <div :class=\"switchValue ? 'active_label' : 'non_active_label'\" class=\"label_font\">\n        {{ label2 }}\n      </div>\n    </div>\n    <div class=\"d-flex justify-center pt-1\">\n      <label class=\"toggle\">\n        <input\n          class=\"toggle-checkbox\"\n          type=\"checkbox\"\n          v-bind=\"$attrs\"\n          v-model=\"switchValue\"\n          @change=\"changeValue\"\n        />\n        <div class=\"toggle-switch\"></div>\n      </label>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  name: \"ToggleComponent\",\n  props: {\n    label1: {\n      default: \"Public\",\n      type: String,\n    },\n    label2: {\n      default: \"All Trades\",\n      type: String,\n    },\n    value: {},\n  },\n  data() {\n    return {\n      switchValue: false,\n    };\n  },\n  computed: {},\n  watch: {},\n  methods: {\n    changeValue() {\n      this.value = this.switchValue;\n      //   console.log(this.value, \"value\");\n      this.$emit(\"input\", this.value);\n    },\n  },\n  mounted() {},\n};\n</script>\n<style scoped>\n.toggle {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.toggle-switch {\n  display: inline-block;\n  background: #2d8cff;\n  border-radius: 16px;\n  width: 55px;\n  height: 31px;\n  position: relative;\n  vertical-align: middle;\n  transition: background 0.25s;\n}\n.toggle-switch:before,\n.toggle-switch:after {\n  content: \"\";\n}\n.toggle-switch:before {\n  display: block;\n  background: linear-gradient(to bottom, #fff 0%, #eee 100%);\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  width: 24px;\n  height: 24px;\n  position: absolute;\n  top: 4px;\n  left: 4px;\n  transition: left 0.25s;\n}\n.toggle:hover .toggle-switch:before {\n  background: linear-gradient(to bottom, #fff 0%, #fff 100%);\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);\n}\n.toggle-checkbox:checked + .toggle-switch {\n  background: #2d8cff;\n}\n.toggle-checkbox:checked + .toggle-switch:before {\n  left: 30px;\n}\n\n.toggle-checkbox {\n  position: absolute;\n  visibility: hidden;\n}\n\n.toggle-label {\n  margin-left: 5px;\n  position: relative;\n  top: 2px;\n}\n.non_active_label {\n  display: flex;\n  padding: 4px 8px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e4e4;\n  background: #fff;\n  color: #656668;\n}\n.active_label {\n  display: flex;\n  padding: 4px 8px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e4e4;\n  background: #fff;\n  color: #2d8cff;\n}\n.label_font {\n  min-width: 80px;\n  font-family: Avenir;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 800;\n  line-height: normal;\n}\n.line_box {\n  width: 1px;\n  height: 16px;\n  border-radius: 10px;\n  background: #a7a7a7;\n  margin: 5px;\n}\n@media all and (max-width: 600px) {\n  .label_font {\n    min-width: 70px;\n    font-family: Avenir;\n    font-size: 10px;\n    font-style: normal;\n    font-weight: 800;\n    line-height: normal;\n  }\n  .toggle-switch {\n    display: inline-block;\n    background: #2d8cff;\n    border-radius: 16px;\n    width: 40px;\n    height: 24px;\n    position: relative;\n    vertical-align: middle;\n    transition: background 0.25s;\n  }\n  .toggle-switch:before {\n    display: block;\n    background: linear-gradient(to bottom, #fff 0%, #eee 100%);\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n    width: 16px;\n    height: 16px;\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    transition: left 0.25s;\n  }\n  .toggle-checkbox:checked + .toggle-switch:before {\n    left: 20px;\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleComponent.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleComponent.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ToggleComponent.vue?vue&type=template&id=afffef1c&scoped=true&\"\nimport script from \"./ToggleComponent.vue?vue&type=script&lang=js&\"\nexport * from \"./ToggleComponent.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ToggleComponent.vue?vue&type=style&index=0&id=afffef1c&scoped=true&lang=css&\"\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  \"afffef1c\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToggleComponent.vue?vue&type=style&index=0&id=afffef1c&scoped=true&lang=css&\""],"sourceRoot":""}