{"version":3,"sources":["webpack:///./src/components/common/CustomToggle.vue?3395","webpack:///src/components/common/CustomToggle.vue","webpack:///./src/components/common/CustomToggle.vue?e3a7","webpack:///./src/components/common/CustomToggle.vue","webpack:///./src/assets/images/icons/ic_question_mark_black_filled.svg","webpack:///./src/components/common/CustomToggle.vue?c66e"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_s","label","attrs","on","toggleTooltip","hoverTooltip","blurTooltip","_e","ref","tooltip","class","checkReadonly","error","toggleValue","$event","handleChooseOption","staticRenderFns","name","data","isMobile","model","prop","event","props","type","String","default","Boolean","infoTooltip","computed","authenticateData","listed","readonlyMode","mobileMediaQuery","window","matchMedia","haveTooltip","Object","keys","length","methods","$emit","val","e","preventDefault","stopPropagation","$refs","floatLabelTooltip","style","visibility","mounted","addListener","matches","component","module","exports"],"mappings":"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","file":"js/chunk-0bf6b1f3.0a790c68.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('h6',{staticClass:\"font-weight-bold fw-400 toggle-label\"},[_vm._v(\" \"+_vm._s(_vm.label)+\" \"),_c('span',[(_vm.infoTooltip)?_c('img',{staticClass:\"info-mark\",attrs:{\"src\":require(\"@/assets/images/icons/ic_question_mark_black_filled.svg\"),\"alt\":\"info-mark\"},on:{\"click\":_vm.toggleTooltip,\"mouseenter\":_vm.hoverTooltip,\"mouseleave\":_vm.blurTooltip}}):_vm._e()])]),_c('div',{ref:\"floatLabelTooltip\",staticClass:\"float-label-finance-tooltip shadow-lg font-weight-thin fs-12\"},[_c('p',{staticClass:\"mb-0\"},[_vm._v(_vm._s(_vm.tooltip))])]),_c('div',{staticClass:\"answer-group d-flex ml-3 mb-3\",class:[(\"\" + (_vm.checkReadonly ? 'disabled' : '')), (\"\" + (_vm.error ? 'invalid' : ''))]},[_c('span',{staticClass:\"answer mr-1\",class:{ 'answer-active': _vm.toggleValue === 'Yes' },on:{\"click\":function($event){return _vm.handleChooseOption('Yes')}}},[_vm._v(\"Yes\")]),_c('span',{staticClass:\"answer\",class:{ 'answer-active': _vm.toggleValue === 'No' },on:{\"click\":function($event){return _vm.handleChooseOption('No')}}},[_vm._v(\"No\")])]),(_vm.error)?_c('div',{staticClass:\"fs-12 text-right mb-2 mt-n3 pr-2 err-text\"},[_vm._v(_vm._s('Please make a selection'))]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <h6 class=\"font-weight-bold fw-400 toggle-label\">\n      {{ label }}\n      <span>\n        <img\n          v-if=\"infoTooltip\"\n          class=\"info-mark\"\n          :src=\"require(`@/assets/images/icons/ic_question_mark_black_filled.svg`)\"\n          alt=\"info-mark\"\n          @click=\"toggleTooltip\"\n          v-on:mouseenter=\"hoverTooltip\"\n          v-on:mouseleave=\"blurTooltip\"\n        />\n      </span>\n    </h6>\n    <div\n      ref=\"floatLabelTooltip\"\n      class=\"float-label-finance-tooltip shadow-lg font-weight-thin fs-12\"\n    >\n      <p class=\"mb-0\">{{ tooltip }}</p>\n    </div>\n    <div\n      class=\"answer-group d-flex ml-3 mb-3\"\n      :class=\"[`${checkReadonly ? 'disabled' : ''}`, `${error ? 'invalid' : ''}`]\"\n    >\n      <span \n        class=\"answer mr-1\" \n        @click=\"handleChooseOption('Yes')\"\n        :class=\"{ 'answer-active': toggleValue === 'Yes' }\"\n      >Yes</span>\n      <span \n        class=\"answer\" \n        @click=\"handleChooseOption('No')\"\n        :class=\"{ 'answer-active': toggleValue === 'No' }\"\n      >No</span>\n    </div>\n    <div v-if=\"error\" class=\"fs-12 text-right mb-2 mt-n3 pr-2 err-text\">{{ 'Please make a selection' }}</div>\n  </div>\n</template>\n<script>\nimport { mapState } from \"vuex\";\nexport default {\n  name: \"CustomToggle\",\n  data() {\n    return {\n      isMobile: true,\n    }\n  },\n  model: {\n    prop: \"toggleValue\",\n    event: \"change\",\n  },\n  props: {\n    toggleValue: {\n      type: String,\n      default: () => \"\",\n    },\n    label: {\n      type: String,\n      default: () => \"\",\n    },\n    error: {\n      type: Boolean,\n      default: () => false,\n    },\n    infoTooltip: {\n      type: Boolean,\n      default: () => false,\n    },\n    tooltip: {\n      type: String,\n      default: () => \"\",\n    },\n  },\n  computed: {\n    ...mapState({\n      authenticateData: (state) => state.authenticateSeller,\n    }),\n    checkReadonly: function() {\n      return this.authenticateData.listed || this.authenticateData.readonlyMode;\n    },\n    mobileMediaQuery: function() {\n      return window.matchMedia(\"(min-width: 768px)\");\n    },\n    haveTooltip: function() {\n      return Object.keys(this.tooltip).length !== 0\n    },\n  },\n  methods: {\n    handleChooseOption(val) {\n      if (!this.checkReadonly) {\n        this.$emit(\"change\", val);\n      }\n    },\n    toggleTooltip: function(e) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (this.haveTooltip && this.isMobile) {\n        const currentVisibility = this.$refs.floatLabelTooltip.style.visibility;\n        this.$refs.floatLabelTooltip.style.visibility =\n          currentVisibility === \"visible\" ? \"hidden\" : \"visible\";\n      }\n    },\n    blurTooltip: function() {\n      if (this.haveTooltip) {\n        this.$refs.floatLabelTooltip.style.visibility = \"hidden\";\n      }\n    },\n    hoverTooltip: function() {\n      if (this.haveTooltip && !this.isMobile) {\n        this.$refs.floatLabelTooltip.style.visibility = \"visible\";\n      }\n    },\n  },\n  mounted() {\n    // Check mobile screen\n    this.mobileMediaQuery.addListener((e) => {\n      if (e.matches) {\n        this.isMobile = false;\n      } else {\n        this.isMobile = true;\n      }\n    });\n    this.isMobile = !this.mobileMediaQuery.matches;\n  },\n};\n</script>\n<style lang=\"scss\">\n.answer-group {\n  border: 1px solid transparent !important;\n  .answer {\n    color: var(--primary-color);\n    font-size: 16px;\n    padding: 5px 10px;\n    border: 1px solid #79747e;\n    border-radius: 100px;\n    min-width: 132px;\n    min-height: 38px;\n    cursor: pointer;\n    text-align: center;\n  }\n  .answer-active {\n    color: #FFFFFF;\n    background-color: var(--primary-color);\n    border-color: var(--primary-color);\n\t}\n  &.disabled {\n    .answer {\n      cursor: default;\n    }\n  }\n  &.invalid {\n    .answer {\n      border-color: red;\n    }\n  }\n}\n.float-label-finance-tooltip {\n  width: 252px;\n  position: absolute;\n  bottom: 85px;\n  left: 245px;\n  padding: 10px;\n  border-radius: 4px;\n  background-color: #2E312E;\n  color: white;\n  text-align: left;\n  visibility: hidden;\n  z-index: 10;\n}\n.info-mark {\n  margin-top: -4px;\n}\n@media screen and(min-width: 768px) {\n  .info-mark {\n    cursor: pointer;\n  }\n}\n@media screen and(max-width: 991px) {\n  .float-label-finance-tooltip {\n    left: 55px;\n  }\n}\n@media screen and(max-width: 768px) {\n  .float-label-finance-tooltip {\n    left: 245px;\n  }\n}\n@media screen and(max-width: 510px) {\n  .float-label-finance-tooltip {\n    left: 162px;\n  }\n}\n@media screen and(max-width: 510px) {\n  .float-label-finance-tooltip {\n    left: 140px;\n  }\n}\n@media screen and(max-width: 400px) {\n  .float-label-finance-tooltip {\n    left: 50px;\n  }\n  .toggle-label {\n    width: 308px;\n  }\n}\n@media screen and(min-width: 401px) and(max-width: 421px) {\n  .toggle-label {\n    width: 345px;\n  }\n  .float-label-finance-tooltip {\n    left: 42px !important;\n  }\n}\n</style>\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!./CustomToggle.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!./CustomToggle.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CustomToggle.vue?vue&type=template&id=4363f006&\"\nimport script from \"./CustomToggle.vue?vue&type=script&lang=js&\"\nexport * from \"./CustomToggle.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CustomToggle.vue?vue&type=style&index=0&lang=scss&\"\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","module.exports = __webpack_public_path__ + \"img/ic_question_mark_black_filled.bfac7f09.svg\";","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomToggle.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}