{"version":3,"sources":["webpack:///./src/components/speakol-template/SpeakolTooltip.vue?4bee","webpack:///src/components/speakol-template/SpeakolTooltip.vue","webpack:///./src/components/speakol-template/SpeakolTooltip.vue?adda","webpack:///./src/components/speakol-template/SpeakolTooltip.vue","webpack:///./src/components/speakol-template/SpeakolTooltip.vue?558b"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","on","iconMouseOver","iconMouseLeave","tooltipMouseOver","tooltipMouseLeave","_v","_s","tooltipText","tooltipRedirect","tooltipAction","_e","iconClick","linkClick","staticRenderFns","name","props","type","String","data","showTooltip","mounted","window","innerWidth","addEventListener","e","target","closest","methods","timer","setTimeout","clearTimeout","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,YAAY,uBAAuB,CAACF,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,UAAU,CAACG,MAAM,CAAC,YAAY,UAAU,KAAO,iBAAiB,MAAQ,IAAIC,GAAG,CAAC,UAAYR,EAAIS,cAAc,WAAaT,EAAIU,mBAAmB,GAAIV,EAAe,YAAEI,EAAG,MAAM,CAACE,YAAY,yCAAyCE,GAAG,CAAC,UAAYR,EAAIW,iBAAiB,WAAaX,EAAIY,oBAAoB,CAACR,EAAG,MAAM,CAACE,YAAY,kBAAkBF,EAAG,IAAI,CAACJ,EAAIa,GAAGb,EAAIc,GAAGd,EAAIe,gBAAgBX,EAAG,IAAI,CAACE,YAAY,cAAcC,MAAM,CAAC,KAAOP,EAAIgB,gBAAgB,OAAS,WAAW,CAAChB,EAAIa,GAAGb,EAAIc,GAAGd,EAAIiB,oBAAoBjB,EAAIkB,OAAOd,EAAG,MAAM,CAACE,YAAY,sCAAsC,CAACF,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,UAAU,CAACG,MAAM,CAAC,GAAK,WAAW,YAAY,UAAU,KAAO,iBAAiB,MAAQ,IAAIC,GAAG,CAAC,MAAQR,EAAImB,cAAc,GAAInB,EAAe,YAAEI,EAAG,MAAM,CAACE,YAAY,yCAAyCC,MAAM,CAAC,GAAK,eAAe,CAACH,EAAG,MAAM,CAACE,YAAY,kBAAkBF,EAAG,IAAI,CAACJ,EAAIa,GAAGb,EAAIc,GAAGd,EAAIe,gBAAgBX,EAAG,IAAI,CAACG,MAAM,CAAC,KAAOP,EAAIgB,gBAAgB,OAAS,UAAUR,GAAG,CAAC,MAAQR,EAAIoB,YAAY,CAACpB,EAAIa,GAAGb,EAAIc,GAAGd,EAAIiB,oBAAoBjB,EAAIkB,UAC1uCG,EAAkB,GCmCtB,GACEC,KAAM,kBAENC,MAAO,CACLR,YAAa,CACXS,KAAMC,QAERR,cAAe,CACbO,KAAMC,QAERT,gBAAiB,CACfQ,KAAMC,SAIVC,KAfF,WAgBI,MAAO,CACLC,aAAa,IAIjBC,QArBF,WAqBA,WACQC,OAAOC,YAAc,KACvBD,OAAOE,iBAAiB,SAAS,SAAvC,GACaC,EAAEC,OAAOC,QAAQ,cAAiBF,EAAEC,OAAOC,QAAQ,oCACtD,EAAV,oBAOEC,QAAS,CACP1B,cADJ,WAEMR,KAAK0B,aAAc,GAGrBjB,eALJ,WAKA,WACMT,KAAKmC,MAAQC,YAAW,WACtB,EAAR,iBACA,MAGIzB,kBAXJ,WAYMX,KAAK0B,aAAc,GAGrBhB,iBAfJ,WAgBMV,KAAK0B,aAAc,EACnBW,aAAarC,KAAKmC,QAGpBjB,UApBJ,WAqBMlB,KAAK0B,aAAe1B,KAAK0B,aAG3BP,UAxBJ,WAyBMnB,KAAK0B,aAAc,KC7F8U,I,wBCQnWY,EAAY,eACd,EACAxC,EACAsB,GACA,EACA,KACA,WACA,MAIa,aAAAkB,E,6CCnBf,W","file":"js/chunk-53398e43.5927a441.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"speakol-help-parent\"},[_c('div',{staticClass:\"relative\"},[_c('vs-icon',{attrs:{\"icon-pack\":\"speakol\",\"icon\":\"speakol-help-3\",\"round\":\"\"},on:{\"mouseover\":_vm.iconMouseOver,\"mouseleave\":_vm.iconMouseLeave}})],1),(_vm.showTooltip)?_c('div',{staticClass:\"customize-tooltip-with-action absolute\",on:{\"mouseover\":_vm.tooltipMouseOver,\"mouseleave\":_vm.tooltipMouseLeave}},[_c('div',{staticClass:\"triangle-left\"}),_c('p',[_vm._v(_vm._s(_vm.tooltipText))]),_c('a',{staticClass:\"font-medium\",attrs:{\"href\":_vm.tooltipRedirect,\"target\":\"_blank\"}},[_vm._v(_vm._s(_vm.tooltipAction))])]):_vm._e()]),_c('div',{staticClass:\"speakol-help-parent-mobile-version\"},[_c('div',{staticClass:\"relative\"},[_c('vs-icon',{attrs:{\"id\":\"helpIcon\",\"icon-pack\":\"speakol\",\"icon\":\"speakol-help-3\",\"round\":\"\"},on:{\"click\":_vm.iconClick}})],1),(_vm.showTooltip)?_c('div',{staticClass:\"customize-tooltip-with-action absolute\",attrs:{\"id\":\"tooltipBox\"}},[_c('div',{staticClass:\"triangle-left\"}),_c('p',[_vm._v(_vm._s(_vm.tooltipText))]),_c('a',{attrs:{\"href\":_vm.tooltipRedirect,\"target\":\"_blank\"},on:{\"click\":_vm.linkClick}},[_vm._v(_vm._s(_vm.tooltipAction))])]):_vm._e()])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <!-- desktop version -->\n    <div class=\"speakol-help-parent\">\n      <div class=\"relative\">\n        <vs-icon @mouseover=\"iconMouseOver\" @mouseleave=\"iconMouseLeave\" class=\"\" icon-pack=\"speakol\"\n          icon=\"speakol-help-3\" round></vs-icon>\n      </div>\n\n      <div @mouseover=\"tooltipMouseOver\" @mouseleave=\"tooltipMouseLeave\" v-if=\"showTooltip\"\n        class=\"customize-tooltip-with-action absolute\">\n        <div class=\"triangle-left\"></div>\n        <p>{{tooltipText}}</p>\n\n        <a class=\"font-medium\" :href=\"tooltipRedirect\" target=\"_blank\">{{tooltipAction}}</a>\n      </div>\n    </div>\n    <!-- desktop version -->\n\n    <!-- mobile version -->\n    <div class=\"speakol-help-parent-mobile-version\">\n      <div class=\"relative\">\n        <vs-icon id=\"helpIcon\" @click=\"iconClick\" class=\"\" icon-pack=\"speakol\" icon=\"speakol-help-3\" round></vs-icon>\n      </div>\n      <div id=\"tooltipBox\" v-if=\"showTooltip\" class=\"customize-tooltip-with-action absolute\">\n        <div class=\"triangle-left\"></div>\n        <p>{{tooltipText}}</p>\n\n        <a @click=\"linkClick\" :href=\"tooltipRedirect\" target=\"_blank\">{{tooltipAction}}</a>\n      </div>\n    </div>\n    <!-- mobile version -->\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'speakol-tooltip',\n\n  props: {\n    tooltipText: {\n      type: String\n    },\n    tooltipAction: {\n      type: String\n    },\n    tooltipRedirect: {\n      type: String\n    }\n  },\n\n  data () {\n    return {\n      showTooltip: false\n    }\n  },\n\n  mounted () {\n    if (window.innerWidth <= 768) {\n      window.addEventListener('click', (e) => {\n        if (!e.target.closest('#helpIcon') && !e.target.closest('.customize-tooltip-with-action')) {\n          this.showTooltip = false\n\n        }\n      })\n    }\n  },\n\n  methods: {\n    iconMouseOver () {\n      this.showTooltip = true\n    },\n\n    iconMouseLeave () {\n      this.timer = setTimeout(() => {\n        this.showTooltip = false\n      }, 100)\n    },\n\n    tooltipMouseLeave () {\n      this.showTooltip = false\n    },\n\n    tooltipMouseOver () {\n      this.showTooltip = true\n      clearTimeout(this.timer)\n    },\n\n    iconClick () {\n      this.showTooltip = !this.showTooltip\n    },\n\n    linkClick () {\n      this.showTooltip = false\n    }\n  }\n\n\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n  .speakol-help-parent {\n    position: relative;\n    top: 7px;\n\n    i {\n      color: var(--metalicGray);\n      font-size: 16px !important;\n      margin-left: 8px;\n    }\n\n    .customize-tooltip-with-action {\n      background-color: #363636;\n      border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n      color: white;\n      padding: 16px;\n      left: 40px;\n      top: -3px;\n      width: 375px;\n      z-index: 1;\n\n      .triangle-left {\n        width: 0;\n        height: 0;\n        border-top: 7px solid transparent;\n        border-right: 7px solid #363636;\n        border-bottom: 7px solid transparent;\n        position: absolute;\n        left: -5px;\n        top: 5px;\n      }\n\n      p {\n        font-size: 13px;\n        font-weight: 300;\n        line-height: 21px;\n        margin-bottom: 16px;\n      }\n\n      a {\n        font-size: 13px;\n        font-weight: 500;\n      }\n    }\n  }\n\n  .speakol-help-parent-mobile-version {\n    position: relative;\n    top: 7px;\n    display: none;\n\n    i {\n      color: var(--metalicGray);\n      font-size: 16px !important;\n      margin-left: 8px;\n    }\n\n    .customize-tooltip-with-action {\n      background-color: #363636;\n      border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n      color: white;\n      padding: 16px;\n      right: -15px;\n      top: 30px;\n      width: 220px;\n      z-index: 9991;\n\n      .triangle-left {\n        width: 0;\n        height: 0;\n        border-left: 7px solid transparent;\n        border-right: 7px solid transparent;\n        border-bottom: 7px solid #363636;\n        position: absolute;\n        right: 15px;\n        top: -6px;\n      }\n\n      p {\n        font-size: 13px;\n        font-weight: 300;\n        margin-bottom: 16px;\n      }\n\n      a {\n        font-size: 13px;\n        font-weight: 500;\n      }\n    }\n  }\n\n  @media (max-width: 768px) {\n    .speakol-help-parent-mobile-version {\n      display: block;\n    }\n\n    .speakol-help-parent {\n      display: none;\n    }\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!./SpeakolTooltip.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!./SpeakolTooltip.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SpeakolTooltip.vue?vue&type=template&id=53abaca4&scoped=true&\"\nimport script from \"./SpeakolTooltip.vue?vue&type=script&lang=js&\"\nexport * from \"./SpeakolTooltip.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SpeakolTooltip.vue?vue&type=style&index=0&id=53abaca4&lang=scss&scoped=true&\"\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  \"53abaca4\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.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!./SpeakolTooltip.vue?vue&type=style&index=0&id=53abaca4&lang=scss&scoped=true&\""],"sourceRoot":""}