{"version":3,"file":"BA5roHF0.js","sources":["../../../../components/blog/GuideCard.vue","../../../../storyblok/blog/widgets/FeaturedGuidesList.vue"],"sourcesContent":["<template>\n  <div class=\"guide\">\n    <div class=\"image-container\">\n      <StoryblokImg :image=\"guide.image\" />\n      <div class=\"label-container\">\n        <CjaLabel :color=\"'blue'\">{{ guide.category }}</CjaLabel>\n        <CjaLabel :color=\"'green'\" v-if=\"guide.highlightTag\">\n          {{ guide.highlightTag }}\n        </CjaLabel>\n      </div>\n    </div>\n    <div class=\"text-container\">\n      <div class=\"title\">{{ guide.title }}</div>\n      <div class=\"btn-container\" v-for=\"options in guide.guideOptions\">\n        <CjaButton\n          v-if=\"options.document\"\n          type=\"secondary\"\n          icon=\"m-cgg-icon--download\"\n          :href=\"options.document.filename\"\n          :alt-anchor=\"NuxtLink\"\n          target=\"_blank\"\n        >\n          {{ t(\"btn.download\") }}\n        </CjaButton>\n\n        <CjaButton\n          v-else-if=\"options.eventTitle\"\n          type=\"secondary\"\n          icon=\"m-cgg-icon--datepicker\"\n          :href=\"\n            getCalendarUrl({\n              title: options.eventTitle,\n              description: options.eventDescription,\n              location: options.eventLocation,\n              allDay: options.allDay,\n              dateStart: new Date(options.dateStart),\n              dateEnd: new Date(options.dateEnd),\n            })\n          \"\n          :alt-anchor=\"NuxtLink\"\n          target=\"_blank\"\n        >\n          {{ t(\"btn.calendar\") }}\n        </CjaButton>\n\n        <CjaButton\n          v-else-if=\"options.post\"\n          type=\"secondary\"\n          :href=\"`/${options.post.slug}`\"\n          :alt-anchor=\"NuxtLink\"\n          icon=\"m-cgg-icon--chevron-right\"\n        >\n          {{ t(\"btn.post\") }}\n        </CjaButton>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NuxtLink } from \"#components\";\nimport { CjaButton, getCalendarUrl } from \"cja-phoenix\";\nimport { GuideStoryblok } from \"~/types/bloks\";\n\nconst { t } = useI18n();\n\ndefineProps<{\n  guide: GuideStoryblok;\n}>();\n</script>\n\n<style lang=\"scss\" scoped>\n.guide {\n  border-radius: 16px;\n  border: 1px solid $light-grey;\n  background: $extra-light-blue;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition: all 0.3s ease-in-out;\n\n  &:hover {\n    box-shadow: $box-shadow-m;\n  }\n\n  .image-container {\n    position: relative;\n\n    img {\n      display: block;\n      width: 100%;\n      height: 120px;\n      object-fit: cover;\n    }\n\n    .label-container {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 8px;\n      position: absolute;\n      top: 16px;\n      left: 16px;\n      right: 16px;\n    }\n  }\n\n  .text-container {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 16px;\n\n    .title {\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 22px;\n      margin-bottom: 16px;\n    }\n\n    .btn-container {\n      display: grid;\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"btn\": {\n      \"download\": \"Download\",\n      \"calendar\": \"Adicionar ao calendário\",\n      \"post\": \"Ver artigo\"\n    }\n  }\n}\n</i18n>\n","<template>\n  <div class=\"guide-list\" :style=\"{ ...cssVars }\">\n    <BlogGuideCard v-for=\"guide in guides\" v-bind=\"{ guide: guide.content }\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { BlogGuidesStoryblok } from \"~/types/bloks\";\n\nconst props = withDefaults(\n  defineProps<{\n    guides: BlogGuidesStoryblok;\n    cols?: {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n  }>(),\n  {\n    cols: () => ({\n      sm: 1,\n      md: 2,\n      lg: 4,\n      xl: 4,\n    }),\n  }\n);\n\nconst cssVars = computed(() => ({\n  \"--sm-cols\": props.cols.sm,\n  \"--md-cols\": props.cols.md,\n  \"--lg-cols\": props.cols.lg,\n  \"--xl-cols\": props.cols.xl,\n}));\n</script>\n\n<style lang=\"scss\" scoped>\n.guide-list {\n  display: grid;\n  gap: 24px;\n  grid-template-columns: repeat(var(--sm-cols), 1fr);\n\n  @media screen and (min-width: $break-md-min) {\n    grid-template-columns: repeat(var(--md-cols), 1fr);\n  }\n\n  @media screen and (min-width: $break-lg-min) {\n    grid-template-columns: repeat(var(--lg-cols), 1fr);\n  }\n\n  @media screen and (min-width: $break-xl-min) {\n    grid-template-columns: repeat(var(--xl-cols), 1fr);\n  }\n}\n</style>\n"],"names":["useI18n","props","__props","cssVars","computed"],"mappings":"0ZAgEM,KAAA,CAAE,CAAE,EAAIA,EAAQ,wlDCvDtB,MAAMC,EAAQC,EAoBRC,EAAUC,EAAS,KAAO,CAC9B,YAAaH,EAAM,KAAK,GACxB,YAAaA,EAAM,KAAK,GACxB,YAAaA,EAAM,KAAK,GACxB,YAAaA,EAAM,KAAK,EAAA,EACxB"}