{"version":3,"file":"ConfirmationModal-6giZe_mZ.js","sources":["../../../app/javascript/shared/components/modals/ConfirmationModal.vue"],"sourcesContent":["<template>\n  <BaseModal :name=\"name\" width-class=\"tw-max-w-[550px]\">\n    <div>\n      <div\n        class=\"tw-flex tw-justify-center tw-rounded-t-xl tw-p-3 tw-text-white\"\n        :class=\"modalColorClasses.header\"\n      >\n        <span v-if=\"!$slots.icon\" class=\"tw-h-6 tw-w-6\">\n          <BinIcon />\n        </span>\n        <span v-else class=\"tw-h-6 tw-w-6\">\n          <slot name=\"icon\" />\n        </span>\n      </div>\n      <div class=\"tw-p-5 tw-text-center\">\n        <h2 class=\"tw-heading-2\">{{ header }}</h2>\n        <p v-if=\"description\" class=\"tw-m-1 tw-text-sm tw-text-neutral-600\">\n          {{ description }}\n        </p>\n        <div class=\"tw-mt-5 tw-flex tw-justify-center tw-space-x-2\">\n          <BaseButton\n            color=\"outline-gray\"\n            @click=\"closeModal(name)\"\n            class=\"tw-w-40\"\n          >\n            {{ cancelButtonText }}\n          </BaseButton>\n          <BaseButton\n            :color=\"modalColorClasses.confirmationButton\"\n            @click=\"handleClickConfirmationButton\"\n            class=\"tw-w-40\"\n            test_id=\"modal-delete\"\n          >\n            {{ confirmationButtonText }}\n          </BaseButton>\n        </div>\n      </div>\n    </div>\n  </BaseModal>\n</template>\n\n<script setup>\nimport BaseButton from '../BaseButton.vue'\nimport BinIcon from '@/assets/images/icons/bin.svg'\nimport { computed } from 'vue'\nimport { useModals } from '@/shared/composables/useModals.js'\nimport BaseModal from '@/shared/components/BaseModal.vue'\n\nconst emit = defineEmits(['confirmation'])\n\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true,\n  },\n  header: {\n    type: String,\n    default: 'Are you sure you want to delete this entry?',\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  cancelButtonText: {\n    type: String,\n    default: 'No, cancel',\n  },\n  confirmationButtonText: {\n    type: String,\n    default: 'Yes, delete',\n  },\n  color: {\n    type: String,\n    default: 'red',\n  },\n})\n\nconst { closeModal } = useModals()\n\nconst modalColorClasses = computed(() => {\n  if (props.color === 'red') {\n    return {\n      header: 'tw-bg-error-500',\n      confirmationButton: 'red',\n    }\n  } else if (props.color === 'blue') {\n    return {\n      header: 'tw-bg-primary-500',\n      confirmationButton: 'secondary',\n    }\n  }\n  return { header: 'tw-bg-neutral-50', confirmationButton: 'gray' }\n})\n\nconst handleClickConfirmationButton = () => {\n  emit('confirmation')\n  closeModal(props.name)\n}\n</script>\n"],"names":["emit","__emit","props","__props","closeModal","useModals","modalColorClasses","computed","handleClickConfirmationButton"],"mappings":"yxBAgDA,MAAMA,EAAOC,EAEPC,EAAQC,EA2BR,CAAE,WAAAC,CAAY,EAAGC,EAAW,EAE5BC,EAAoBC,EAAS,IAC7BL,EAAM,QAAU,MACX,CACL,OAAQ,kBACR,mBAAoB,KACrB,EACQA,EAAM,QAAU,OAClB,CACL,OAAQ,oBACR,mBAAoB,WACrB,EAEI,CAAE,OAAQ,mBAAoB,mBAAoB,MAAQ,CAClE,EAEKM,EAAgC,IAAM,CAC1CR,EAAK,cAAc,EACnBI,EAAWF,EAAM,IAAI,CACvB"}