{"version":3,"file":"C5fuFKXZ.js","sources":["../../../../src/components/block/textImageTiles/vdv/text-image-tiles.vue"],"sourcesContent":["<template>\n  <ContainerBasic container-type=\"FULL_WIDTH\" :style=\"blockData.bgColor\">\n    <ContainerBasic\n      container-type=\"PAGE\"\n      class=\"px-sm\"\n      :class=\"{ 'pt-xl pb-xl': blockData.bgColor.length > 0 }\"\n    >\n      <Headline\n        v-if=\"blockData.headline\"\n        :headline=\"blockData.headline\"\n        :level=\"'h2'\"\n        :has-decoration=\"true\"\n        :style=\"blockData.textColor\"\n      />\n      <div\n        class=\"grid grid-flow-row mt-md gap-sm md:gap-md\"\n        :class=\"tileWrapperClasses\"\n      >\n        <div\n          v-for=\"(item, index) of blockData.items\"\n          :key=\"item.id\"\n          class=\"bg-vdv-bg-full\"\n          :class=\"getTileClasses(index)\"\n        >\n          <ImageBasic\n            v-if=\"item.image\"\n            :image-data=\"item.image\"\n            class=\"object-cover w-full aspect-video\"\n          />\n\n          <div class=\"p-sm md:p-md\">\n            <div class=\"\">\n              <Headline\n                v-if=\"item.headline\"\n                :headline=\"item.headline\"\n                :level=\"'h4'\"\n                align-text=\"left\"\n              />\n              <WYSIWYGContentRaw\n                :content=\"item.text\"\n                inner-classes=\"px-0\"\n                class=\"mt-sm\"\n                :no-container-padding=\"true\"\n              ></WYSIWYGContentRaw>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ContainerBasic>\n  </ContainerBasic>\n</template>\n<script lang=\"ts\" setup>\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport { Headline, WYSIWYGContentRaw } from '~/complib';\nimport ImageBasic from '@/components/components/core/basicImage/image-basic.vue';\nimport type { TextImageTilesData } from '../blockType';\n\nconst props = defineProps({\n  classes: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  blockData: {\n    type: Object as PropType<TextImageTilesData>,\n    required: true,\n    default: {} as TextImageTilesData,\n  },\n});\n\nconst tileWrapperClasses = computed(() => {\n  if (props.blockData.items.length > 4) {\n    return 'md:grid-cols-6';\n  }\n\n  if (props.blockData.items.length === 4) {\n    return 'desktop:md:grid-cols-2 touch:md:grid-cols-4 desktop:lg:grid-cols-4 ';\n  }\n\n  return `md:grid-cols-${props.blockData.items.length}`;\n});\n\nfunction getTileClasses(index: number) {\n  if (props.blockData.items.length < 5) {\n    return '';\n  } else if (props.blockData.items.length === 5) {\n    if (index < 2) {\n      return 'md:col-span-3';\n    }\n\n    return 'md:col-span-2';\n  } else if (props.blockData.items.length > 5) {\n    return 'md:col-span-2';\n  }\n}\n</script>\n<style scoped lang=\"postcss\"></style>\n"],"names":["props","__props","tileWrapperClasses","computed","getTileClasses","index"],"mappings":"siBAyDA,MAAMA,EAAQC,EAaRC,EAAqBC,EAAS,IAC9BH,EAAM,UAAU,MAAM,OAAS,EAC1B,iBAGLA,EAAM,UAAU,MAAM,SAAW,EAC5B,sEAGF,gBAAgBA,EAAM,UAAU,MAAM,MAAM,EACpD,EAED,SAASI,EAAeC,EAAe,CACrC,GAAIL,EAAM,UAAU,MAAM,OAAS,EAC1B,MAAA,GACE,GAAAA,EAAM,UAAU,MAAM,SAAW,EAC1C,OAAIK,EAAQ,EACH,gBAGF,gBACE,GAAAL,EAAM,UAAU,MAAM,OAAS,EACjC,MAAA,eAEX"}