{"version":3,"file":"Dcmr_s4z.js","sources":["../../../../storyblok/blog/content/Categories.vue"],"sourcesContent":["<template>\n  <BlogSearchHeader />\n  <div class=\"category-picker\">\n    <BlogCategoryPicker :categories=\"categories\" v-model=\"activeCategory\" />\n  </div>\n  <GridContainer class=\"category-results\">\n    <GridItem :size-xl=\"9\">\n      <div class=\"header-container\">\n        <h3>{{ activeCategory || t(\"title\") }}</h3>\n        <button class=\"category-modal-btn\" @click=\"categoriesModal.openModal()\">\n          <span class=\"m-cgg-icon--categories\"></span>\n          <span>{{ t(\"btn.category_modal\") }}</span>\n        </button>\n      </div>\n      <div class=\"category-posts\" ref=\"postsContainer\">\n        <BlogPostList\n          :posts=\"posts\"\n          :status=\"status\"\n          :cols=\"{ md: 2, lg: 3, xl: 3 }\"\n        />\n        <BlogPagination\n          v-bind=\"{ page, pageTotal: totalPages }\"\n          :scroll-target=\"postsContainer\"\n          @change-page=\"(v) => (page = v)\"\n        />\n      </div>\n      <BannerSlideshow :blok=\"blok.slideshow.content\" v-if=\"blok.slideshow\" />\n\n      <div class=\"featured-main\">\n        <div class=\"header-container\">\n          <h3>{{ t(\"featured.title\") }}</h3>\n        </div>\n        <FeaturedPostsList :blok=\"blok.featuredPostsList\" :variant=\"'main'\" />\n      </div>\n    </GridItem>\n    <GridItem class=\"sidebar\" :size-xl=\"3\">\n      <div class=\"featured-posts-container\">\n        <h3>{{ t(\"featured.title\") }}</h3>\n        <FeaturedPostsList\n          :blok=\"blok.featuredPostsList\"\n          :variant=\"'sidebar'\"\n        />\n      </div>\n      <NewsletterSidebar />\n    </GridItem>\n  </GridContainer>\n  <Modal ref=\"categoriesModal\">\n    <template #header>\n      {{ t(\"modal.categories.title\") }}\n    </template>\n    <template #body>\n      <div class=\"modal-categories-body\">\n        <div class=\"modal-description\">\n          {{ t(\"modal.categories.description\") }}\n        </div>\n        <ul>\n          <li v-for=\"category in categories\">\n            <button\n              @click=\"\n                activeCategory = category;\n                categoriesModal.closeModal();\n              \"\n            >\n              {{ category }}\n              <span class=\"m-cgg-icon--chevron-right\"></span>\n            </button>\n          </li>\n        </ul>\n      </div>\n    </template>\n    <template #footer>\n      <CjaButton\n        class=\"modal-categories-btn\"\n        @click=\"categoriesModal.closeModal()\"\n        >{{ t(\"modal.categories.btn\") }}</CjaButton\n      >\n    </template>\n  </Modal>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CjaButton, GridContainer, GridItem, Modal } from \"cja-phoenix\";\nimport { useCategoryPosts } from \"~/composables/storyblok/useCategoryPosts\";\nimport { CategoriesStoryblok } from \"~/types/bloks\";\n\ndefineProps<{\n  categories: string[];\n  blok: CategoriesStoryblok;\n  story: any;\n}>();\n\nconst route = useRoute();\nconst { t } = useI18n();\n\nconst activeCategory = ref(route.query.category as string);\n\nconst categoriesModal = ref();\nconst postsContainer = ref();\n\nconst { status, posts, page, totalPages } = useCategoryPosts(activeCategory);\n</script>\n\n<style lang=\"scss\" scoped>\n.category-results {\n  padding-top: 40px;\n  padding-bottom: 40px;\n\n  .header-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 4px;\n    margin: 0 0 32px;\n\n    h3 {\n      margin: 0;\n      @include blog-header;\n    }\n  }\n\n  .category-modal-btn {\n    background: none;\n    border: none;\n    padding: 0;\n    outline: none;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    color: $main-blue;\n    font-size: 14px;\n    font-weight: 700;\n    line-height: 18px;\n\n    @media screen and (min-width: $break-xs-min) {\n      flex-direction: row;\n      gap: 8px;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      display: none;\n    }\n\n    .m-cgg-icon--categories {\n      font-weight: 700;\n    }\n  }\n\n  .posts-container {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 32px 24px;\n\n    @media screen and (min-width: $break-md-min) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      grid-template-columns: repeat(3, 1fr);\n    }\n  }\n\n  .category-posts {\n    margin-bottom: 40px;\n  }\n}\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n\n  @media screen and (max-width: $break-lg-max) {\n    display: none;\n  }\n\n  h3 {\n    margin: 0 0 16px;\n  }\n}\n\n.featured-main,\n.newsletter-main {\n  @media screen and (min-width: $break-xl-min) {\n    display: none;\n  }\n}\n\n.featured-main {\n  margin-top: 32px;\n\n  > .header-container {\n    margin: 0 0 24px;\n    @include blog-header;\n\n    h3 {\n      margin: 0;\n    }\n  }\n}\n\n.modal-categories-body {\n  .modal-description {\n    color: $blue-grey;\n    font-size: 16px;\n    line-height: 24px;\n    margin-bottom: 24px;\n  }\n\n  ul {\n    display: grid;\n    gap: 12px;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    li {\n      button {\n        display: flex;\n        justify-content: space-between;\n        gap: 12px;\n        width: 100%;\n        background: none;\n        border: none;\n        outline: none;\n        font-size: 16px;\n        line-height: 24px;\n        border-top: 1px solid $light-grey;\n        padding-top: 12px;\n      }\n    }\n  }\n}\n\n.modal-categories-btn {\n  width: 100%;\n}\n\n.category-picker {\n  display: none;\n\n  @media screen and (min-width: $break-lg-min) {\n    display: block;\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": \"Todos os artigos\",\n    \"featured\": {\n      \"title\": \"Últimos artigos\"\n    },\n    \"btn\": {\n      \"category_modal\": \"Temas\"\n    },\n    \"modal\": {\n      \"categories\": {\n        \"title\": \"Temas\",\n        \"description\": \"Seleciona um tema\",\n        \"btn\": \"Ver todos os artigos\"\n      }\n    }\n  }\n}\n</i18n>\n"],"names":["route","useRoute","t","useI18n","activeCategory","ref","categoriesModal","postsContainer","status","posts","page","totalPages","useCategoryPosts"],"mappings":"m5BA2FA,MAAMA,EAAQC,EAAS,EACjB,CAAE,EAAAC,CAAE,EAAIC,EAAQ,EAEhBC,EAAiBC,EAAIL,EAAM,MAAM,QAAkB,EAEnDM,EAAkBD,EAAI,EACtBE,EAAiBF,EAAI,EAErB,CAAE,OAAAG,EAAQ,MAAAC,EAAO,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAiBR,CAAc"}