{"version":3,"file":"BlokHero.b9a68566.js","sources":["../../../../storyblok/Blok/BlokHero.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { BlokHero } from '~~/types/storyblok/bloks'\nconst props = defineProps<{\n  blok: BlokHero\n  isMain?: boolean\n  title?: string\n}>()\n\nconst horizontalAlignment = computed(() => {\n  switch (props.blok?.horizontal_alignment) {\n    case 'center':\n      return 'text-center'\n    case 'right':\n      return 'text-right'\n    default:\n      return 'text-left'\n  }\n})\nconst verticalAlignment = computed(() => {\n  switch (props.blok?.vertical_alignment) {\n    case 'end':\n      return 'items-end'\n    case 'center':\n      return 'items-center'\n    default:\n      return 'items-start'\n  }\n})\n\nconst useSmallHero = computed(() => props.blok?.size === 'sm')\nconst useFullHero = computed(() => props.blok?.size === 'full')\n\nconst hasMedia = computed(() => !!props.blok?.media?.length)\n\nconst sectionTheme = computed(() => {\n  return props.blok?.theme ? props.blok.theme : 'theme-grey-100'\n})\n</script>\n\n<template lang=\"pug\">\nsection(\n  v-if=\"blok\"\n  v-editable=\"blok\"\n  :class=\"[sectionTheme]\"\n  class=\"blok-hero flex flex-col md:flex-row relative overflow-hidden border-b border-grey-250 md:border-none\"\n)\n  div(\n    class=\"flex w-full h-full\"\n    :class=\"[verticalAlignment, useFullHero ? 'pt-[100%] md:pt-0 md:min-h-screen' : useSmallHero ? 'md:pt-[12.5vh] md:pb-[7.5vh]' : 'md:pt-[17.5vh] md:pb-[12.5vh]', hasMedia ? 'md:z-20 bg-grey-100 text-blue-dark md:bg-transparent md:text-current' : '']\"\n  )\n    div(\n      class=\"container pb-36 pt-120 px-18 md:py-36\"\n      :class=\"useFullHero ? 'pt-36 md:pt-180 lg:pt-220 lg:pb-72' : ''\"\n    )\n      div(class=\"md:grid md:grid-cols-12\")\n        div(class=\"md:col-span-10 md:col-start-2\" :class=\"horizontalAlignment\")\n          div(\n            v-if=\"title || blok.headline\"\n            class=\"lg:max-w-prose-wide\"\n            :class=\"horizontalAlignment === 'text-center' ? 'm-auto' : ''\"\n          )\n            component(\n              v-if=\"blok.headline || title\"\n              :is=\"isMain ? 'h1' : 'h2'\"\n              class=\"heading-1\"\n            ) {{ blok.headline || title }}\n            component(\n              v-if=\"blok.subheadline\"\n              :is=\"isMain ? 'h2' : 'h3'\"\n              class=\"heading-4 font-normal md:font-bold lg:max-w-prose-tight\"\n            ) {{ blok.subheadline }}\n\n          UiButton(\n            v-if=\"props.blok?.cta\"\n            v-for=\"cta in props.blok.cta\"\n            :blok=\"cta\"\n            :class=\"props.blok?.horizontal_alignment === 'text-center' ? 'self-center' : 'self-start'\"\n          )\n\n  div(\n    v-if=\"hasMedia\"\n    class=\"media -order-1 md:order-1 absolute w-full md:h-full pointer-events-none\"\n  )\n    StoryblokComponent(\n      v-for=\"item in props.blok?.media\"\n      :key=\"item._uid\"\n      :blok=\"item\"\n      :object-cover=\"true\"\n      :with-overlay=\"props?.blok?.use_image_effect\"\n      :overlay-from-bottom=\"props?.blok?.image_effect_from_bottom\"\n      :width=\"1920\"\n      :height=\"1080\"\n      :is-hero=\"true\"\n    )\n</template>\n"],"names":["horizontalAlignment","computed","_a","props","verticalAlignment","useSmallHero","useFullHero","hasMedia","_b","sectionTheme"],"mappings":"4cAQAA,EAAAC,EAAA,IAAA,OACE,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,qBAAA,CAA0C,IAAA,SAEtC,MAAA,cAAO,IAAA,QAEP,MAAA,aAAO,QAEP,MAAA,WAAO,CACX,CAAA,EAEFE,EAAAH,EAAA,IAAA,OACE,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,mBAAA,CAAwC,IAAA,MAEpC,MAAA,YAAO,IAAA,SAEP,MAAA,eAAO,QAEP,MAAA,aAAO,CACX,CAAA,EAGFG,EAAAJ,EAAA,IAAA,OAAA,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,QAAA,KAAA,EACAI,EAAAL,EAAA,IAAA,OAAA,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,QAAA,OAAA,EAEAK,EAAAN,EAAA,aAAA,OAAA,GAAAO,GAAAN,EAAAC,EAAA,OAAA,YAAAD,EAAA,QAAA,MAAAM,EAAA,QAAA,EAEAC,EAAAR,EAAA,IAAA,OACE,OAAAC,EAAAC,EAAA,OAAA,MAAAD,EAAA,MAAAC,EAAA,KAAA,MAAA,gBAA8C,CAAA"}