{"version":3,"file":"PostFeaturedImage-BqZvoHSz.js","sources":["../../src/components/common/PostFeaturedImage.vue"],"sourcesContent":["<template>\n  <button\n    v-if=\"featuredImage && Object.keys(featuredImage).length\"\n    v-lightbox=\"prepareData(featuredImage)\"\n    :class=\"[$style.picture, isWide ? $style.wide : 'span-twelve', 'aspect-container']\"\n    :ga4-event=\"ga4Data\"\n  >\n    <picture>\n      <img\n        :alt=\"featuredImage.altText\"\n        :class=\"['aspect-image', { centered: isCentered }]\"\n        decoding=\"async\"\n        fetchpriority=\"high\"\n        loading=\"eager\"\n        :srcset=\"srcset\"\n        :src=\"proxySource(featuredImage.sourceUrl, imageWidth || null, isWide)\"\n        sizes=\"100vw\"\n      />\n    </picture>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { PostFeaturedImage } from '@/types/common.interface';\nimport { useImageProxy } from '@/composables/Common.js';\n\ninterface PreparedImageData {\n  alt: string;\n  description: string;\n  featured: boolean;\n  height: string;\n  src: string;\n  srcset: string;\n  width: string;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    featuredImage: PostFeaturedImage;\n    ga4Data?: string;\n    imageWidth?: number;\n    isAspect?: boolean;\n    isCentered?: boolean;\n    isWide?: boolean;\n    srcset?: string;\n  }>(),\n  { isAspect: false, isCentered: false, isWide: false },\n);\n\nconst { proxySource } = useImageProxy();\n\nfunction prepareData(lightbox: PostFeaturedImage): PreparedImageData {\n  return {\n    alt: lightbox.altText || '',\n    description: lightbox.description || '',\n    featured: true,\n    height: lightbox.mediaDetails ? lightbox.mediaDetails.height : '',\n    src: lightbox.sourceUrl || '',\n    srcset: props.srcset || '',\n    width: lightbox.mediaDetails ? lightbox.mediaDetails.width : '',\n  };\n}\n</script>\n\n<style lang=\"scss\" module>\n.picture {\n  @include space-0-above;\n\n  & {\n    background-color: $white;\n    cursor: pointer;\n    position: relative;\n    width: 100%;\n  }\n\n  &.wide {\n    left: 50%;\n    padding-bottom: 56.25%; // 16:9\n    transform: translateX(-50%);\n    width: 100vw;\n\n    img {\n      bottom: initial;\n      left: 50%;\n      max-height: initial;\n      top: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n  &:global(.active) {\n    position: initial;\n    transform: initial;\n  }\n}\n</style>\n"],"names":["props","__props","proxySource","useImageProxy","prepareData","lightbox"],"mappings":"6YAoCA,MAAMA,EAAQC,EAaR,CAAE,YAAAC,CAAY,EAAIC,EAAc,EAEtC,SAASC,EAAYC,EAAgD,CAC5D,MAAA,CACL,IAAKA,EAAS,SAAW,GACzB,YAAaA,EAAS,aAAe,GACrC,SAAU,GACV,OAAQA,EAAS,aAAeA,EAAS,aAAa,OAAS,GAC/D,IAAKA,EAAS,WAAa,GAC3B,OAAQL,EAAM,QAAU,GACxB,MAAOK,EAAS,aAAeA,EAAS,aAAa,MAAQ,EAC/D,CAAA"}