{"version":3,"file":"aV8_8q9u.js","sources":["../../../../src/components/block/contentTeaser/utils.ts","../../../../src/components/block/contentTeaser/content-teaser.vue"],"sourcesContent":["export const ORIENTATION_IMAGE_TEXT = 'imageText';\nexport const ORIENTATION_TEXT_IMAGE = 'textImage';\n","<template>\n  <ContainerBasic container-type=\"PAGE\">\n    <div class=\"relative text-center\">\n      <div\n        class=\"absolute h-full md:w-[150px] lg:w-[180px] xl:w-[245px] hidden md:inline-block\"\n        :class=\"\n          blockData.orientation === ORIENTATION_IMAGE_TEXT\n            ? '-translate-x-full'\n            : ''\n        \"\n      >\n        <div\n          class=\"relative h-full\"\n          :class=\"\n            blockData.orientation === ORIENTATION_IMAGE_TEXT\n              ? 'scale-x-[-1]'\n              : ''\n          \"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"100%\"\n            height=\"100%\"\n            viewBox=\"0 0 245 500\"\n            preserveAspectRatio=\"none\"\n          >\n            <g id=\"devider\" transform=\"translate(20167 13673)\">\n              <path\n                id=\"bg\"\n                d=\"M0,0H228L13,500H0Z\"\n                transform=\"translate(-20167 -13673)\"\n                :fill=\"getAreaColour()\"\n                stroke=\"none\"\n              />\n              <path\n                id=\"triangle\"\n                d=\"M114.5,0,229,266H0Z\"\n                transform=\"translate(-20165 -13439)\"\n                fill=\"#fff\"\n                stroke=\"none\"\n                opacity=\"0.4\"\n              />\n              <path\n                id=\"devider\"\n                d=\"M215,0h30L30,500H0Z\"\n                transform=\"translate(-20167 -13673)\"\n                fill=\"var(--thm-primary-base)\"\n                stroke=\"none\"\n              />\n            </g>\n          </svg>\n        </div>\n      </div>\n      <div\n        class=\"flex min-h-[500px] flex-col\"\n        :class=\"\n          blockData.orientation === ORIENTATION_IMAGE_TEXT\n            ? 'md:flex-row'\n            : 'md:flex-row-reverse'\n        \"\n      >\n        <div\n          class=\"flex items-end bg-cover basis-1/2 aspect-video md:aspect-auto\"\n          :class=\"\n            blockData.orientation === ORIENTATION_IMAGE_TEXT\n              ? 'justify-start bg-left'\n              : 'justify-end bg-right'\n          \"\n          :style=\"`background-image: url(${image.url})`\"\n        >\n          <div\n            v-if=\"image.copyright !== null\"\n            class=\"max-w-[180px] top-[180px] m-sm\"\n          >\n            <span\n              class=\"text-sm italic font-light text-white drop-shadow-xs font-roboto leading-xs\"\n              >&copy; {{ image.copyright }}</span\n            >\n          </div>\n        </div>\n        <div\n          class=\"flex flex-col items-center basis-1/2\"\n          :class=\"[sectionBGColor, hasAlphaBG ? 'text-vdv-font' : 'text-white']\"\n          :style=\"'background-color: ' + getAreaColour()\"\n        >\n          <div class=\"md:hidden h-[15px] w-full bg-primary-base\" />\n          <div\n            class=\"md:pl-0 md:pr-md lg:px-[8%] xl:px-[12%] py-md md:pt-xl md:pb-lg\"\n          >\n            <Headline\n              v-if=\"blockData.headline\"\n              :headline=\"blockData.headline\"\n              level=\"h2\"\n              class=\"mb-sm\"\n              :class=\"[\n                hasAlphaBG\n                  ? 'fill-vdv-base stroke-vdv-border-dark'\n                  : 'fill-white stroke-white',\n              ]\"\n              :has-decoration=\"true\"\n            />\n            <WYSIWYGContentRaw\n              :content=\"blockData.text\"\n              inner-classes=\"wysi-small-text text-center\"\n            ></WYSIWYGContentRaw>\n\n            <div v-if=\"blockData?.topCta\" class=\"mt-auto pt-sm\">\n              <CallToAction :block-data=\"blockData.topCta\"></CallToAction>\n            </div>\n            <div\n              class=\"flex items-center justify-center flex-auto w-full py-xs\"\n            >\n              <div\n                class=\"w-[110px] border-solid border-b-1 mr-sm\"\n                :class=\"[\n                  hasAlphaBG\n                    ? 'border-b-vdv-border-dark border-vdv-border-dark'\n                    : 'border-white border-b-white',\n                ]\"\n              />\n              <Icon :icon=\"getAreaIcon()\" classes=\"!w-6 !h-6\" />\n              <div\n                class=\"w-[110px] border-solid border-b-1 ml-sm\"\n                :class=\"[\n                  hasAlphaBG\n                    ? 'border-b-vdv-border-dark border-vdv-border-dark'\n                    : 'border-white border-b-white',\n                ]\"\n              />\n            </div>\n            <Headline :headline=\"getAreaTitle()\" level=\"h2\" class=\"mb-sm\" />\n            <div class=\"px-md\">\n              <p>{{ getAreaDescription() }}</p>\n            </div>\n            <div v-if=\"blockData?.bottomCta\">\n              <CallToAction\n                :block-data=\"blockData.bottomCta\"\n                class=\"mb-0 mt-sm\"\n              ></CallToAction>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ContainerBasic>\n</template>\n\n<script setup lang=\"ts\">\nimport CallToAction from '~~/src/components/block/cta/vdv/CallToAction.vue';\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport { Headline, WYSIWYGContentRaw, Icon } from '~/complib';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport type { ContentTeaserData } from './blockType';\nimport { ORIENTATION_IMAGE_TEXT } from './utils';\nimport { useAreaStore } from '~/stores/useArea';\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\nconst props = defineProps({\n  blockData: {\n    type: Object as PropType<ContentTeaserData>,\n    required: true,\n    default: {} as ContentTeaserData,\n  },\n});\n\nconst image = computed(() =>\n  isMobile.value ? props.blockData.image.mobile : props.blockData.image.desktop,\n);\n\nconst areaStore = useAreaStore();\nconst area = areaStore.getActiveArea;\nconst hasAlphaBG = props.blockData.bgColor?.value === 'areaColorAlpha';\n\nconst sectionBGColor = computed(() => {\n  return props.blockData.area?.color\n    ? `bg-[${props.blockData.area.color}]`\n    : 'bg-activesection-base';\n});\n\nfunction getAreaTitle(): string {\n  return props.blockData.area?.title || area?.title;\n}\n\nfunction getAreaDescription(): string {\n  return props.blockData.area?.description || area?.description;\n}\n\nfunction getAreaColour(): string {\n  if (props.blockData.bgColor?.value === 'areaColorAlpha') {\n    return props.blockData.area?.alpha\n      ? props.blockData.area?.alpha\n      : props.blockData.area?.color.toString() + '4D';\n  } else {\n    return props.blockData.area?.color;\n  }\n}\n\nfunction getAreaIcon() {\n  return props.blockData.area?.icon || area?.icon;\n}\n</script>\n"],"names":["ORIENTATION_IMAGE_TEXT","isMobile","inject","mq_breakpointIsMobile","props","__props","image","computed","area","useAreaStore","hasAlphaBG","_a","sectionBGColor","getAreaTitle","getAreaDescription","getAreaColour","_b","_c","_d","_e","getAreaIcon"],"mappings":"wYAAO,MAAMA,EAAyB,o/BC4JhC,MAAAC,EAAWC,EAAOC,CAAqB,EAEvCC,EAAQC,EAQRC,EAAQC,EAAS,IACrBN,EAAS,MAAQG,EAAM,UAAU,MAAM,OAASA,EAAM,UAAU,MAAM,OAAA,EAIlEI,EADYC,IACK,cACjBC,IAAaC,EAAAP,EAAM,UAAU,UAAhB,YAAAO,EAAyB,SAAU,iBAEhDC,EAAiBL,EAAS,IAAM,OAC7B,OAAAI,EAAAP,EAAM,UAAU,OAAhB,MAAAO,EAAsB,MACzB,OAAOP,EAAM,UAAU,KAAK,KAAK,IACjC,uBAAA,CACL,EAED,SAASS,GAAuB,OAC9B,QAAOF,EAAAP,EAAM,UAAU,OAAhB,YAAAO,EAAsB,SAASH,GAAA,YAAAA,EAAM,MAC9C,CAEA,SAASM,GAA6B,OACpC,QAAOH,EAAAP,EAAM,UAAU,OAAhB,YAAAO,EAAsB,eAAeH,GAAA,YAAAA,EAAM,YACpD,CAEA,SAASO,GAAwB,eAC/B,QAAIJ,EAAAP,EAAM,UAAU,UAAhB,YAAAO,EAAyB,SAAU,kBAC9BK,EAAAZ,EAAM,UAAU,OAAhB,MAAAY,EAAsB,OACzBC,EAAAb,EAAM,UAAU,OAAhB,YAAAa,EAAsB,QACtBC,EAAAd,EAAM,UAAU,OAAhB,YAAAc,EAAsB,MAAM,YAAa,MAEtCC,EAAAf,EAAM,UAAU,OAAhB,YAAAe,EAAsB,KAEjC,CAEA,SAASC,GAAc,OACrB,QAAOT,EAAAP,EAAM,UAAU,OAAhB,YAAAO,EAAsB,QAAQH,GAAA,YAAAA,EAAM,KAC7C"}