{"version":3,"file":"Buh6mlfH.js","sources":["../../../../src/components/dialog/components/dialogFrame/local/dialogFrame.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{ 'cursor-wait': isLoading, 'pointer-events-none': isLoading }\"\n    class=\"fixed top-0 bottom-0 left-0 right-0 bg-black opacity-60 z-[600]\"\n  ></div>\n  <div\n    class=\"fixed top-0 bottom-0 left-0 right-0 z-[610] pt-xl md:p-[4%]\"\n    :class=\"{ 'cursor-wait': isLoading, 'pointer-events-none': isLoading }\"\n  >\n    <ContainerBasic :container-type=\"EContainerType.CONTENT\" classes=\"h-full\">\n      <div\n        class=\"relative flex items-end justify-center h-full md:items-center\"\n      >\n        <div\n          ref=\"el\"\n          class=\"relative w-full md:max-w-[510px] min-w-[345px] max-h-full h-fit overflow-auto md:overflow-visible rounded-t-alt-md md:rounded-alt-lg md:flex md:flex-col md:justify-center\"\n        >\n          <template v-if=\"dialogStore.headline\">\n            <div\n              class=\"flex sticky top-0 z-510 flex-row items-center justify-between w-full bg-primary-lightest px-md py-sm h-[56px] rounded-t-alt-md\"\n            >\n              <div class=\"font-bold font-deco-alt text-alt-2xl\">\n                {{ t(dialogStore.headline) }}\n              </div>\n              <slot name=\"headline-suffix\" />\n              <button\n                type=\"button\"\n                class=\"text-xl cursor-pointer text-border-dark\"\n                @click=\"dialogStore.closeDialog(DialogResponses.CANCEL)\"\n              >\n                <FaIcon icon-class=\"fas fa-xmark\" />\n              </button>\n            </div>\n          </template>\n          <div\n            class=\"overflow-visible bg-white md:overflow-auto md:rounded-b-alt-md pb-sm\"\n            :class=\"{\n              'h-[100%] md:h-auto md:max-h-[100%]': !dialogStore.headline,\n              'h-[calc(100%-56px)] md:h-auto md:max-h-[calc(100%-56px)]':\n                dialogStore.headline,\n            }\"\n          >\n            <slot />\n            <div id=\"dialogBody\"></div>\n          </div>\n          <button\n            v-if=\"!dialogStore.headline && showCloseButton\"\n            type=\"button\"\n            class=\"absolute text-xl cursor-pointer text-border-dark top-md right-md\"\n            @click=\"dialogStore.closeDialog(DialogResponses.CANCEL)\"\n          >\n            <FaIcon icon-class=\"fas fa-xmark\" />\n          </button>\n        </div>\n      </div>\n    </ContainerBasic>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport { useDialogStore, DialogResponses } from '@/stores/useDialogStore';\nimport { EContainerType } from '@/@types/container-type';\nimport FaIcon from '@/components/fa-icon.vue';\nimport { onClickOutside } from '@vueuse/core';\n\nconst props = defineProps({\n  showCloseButton: {\n    type: Boolean,\n    default: true,\n  },\n  closeOnOutsideClick: {\n    type: Boolean,\n    default: true,\n  },\n  isLoading: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst { t } = useTrans();\nconst el = ref<HTMLElement | null>(null);\n\nconst dialogStore = useDialogStore();\n\nonMounted(() => {\n  usePreventBodyScroll(true);\n});\n\nonUnmounted(() => {\n  usePreventBodyScroll(false);\n});\n\nwatch(useRouter().currentRoute, () => {\n  if (dialogStore.open) dialogStore.closeDialog();\n});\n\nonClickOutside(el, () => {\n  if (props.closeOnOutsideClick) dialogStore.closeDialog();\n});\n</script>\n"],"names":["props","__props","t","useTrans","el","ref","dialogStore","useDialogStore","onMounted","usePreventBodyScroll","onUnmounted","watch","useRouter","onClickOutside"],"mappings":"mxBAiEA,MAAMA,EAAQC,EAeR,CAAE,EAAAC,GAAMC,IACRC,EAAKC,EAAwB,IAAI,EAEjCC,EAAcC,IAEpB,OAAAC,EAAU,IAAM,CACdC,EAAqB,EAAI,CAAA,CAC1B,EAEDC,EAAY,IAAM,CAChBD,EAAqB,EAAK,CAAA,CAC3B,EAEKE,EAAAC,IAAY,aAAc,IAAM,CAChCN,EAAY,MAAMA,EAAY,YAAY,CAAA,CAC/C,EAEDO,EAAeT,EAAI,IAAM,CACnBJ,EAAM,qBAAqBM,EAAY,YAAY,CAAA,CACxD"}