{"version":3,"sources":["webpack:///./src/components/common/FloatLabel.vue?f7fb","webpack:///src/components/common/FloatLabel.vue","webpack:///./src/components/common/FloatLabel.vue?4c93","webpack:///./src/components/common/FloatLabel.vue","webpack:///./src/assets/images/icons/ic_question_mark_black_filled.svg","webpack:///./src/components/common/FloatLabel.vue?b36e"],"names":["render","_vm","this","_h","$createElement","_c","_self","directives","name","rawName","value","expression","staticClass","class","isBottomAlign","_t","_v","_s","label","optional","attrs","on","toggleTooltip","hoverTooltip","blurTooltip","_e","ref","tooltip","staticRenderFns","data","isMobile","props","type","String","default","Boolean","ask","computed","mobileMediaQuery","window","matchMedia","haveTooltip","Object","keys","length","methods","e","preventDefault","stopPropagation","$refs","floatLabelTooltip","style","visibility","tooltipArrow","mounted","addListener","matches","component","module","exports"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,QAAQ,CAACE,WAAW,CAAC,CAACC,KAAK,gBAAgBC,QAAQ,kBAAkBC,MAAOT,EAAe,YAAEU,WAAW,gBAAgBC,YAAY,8BAA8BC,MAAMZ,EAAIa,cAAgB,OAAS,QAAQ,CAACb,EAAIc,GAAG,WAAWV,EAAG,OAAO,CAACJ,EAAIe,GAAG,IAAIf,EAAIgB,GAAGhB,EAAIiB,OAAOjB,EAAIgB,GAAGhB,EAAIkB,SAAW,cAAgB,IAAI,KAAMlB,EAAO,IAAEI,EAAG,MAAM,CAACO,YAAY,gBAAgBQ,MAAM,CAAC,IAAM,EAAQ,QAA2D,IAAM,iBAAiBC,GAAG,CAAC,MAAQpB,EAAIqB,cAAc,WAAarB,EAAIsB,aAAa,WAAatB,EAAIuB,eAAevB,EAAIwB,KAAMxB,EAAe,YAAEI,EAAG,IAAI,CAACqB,IAAI,eAAed,YAAY,UAAUX,EAAIwB,OAAOpB,EAAG,MAAM,CAACqB,IAAI,oBAAoBd,YAAY,2DAA2D,CAACP,EAAG,IAAI,CAACO,YAAY,QAAQ,CAACX,EAAIe,GAAGf,EAAIgB,GAAGhB,EAAI0B,eAAe,IACx4BC,EAAkB,GC4BtB,G,UAAA,CACEpB,KAAM,aACNqB,KAFF,WAGI,MAAO,CACLC,UAAU,IAGdC,MAAO,CACLb,MAAO,CACLc,KAAMC,OACNC,QAAS,WAAf,WAEIf,SAAU,CACRa,KAAMG,QACND,QAAS,WAAf,WAEIE,IAAK,CACHJ,KAAMG,QACND,QAAS,WAAf,WAEIP,QAAS,CACPK,KAAMC,OACNC,QAAS,WAAf,WAEIpB,cAAe,CACbkB,KAAMG,QACND,QAAS,WAAf,YAGEG,SAAU,CACRC,iBAAkB,WAChB,OAAOC,OAAOC,WAAW,uBAE3BC,YAAa,WACX,OAA4C,IAArCC,OAAOC,KAAKzC,KAAKyB,SAASiB,SAGrCC,QAAS,CACPvB,cAAe,SAAnB,GAGM,GAFAwB,EAAEC,iBACFD,EAAEE,kBACE9C,KAAKuC,aAAevC,KAAK4B,SAAU,CACrC,IAAR,gDACQ5B,KAAK+C,MAAMC,kBAAkBC,MAAMC,WAC3C,iCACQlD,KAAK+C,MAAMI,aAAaF,MAAMC,WACtC,mCAGI5B,YAAa,WACPtB,KAAKuC,cACPvC,KAAK+C,MAAMC,kBAAkBC,MAAMC,WAAa,SAChDlD,KAAK+C,MAAMI,aAAaF,MAAMC,WAAa,WAG/C7B,aAAc,WACRrB,KAAKuC,cAAgBvC,KAAK4B,WAC5B5B,KAAK+C,MAAMC,kBAAkBC,MAAMC,WAAa,UAChDlD,KAAK+C,MAAMI,aAAaF,MAAMC,WAAa,aAIjDE,QA9DF,WA8DA,WAEIpD,KAAKoC,iBAAiBiB,aAAY,SAAtC,GACUT,EAAEU,QACJ,EAAR,YAEQ,EAAR,eAIItD,KAAK4B,UAAY5B,KAAKoC,iBAAiBkB,WCrGwT,I,wBCQ/VC,EAAY,eACd,EACAzD,EACA4B,GACA,EACA,KACA,KACA,MAIa,aAAA6B,E,gCCnBfC,EAAOC,QAAU,IAA0B,kD,yDCA3C","file":"js/chunk-c4ca5a8e.34f9fde8.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',{directives:[{name:\"click-outside\",rawName:\"v-click-outside\",value:(_vm.blurTooltip),expression:\"blurTooltip\"}],staticClass:\"form-group border-lable-flt\",class:_vm.isBottomAlign ? 'mb-1' : 'mb-3'},[_vm._t(\"default\"),_c('span',[_vm._v(\" \"+_vm._s(_vm.label)+_vm._s(_vm.optional ? \" (Optional)\" : \"\")+\" \"),(_vm.ask)?_c('img',{staticClass:\"question-mark\",attrs:{\"src\":require(\"@/assets/images/icons/ic_question_mark_black_filled.svg\"),\"alt\":\"question-mark\"},on:{\"click\":_vm.toggleTooltip,\"mouseenter\":_vm.hoverTooltip,\"mouseleave\":_vm.blurTooltip}}):_vm._e(),(_vm.haveTooltip)?_c('i',{ref:\"tooltipArrow\",staticClass:\"arrow\"}):_vm._e()]),_c('div',{ref:\"floatLabelTooltip\",staticClass:\"float-label-tooltip shadow-lg font-weight-regular fs-12\"},[_c('p',{staticClass:\"mb-0\"},[_vm._v(_vm._s(_vm.tooltip))])])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <label \n    class=\"form-group border-lable-flt\"\n    :class=\"isBottomAlign ? 'mb-1' : 'mb-3'\"\n    v-click-outside=\"blurTooltip\"\n  >\n    <slot></slot>\n    <span>\n      {{ label }}{{ optional ? \" (Optional)\" : \"\" }}\n      <img\n        v-if=\"ask\"\n        class=\"question-mark\"\n        :src=\"require(`@/assets/images/icons/ic_question_mark_black_filled.svg`)\"\n        alt=\"question-mark\"\n        @click=\"toggleTooltip\"\n        v-on:mouseenter=\"hoverTooltip\"\n        v-on:mouseleave=\"blurTooltip\"\n      />\n      <i v-if=\"haveTooltip\" class=\"arrow\" ref=\"tooltipArrow\"></i>\n    </span>\n    <div\n      ref=\"floatLabelTooltip\"\n      class=\"float-label-tooltip shadow-lg font-weight-regular fs-12\"\n    >\n      <p class=\"mb-0\">{{ tooltip }}</p>\n    </div>\n  </label>\n</template>\n<script>\nexport default {\n  name: \"FloatLabel\",\n  data() {\n    return {\n      isMobile: true,\n    }\n  },\n  props: {\n    label: {\n      type: String,\n      default: () => \"\",\n    },\n    optional: {\n      type: Boolean,\n      default: () => false,\n    },\n    ask: {\n      type: Boolean,\n      default: () => false,\n    },\n    tooltip: {\n      type: String,\n      default: () => \"\",\n    },\n    isBottomAlign: {\n      type: Boolean,\n      default: () => false,\n    },\n  },\n  computed: {\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    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        this.$refs.tooltipArrow.style.visibility =\n          currentVisibility === \"visible\" ? \"hidden\" : \"visible\";\n      }\n    },\n    blurTooltip: function() {\n      if (this.haveTooltip) {\n        this.$refs.floatLabelTooltip.style.visibility = \"hidden\";\n        this.$refs.tooltipArrow.style.visibility = \"hidden\";\n      }\n    },\n    hoverTooltip: function() {\n      if (this.haveTooltip && !this.isMobile) {\n        this.$refs.floatLabelTooltip.style.visibility = \"visible\";\n        this.$refs.tooltipArrow.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\n    this.isMobile = !this.mobileMediaQuery.matches;\n  },\n};\n</script>\n<style lang=\"scss\">\n.float-label-tooltip {\n  width: 252px;\n  position: absolute;\n  bottom: 60px;\n  left: 70px;\n  padding: 10px;\n  border-radius: 4px;\n  background-color: #2E312E;\n  color: white;\n  text-align: left;\n  visibility: hidden;\n  z-index: 100000;\n\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@media screen and(min-width: 768px) {\n  .question-mark {\n    cursor: pointer;\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!./FloatLabel.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!./FloatLabel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FloatLabel.vue?vue&type=template&id=28112fc0&\"\nimport script from \"./FloatLabel.vue?vue&type=script&lang=js&\"\nexport * from \"./FloatLabel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FloatLabel.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!./FloatLabel.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}