{"version":3,"file":"Dj7jJKcg.js","sources":["../../../../src/components/components/infoPopup/useInfoPopup.ts","../../../../src/components/formFields/components/formInfoPopup.vue"],"sourcesContent":["import { SSR_safe_mq_isTouch } from '~/injectionSymbols';\n\nexport function useInfoPopup(minRightWidth: number, infoOnClick: boolean) {\n  const container = ref<HTMLElement | null>(null);\n  const open = ref(false);\n  const position = ref<'right' | 'bottom'>('right');\n  const containerWidth = ref(minRightWidth);\n  const isInDialog = useIsInDialog(container);\n  const isTouch = inject(SSR_safe_mq_isTouch);\n\n  function openPopup(force = false) {\n    if (infoOnClick && !force) return;\n    calculatePostion();\n    open.value = true;\n  }\n\n  function closePopup(force = false) {\n    if (infoOnClick && !force) return;\n    calculatePostion();\n    open.value = false;\n  }\n\n  function togglePopup() {\n    if (!infoOnClick) return;\n    if (!open.value) {\n      openPopup(true);\n      setTimeout(() => {\n        document.body.addEventListener('click', bodyClick);\n      }, 100);\n    } else {\n      bodyClick();\n    }\n  }\n\n  function bodyClick() {\n    closePopup(true);\n    document.body.removeEventListener('click', bodyClick);\n  }\n\n  onMounted(() => {\n    useResizeObserver(window.document.body, () => {\n      calculatePostion();\n    });\n  });\n\n  function calculatePostion() {\n    if (!container.value) return;\n\n    const { left, width } =\n      container.value.parentElement.getBoundingClientRect();\n    const { innerWidth } = window;\n\n    if (isInDialog.value || innerWidth < left + width + minRightWidth) {\n      position.value = 'bottom';\n    } else {\n      position.value = 'right';\n      containerWidth.value = Math.min(450, innerWidth - left - width - 40);\n    }\n  }\n\n  return {\n    container,\n    open,\n    position,\n    containerWidth,\n    isTouch,\n    infoOnClick,\n    openPopup,\n    closePopup,\n    togglePopup,\n  };\n}\n","<template>\n  <div\n    :class=\"\n      triggerClass +\n      ' absolute !h-[16px] !w-[16px] flex justify-center items-center cursor-pointer'\n    \"\n    @mouseenter=\"() => (!disabled && !isTouch ? openPopup() : null)\"\n    @mouseleave=\"() => !isTouch && closePopup()\"\n    @touchstart=\"() => (open || disabled ? closePopup() : openPopup())\"\n    @click=\"() => togglePopup()\"\n  >\n    <slot name=\"trigger\" />\n  </div>\n\n  <div\n    ref=\"container\"\n    class=\"absolute hidden w-full z-[1001]\"\n    :class=\"[\n      {\n        'left-full top-0': position === 'right',\n        'w-full top-full mt-[-12px] justify-end right-0 left-0':\n          position === 'bottom',\n        '!flex ': open,\n      },\n      contentClass,\n    ]\"\n    :style=\"position === 'right' ? { width: containerWidth + 'px' } : {}\"\n  >\n    <InfoFrame\n      :has-cancel=\"true\"\n      class=\"min-w-[315px] max-w-[calc(100vw-var(--thm-spacing-lg))] md:max-w-[450px]\"\n      :class=\"{\n        'ml-[18px] right': position === 'right',\n        'mt-[18px] bottom': position === 'bottom',\n      }\"\n      @cancel=\"closePopup\"\n      ><slot name=\"content\"\n    /></InfoFrame>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { useInfoPopup } from '~/components/components/infoPopup/useInfoPopup';\nimport InfoFrame from '~/components/formFields/components/infoFrame.vue';\n\nconst props = defineProps({\n  triggerClass: {\n    type: String,\n    default: '',\n  },\n  contentClass: {\n    type: String,\n    default: '',\n  },\n  minRightWidth: {\n    type: Number,\n    default: 348,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  infoOnClick: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst {\n  container,\n  open,\n  position,\n  containerWidth,\n  isTouch,\n  openPopup,\n  closePopup,\n  togglePopup,\n} = useInfoPopup(props.minRightWidth, props.infoOnClick);\n</script>\n<style lang=\"postcss\" scoped>\n:deep(.arrow) {\n  &::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n  }\n  &.right::before {\n    top: 20px;\n    left: 10px;\n    transform: translateY(-50%);\n    border-width: 8px 8px 8px 0;\n    border-color: transparent var(--thm-info-popup-bg) transparent transparent;\n  }\n  &.bottom::before {\n    top: 10px;\n    right: 10px;\n    transform: translateX(-50%);\n    border-width: 0 8px 8px 8px;\n    border-color: transparent transparent var(--thm-info-popup-bg) transparent;\n  }\n}\n</style>\n"],"names":["useInfoPopup","minRightWidth","infoOnClick","container","ref","open","position","containerWidth","isInDialog","useIsInDialog","isTouch","inject","SSR_safe_mq_isTouch","openPopup","force","calculatePostion","closePopup","togglePopup","bodyClick","onMounted","useResizeObserver","left","width","innerWidth","props","__props"],"mappings":"+OAEgB,SAAAA,EAAaC,EAAuBC,EAAsB,CAClE,MAAAC,EAAYC,EAAwB,IAAI,EACxCC,EAAOD,EAAI,EAAK,EAChBE,EAAWF,EAAwB,OAAO,EAC1CG,EAAiBH,EAAIH,CAAa,EAClCO,EAAaC,EAAcN,CAAS,EACpCO,EAAUC,EAAOC,CAAmB,EAEjC,SAAAC,EAAUC,EAAQ,GAAO,CAC5BZ,GAAe,CAACY,IACHC,IACjBV,EAAK,MAAQ,GACf,CAES,SAAAW,EAAWF,EAAQ,GAAO,CAC7BZ,GAAe,CAACY,IACHC,IACjBV,EAAK,MAAQ,GACf,CAEA,SAASY,GAAc,CAChBf,IACAG,EAAK,MAMEa,KALVL,EAAU,EAAI,EACd,WAAW,IAAM,CACN,SAAA,KAAK,iBAAiB,QAASK,CAAS,GAChD,GAAG,GAIV,CAEA,SAASA,GAAY,CACnBF,EAAW,EAAI,EACN,SAAA,KAAK,oBAAoB,QAASE,CAAS,CACtD,CAEAC,EAAU,IAAM,CACIC,EAAA,OAAO,SAAS,KAAM,IAAM,CAC3BL,GAAA,CAClB,CAAA,CACF,EAED,SAASA,GAAmB,CAC1B,GAAI,CAACZ,EAAU,MAAO,OAEtB,KAAM,CAAE,KAAAkB,EAAM,MAAAC,GACZnB,EAAU,MAAM,cAAc,wBAC1B,CAAE,WAAAoB,CAAe,EAAA,OAEnBf,EAAW,OAASe,EAAaF,EAAOC,EAAQrB,EAClDK,EAAS,MAAQ,UAEjBA,EAAS,MAAQ,QACjBC,EAAe,MAAQ,KAAK,IAAI,IAAKgB,EAAaF,EAAOC,EAAQ,EAAE,EAEvE,CAEO,MAAA,CACL,UAAAnB,EACA,KAAAE,EACA,SAAAC,EACA,eAAAC,EACA,QAAAG,EACA,YAAAR,EACA,UAAAW,EACA,WAAAG,EACA,YAAAC,CAAA,CAEJ,iPC3BA,MAAMO,EAAQC,EAuBR,CACJ,UAAAtB,EACA,KAAAE,EACA,SAAAC,EACA,eAAAC,EACA,QAAAG,EACA,UAAAG,EACA,WAAAG,EACA,YAAAC,CACE,EAAAjB,EAAawB,EAAM,cAAeA,EAAM,WAAW"}