{"version":3,"file":"ClassicModalInBody-BkaRcZZx.mjs","names":[],"sources":["../src/components/misc/modal/ClassicModalInBody.vue","../src/components/misc/modal/ClassicModalInBody.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"idModal\"\n    class=\"octopus-modal octopus-modal-in-body\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-backdrop\" />\n    <div class=\"octopus-modal-dialog\">\n      <div class=\"octopus-modal-content\">\n        <div class=\"octopus-modal-header\">\n          <h5 cclass=\"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              :ref=\"closable ? 'focusElement' : ''\"\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 name=\"body\" />\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </div>\n  </div>\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  titleModal: { default: undefined, type: String },\n  closable: { default: true, type: Boolean },\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables\nconst { t } = useI18n();\n\nonMounted(()=>{\n  (focusElementRef?.value as HTMLElement)?.focus();\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n\n</script>\n<style lang=\"scss\">\n.octopus-app .octopus-modal.octopus-modal-in-body{\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: block;\n  z-index: 1400;\n  width: 100%;\n  height: 100%;\n  overflow: hidden auto;\n  outline: 0;\n\n  .octopus-modal-backdrop {\n    opacity: 0.5;\n    z-index: 0;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal .octopus-modal-backdrop {\n    opacity: 0.1;\n  }\n\n  .octopus-modal-dialog {\n    position: relative;\n    pointer-events: none;\n    margin: 1.75rem auto;\n    max-width: 80vw;\n    max-height: 90dvh;\n    width: 100%;\n    display: flex;\n    color: var(--octopus-color-text) !important;\n\n    @media (width <= 500px) {\n      width: 95%;\n    }\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) var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-content {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    width: 100%;\n    background-color: white;\n    background-clip: padding-box;\n    border: 0;\n    outline: 0;\n    height: auto !important;\n    max-height: initial !important;\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  }\n\n  &:not(.octopus-only-header-modal) .octopus-modal-dialog,\n  &:not(.octopus-only-header-modal) .octopus-modal-content {\n    min-height: 300px;\n  }\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>","<template>\n  <div\n    :id=\"idModal\"\n    class=\"octopus-modal octopus-modal-in-body\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-backdrop\" />\n    <div class=\"octopus-modal-dialog\">\n      <div class=\"octopus-modal-content\">\n        <div class=\"octopus-modal-header\">\n          <h5 cclass=\"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              :ref=\"closable ? 'focusElement' : ''\"\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 name=\"body\" />\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </div>\n  </div>\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  titleModal: { default: undefined, type: String },\n  closable: { default: true, type: Boolean },\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables\nconst { t } = useI18n();\n\nonMounted(()=>{\n  (focusElementRef?.value as HTMLElement)?.focus();\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n\n</script>\n<style lang=\"scss\">\n.octopus-app .octopus-modal.octopus-modal-in-body{\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: block;\n  z-index: 1400;\n  width: 100%;\n  height: 100%;\n  overflow: hidden auto;\n  outline: 0;\n\n  .octopus-modal-backdrop {\n    opacity: 0.5;\n    z-index: 0;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal .octopus-modal-backdrop {\n    opacity: 0.1;\n  }\n\n  .octopus-modal-dialog {\n    position: relative;\n    pointer-events: none;\n    margin: 1.75rem auto;\n    max-width: 80vw;\n    max-height: 90dvh;\n    width: 100%;\n    display: flex;\n    color: var(--octopus-color-text) !important;\n\n    @media (width <= 500px) {\n      width: 95%;\n    }\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) var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-content {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    width: 100%;\n    background-color: white;\n    background-clip: padding-box;\n    border: 0;\n    outline: 0;\n    height: auto !important;\n    max-height: initial !important;\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  }\n\n  &:not(.octopus-only-header-modal) .octopus-modal-dialog,\n  &:not(.octopus-only-header-modal) .octopus-modal-content {\n    min-height: 300px;\n  }\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>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,OAAO;EAGb,MAAM,aAAa,IAAI,KAAK;EAC5B,MAAM,kBAAkB,eAAe,cAAc;EAGrD,MAAM,EAAE,MAAM,QAAQ;EAEtB,gBAAc;GACZ,CAAC,iBAAiB,QAAuB,MAAM;EACjD,CAAC;EAGD,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;;;mBCrES,OAAM,uBAAsB;mBAC1B,OAAM,wBAAuB;mBAC3B,OAAM,uBAAsB;mBAC3B,QAAO,sBAAqB;mBAG3B,OAAM,4BAA2B;;;mBAqBd,OAAM,qBAAoB;oBAG1B,OAAM,uBAAsB;;qBApC5D,mBAyCM,OAAA;EAxCH,IAAI,OAAA;EACL,OAAK,eAAA,CAAC,uCACE,OAAA,aAAU,8BAAA,EAAA,CAAA;+BAElB,mBAAsC,OAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,IACnC,mBAkCM,OAlCN,YAkCM,CAjCJ,mBAgCM,OAhCN,YAgCM;EA/BJ,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;;GAPN,KAAK,OAAA,WAAQ,iBAAA;GACd,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,mBAEM,OAFN,YAEM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADR,OAAA,UAAU,CAAA,CAAA;iBAGxB,mBAEM,OAFN,aAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADV,OAAA,UAAU,CAAA,CAAA"}