{"version":3,"file":"ClassicModal-CilwHp9p.mjs","names":[],"sources":["../src/components/misc/modal/ClassicModal.vue","../src/components/misc/modal/ClassicModal.vue"],"sourcesContent":["<template>\n  <dialog\n    :id=\"idModal\"\n    ref=\"modal\"\n    class=\"octopus-modal octopus-modal-top-layer\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-header\">\n      <h5 class=\"octopus-modal-title\">\n        {{ titleModal }}\n      </h5>\n      <div class=\"d-flex align-items-center\">\n        <button\n          v-if=\"canBeReduced\"\n          class=\"btn-transparent text-light\"\n          :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n          @click=\"onlyHeader = !onlyHeader\"\n        >\n          <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n        </button>\n        <button\n          v-if=\"closable\"\n          autofocus\n          type=\"button\"\n          class=\"btn-transparent text-light\"\n          :title=\"t('Close')\"\n          @click=\"closePopup\"\n        >\n          <WindowCloseIcon />\n        </button>\n      </div>\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n      <slot />\n      <slot name=\"body\" />\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  /** The title of the modal */\n  titleModal: { default: undefined, type: String },\n  /** If false, the modal won't display a close button (default: true) */\n  closable: { default: true, type: Boolean },\n  /** If true, the modal can be reduced to show only the header (default: false) */\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst modalRef = useTemplateRef('modal');\n\n\n//Composables\nconst { t } = useI18n();\n\n\nonMounted(()=>{\n  const dialog = modalRef?.value as HTMLDialogElement;\n  dialog.showModal();\n  dialog.addEventListener('cancel', (event) => {\n    event.preventDefault();\n    emit(\"close\");\n  });\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .octopus-modal.octopus-modal-top-layer{\n  &::backdrop {\n    opacity: 0.5;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal::backdrop{\n    opacity: 0.1;\n  }\n\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  border: 0;\n  border-radius: var(--octopus-border-radius);\n  box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  color: var(--octopus-color-text) !important;\n  margin-top: 2rem;\n  width: 80vw;\n  max-height: 90dvh;\n  overflow: hidden;\n\n  @media (width <= 500px) {\n    width: 95vw;\n    margin-left: 2.5vw;\n    margin-right: 2.5vw;\n  }\n\n .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius)\n      var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>\n","<template>\n  <dialog\n    :id=\"idModal\"\n    ref=\"modal\"\n    class=\"octopus-modal octopus-modal-top-layer\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-header\">\n      <h5 class=\"octopus-modal-title\">\n        {{ titleModal }}\n      </h5>\n      <div class=\"d-flex align-items-center\">\n        <button\n          v-if=\"canBeReduced\"\n          class=\"btn-transparent text-light\"\n          :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n          @click=\"onlyHeader = !onlyHeader\"\n        >\n          <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n        </button>\n        <button\n          v-if=\"closable\"\n          autofocus\n          type=\"button\"\n          class=\"btn-transparent text-light\"\n          :title=\"t('Close')\"\n          @click=\"closePopup\"\n        >\n          <WindowCloseIcon />\n        </button>\n      </div>\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n      <slot />\n      <slot name=\"body\" />\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  /** The title of the modal */\n  titleModal: { default: undefined, type: String },\n  /** If false, the modal won't display a close button (default: true) */\n  closable: { default: true, type: Boolean },\n  /** If true, the modal can be reduced to show only the header (default: false) */\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst modalRef = useTemplateRef('modal');\n\n\n//Composables\nconst { t } = useI18n();\n\n\nonMounted(()=>{\n  const dialog = modalRef?.value as HTMLDialogElement;\n  dialog.showModal();\n  dialog.addEventListener('cancel', (event) => {\n    event.preventDefault();\n    emit(\"close\");\n  });\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .octopus-modal.octopus-modal-top-layer{\n  &::backdrop {\n    opacity: 0.5;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal::backdrop{\n    opacity: 0.1;\n  }\n\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  border: 0;\n  border-radius: var(--octopus-border-radius);\n  box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  color: var(--octopus-color-text) !important;\n  margin-top: 2rem;\n  width: 80vw;\n  max-height: 90dvh;\n  overflow: hidden;\n\n  @media (width <= 500px) {\n    width: 95vw;\n    margin-left: 2.5vw;\n    margin-right: 2.5vw;\n  }\n\n .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius)\n      var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,OAAO;EAGb,MAAM,aAAa,IAAI,KAAK;EAC5B,MAAM,WAAW,eAAe,OAAO;EAIvC,MAAM,EAAE,MAAM,QAAQ;EAGtB,gBAAc;GACZ,MAAM,SAAS,UAAU;GACzB,OAAO,UAAU;GACjB,OAAO,iBAAiB,WAAW,UAAU;IAC3C,MAAM,eAAe;IACrB,KAAK,OAAO;GACd,CAAC;EACH,CAAC;EAGD,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;;;;mBC5ES,OAAM,uBAAsB;mBAC3B,OAAM,sBAAqB;mBAG1B,OAAM,4BAA2B;;;mBAqBd,OAAM,qBAAoB;mBAI1B,OAAM,uBAAsB;;qBAnCxD,mBAsCS,UAAA;EArCN,IAAI,OAAA;EACL,KAAI;EACJ,OAAK,eAAA,CAAC,yCACE,OAAA,aAAU,8BAAA,EAAA,CAAA;;EAElB,mBAwBM,OAxBN,YAwBM,CAvBJ,mBAEK,MAFL,YAEK,gBADA,OAAA,UAAU,GAAA,CAAA,GAEf,mBAmBM,OAnBN,YAmBM,CAjBI,OAAA,gBAAA,UAAA,GADR,mBAOS,UAAA;;GALP,OAAM;GACL,OAAO,OAAA,aAAa,OAAA,EAAC,SAAA,IAAc,OAAA,EAAC,QAAA;GACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,aAAU,CAAI,OAAA;MAEtB,YAA+D,OAAA,oBAAA,EAA7C,OAAK,eAAA,EAAA,mBAAA,CAAwB,OAAA,WAAU,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,QAAA,IAAA,GAGnD,OAAA,YAAA,UAAA,GADR,mBASS,UAAA;;GAPP,WAAA;GACA,MAAK;GACL,OAAM;GACL,OAAO,OAAA,EAAC,OAAA;GACR,SAAO,OAAA;MAER,YAAmB,OAAA,kBAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA,CAAA,CAAA;iBAIzB,mBAGM,OAHN,YAGM,CAFJ,WAAQ,KAAA,QAAA,SAAA,GACR,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CAFR,OAAA,UAAU,CAAA,CAAA;iBAIxB,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADV,OAAA,UAAU,CAAA,CAAA"}