{"version":3,"file":"CaYf-3ON.js","sources":["../../../../storyblok/blog/widgets/PostPreview.vue"],"sourcesContent":["<template>\n  <div\n    class=\"post-preview\"\n    :class=\"{\n      'no-image': !showImage,\n      'no-author': !showAuthor,\n      'no-read-time': !showReadTime,\n      [`shadow-${shadow}`]: shadow,\n    }\"\n  >\n    <NuxtLink :href=\"`/${post.fullSlug}`\">\n      <div class=\"image-container\" v-if=\"showImage\">\n        <StoryblokImg\n          :image=\"post.featuredImage\"\n          :class=\"`image-size-${imageSize}`\"\n          width=\"630\"\n          placeholder\n        />\n      </div>\n\n      <div class=\"label-container\">\n        <CjaLabel :color=\"'blue'\">{{ post.category }}</CjaLabel>\n      </div>\n      <div class=\"text-container\">\n        <div class=\"text-wrapper\">\n          <div class=\"title\">\n            {{ post.title }}\n          </div>\n          <div class=\"excerpt\" v-if=\"showExcerpt\">\n            <RichText :text=\"post.excerpt\" />\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"author-container\"\n        :class=\"{ 'bi-author': post.specialist }\"\n        v-if=\"showAuthor\"\n      >\n        <div class=\"author-image-wrapper\">\n          <StoryblokImg :image=\"post.author?.image\" width=\"36\" height=\"36\" />\n          <StoryblokImg\n            v-if=\"post.specialist\"\n            :image=\"post.specialist?.image\"\n            width=\"36\"\n            height=\"36\"\n          />\n        </div>\n        <div class=\"author-name\">\n          {{\n            t(`author_name.${post.specialist ? \"2\" : \"1\"}`, {\n              author: post.author?.name,\n              specialist: post.specialist?.name,\n            })\n          }}\n        </div>\n      </div>\n      <div class=\"read-time-container\" v-if=\"showReadTime\">\n        <span class=\"m-cgg-icon--time\"></span>\n        {{ post.estimatedReadTime }}\n      </div>\n    </NuxtLink>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { getEstimatedReadTime } from \"#imports\";\nimport { Post } from \"@/types/Post\";\n\nconst props = withDefaults(\n  defineProps<{\n    post: Post;\n    showImage?: boolean;\n    showAuthor?: boolean;\n    showReadTime?: boolean;\n    showExcerpt?: boolean;\n    imageSize?: \"md\" | \"lg\";\n    shadow?: \"sm\" | \"md\";\n  }>(),\n  {\n    showImage: true,\n    showAuthor: true,\n    showReadTime: true,\n    showExcerpt: false,\n    imageSize: \"md\",\n    shadow: \"sm\",\n  }\n);\n\nconst { t } = useI18n();\n</script>\n\n<style lang=\"scss\" scoped>\n.post-preview {\n  border-radius: 16px;\n  overflow: hidden;\n  border: 1px solid $light-grey;\n  background: $white;\n  user-select: none;\n  transition: all 0.6s ease-in-out;\n\n  &.shadow-sm:hover {\n    @media screen and (min-width: $break-lg-min) {\n      box-shadow: $box-shadow-s;\n    }\n  }\n\n  &.shadow-md:hover {\n    @media screen and (min-width: $break-lg-min) {\n      box-shadow: $box-shadow-m-dark;\n    }\n  }\n\n  a {\n    position: relative;\n    cursor: pointer;\n    color: inherit;\n    height: 100%;\n    padding: 16px;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-template-rows: auto 1fr auto;\n    gap: 16px;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  .image-container {\n    grid-area: 1 / 1 / 2 / 3;\n    margin: -16px -16px 0;\n    overflow: hidden;\n    background-color: $dark-white;\n\n    img {\n      display: block;\n      width: 100%;\n      object-fit: cover;\n      filter: brightness(0.9);\n\n      &.image-size-md {\n        height: 70px;\n\n        @media screen and (min-width: $break-md-min) {\n          height: 120px;\n        }\n      }\n\n      &.image-size-lg {\n        height: 120px;\n\n        @media screen and (min-width: $break-md-min) {\n          height: 120px;\n        }\n\n        @media screen and (min-width: $break-lg-min) {\n          height: 200px;\n        }\n      }\n    }\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  .text-container {\n    grid-area: 2 / 1 / 3 / 3;\n    .text-wrapper {\n      grid-area: 1 / 1 / 2 / 3;\n\n      .title {\n        font-size: 16px;\n        line-height: 20px;\n        font-weight: 700;\n\n        @media screen and (min-width: $break-md-min) {\n          font-size: 18px;\n          line-height: 22px;\n        }\n      }\n\n      .excerpt {\n        font-size: 16px;\n        line-height: 22px;\n        -webkit-line-clamp: 2;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n\n        @media screen and (max-width: $break-sm-max) {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .author-container {\n    grid-area: 3 / 1 / 4 / 2;\n    display: grid;\n    grid-template-columns: 36px 1fr;\n    align-items: center;\n    gap: 0 8px;\n    font-size: 14px;\n    line-height: 16px;\n\n    &.bi-author {\n      grid-template-columns: 58px 1fr;\n\n      .author-image-wrapper {\n        display: flex;\n\n        img + img {\n          position: relative;\n          left: -14px;\n        }\n      }\n    }\n\n    .author-image-wrapper {\n      grid-area: 1 / 1 / 2 / 2;\n\n      img {\n        flex-shrink: 0;\n        max-width: 36px;\n        width: 36px;\n        height: 36px;\n        overflow: hidden;\n        display: block;\n        width: 100%;\n        border-radius: 50%;\n        border: 2px solid $white;\n      }\n    }\n\n    .author-name {\n      grid-area: 1 / 2 / 2 / 3;\n    }\n  }\n\n  .read-time-container {\n    grid-area: 3 / 2 / 4 / 3;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: $main-blue;\n    font-size: 14px;\n    line-height: 24px;\n\n    span {\n      font-size: 24px;\n    }\n  }\n\n  &.no-image {\n    a {\n      grid-template-rows: auto 1fr auto;\n    }\n\n    .label-container {\n      position: static;\n      grid-area: 1 / 1 / 2 / 3;\n    }\n  }\n\n  &.no-image.no-author {\n    a {\n      grid-template-rows: auto 1fr;\n    }\n\n    .label-container {\n      position: static;\n      grid-area: 1 / 1 / 2 / 2;\n    }\n\n    .read-time-container {\n      grid-area: 1 / 2 / 2 / 3;\n    }\n  }\n\n  &.no-author.no-read-time {\n    a {\n      grid-template-rows: auto 1fr;\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"author_name\": {\n      \"1\": \"Por {author}\",\n      \"2\": \"Por {author} e {specialist}\"\n    }\n  }\n}\n</i18n>\n"],"names":["t","useI18n"],"mappings":"usBAwFM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ"}