{"version":3,"file":"CtMjCTYW.js","sources":["../../../../src/components/block/textImage/vdv/text-image.vue"],"sourcesContent":["<template>\n  <ContainerBasic\n    class=\"px-sm print:max-w-[720px]\"\n    container-type=\"PAGE\"\n    :style=\"pageBreak(blockData.printPageBreak)\"\n  >\n    <div\n      class=\"grid items-center w-full grid-cols-1 pt-sm touch:md:pt-0 lg:pt-0 md:grid-cols-12 print:grid-cols-12 gap-y-sm touch:md:gap-y-0 touch:md:gap-x-8 lg:gap-y-0 lg:gap-x-8 print:gap-x-8 print:pl-16 print:pr-16\"\n      :style=\"[blockData.bgColor]\"\n    >\n      <div\n        class=\"col-span-6\"\n        :class=\"[\n          {\n            'order-2': shouldBeReordered,\n          },\n        ]\"\n      >\n        <template v-if=\"blockData.link\">\n          <NuxtLink :to=\"blockData.link\">\n            <ImageDetailed\n              :image-data=\"blockData.image\"\n              :show-meta=\"false\"\n              sizes=\"xs:100vw sm:700px\"\n              quality=\"80\"\n            />\n          </NuxtLink>\n        </template>\n        <template v-else>\n          <ImageDetailed\n            :image-data=\"blockData.image\"\n            :show-meta=\"false\"\n            sizes=\"xs:100vw sm:700px\"\n            quality=\"80\"\n          />\n        </template>\n      </div>\n\n      <div\n        class=\"relative flex h-full col-span-6 md:mx-xl py-sm\"\n        :class=\"[\n          {\n            'order-1': shouldBeReordered,\n          },\n          blockData.textColor?.indexOf('ffffff') > -1 ||\n          blockData.textColor?.indexOf('white') > -1\n            ? 'fill-white stroke-white'\n            : '',\n        ]\"\n        :style=\"[blockData.textColor]\"\n      >\n        <ImageBasic\n          v-if=\"blockData.bgImage\"\n          :image-data=\"blockData.bgImage\"\n          class=\"!absolute -z-10 w-full top-0 md:-top-sm\"\n        />\n        <div class=\"flex flex-row align-self-center\">\n          <div class=\"self-center\">\n            <atom-circle-icon\n              v-if=\"blockData.icon\"\n              :icon=\"blockData.icon\"\n              class=\"mb-sm md:mb-md\"\n              inverted\n            />\n\n            <Headline\n              v-if=\"blockData.headline\"\n              :headline=\"blockData.headline\"\n              :has-decoration=\"true\"\n              :level=\"'h2'\"\n              class=\"!mb-sm mt-sm\"\n            />\n\n            <WYSIWYGContentRaw\n              class=\"pt-3 !px-sm\"\n              :content=\"blockData.text\"\n              inner-classes=\"!px-0\"\n              :no-container-padding=\"true\"\n            />\n\n            <div v-if=\"blockData.cta\" class=\"mt-auto pt-sm\">\n              <CallToAction :block-data=\"blockData.cta\" class=\"!w-auto\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ContainerBasic>\n</template>\n\n<script lang=\"ts\" setup>\nimport { EElementOrientationType } from '@/@types/element-orientation';\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport AtomCircleIcon from '@/components/atom/circle-icon.vue';\nimport CallToAction from '~~/src/components/block/cta/vdv/CallToAction.vue';\nimport ImageDetailed from '@/components/components/cms/components/image-detailed.vue';\nimport { Headline, WYSIWYGContentRaw } from '~/complib';\nimport ImageBasic from '@/components/components/core/basicImage/image-basic.vue';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport type { TextImageData } from '../blockType';\n\nconst isMobile = inject(mq_breakpointIsMobile);\nconst props = defineProps({\n  blockData: {\n    type: Object as PropType<TextImageData>,\n    required: true,\n    default: {} as TextImageData,\n  },\n});\n\nconst isMounted = ref(false);\n\nconst shouldBeReordered = computed(() => {\n  return (\n    isMounted.value &&\n    !isMobile.value &&\n    props.blockData.imageOrientation === EElementOrientationType.RIGHT\n  );\n});\n\nfunction pageBreak(pageBreak: any) {\n  if (pageBreak === 'break-before') {\n    return 'page-break-before: always';\n  }\n  if (pageBreak === 'break-after') {\n    return 'page-break-after: always';\n  }\n\n  return '';\n}\n\nonMounted(() => {\n  // Force Client-Side shouldBeReordered update / rerender\n  // @see https://github.com/vuejs/core/issues/5063\n  isMounted.value = true;\n});\n</script>\n<style scoped lang=\"postcss\"></style>\n"],"names":["isMobile","inject","mq_breakpointIsMobile","props","__props","isMounted","ref","shouldBeReordered","computed","EElementOrientationType","pageBreak","onMounted"],"mappings":"snBAqGM,MAAAA,EAAWC,EAAOC,CAAqB,EACvCC,EAAQC,EAQRC,EAAYC,EAAI,EAAK,EAErBC,EAAoBC,EAAS,IAE/BH,EAAU,OACV,CAACL,EAAS,OACVG,EAAM,UAAU,mBAAqBM,EAAwB,KAEhE,EAED,SAASC,EAAUA,EAAgB,CACjC,OAAIA,IAAc,eACT,4BAELA,IAAc,cACT,2BAGF,EACT,CAEA,OAAAC,EAAU,IAAM,CAGdN,EAAU,MAAQ,EAAA,CACnB"}