{"version":3,"file":"Modal-Dp-kJp3c.js","sources":["../../Vue/src/components/Common/Modal.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nconst prop = withDefaults(\r\n  defineProps<{\r\n    img?: string;\r\n    imgAlt?: string;\r\n    title: string;\r\n    cancelBtnLabel?: string;\r\n    okBtnLabel?: string;\r\n    hideOkBtn?: boolean;\r\n    hideCancelBtn?: boolean;\r\n    hideFooter?: boolean;\r\n    showUpgradeBtn?: boolean;\r\n    closable?: boolean;\r\n    size?: string;\r\n    textCenter?: boolean;\r\n    id?: string;\r\n    busy?: boolean;\r\n    navGuardSave?: boolean;\r\n    dataContentAction?: string;\r\n    dataContentType?: string;\r\n  }>(),\r\n  {\r\n    cancelBtnLabel: \"Cancel\",\r\n    okBtnLabel: \"Ok\",\r\n    hideCancelBtn: false,\r\n    hideOkBtn: false,\r\n    hideFooter: false,\r\n    closable: true,\r\n    size: undefined,\r\n    img: \"\",\r\n    imgAlt: \"\",\r\n    textCenter: false,\r\n    id: () => uniqueId(\"modal\"),\r\n    dataContentAction: \"\",\r\n    dataContentType: \"\",\r\n  },\r\n);\r\n\r\nconst enableDOM = ref<boolean>(false);\r\nconst modal = ref<HTMLDivElement>();\r\nconst modals = useModalStore();\r\n\r\nasync function modalInit() {\r\n  if (!modal.value) {\r\n    return;\r\n  }\r\n}\r\nonMounted(() => {\r\n  show();\r\n  modals.onModalMount();\r\n  emitter.on(\"hideAllModals\", onEmitterHideAll);\r\n});\r\nonBeforeUnmount(() => {\r\n  emitter.off(\"hideAllModals\", onEmitterHideAll);\r\n});\r\n\r\nfunction onEmitterHideAll() {\r\n  hide();\r\n}\r\nconst debug = useDebug();\r\n\r\nasync function show() {\r\n  enableDOM.value = true;\r\n  await waitUntilTrue(() => !!modal.value);\r\n  await modalInit();\r\n  emit(\"show\");\r\n  debug.log(\"modal showing\");\r\n  //modal.value!.showModal();\r\n  await nextTick();\r\n\r\n  if (\"activeElement\" in document) {\r\n    (document.activeElement as any)?.blur &&\r\n      (document.activeElement as any).blur();\r\n  }\r\n}\r\n\r\nfunction hide() {\r\n  enableDOM.value = false;\r\n  modals.disposeAllModals();\r\n  emit(\"close\");\r\n}\r\n\r\nfunction dontSave() {\r\n  hide();\r\n  emit(\"dontSave\");\r\n}\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"ok\"): void;\r\n  (e: \"show\"): void;\r\n  (e: \"close\"): void;\r\n  (e: \"hidePrevented\"): void;\r\n  (e: \"dontSave\"): void;\r\n}>();\r\n\r\nfunction onOk() {\r\n  emit(\"ok\");\r\n}\r\n\r\nconst sizeClass = computed(() => (prop.size ? `max-w-${prop.size}` : \"\"));\r\n\r\ndefineExpose({ show, hide });\r\n</script>\r\n\r\n<template>\r\n  <!-- max-w-xl max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl max-w-sm max-w-xs -->\r\n\r\n  <Teleport to=\"body\">\r\n    <Transition name=\"fade\">\r\n      <div\r\n        v-if=\"enableDOM\"\r\n        class=\"modal\"\r\n        role=\"dialog\"\r\n        open\r\n      >\r\n        <div\r\n          class=\"modal-box\"\r\n          :class=\"sizeClass\"\r\n        >\r\n          <div class=\"modal-content\">\r\n            <div\r\n              v-if=\"img\"\r\n              class=\"modal-header-image\"\r\n            >\r\n              <Image\r\n                :alt=\"imgAlt\"\r\n                :src=\"img\"\r\n              />\r\n            </div>\r\n            <div class=\"modal-header\">\r\n              <h2 class=\"modal-title\">\r\n                {{ title.charAt(0).toUpperCase() + title.slice(1) }}\r\n              </h2>\r\n              <slot name=\"header-center\" />\r\n              <button\r\n                v-if=\"closable\"\r\n                type=\"button\"\r\n                class=\"btn-close\"\r\n                :class=\"{ 'btn-close-on-img': !!img }\"\r\n                :aria-label=\"$t('G.LIT_Close')\"\r\n                @click=\"hide\"\r\n              >\r\n                <FAIcon class=\"fa-light fa-times text-2xl leading-4\" />\r\n              </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n              <slot />\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n              <div\r\n                v-if=\"!hideFooter\"\r\n                class=\"modal-footer-buttons\"\r\n              >\r\n                <div class=\"order-2 md:order-1\">\r\n                  <slot name=\"footer\">\r\n                    <div class=\"flex flex-wrap items-center gap-1\">\r\n                      <Button\r\n                        v-if=\"navGuardSave\"\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary\"\r\n                        variant=\"secondary\"\r\n                        @click=\"dontSave()\"\r\n                      >\r\n                        {{ $t(\"SV.LIT_DontSave\") }}\r\n                      </Button>\r\n                      <Button\r\n                        v-if=\"!hideOkBtn\"\r\n                        type=\"button\"\r\n                        variant=\"primary\"\r\n                        :data-content-action=\"dataContentAction\"\r\n                        :data-content-type=\"dataContentType\"\r\n                        :busy=\"busy\"\r\n                        @click=\"onOk()\"\r\n                      >\r\n                        {{ okBtnLabel }}\r\n                      </Button>\r\n                      <Button\r\n                        v-if=\"showUpgradeBtn\"\r\n                        icon-start=\"fa-solid fa-cart-shopping\"\r\n                        variant=\"orange\"\r\n                        class=\"mx-2\"\r\n                        to=\"/about/pricing\"\r\n                        @click=\"hide\"\r\n                      >\r\n                        {{ $t(\"S.LIT_Upgrade\") }}\r\n                      </Button>\r\n                      <Button\r\n                        v-if=\"!hideCancelBtn\"\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary\"\r\n                        variant=\"secondary\"\r\n                        @click=\"hide()\"\r\n                      >\r\n                        {{ cancelBtnLabel }}\r\n                      </Button>\r\n                    </div>\r\n                  </slot>\r\n                </div>\r\n                <div\r\n                  v-if=\"$slots['footer-end']\"\r\n                  class=\"order-1 md:order-2\"\r\n                >\r\n                  <slot name=\"footer-end\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </Transition>\r\n  </Teleport>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.btn-close {\r\n  @apply -mb-2 text-gray-500 transition-all;\r\n}\r\n\r\n.btn-close:focus,\r\n.btn-close:hover {\r\n  @apply text-gray-800;\r\n}\r\n\r\n.modal-content {\r\n  @apply grid gap-4;\r\n}\r\n.modal-header {\r\n  @apply flex items-center justify-between gap-5;\r\n}\r\n.modal-title {\r\n  @apply text-ccli-blue;\r\n}\r\n.modal-box {\r\n  max-height: unset;\r\n  @apply mx-auto my-auto;\r\n}\r\n.modal {\r\n  @apply flex max-h-[100vh] max-h-screen items-start justify-center overflow-y-auto py-5;\r\n}\r\n.modal-footer-buttons {\r\n  @apply flex flex-1 flex-wrap items-center justify-between gap-5;\r\n}\r\n</style>\r\n"],"names":["prop","__props","enableDOM","ref","modal","modals","useModalStore","modalInit","onMounted","show","emitter","onEmitterHideAll","onBeforeUnmount","hide","debug","useDebug","waitUntilTrue","emit","nextTick","_a","dontSave","__emit","onOk","sizeClass","computed","__expose"],"mappings":"yyCACA,MAAMA,EAAOC,EAqCPC,EAAYC,EAAa,EAAK,EAC9BC,EAAQD,IACRE,EAASC,IAEf,eAAeC,GAAY,CACpBH,EAAM,KAGb,CACAI,EAAU,IAAM,CACTC,IACLJ,EAAO,aAAa,EACZK,EAAA,GAAG,gBAAiBC,CAAgB,CAAA,CAC7C,EACDC,EAAgB,IAAM,CACZF,EAAA,IAAI,gBAAiBC,CAAgB,CAAA,CAC9C,EAED,SAASA,GAAmB,CACrBE,GACP,CACA,MAAMC,EAAQC,IAEd,eAAeN,GAAO,OACpBP,EAAU,MAAQ,GAClB,MAAMc,EAAc,IAAM,CAAC,CAACZ,EAAM,KAAK,EACvC,MAAMG,EAAU,EAChBU,EAAK,MAAM,EACXH,EAAM,IAAI,eAAe,EAEzB,MAAMI,EAAS,EAEX,kBAAmB,WACpBC,EAAA,SAAS,gBAAT,MAAAA,EAAgC,MAC9B,SAAS,cAAsB,KAAK,CAE3C,CAEA,SAASN,GAAO,CACdX,EAAU,MAAQ,GAClBG,EAAO,iBAAiB,EACxBY,EAAK,OAAO,CACd,CAEA,SAASG,GAAW,CACbP,IACLI,EAAK,UAAU,CACjB,CAEA,MAAMA,EAAOI,EAQb,SAASC,GAAO,CACdL,EAAK,IAAI,CACX,CAEM,MAAAM,EAAYC,EAAS,IAAOxB,EAAK,KAAO,SAAS,OAAAA,EAAK,MAAS,EAAG,EAE3D,OAAAyB,EAAA,CAAE,KAAAhB,EAAM,KAAAI,CAAA,CAAM"}