{"version":3,"file":"Cal0QwdC.js","sources":["../../../../composables/storyblok/useFeaturedPosts.ts","../../../../storyblok/blog/widgets/FeaturedPostsList.vue"],"sourcesContent":["import { Post } from \"@/types/Post\";\nimport { Status } from \"~/types/CustomFetch\";\nimport { mapResultToPosts } from \"~/utils/storyblok/mapResultToPosts\";\n\nexport const useFeaturedPosts = (featured: string[]) => {\n  const status: Ref<Status> = ref(\"pending\");\n  const { storyblokVersion } = useRuntimeConfig().public;\n\n  const posts: Ref<Post[]> = ref([]);\n\n  useStoryblokApi()\n    .getStories({\n      version: storyblokVersion as \"draft\" | \"published\",\n      content_type: \"post\",\n      per_page: 3,\n      resolve_links: \"url\",\n      resolve_relations: [\"post.author\", \"post.specialist\"],\n      by_uuids: featured.join(\",\"),\n    })\n    .then((r) => {\n      const mappedResult = mapResultToPosts(r);\n\n      posts.value = mappedResult.posts;\n\n      status.value = \"success\";\n    })\n    .catch(() => {\n      status.value = \"error\";\n    });\n\n  return {\n    status,\n    posts,\n  };\n};\n","<template>\n  <div class=\"featured-posts\" :class=\"[`variant-${variant}`]\">\n    <Transition name=\"fade\" mode=\"out-in\">\n      <LoadingSpinner v-if=\"status == 'pending'\" />\n      <div\n        class=\"featured-posts-wrapper\"\n        :class=\"{ 'has-widget': widget && variant == 'main' }\"\n        v-else\n      >\n        <PostPreview\n          v-for=\"(post, index) in posts\"\n          :post=\"post\"\n          :class=\"[`featured-post-${index + 1}`]\"\n          :show-excerpt=\"index == 0 && variant == 'main'\"\n          :show-image=\"index == 0 && variant == 'main'\"\n          :show-author=\"variant == 'main'\"\n          :image-size=\"'lg'\"\n        />\n        <div class=\"widget-container\" v-if=\"widget && variant == 'main'\">\n          <StoryblokComponent :blok=\"widget.content\" :story=\"widget\" />\n        </div>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { LoadingSpinner } from \"cja-phoenix\";\nimport { useFeaturedPosts } from \"~/composables/storyblok/useFeaturedPosts\";\nimport { FeaturedPostsListStoryblok } from \"~/types/bloks\";\n\nconst props = withDefaults(\n  defineProps<{\n    blok: FeaturedPostsListStoryblok;\n    widget?: any;\n    variant?: \"main\" | \"sidebar\";\n  }>(),\n  {\n    variant: \"main\",\n  }\n);\n\nconst { status, posts } = useFeaturedPosts(props.blok.content.posts);\n</script>\n\n<style lang=\"scss\" scoped>\n.featured-posts {\n  &.variant-main {\n    .featured-posts-wrapper {\n      display: grid;\n      gap: 16px;\n      grid-template-columns: 1fr;\n\n      @media screen and (min-width: $break-md-min) {\n        grid-template-columns: repeat(2, 1fr);\n        grid-template-rows: repeat(2, 1fr);\n        gap: 24px;\n      }\n\n      .featured-post-1 {\n        @media screen and (min-width: $break-md-min) {\n          grid-area: 1 / 1 / 3 / 2;\n        }\n      }\n\n      .featured-post-2 {\n        @media screen and (min-width: $break-md-min) {\n          grid-area: 1 / 2 / 2 / 3;\n        }\n      }\n\n      .featured-post-3 {\n        @media screen and (min-width: $break-md-min) {\n          grid-area: 2 / 2 / 3 / 3;\n        }\n      }\n\n      &.has-widget {\n        @media screen and (min-width: $break-md-min) {\n          grid-template-rows: repeat(3, auto);\n        }\n\n        @media screen and (min-width: $break-xl-min) {\n          grid-template-columns: 2fr repeat(2, 1fr);\n          grid-template-rows: repeat(2, 1fr);\n        }\n\n        .featured-post-2 {\n          @media screen and (min-width: $break-xl-min) {\n            grid-area: 1 / 2 / 2 / 3;\n          }\n        }\n\n        .featured-post-3 {\n          @media screen and (min-width: $break-xl-min) {\n            grid-area: 1 / 3 / 2 / 4;\n          }\n        }\n\n        .widget-container {\n          @media screen and (min-width: $break-md-min) {\n            grid-area: 3 / 1 / 4 / 3;\n          }\n\n          @media screen and (min-width: $break-xl-min) {\n            grid-area: 2 / 2 / 3 / 4;\n          }\n        }\n      }\n    }\n  }\n\n  &.variant-sidebar {\n    .featured-posts-wrapper {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 16px;\n    }\n  }\n\n  .spinner {\n    margin: 0 auto;\n  }\n}\n\n@include fade-transition;\n</style>\n"],"names":["useFeaturedPosts","featured","status","ref","storyblokVersion","useRuntimeConfig","posts","useStoryblokApi","r","mappedResult","mapResultToPosts","props","__props"],"mappings":"+PAIa,MAAAA,EAAoBC,GAAuB,CAChD,MAAAC,EAAsBC,EAAI,SAAS,EACnC,CAAE,iBAAAC,CAAA,EAAqBC,EAAA,EAAmB,OAE1CC,EAAqBH,EAAI,EAAE,EAEjCI,OAAAA,EAAA,EACG,WAAW,CACV,QAASH,EACT,aAAc,OACd,SAAU,EACV,cAAe,MACf,kBAAmB,CAAC,cAAe,iBAAiB,EACpD,SAAUH,EAAS,KAAK,GAAG,CAAA,CAC5B,EACA,KAAMO,GAAM,CACL,MAAAC,EAAeC,EAAiBF,CAAC,EAEvCF,EAAM,MAAQG,EAAa,MAE3BP,EAAO,MAAQ,SAAA,CAChB,EACA,MAAM,IAAM,CACXA,EAAO,MAAQ,OAAA,CAChB,EAEI,CACL,OAAAA,EACA,MAAAI,CACF,CACF,iICHA,MAAMK,EAAQC,EAWR,CAAE,OAAAV,EAAQ,MAAAI,GAAUN,EAAiBW,EAAM,KAAK,QAAQ,KAAK"}