{"version":3,"file":"51-Ozuxz.js","sources":["../../../../../../../app/components/CiImageFocal/CiImageFocal.vue","../../../../../../../app/components/CiMagazinePosts/CiMagazinePosts.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/********************\n * PROPS & EMITS    *\n ********************/\nexport interface CiImageFocalProps {\n  image: object;\n  rounded?: boolean;\n  alt?: string;\n}\nconst props = withDefaults(defineProps<CiImageFocalProps>(), {\n  rounded: true,\n});\n\n/********************\n * REFS & VARS       *\n ********************/\nconst wrapperClasses = computed(() => {\n  return {\n    'h-full': true,\n    'img-focal': true,\n    'relative': true,\n    'rounded': props.rounded,\n    'overflow-hidden': true,\n  };\n});\n\nconst x = computed(() => {\n  return props.image.focal_point?.x ? `${props.image.focal_point?.x + 1 * 50}%` : '50%';\n});\n\nconst y = computed(() => {\n  return props.image.focal_point?.y ? `${(props.image.focal_point?.y + 1) * 50}%` : '50%';\n});\n</script>\n\n<template>\n  <div :class=\"wrapperClasses\">\n    <img\n      class=\"size-full object-cover\"\n      :style=\"`object-position: ${x} ${y}`\"\n      :src=\"props.image.file_url\"\n      loading=\"lazy\"\n      :alt=\"props.alt\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport dayjs from '@/utils/day';\n\n/********************\n * PROPS & EMITS    *\n ********************/\nexport interface CiMagazinePostsProps {\n  loading?: boolean;\n  posts?: any[];\n}\nconst props = withDefaults(defineProps<CiMagazinePostsProps>(), {\n  loading: false,\n  posts: () => [],\n});\n\n/********************\n * COMPOSITIONS      *\n ********************/\nconst runtimeConfig = useRuntimeConfig();\nconst { $gettext } = useGettext();\nconst { locale } = useI18n();\n\n/********************\n * REFS & VARS       *\n ********************/\nconst smallPosts = computed(() => {\n  const posts = [];\n  for (let i = 0; i < 2 && props.posts[i]; i += 1) {\n    const post = props.posts[i];\n\n    if (post) {\n      posts.push(post);\n    }\n  }\n  return posts;\n});\n\nconst largePost = computed(() => {\n  if (props.posts && props.posts[2]) {\n    return props.posts[2];\n  }\n  return null;\n});\n\nconst i18nHeadline = computed(() => {\n  return $gettext('<strong>Latest</strong><span class=\"light\"> Posts</span>');\n});\n\n/********************\n * FUNCTIONS         *\n ********************/\nfunction formatDate(value) {\n  return !value ? '' : dayjs(value).format('DD. MMMM YYYY');\n}\n\nfunction getPostLink(post) {\n  return post.type === 'diy'\n    ? `${runtimeConfig.public.magazineUrl}${locale.value}/${post.slug.slug}/1`\n    : `${runtimeConfig.public.magazineUrl}${locale.value}/${post.slug.slug}`;\n}\n\nfunction getCategoryLink(mainCategory, parentCategory) {\n  if (!mainCategory || !parentCategory) {\n    return;\n  }\n  return `${runtimeConfig.public.magazineUrl}${locale.value}/${parentCategory.slug.slug}/${mainCategory.slug.slug}`;\n}\n</script>\n\n<template>\n  <section\n    v-if=\"loading || posts.length\"\n    class=\"section section--magazine-posts container my-12 grid grid-cols-12 gap-x-[30px] pb-0\"\n  >\n    <div class=\"col-span-12 flex flex-col items-center justify-center\">\n      <h2\n        class=\"m-0 mb-4\"\n        v-html=\"i18nHeadline\"\n      />\n    </div>\n\n    <template v-if=\"posts.length\">\n      <!-- small posts -->\n      <div\n        v-for=\"post in smallPosts\"\n        :key=\"post.id\"\n        class=\"relative z-10 col-span-12 mb-4 h-60 md:col-span-6 md:h-80 lg:col-span-3 lg:h-[25rem]\"\n      >\n        <a\n          :href=\"getPostLink(post)\"\n          class=\"relative block h-full rounded shadow-ci after:absolute after:left-0 after:top-0 after:block after:size-full after:opacity-0 after:shadow-ci-sm after:transition-opacity after:duration-500 after:content-[''] hover:cursor-pointer hover:no-underline hover:after:rounded hover:after:opacity-100\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          <div class=\"absolute z-10\">\n            <div class=\"p-6\">\n              <div class=\"text-shadow font-bold text-white\">\n                {{ post.post_content[0].title }}\n              </div>\n              <div class=\"mt-1\">\n                <span class=\"text-shadow text-sm font-medium text-primary\">\n                  {{ formatDate(post.created_at) }}\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"relative -z-1 h-full\">\n            <CiImageFocal\n              v-if=\"post.post_content[0].image\"\n              :image=\"post.post_content[0].image\"\n              :alt=\"post.post_content[0].title\"\n              class=\"size-full after:absolute after:left-0 after:top-0 after:block after:size-full after:bg-gradient-to-b after:from-black after:to-[rgba(14,31,18,0)] after:opacity-80 after:content-['']\"\n            />\n          </div>\n        </a>\n        <a\n          v-if=\"post.main_category\"\n          :href=\"getCategoryLink(post.main_category, post.main_category.parent)\"\n          class=\"button button--light button--radius-small text-small-book absolute mb-6 ml-6 px-4 py-1 font-bold\"\n          style=\"z-index: 10; bottom: 0\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          {{ post.main_category.title }}\n        </a>\n      </div>\n\n      <!-- large posts -->\n      <div\n        v-if=\"largePost\"\n        class=\"relative z-10 col-span-12 mb-4 h-auto md:h-80 lg:col-span-6 lg:h-[25rem]\"\n      >\n        <a\n          v-if=\"largePost.main_category\"\n          :href=\"getCategoryLink(largePost.main_category, largePost.main_category.parent)\"\n          class=\"button button--primary button--radius-small text-small-book absolute z-10 ml-6 mt-6 px-4 py-1 font-bold\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          {{ largePost.main_category.title }}\n        </a>\n        <a\n          :href=\"getPostLink(largePost)\"\n          class=\"relative grid h-full grid-cols-12 rounded shadow-ci after:absolute after:left-0 after:top-0 after:block after:size-full after:opacity-0 after:shadow-ci-sm after:transition-opacity after:duration-500 after:content-[''] hover:cursor-pointer hover:no-underline hover:after:rounded hover:after:opacity-100\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          <div class=\"col-span-12 md:col-span-6\">\n            <div class=\"relative -z-1 h-60 w-full md:h-full\">\n              <CiImageFocal\n                v-if=\"largePost.post_content[0].image\"\n                :image=\"largePost.post_content[0].image\"\n                :alt=\"largePost.post_content[0].title\"\n              />\n            </div>\n          </div>\n          <div class=\"col-span-12 h-full md:col-span-6\">\n            <div class=\"rounded-right z-10 flex h-full flex-col items-start bg-white p-4\">\n              <div class=\"font-bold text-black\">\n                {{ largePost.post_content[0].title }}\n              </div>\n              <div class=\"mb-6\">\n                <span class=\"text-sm font-medium text-primary\">{{ formatDate(largePost.created_at) }}</span>\n              </div>\n              <div>\n                <p class=\"m-0 line-clamp-2 text-black md:line-clamp-6\">\n                  {{ largePost.post_content[0].teaser }}\n                </p>\n              </div>\n            </div>\n          </div>\n        </a>\n      </div>\n    </template>\n\n    <template v-if=\"loading && !posts.length\">\n      <div class=\"z-10 col-span-12 mb-4 md:col-span-6 lg:col-span-3\">\n        <CiSkeletonItem class=\"h-60 w-full rounded md:h-80 lg:h-[25rem]\" />\n      </div>\n      <div class=\"z-10 col-span-12 mb-4 md:col-span-6 lg:col-span-3\">\n        <CiSkeletonItem class=\"h-60 w-full rounded md:h-80 lg:h-[25rem]\" />\n      </div>\n      <div class=\"z-10 col-span-12 mb-4 lg:col-span-6\">\n        <CiSkeletonItem class=\"h-[25rem] w-full rounded md:h-80 lg:h-[25rem]\" />\n      </div>\n    </template>\n  </section>\n</template>\n\n<style></style>\n"],"names":["props","__props","wrapperClasses","computed","x","_a","_b","y","runtimeConfig","useRuntimeConfig","$gettext","useGettext","locale","useI18n","smallPosts","posts","i","post","largePost","i18nHeadline","formatDate","value","dayjs","getPostLink","getCategoryLink","mainCategory","parentCategory"],"mappings":"ynBASA,MAAMA,EAAQC,EAORC,EAAiBC,EAAS,KACvB,CACL,SAAU,GACV,YAAa,GACb,SAAY,GACZ,QAAWH,EAAM,QACjB,kBAAmB,EACrB,EACD,EAEKI,EAAID,EAAS,IAAM,SAChB,OAAAE,EAAAL,EAAM,MAAM,cAAZ,MAAAK,EAAyB,EAAI,KAAGC,EAAAN,EAAM,MAAM,cAAZ,YAAAM,EAAyB,GAAI,EAAI,EAAE,IAAM,KAAA,CACjF,EAEKC,EAAIJ,EAAS,IAAM,SAChB,OAAAE,EAAAL,EAAM,MAAM,cAAZ,MAAAK,EAAyB,EAAI,MAAIC,EAAAN,EAAM,MAAM,cAAZ,YAAAM,EAAyB,GAAI,GAAK,EAAE,IAAM,KAAA,CACnF,o3CCtBD,MAAMN,EAAQC,EAQRO,EAAgBC,EAAiB,EACjC,CAAE,SAAAC,CAAS,EAAIC,EAAW,EAC1B,CAAE,OAAAC,CAAO,EAAIC,EAAQ,EAKrBC,EAAaX,EAAS,IAAM,CAChC,MAAMY,EAAQ,CAAC,EACN,QAAAC,EAAI,EAAGA,EAAI,GAAKhB,EAAM,MAAMgB,CAAC,EAAGA,GAAK,EAAG,CACzC,MAAAC,EAAOjB,EAAM,MAAMgB,CAAC,EAEtBC,GACFF,EAAM,KAAKE,CAAI,CACjB,CAEK,OAAAF,CAAA,CACR,EAEKG,EAAYf,EAAS,IACrBH,EAAM,OAASA,EAAM,MAAM,CAAC,EACvBA,EAAM,MAAM,CAAC,EAEf,IACR,EAEKmB,EAAehB,EAAS,IACrBO,EAAS,0DAA0D,CAC3E,EAKD,SAASU,EAAWC,EAAO,CACzB,OAAQA,EAAaC,EAAMD,CAAK,EAAE,OAAO,eAAe,EAAxC,EAAwC,CAG1D,SAASE,EAAYN,EAAM,CAClB,OAAAA,EAAK,OAAS,MACjB,GAAGT,EAAc,OAAO,WAAW,GAAGI,EAAO,KAAK,IAAIK,EAAK,KAAK,IAAI,KACpE,GAAGT,EAAc,OAAO,WAAW,GAAGI,EAAO,KAAK,IAAIK,EAAK,KAAK,IAAI,EAAA,CAGjE,SAAAO,EAAgBC,EAAcC,EAAgB,CACjD,GAAA,GAACD,GAAgB,CAACC,GAGtB,MAAO,GAAGlB,EAAc,OAAO,WAAW,GAAGI,EAAO,KAAK,IAAIc,EAAe,KAAK,IAAI,IAAID,EAAa,KAAK,IAAI,EAAA"}