{"version":3,"file":"CsoInfoIcon.js","sources":["../../../src/components/core/composition/CsoInfoIcon.vue","../../../src/components/core/composition/CsoInfoIcon.vue"],"sourcesContent":["<template>\r\n  <a class=\"cso-info-icon icon-hint\" :data-content=\"content\" :data-wide=\"wide\" ref=\"icon\"></a>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nconst wrapperTemplate = `\r\n  <div class=\"cso-info-wrapper\">\r\n    <div class=\"icon-tick\"></div>\r\n    <div class=\"icon-close\"></div>\r\n    <div class=\"content\"></div>\r\n  </div>\r\n  <div class=\"cso-info-overlay\"></div>\r\n`;\r\n\r\nexport default {\r\n  name: 'CsoInfoIcon',\r\n  props: {\r\n    content: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    wide: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n  methods: {\r\n    getWrapper () {\r\n      return document.querySelector('.cso-info-wrapper') as HTMLElement\r\n    },\r\n    open (icon: HTMLElement) {\r\n      const root = document.querySelector('html')!\r\n      const wrapper = this.getWrapper()\r\n      const iconRect = icon.getBoundingClientRect()\r\n      wrapper.classList.add('open')\r\n      wrapper.querySelector('.content')!.innerHTML = icon.getAttribute('data-content')!\r\n      if (icon.getAttribute('data-wide') === 'true') {\r\n        wrapper.classList.add('wide')\r\n      } else {\r\n        wrapper.classList.remove('wide')\r\n      }\r\n      if (window.innerWidth > 790) {\r\n        wrapper.style.bottom = (root.clientHeight - iconRect.top - window.scrollY + 8) + 'px'\r\n        wrapper.style.right = (root.clientWidth - iconRect.right - window.scrollX - 15) + 'px'\r\n      } else {\r\n        wrapper.style.bottom = ''\r\n        wrapper.style.right = ''\r\n      }\r\n    },\r\n    close () {\r\n      this.getWrapper().classList.remove('open')\r\n    },\r\n    handleClick (event: MouseEvent) {\r\n      const wrapper = this.getWrapper()\r\n      const target = event.target as HTMLElement\r\n      if (target.classList.contains('cso-info-icon')) {\r\n        // click on icon\r\n        event.preventDefault()\r\n        this.open(target)\r\n      } else if (target.classList.contains('icon-close')) {\r\n        // click on close\r\n        this.close()\r\n      } else if (target != wrapper && target.parentElement != wrapper) {\r\n        // click outside of wrapper\r\n        this.close()\r\n      }\r\n    }\r\n  },\r\n  mounted () {\r\n    if (!this.getWrapper()) {\r\n      document.body.insertAdjacentHTML('beforeend', wrapperTemplate)\r\n      document.addEventListener('click', event => this.handleClick(event))\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.cso-info-icon {\r\n  cursor: pointer;\r\n}\r\n\r\n.cso-info-overlay {\r\n  display: none;\r\n  position: fixed;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background-color: #000000a5;\r\n  z-index: 100;\r\n\r\n  @include sm {\r\n    display: unset;\r\n  }\r\n}\r\n\r\n.cso-info-wrapper {\r\n  position: absolute;\r\n  user-select: none;\r\n  max-width: 358px;\r\n  box-shadow: 0 2px 16px -3px rgb(0 0 0 / 22%);\r\n  background: #fff;\r\n  color: #000;\r\n  padding: 20px 48px 24px 24px;\r\n  z-index: 999;\r\n  border-radius: 8px;\r\n\r\n  &.wide {\r\n    max-width: 480px;\r\n  }\r\n\r\n  @include sm {\r\n    max-width: unset !important;\r\n    border-radius: unset;\r\n    margin: 10px;\r\n    position: fixed;\r\n    bottom: 50%;\r\n    transform: translateY(+50%);\r\n    width: calc(100% - 20px);\r\n  }\r\n\r\n  &:not(.open),\r\n  &:not(.open) + .cso-info-overlay {\r\n    display: none;\r\n  }\r\n\r\n  .icon-close {\r\n    position: absolute;\r\n    right: 14px;\r\n    top: 14px;\r\n    background-image: url(/static/icons/close-big.svg);\r\n    background-size: cover;\r\n    cursor: pointer;\r\n    width: 22px;\r\n    height: 22px;\r\n  }\r\n\r\n  .icon-tick {\r\n    position: absolute;\r\n    bottom: -5px;\r\n    right: 19px;\r\n    background-color: #fff;\r\n    width: 10px;\r\n    height: 10px;\r\n    transform: rotate(45deg);\r\n\r\n    @include sm {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","<template>\r\n  <a class=\"cso-info-icon icon-hint\" :data-content=\"content\" :data-wide=\"wide\" ref=\"icon\"></a>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nconst wrapperTemplate = `\r\n  <div class=\"cso-info-wrapper\">\r\n    <div class=\"icon-tick\"></div>\r\n    <div class=\"icon-close\"></div>\r\n    <div class=\"content\"></div>\r\n  </div>\r\n  <div class=\"cso-info-overlay\"></div>\r\n`;\r\n\r\nexport default {\r\n  name: 'CsoInfoIcon',\r\n  props: {\r\n    content: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    wide: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n  methods: {\r\n    getWrapper () {\r\n      return document.querySelector('.cso-info-wrapper') as HTMLElement\r\n    },\r\n    open (icon: HTMLElement) {\r\n      const root = document.querySelector('html')!\r\n      const wrapper = this.getWrapper()\r\n      const iconRect = icon.getBoundingClientRect()\r\n      wrapper.classList.add('open')\r\n      wrapper.querySelector('.content')!.innerHTML = icon.getAttribute('data-content')!\r\n      if (icon.getAttribute('data-wide') === 'true') {\r\n        wrapper.classList.add('wide')\r\n      } else {\r\n        wrapper.classList.remove('wide')\r\n      }\r\n      if (window.innerWidth > 790) {\r\n        wrapper.style.bottom = (root.clientHeight - iconRect.top - window.scrollY + 8) + 'px'\r\n        wrapper.style.right = (root.clientWidth - iconRect.right - window.scrollX - 15) + 'px'\r\n      } else {\r\n        wrapper.style.bottom = ''\r\n        wrapper.style.right = ''\r\n      }\r\n    },\r\n    close () {\r\n      this.getWrapper().classList.remove('open')\r\n    },\r\n    handleClick (event: MouseEvent) {\r\n      const wrapper = this.getWrapper()\r\n      const target = event.target as HTMLElement\r\n      if (target.classList.contains('cso-info-icon')) {\r\n        // click on icon\r\n        event.preventDefault()\r\n        this.open(target)\r\n      } else if (target.classList.contains('icon-close')) {\r\n        // click on close\r\n        this.close()\r\n      } else if (target != wrapper && target.parentElement != wrapper) {\r\n        // click outside of wrapper\r\n        this.close()\r\n      }\r\n    }\r\n  },\r\n  mounted () {\r\n    if (!this.getWrapper()) {\r\n      document.body.insertAdjacentHTML('beforeend', wrapperTemplate)\r\n      document.addEventListener('click', event => this.handleClick(event))\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.cso-info-icon {\r\n  cursor: pointer;\r\n}\r\n\r\n.cso-info-overlay {\r\n  display: none;\r\n  position: fixed;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  background-color: #000000a5;\r\n  z-index: 100;\r\n\r\n  @include sm {\r\n    display: unset;\r\n  }\r\n}\r\n\r\n.cso-info-wrapper {\r\n  position: absolute;\r\n  user-select: none;\r\n  max-width: 358px;\r\n  box-shadow: 0 2px 16px -3px rgb(0 0 0 / 22%);\r\n  background: #fff;\r\n  color: #000;\r\n  padding: 20px 48px 24px 24px;\r\n  z-index: 999;\r\n  border-radius: 8px;\r\n\r\n  &.wide {\r\n    max-width: 480px;\r\n  }\r\n\r\n  @include sm {\r\n    max-width: unset !important;\r\n    border-radius: unset;\r\n    margin: 10px;\r\n    position: fixed;\r\n    bottom: 50%;\r\n    transform: translateY(+50%);\r\n    width: calc(100% - 20px);\r\n  }\r\n\r\n  &:not(.open),\r\n  &:not(.open) + .cso-info-overlay {\r\n    display: none;\r\n  }\r\n\r\n  .icon-close {\r\n    position: absolute;\r\n    right: 14px;\r\n    top: 14px;\r\n    background-image: url(/static/icons/close-big.svg);\r\n    background-size: cover;\r\n    cursor: pointer;\r\n    width: 22px;\r\n    height: 22px;\r\n  }\r\n\r\n  .icon-tick {\r\n    position: absolute;\r\n    bottom: -5px;\r\n    right: 19px;\r\n    background-color: #fff;\r\n    width: 10px;\r\n    height: 10px;\r\n    transform: rotate(45deg);\r\n\r\n    @include sm {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["wrapperTemplate","_sfc_main","icon","root","wrapper","iconRect","event","target","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock"],"mappings":"wCAKA,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASTC,EAAA,CACb,KAAM,cACN,MAAO,CACL,QAAS,CACP,KAAM,OACN,SAAU,EACZ,EACA,KAAM,CACJ,KAAM,QACN,QAAS,EACX,CACF,EACA,QAAS,CACP,YAAc,CACL,OAAA,SAAS,cAAc,mBAAmB,CACnD,EACA,KAAMC,EAAmB,CACjB,MAAAC,EAAO,SAAS,cAAc,MAAM,EACpCC,EAAU,KAAK,aACfC,EAAWH,EAAK,wBACdE,EAAA,UAAU,IAAI,MAAM,EAC5BA,EAAQ,cAAc,UAAU,EAAG,UAAYF,EAAK,aAAa,cAAc,EAC3EA,EAAK,aAAa,WAAW,IAAM,OAC7BE,EAAA,UAAU,IAAI,MAAM,EAEpBA,EAAA,UAAU,OAAO,MAAM,EAE7B,OAAO,WAAa,KACdA,EAAA,MAAM,OAAUD,EAAK,aAAeE,EAAS,IAAM,OAAO,QAAU,EAAK,KACzED,EAAA,MAAM,MAASD,EAAK,YAAcE,EAAS,MAAQ,OAAO,QAAU,GAAM,OAElFD,EAAQ,MAAM,OAAS,GACvBA,EAAQ,MAAM,MAAQ,GAE1B,EACA,OAAS,CACP,KAAK,WAAW,EAAE,UAAU,OAAO,MAAM,CAC3C,EACA,YAAaE,EAAmB,CACxB,MAAAF,EAAU,KAAK,aACfG,EAASD,EAAM,OACjBC,EAAO,UAAU,SAAS,eAAe,GAE3CD,EAAM,eAAe,EACrB,KAAK,KAAKC,CAAM,GACPA,EAAO,UAAU,SAAS,YAAY,EAE/C,KAAK,MAAM,EACFA,GAAUH,GAAWG,EAAO,eAAiBH,GAEtD,KAAK,MAAM,CAEf,CACF,EACA,SAAW,CACJ,KAAK,eACC,SAAA,KAAK,mBAAmB,YAAaJ,CAAe,EAC7D,SAAS,iBAAiB,QAASM,GAAS,KAAK,YAAYA,CAAK,CAAC,EAEvE,CACF,uCCzEU,SAAAE,EAACC,EAAyBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CAAE,OAAAC,EAAA,EAAqBC,EAAA,IAAA,CAAG,MAAA,0BAAiB,eAAUL,EAAA,QAAA,YAAAA,EAAA"}