{"version":3,"file":"Ctaff6aQ.js","sources":["../../../../src/components/block/flowchart/vdv/flowchart.vue"],"sourcesContent":["<template>\n  <ContainerBasic container-type=\"FULL_WIDTH\">\n    <ContainerBasic container-type=\"PAGE\">\n      <Headline\n        :headline=\"blockData.headline\"\n        :level=\"'h2'\"\n        :has-decoration=\"true\"\n      />\n\n      <div\n        class=\"wrapper px-md desktop:md:px-xl touch:md:px-md desktop:lg:px-md\"\n      >\n        <div class=\"items mt-lg\">\n          <div\n            v-for=\"(item, index) of blockData.items\"\n            :key=\"index\"\n            class=\"divide-y-2 item divide-vdv-border-light\"\n          >\n            <div class=\"h-[84px]\">\n              <div\n                class=\"item-dots rounded-[16px] border-2 border-dotted w-[32px] h-[32px] border-black\"\n              >\n                <div\n                  class=\"bg-black w-[24px] h-[24px] rounded-xl m-[2px]\"\n                ></div>\n              </div>\n            </div>\n\n            <div class=\"pb-0 touch:md:pb-md lg:pb-md\">\n              <div\n                class=\"item-header flex items-center -translate-y-1/2 w-[calc(100%-32px)] touch:md:w-full lg:w-full\"\n              >\n                <div\n                  class=\"absolute z-10 text-4xl font-bold bg-white item-header-index md:text-6xl text-vdv-border-light -right-8 touch:md:right-auto lg:right-auto\"\n                >\n                  <span>{{ index + 1 }}</span>\n                </div>\n                <atom-circle-icon\n                  :icon=\"item.icon\"\n                  class=\"\"\n                  background-color=\"#346E73\"\n                ></atom-circle-icon>\n              </div>\n\n              <div class=\"mt-[-40px] touch:md:min-h-[180px] lg:min-h-[180px]\">\n                <Headline\n                  class=\"mb-sm\"\n                  :headline=\"item.headline\"\n                  :level=\"'h4'\"\n                  :has-decoration=\"true\"\n                />\n\n                <WYSIWYGContentRaw\n                  :content=\"item.text\"\n                  :no-container-padding=\"true\"\n                ></WYSIWYGContentRaw>\n\n                <div v-if=\"item.cta\" class=\"mb-0 mt-md\">\n                  <CallToAction :block-data=\"item.cta\"></CallToAction>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ContainerBasic>\n\n    <ContainerBasic\n      v-if=\"blockData.banner\"\n      class=\"mt-3xl\"\n      container-type=\"FULL_WIDTH\"\n    >\n      <div ref=\"bannerNode\">\n        <div class=\"h-[30px]\" style=\"background-color: #628e92\" />\n        <div\n          class=\"min-h-[329px] bg-left-bottom md:bg-bottom md:bg-contain relative text-white text-center bg-no-repeat bg-activesection-base\"\n          :style=\"`background-image: url(${imageUrl})`\"\n        >\n          <div\n            class=\"absolute top-0 left-1/2 -translate-x-1/2 -translate-y-[52.95%] text-[#b8cbce] w-[260.5px]\"\n          >\n            <div class=\"relative flex items-center justify-center\">\n              <img\n                src=\"@/assets/images/icon_badge.svg\"\n                class=\"mx-auto\"\n                loading=\"lazy\"\n              />\n              <div class=\"absolute\">\n                <Icon :icon=\"blockData.banner.icon\" classes=\"text-7xl\" />\n              </div>\n            </div>\n          </div>\n          <div class=\"pt-[100px]\">\n            <Headline\n              classes=\"font-josefin text-[24px] touch:md:text-[40px] lg:text-[40px]\"\n              text-color=\"white\"\n              :headline=\"blockData.banner.headline\"\n              level=\"h2\"\n            />\n\n            <WYSIWYGContentRaw\n              class=\"mt-md\"\n              :content=\"blockData.banner.text\"\n            ></WYSIWYGContentRaw>\n\n            <div v-if=\"blockData.banner.cta\" class=\"mt-md\">\n              <CallToAction :block-data=\"blockData.banner.cta\"></CallToAction>\n            </div>\n\n            <img\n              src=\"@/assets/images/vdv_menschzumensch_claim_white.svg\"\n              class=\"mt-md pb-[170px] touch:md:pb-md lg:pb-md w-[210px] mx-auto\"\n              loading=\"lazy\"\n            />\n          </div>\n        </div>\n      </div>\n    </ContainerBasic>\n  </ContainerBasic>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\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 { Headline, WYSIWYGContentRaw, Icon } from '~/complib';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport type { FlowchartData } from '../blockType';\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\nconst props = defineProps({\n  blockData: {\n    type: Object as PropType<FlowchartData>,\n    required: true,\n    default: {} as FlowchartData,\n  },\n});\n\nconst bannerNode = ref(null);\nconst imageUrl = computed(() =>\n  props.blockData.image\n    ? props.blockData.image[isMobile.value ? 'mobile' : 'desktop'].url\n    : '',\n);\n</script>\n\n<style scoped lang=\"postcss\">\n.item {\n  @apply relative ml-md touch:md:ml-0 touch:md:w-1/2 lg:ml-0 lg:w-1/2;\n\n  :deep(h4) {\n    @apply pr-8;\n  }\n\n  @screen lg {\n    :deep(h4) {\n      @apply pr-0;\n    }\n  }\n}\n\n.item:not(:first-child) {\n  @apply mt-md touch:md:mt-[60px] lg:mt-[60px];\n}\n\n.item:nth-child(2) {\n  @apply touch:md:mt-[200px] lg:mt-[200px];\n}\n\n.item:nth-child(even) {\n  @apply touch:md:pl-xl lg:pl-xl xl:pl-3xl touch:md:float-right lg:float-right;\n  .item-dots {\n    @apply absolute z-10 top-[84px] left-[-30px] touch:md:left-0 lg:left-0 -translate-x-1/2 -translate-y-1/2;\n  }\n\n  .item-header {\n    @apply flex-row-reverse touch:md:flex-row lg:flex-row;\n\n    .item-header-index {\n      @apply pr-0 pl-sm touch:md:pl-0 touch:md:pr-md lg:pl-0 lg:pr-md;\n    }\n  }\n}\n\n.item:nth-child(odd) {\n  @apply touch:md:pr-xl lg:pr-xl xl:pr-3xl touch:md:float-left lg:float-left;\n  .item-dots {\n    @apply absolute z-10 top-[84px] left-[-30px] touch:md:left-auto touch:md:right-0 lg:left-auto lg:right-0 -translate-x-1/2 touch:md:translate-x-1/2 lg:translate-x-1/2 -translate-y-1/2;\n  }\n\n  .item-header {\n    @apply flex-row-reverse;\n\n    .item-header-index {\n      @apply pr-0 pl-sm;\n    }\n  }\n}\n\n.items {\n  &:before {\n    content: '';\n    @apply absolute w-[4px] bg-vdv-border-light top-[84px] bottom-0 touch:md:left-1/2 lg:left-1/2 translate-x-[-50%];\n  }\n\n  &:after {\n    content: '';\n    @apply block clear-both;\n  }\n}\n\n.wrapper {\n  @apply relative;\n}\n</style>\n"],"names":["isMobile","inject","mq_breakpointIsMobile","props","__props","bannerNode","ref","imageUrl","computed"],"mappings":"mzDAiIM,MAAAA,EAAWC,EAAOC,CAAqB,EAEvCC,EAAQC,EAQRC,EAAaC,EAAI,IAAI,EACrBC,EAAWC,EAAS,IACxBL,EAAM,UAAU,MACZA,EAAM,UAAU,MAAMH,EAAS,MAAQ,SAAW,SAAS,EAAE,IAC7D,EAAA"}