{"version":3,"file":"BQm7JLgc.js","sources":["../../../../components/Paragraph/GalleryGrid/index.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"images?.length\"\n    class=\"gallery-grid-container paragraph flex flex-wrap gap-[15px] md:gap-24\"\n    :class=\"{\n      'right-aligned': rightAligned,\n      'left-aligned': !rightAligned,\n    }\"\n  >\n    <MediaImage\n      v-for=\"(image, index) in images\"\n      :key=\"index\"\n      v-bind=\"image\"\n      class=\"order-3 inline-block\"\n      :image-style=\"imageStyle(index)\"\n      :class=\"{\n        'gallery-item-normal': sizeSm(index) === 'normal',\n        'gallery-item-full': sizeSm(index) === 'full',\n        'md:gallery-item-small': sizeMd(index) === 'small',\n        'md:gallery-item-big': sizeMd(index) === 'big',\n        'md:gallery-item-normal': sizeMd(index) === 'normal',\n        'md:gallery-item-big-right': galleryItemBigRight(index),\n        'md:gallery-item-big-left': galleryItemBigLeft(index),\n        '!order-1':\n          index === 0 ||\n          (index === 1 && images.length !== 2) ||\n          (index === 2 && images?.length % 2 === 1),\n        'md:order-1': index < 2,\n      }\"\n    />\n    <Text\n      v-if=\"hasText\"\n      :class=\"{\n        '!w-full': images?.length === 2 || images?.length === 4,\n      }\"\n      class=\"gallery-grid-text-item md:gallery-item-big order-2 flex w-full flex-col justify-center py-24 text-base md:py-0\"\n    >\n      <!-- we use percentage fontsizes here so the scaling from the Text element works proportionally -->\n      <!-- text-4xl / text-base = 250%; line-height of text-4xl = 1.2 -->\n      <!-- mobile text = 32 / 16 = 200%; line-height: 40 / 32 = 1.25 -->\n      <div\n        v-blokkli-editable:field_headline\n        class=\"text-[200%] font-light uppercase [line-height:125%] md:text-[250%] md:[line-height:120%]\"\n      >\n        {{ headline }}\n      </div>\n      <!-- text-2xl / text-base = 150%; line-height of text-2xl = 1.33 -->\n      <!-- mobile text = 20 / 16 = 125%; line-height: 32 / 20 = 1.6 -->\n      <div\n        v-blokkli-editable:field_sub_headline\n        class=\"my-16 text-[125%] font-light uppercase [line-height:160%] md:text-[150%] md:[line-height:133%]\"\n      >\n        {{ subHeadline }}\n      </div>\n      <div\n        v-blokkli-editable:field_description=\"{ type: 'frame' }\"\n        class=\"rich-text h-min font-light [line-height:150%]\"\n        v-html=\"description\"\n      ></div>\n    </Text>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { ParagraphGalleryGridFragment } from '#graphql-operations'\n\nconst { options } = defineBlokkli({\n  bundle: 'gallery_grid',\n  options: {\n    alignment: {\n      type: 'radios',\n      label: 'Alignment',\n      default: 'left',\n      options: {\n        left: 'Left',\n        right: 'Right',\n      },\n    },\n  },\n  editor: {\n    determineVisibleOptions: (ctx) => {\n      // The alignment option only affects the layout if there is an uneven\n      // amount of images.\n      const totalImages = ctx.props.images?.length || 0\n      if (!totalImages) {\n        return []\n      }\n      const hasImagesUneven = totalImages % 2 !== 0\n      if (hasImagesUneven) {\n        return ['alignment']\n      }\n\n      return []\n    },\n  },\n})\n\nconst props = defineProps<{\n  headline?: ParagraphGalleryGridFragment['headline']\n  subHeadline?: ParagraphGalleryGridFragment['subHeadline']\n  description?: ParagraphGalleryGridFragment['description']\n  images?: ParagraphGalleryGridFragment['images']\n}>()\n\nconst rightAligned = computed(() => options.value.alignment === 'right')\nconst hasText = computed(\n  () => props.headline || props.subHeadline || props.description,\n)\n\nconst imageStyle = (index: number) => {\n  const aspectRatios = {\n    small: 1 / 1,\n    normal: 12.5 / 9,\n    big: 16 / 9,\n    full: 2 / 1, // not perfect but should work\n  }\n\n  let smStyle: { width: number; aspectRatio: number } = {\n    width: 380,\n    aspectRatio: aspectRatios.normal,\n  } // case 'normal'\n\n  if (sizeSm(index) === 'full') {\n    smStyle = {\n      width: 770,\n      aspectRatio: aspectRatios.full,\n    }\n  }\n\n  let mdStyle: { width: number; aspectRatio: number } = {\n    width: 360,\n    aspectRatio: aspectRatios.small,\n  } // case small\n\n  let lgStyle = {\n    width: 425,\n    aspectRatio: aspectRatios.small,\n  } // case small\n\n  let xlStyle = {\n    width: 515,\n    aspectRatio: aspectRatios.small,\n  } // case small\n\n  let xxlStyle = {\n    width: 890,\n    aspectRatio: aspectRatios.small,\n  } // case small\n\n  if (sizeMd(index) === 'normal') {\n    mdStyle = {\n      width: 500,\n      aspectRatio: aspectRatios.normal,\n    }\n    lgStyle = {\n      width: 590,\n      aspectRatio: aspectRatios.normal,\n    }\n    xlStyle = {\n      width: 715,\n      aspectRatio: aspectRatios.normal,\n    }\n    xxlStyle = {\n      width: 1240,\n      aspectRatio: aspectRatios.normal,\n    }\n  }\n\n  if (sizeMd(index) === 'big') {\n    mdStyle = {\n      width: 640,\n      aspectRatio: aspectRatios.big,\n    }\n    lgStyle = {\n      width: 750,\n      aspectRatio: aspectRatios.big,\n    }\n    xlStyle = {\n      width: 915,\n      aspectRatio: aspectRatios.big,\n    }\n    xxlStyle = {\n      width: 1590,\n      aspectRatio: aspectRatios.big,\n    }\n  }\n\n  return defineImageStyle({\n    type: 'pictures',\n    pictures: {\n      sm: smStyle,\n      md: mdStyle,\n      lg: lgStyle,\n      xl: xlStyle,\n      xxl: xxlStyle,\n    },\n  })\n}\n\nconst sizeSm = (index: number): 'normal' | 'full' => {\n  if (\n    index === 0 ||\n    props.images?.length === 2 ||\n    props.images?.length === 4 ||\n    index === 5\n  ) {\n    return 'full'\n  }\n\n  return 'normal'\n}\n\nconst galleryItemBigRight = (index: number) => {\n  return !hasText.value && index === 2 && props.images?.length === 3\n}\n\nconst galleryItemBigLeft = (index: number) => {\n  return !hasText.value && index === 4 && props.images?.length === 5\n}\n\nconst sizeMd = (index: number): 'normal' | 'small' | 'big' => {\n  const length = props.images?.length ?? 0\n\n  if (\n    index === 5 ||\n    (length === 6 && index === 4) ||\n    (hasText.value &&\n      ((index === 2 && length === 4) || (index >= 3 && length >= 4)))\n  ) {\n    return 'normal'\n  } else if (\n    index === 0 ||\n    index === 3 ||\n    galleryItemBigLeft(index) ||\n    galleryItemBigRight(index)\n  ) {\n    return 'big'\n  }\n\n  return 'small'\n}\n</script>\n\n<style lang=\"postcss\" scoped>\n:deep(img) {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.gallery-item-big {\n  width: calc((100cqw - 15px) / 25 * 16);\n  height: calc((100cqw - 15px) / 25 * 9);\n}\n\n.gallery-item-small {\n  width: calc((100cqw - 15px) / 25 * 9);\n  height: calc((100cqw - 15px) / 25 * 9);\n}\n\n.gallery-item-normal {\n  width: calc((100cqw - 15px) / 2); /* / 25 * 12.5 */\n  height: calc((100cqw - 15px) / 25 * 9);\n}\n\n.gallery-item-full {\n  width: 100cqw;\n  height: calc((100cqw - 15px) / 25 * 9);\n}\n\n@media (screen(md)) {\n  .gallery-item-big {\n    width: calc((100cqw - 24px) / 25 * 16);\n    height: calc((100cqw - 24px) / 25 * 9);\n  }\n\n  .gallery-item-normal {\n    width: calc((100cqw - 24px) / 2);\n    height: calc((100cqw - 24px) / 25 * 9);\n  }\n\n  .gallery-item-small {\n    width: calc((100cqw - 24px) / 25 * 9);\n    height: calc((100cqw - 24px) / 25 * 9);\n  }\n\n  .md\\:gallery-item-big {\n    width: calc((100cqw - 24px) / 25 * 16);\n    height: calc((100cqw - 24px) / 25 * 9);\n  }\n\n  .md\\:gallery-item-small {\n    width: calc((100cqw - 24px) / 25 * 9);\n    height: calc((100cqw - 24px) / 25 * 9);\n  }\n\n  .md\\:gallery-item-normal {\n    width: calc((100cqw - 24px) / 2);\n    height: calc((100cqw - 24px) / 25 * 9);\n  }\n}\n\n.gallery-grid-container {\n  container-type: inline-size;\n\n  &.left-aligned {\n    flex-direction: row-reverse;\n  }\n\n  @media (screen(md)) {\n    &.right-aligned .md\\:gallery-item-big-left,\n    &.left-aligned .md\\:gallery-item-big-right {\n      margin-right: calc((100cqw - 24px) / 25 * 9 + 24px);\n    }\n\n    &.right-aligned .md\\:gallery-item-big-right,\n    &.left-aligned .md\\:gallery-item-big-left {\n      margin-left: calc((100cqw - 24px) / 25 * 9 + 24px);\n    }\n  }\n}\n\n.gallery-grid-text-item {\n  padding-left: min(5cqw, 80px);\n  padding-right: min(5cqw, 80px);\n}\n</style>\n"],"names":["options","defineBlokkli","ctx","totalImages","_a","props","__props","rightAligned","computed","hasText","imageStyle","index","aspectRatios","smStyle","sizeSm","mdStyle","lgStyle","xlStyle","xxlStyle","sizeMd","defineImageStyle","_b","galleryItemBigRight","galleryItemBigLeft","length"],"mappings":"+gBAkEM,KAAA,CAAE,QAAAA,CAAQ,EAAIC,EAAc,CAChC,OAAQ,eACR,QAAS,CACP,UAAW,CACT,KAAM,SACN,MAAO,YACP,QAAS,OACT,QAAS,CACP,KAAM,OACN,MAAO,OACT,CACF,CACF,EACA,OAAQ,CACN,wBAA0BC,GAAQ,OAGhC,MAAMC,IAAcC,EAAAF,EAAI,MAAM,SAAV,YAAAE,EAAkB,SAAU,EAChD,OAAKD,EAGmBA,EAAc,IAAM,EAEnC,CAAC,WAAW,EAGd,GAPE,EAQX,CACF,CAAA,CACD,EAEKE,EAAQC,EAORC,EAAeC,EAAS,IAAMR,EAAQ,MAAM,YAAc,OAAO,EACjES,EAAUD,EACd,IAAMH,EAAM,UAAYA,EAAM,aAAeA,EAAM,WAAA,EAG/CK,EAAcC,GAAkB,CACpC,MAAMC,EAAe,CACnB,MAAO,EACP,OAAQ,mBACR,IAAK,mBACL,KAAM,CAAI,EAGZ,IAAIC,EAAkD,CACpD,MAAO,IACP,YAAaD,EAAa,MAAA,EAGxBE,EAAOH,CAAK,IAAM,SACVE,EAAA,CACR,MAAO,IACP,YAAaD,EAAa,IAAA,GAI9B,IAAIG,EAAkD,CACpD,MAAO,IACP,YAAaH,EAAa,KAAA,EAGxBI,EAAU,CACZ,MAAO,IACP,YAAaJ,EAAa,KAAA,EAGxBK,EAAU,CACZ,MAAO,IACP,YAAaL,EAAa,KAAA,EAGxBM,EAAW,CACb,MAAO,IACP,YAAaN,EAAa,KAAA,EAGxB,OAAAO,EAAOR,CAAK,IAAM,WACVI,EAAA,CACR,MAAO,IACP,YAAaH,EAAa,MAAA,EAElBI,EAAA,CACR,MAAO,IACP,YAAaJ,EAAa,MAAA,EAElBK,EAAA,CACR,MAAO,IACP,YAAaL,EAAa,MAAA,EAEjBM,EAAA,CACT,MAAO,KACP,YAAaN,EAAa,MAAA,GAI1BO,EAAOR,CAAK,IAAM,QACVI,EAAA,CACR,MAAO,IACP,YAAaH,EAAa,GAAA,EAElBI,EAAA,CACR,MAAO,IACP,YAAaJ,EAAa,GAAA,EAElBK,EAAA,CACR,MAAO,IACP,YAAaL,EAAa,GAAA,EAEjBM,EAAA,CACT,MAAO,KACP,YAAaN,EAAa,GAAA,GAIvBQ,EAAiB,CACtB,KAAM,WACN,SAAU,CACR,GAAIP,EACJ,GAAIE,EACJ,GAAIC,EACJ,GAAIC,EACJ,IAAKC,CACP,CAAA,CACD,CAAA,EAGGJ,EAAUH,GAAqC,SAEjD,OAAAA,IAAU,KACVP,EAAAC,EAAM,SAAN,YAAAD,EAAc,UAAW,KACzBiB,EAAAhB,EAAM,SAAN,YAAAgB,EAAc,UAAW,GACzBV,IAAU,EAEH,OAGF,QAAA,EAGHW,EAAuBX,GAAkB,OAC7C,MAAO,CAACF,EAAQ,OAASE,IAAU,KAAKP,EAAAC,EAAM,SAAN,YAAAD,EAAc,UAAW,CAAA,EAG7DmB,EAAsBZ,GAAkB,OAC5C,MAAO,CAACF,EAAQ,OAASE,IAAU,KAAKP,EAAAC,EAAM,SAAN,YAAAD,EAAc,UAAW,CAAA,EAG7De,EAAUR,GAA8C,OACtD,MAAAa,IAASpB,EAAAC,EAAM,SAAN,YAAAD,EAAc,SAAU,EAEvC,OACEO,IAAU,GACTa,IAAW,GAAKb,IAAU,GAC1BF,EAAQ,QACLE,IAAU,GAAKa,IAAW,GAAOb,GAAS,GAAKa,GAAU,GAEtD,SAEPb,IAAU,GACVA,IAAU,GACVY,EAAmBZ,CAAK,GACxBW,EAAoBX,CAAK,EAElB,MAGF,OAAA"}