{"version":3,"file":"Bpzg6Hj1.js","sources":["../../../../storyblok/StoryblokBanner.vue"],"sourcesContent":["<template>\n  <ClientOnly>\n    <Drawer\n      ref=\"bannerEl\"\n      :default-active=\"bannerActive\"\n      :max-width=\"{ xl: '100%' }\"\n      @close=\"setSessionVariable\"\n    >\n      <div\n        class=\"page-banner\"\n        :class=\"[`bg-${banner.flatColorBg || banner.customGradientBg}`]\"\n      >\n        <div class=\"image-container\">\n          <StoryblokImg :image=\"banner.image\" />\n        </div>\n        <div class=\"text-container\">\n          <h4>{{ banner.title }}</h4>\n          <div class=\"desktop-description description\">\n            <RichText :text=\"banner.descriptionDesktop\" />\n          </div>\n          <div class=\"mobile-description description\">\n            <RichText :text=\"banner.descriptionMobile\" />\n          </div>\n        </div>\n        <div class=\"btn-container\">\n          <NavigationButton\n            :blok=\"banner.button[0]\"\n            @click=\"bannerEl.closeDrawer(), setSessionVariable\"\n            v-if=\"banner.button.length\"\n          />\n        </div>\n        <button\n          class=\"btn-close\"\n          :aria-label=\"t('aria.close')\"\n          @click=\"bannerEl?.closeDrawer\"\n        >\n          <span class=\"m-cgg-icon--cross\"></span>\n        </button>\n      </div>\n    </Drawer>\n  </ClientOnly>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Drawer } from \"cja-phoenix\";\nimport { ref } from \"vue\";\n\ndefineProps<{ banner: any }>();\n\nconst { t } = useI18n();\n\nconst bannerEl = ref();\nconst bannerActive = useSessionStorage(\"Page Banner Active\", true);\n\nconst setSessionVariable = () => {\n  window.sessionStorage.setItem(\"Page Banner Active\", \"false\");\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.page-banner {\n  position: relative;\n  padding: 16px 60px 16px 32px;\n  color: $white;\n  border-radius: 16px 16px 0 0;\n  display: grid;\n  align-items: center;\n  gap: 16px;\n\n  @media screen and (min-width: $break-md-min) {\n    grid-template-columns: 1fr 200px;\n    margin: 0 24px;\n    padding: 16px 60px;\n  }\n\n  @media screen and (min-width: $break-lg-min) {\n    gap: 36px;\n    margin: 0 32px;\n    padding-left: 220px;\n  }\n\n  @media screen and (min-width: $break-xl-min) {\n    margin: 0 auto;\n    max-width: 1336px;\n  }\n\n  .image-container {\n    display: none;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 220px;\n    padding-right: 20px;\n\n    @media screen and (min-width: $break-lg-min) {\n      display: block;\n    }\n\n    img {\n      display: block;\n      background: transparent;\n      width: 100%;\n    }\n  }\n\n  h4 {\n    font-size: 24px;\n    line-height: 28px;\n    font-weight: 700;\n    margin: 0 0 8px;\n    display: none;\n\n    @media screen and (min-width: $break-lg-min) {\n      display: block;\n    }\n  }\n\n  .description {\n    :deep(p) {\n      font-size: 20px;\n      line-height: 26px;\n      margin: 0;\n    }\n  }\n\n  .desktop-description {\n    display: none;\n\n    @media screen and (min-width: $break-md-min) {\n      display: block;\n    }\n  }\n\n  .mobile-description {\n    @media screen and (min-width: $break-md-min) {\n      display: none;\n    }\n  }\n\n  .btn-container {\n    display: grid;\n\n    @media screen and (max-width: $break-sm-max) {\n      width: min(200px, 100%);\n      margin: 0 auto;\n    }\n  }\n\n  .btn-close {\n    position: absolute;\n    background: none;\n    outline: none;\n    padding: 0;\n    border: none;\n    color: $white;\n    top: 16px;\n    right: 16px;\n    font-size: 14px;\n    cursor: pointer;\n    height: 24px;\n    width: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    @media screen and (min-width: $break-lg-min) {\n      right: 24px;\n    }\n  }\n\n  &.bg-trf-cpg {\n    background: linear-gradient(90deg, #0f141c 17.16%, #151921 83.27%);\n  }\n\n  &.bg-cja {\n    background: linear-gradient(90deg, #b5e187, #076b9c 70%, #155072);\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"aria\": {\n      \"close\": \"Fechar\"\n    }\n  }\n}\n</i18n>\n"],"names":["t","useI18n","bannerEl","ref","bannerActive","useSessionStorage","setSessionVariable"],"mappings":"ggBAiDM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAEhBC,EAAWC,EAAI,EACfC,EAAeC,EAAkB,qBAAsB,EAAI,EAE3DC,EAAqB,IAAM,CACxB,OAAA,eAAe,QAAQ,qBAAsB,OAAO,CAC7D"}