{"version":3,"file":"DiC3TD4a.js","sources":["../../../../src/components/dialog/components/dialogFrame/popup/popupFrame.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"isMobileScreen\"\n    class=\"fixed top-0 bottom-0 left-0 right-0 bg-black opacity-60 z-[600]\"\n  ></div>\n  <div\n    ref=\"container\"\n    class=\"w-full md:w-[330px] h-fit rounded-t-alt-xl md:rounded-alt-xl py-sm z-[610] bg-white\"\n    :class=\"[\n      showArrow && !isMobileScreen ? 'arrow' : '',\n      isMobileScreen\n        ? 'fixed left-0 bottom-0'\n        : `absolute shadow-[0px_3px_20px] shadow-border-light ${positionStyles}`,\n    ]\"\n  >\n    <div\n      class=\"flex flex-row justify-between mx-md my-sm\"\n      :class=\"{ 'md:hidden': showHeadlineOnlyMobile }\"\n    >\n      <p class=\"font-bold text-alt-2xl text-text-base font-deco-alt mb-xs\">\n        <slot name=\"headline\" />\n      </p>\n      <button\n        type=\"button\"\n        class=\"text-xl cursor-pointer text-border-dark md:hidden\"\n        @click=\"$emit('close')\"\n      >\n        <FaIcon icon-class=\"fas fa-xmark\" />\n      </button>\n    </div>\n\n    <slot name=\"content\" />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport FaIcon from '@/components/fa-icon.vue';\nimport { SSR_safe_mq_breakpointIsMobile } from '~/injectionSymbols';\n\nconst props = defineProps({\n  showArrow: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  showHeadlineOnlyMobile: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  topPosition: {\n    type: String as PropType<'top-md' | 'top-lg' | 'top-xl' | ''>,\n    required: false,\n    default: 'top-lg',\n  },\n  isSettingsPopup: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'close'): void;\n}>();\n\nconst container = ref<HTMLElement | null>(null);\nconst isMobileScreen = inject(SSR_safe_mq_breakpointIsMobile);\nconst positionStyles = ref('');\n\nonClickOutside(container, () => emit('close'));\n\nonMounted(() => {\n  positionStyles.value = setPostion();\n});\n\nfunction getPlacementOfPopUp(): string {\n  if (!container.value) return;\n\n  if (props.isSettingsPopup) return 'settingsOverlay';\n\n  const element = container.value?.getBoundingClientRect();\n\n  const outOnRightSide =\n    element.right > (window.innerWidth || document.documentElement.clientWidth);\n\n  if (\n    element.bottom >\n    (window.innerHeight || document.documentElement.clientHeight)\n  ) {\n    // Bottom and left side out of viewport\n    if (element.left < 0) return 'top-start';\n    // Bottom and right side out of viewport\n    if (outOnRightSide) return 'top-end';\n    // Bottom is out of viewport\n    return 'top';\n  }\n\n  if (outOnRightSide) {\n    // Right side is out of viewport\n    return 'bottom-end';\n  }\n\n  if (element.left < 0) {\n    // Left side is out of viewport\n    return 'bottom-start';\n  }\n\n  return 'bottom';\n}\n\nfunction setPostion() {\n  if (!container.value) return;\n  switch (getPlacementOfPopUp()) {\n    case 'settingsOverlay':\n      return 'bottom right-0 ' + props.topPosition;\n    case 'top':\n      return `!bottom-lg -translate-x-[calc(50%-20px)] arrow-bottom arrow-center`;\n    case 'top-end':\n      return `!bottom-lg -right-xs arrow-bottom arrow-right`;\n    case 'top-start':\n      return `!bottom-lg -left-xs arrow-bottom arrow-left`;\n    case 'bottom-end':\n      return (\n        'arrow-top arrow-right before:!top-[-4px] -right-xs ' +\n        props.topPosition\n      );\n    case 'bottom-start':\n      return 'arrow-top arrow-left -left-xs ' + props.topPosition;\n    case 'bottom':\n    default:\n      return (\n        'arrow-top arrow-center -translate-x-[calc(50%-20px)] ' +\n        props.topPosition\n      );\n  }\n}\n</script>\n\n<style scoped lang=\"postcss\">\n.arrow {\n  &::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n  }\n  &.arrow-top::before {\n    border-width: 0 8px 8px 8px;\n    border-color: transparent transparent white transparent;\n    top: -8px;\n  }\n  &.arrow-bottom::before {\n    border-width: 8px 8px 0 8px;\n    border-color: white transparent transparent transparent;\n    bottom: -8px;\n  }\n  &.arrow-center::before {\n    left: calc(50% - 8px);\n  }\n  &.arrow-left::before {\n    left: 22px;\n  }\n  &.arrow-right::before {\n    right: 15px;\n    left: unset;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","container","ref","isMobileScreen","inject","SSR_safe_mq_breakpointIsMobile","positionStyles","onClickOutside","onMounted","setPostion","getPlacementOfPopUp","element","_a","outOnRightSide"],"mappings":"soBAsCA,MAAMA,EAAQC,EAuBRC,EAAOC,EAIPC,EAAYC,EAAwB,IAAI,EACxCC,EAAiBC,EAAOC,CAA8B,EACtDC,EAAiBJ,EAAI,EAAE,EAE7BK,EAAeN,EAAW,IAAMF,EAAK,OAAO,CAAC,EAE7CS,EAAU,IAAM,CACdF,EAAe,MAAQG,GAAW,CACnC,EAED,SAASC,GAA8B,OACrC,GAAI,CAACT,EAAU,MAAO,OAEtB,GAAIJ,EAAM,gBAAwB,MAAA,kBAE5B,MAAAc,GAAUC,EAAAX,EAAU,QAAV,YAAAW,EAAiB,wBAE3BC,EACJF,EAAQ,OAAS,OAAO,YAAc,SAAS,gBAAgB,aAEjE,OACEA,EAAQ,QACP,OAAO,aAAe,SAAS,gBAAgB,cAG5CA,EAAQ,KAAO,EAAU,YAEzBE,EAAuB,UAEpB,MAGLA,EAEK,aAGLF,EAAQ,KAAO,EAEV,eAGF,QACT,CAEA,SAASF,GAAa,CACpB,GAAKR,EAAU,MACf,OAAQS,EAAuB,EAAA,CAC7B,IAAK,kBACH,MAAO,kBAAoBb,EAAM,YACnC,IAAK,MACI,MAAA,qEACT,IAAK,UACI,MAAA,gDACT,IAAK,YACI,MAAA,8CACT,IAAK,aACH,MACE,sDACAA,EAAM,YAEV,IAAK,eACH,MAAO,iCAAmCA,EAAM,YAClD,IAAK,SACL,QACE,MACE,wDACAA,EAAM,WAEZ,CACF"}