{"version":3,"file":"SectionHeroSimple.global.56f5ab37.js","sources":["../../../../components/section/hero/SubpagesDropdown.vue","../../../../components/section/hero/SectionHeroSimple.global.vue"],"sourcesContent":["<template>\n  <div ref=\"dropdown\" class=\"w-fit relative\">\n    <button\n      id=\"subpagesDropdownButton\"\n      class=\"uppercase bg-neutral-800 text-white p-3 text-base flex items-center gap-2 hover:bg-teal-500 transition-colors duration-300 border\"\n      :class=\"[\n        isActive && 'bg-teal-500',\n        themeDark ? 'text-white border-white' : 'border-neutral-800 text-neutral-800'\n      ]\"\n      @click=\"isActive = !isActive\"\n    >\n      <span class=\"line-clamp-1 break-all\">{{ formatAsTitle(selected) }}</span>\n      <div class=\"bg-white rounded-full w-6 h-6 flex items-center justify-center\">\n        <Icon\n          name=\"chevron-down\"\n          :color=\"isActive ? theme.colors.teal[500] : theme.colors.neutral[900]\"\n          size=\"s\"\n          class=\"transition-transform duration-300\"\n          :class=\"isActive && 'rotate-180'\"\n        />\n      </div>\n    </button>\n    <Transition name=\"fade\">\n      <ul\n        v-if=\"isActive\"\n        class=\"absolute left-0 mt-2 p-3 bg-white shadow-lg min-w-[320px] w-full border border-neutral-800 z-10\"\n        aria-labelledby=\"subpagesDropdownButton\"\n      >\n        <li\n          v-for=\"(item, idx) in availablePages\"\n          :key=\"idx\"\n          class=\"mt-2 first:mt-0\"\n          @click=\"selected = item.slug\"\n        >\n          <NuxtLink\n            :to=\"localePathByType(item?.__typename as string, item?.slug as string)\"\n            class=\"text-base uppercase text-neutral-800 transition-colors duration-300 hover:text-teal-500 flex items-center justify-between gap-2\"\n            :class=\"selected === item.slug && 'font-bold'\"\n          >\n            <span class=\"line-clamp-1 break-all\">{{ formatAsTitle(item.slug) }}</span>\n            <Icon\n              v-if=\"selected === item.slug\"\n              name=\"check\"\n              :color=\"theme.colors.teal[500]\"\n              size=\"s\"\n              class=\"transition-transform duration-300\"\n            />\n          </NuxtLink>\n        </li>\n      </ul>\n    </Transition>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { theme } from '#tailwind-config'\n\nconst { localePathByType } = useLocalePathByType()\n\nconst props = defineProps({\n  data: {\n    type: Array,\n    default: () => []\n  },\n  themeDark: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst isActive = ref(false)\nconst { locale } = useI18n()\nconst route = useRoute()\n\nconst { data: page } = await useAsyncGql('page', {\n  // @ts-ignore\n  locale,\n  slug: route.params.slug as string,\n  options: {\n    initialCache: false\n  }\n})\nconst currentPage = computed(() => {\n  return {\n    id: page.value?.page?.id,\n    title: page.value?.page?.title,\n    slug: page.value?.page?.slug\n  }\n})\n\nconst selected = ref(currentPage.value.slug)\nconst availablePages = ref([...props.data])\navailablePages.value.unshift(currentPage.value)\n\nconst dropdown = ref(null)\nonClickOutside(dropdown, () => hideDropdown())\n\nfunction hideDropdown() {\n  isActive.value = false\n}\n</script>\n","<template>\n  <div\n    :class=\"data.background === 'Black' ? 'bg-neutral-800 text-white' : 'bg-white text-neutral-800'\"\n  >\n    <div class=\"grid-default container py-14 lg:py-16\">\n      <div class=\"col-span-12 mb-4 flex flex-wrap items-center gap-3 lg:mb-3\">\n        <NuxtLink\n          v-if=\"data.tag\"\n          class=\"w-fit border border-neutral-800 p-3 text-center text-base uppercase\"\n          :class=\"data.background === 'Black' ? 'border-white' : 'border-neutral-800'\"\n          :to=\"data.tagLink ? data.tagLink.slug : undefined\"\n        >\n          {{ data.tag }}\n        </NuxtLink>\n        <div v-if=\"data.subpages.length\">\n          <Icon\n            name=\"polygon-2\"\n            :color=\"data.background === 'Black' ? 'white' : theme.colors.neutral[900]\"\n            size=\"xs\"\n          />\n        </div>\n        <SubpagesDropdown\n          v-if=\"data.subpages.length\"\n          :data=\"data.subpages\"\n          :themeDark=\"data.background === 'Black'\"\n        />\n      </div>\n\n      <Heading\n        v-if=\"data.title\"\n        :content=\"data.title\"\n        :generic=\"false\"\n        :level=\"2\"\n        class=\"col-span-12 mb-4 lg:col-span-9 lg:mb-8\"\n        :class=\"data.background === 'Black' ? 'heroSimpleHeading text-white' : 'text-neutral-800'\"\n      />\n\n      <div\n        v-if=\"data.html\"\n        class=\"col-span-12 mb-6 text-lg lg:col-span-9 lg:mb-16 lg:text-xl\"\n        v-html=\"data.html\"\n      />\n\n      <div v-if=\"data.media\" class=\"relative col-span-12\">\n        <Image\n          v-if=\"data.media\"\n          class=\"aspect-6/5 rounded-[40px] object-cover lg:aspect-16/5\"\n          loading=\"lazy\"\n          :sizes=\"data.media.responsiveImage?.sizes\"\n          :src=\"data.media.responsiveImage ? data.media.responsiveImage?.src : data.media.url\"\n          :srcset=\"data.media.responsiveImage ? data.media.responsiveImage?.webpSrcSet : undefined\"\n          :width=\"data.media.responsiveImage ? data.media.responsiveImage.width : data.media.width\"\n          :height=\"\n            data.media.responsiveImage ? data.media.responsiveImage.height : data.media.height\n          \"\n          :alt=\"data.media.alt ? data.media.alt : ''\"\n        />\n        <div\n          class=\"absolute flex w-fit max-w-[644px] flex-col gap-4 rounded-[40px] bg-white text-neutral-800 md:flex-row md:items-center lg:gap-6\"\n          :class=\"\n            data.person\n              ? 'bottom-5 left-4 right-4 p-4 md:bottom-10 md:left-auto md:right-10'\n              : 'bottom-6 right-6 p-0 md:bottom-14 md:right-14'\n          \"\n        >\n          <div v-if=\"data.person\" class=\"flex items-center gap-4 lg:gap-6\">\n            <Image\n              v-if=\"data.person.image\"\n              class=\"h-20 min-h-[80px] w-20 min-w-[80px] rounded-full border border-neutral-800 object-cover\"\n              :sizes=\"data.person.image.responsiveImage?.sizes\"\n              :src=\"\n                data.person.image.responsiveImage\n                  ? data.person.image.responsiveImage?.src\n                  : data.person.image.url\n              \"\n              :srcset=\"\n                data.person.image.responsiveImage\n                  ? data.media.responsiveImage?.webpSrcSet\n                  : undefined\n              \"\n              :width=\"\n                data.person.image.responsiveImage\n                  ? data.person.image.responsiveImage.width\n                  : data.person.image.width\n              \"\n              :height=\"\n                data.person.image.responsiveImage\n                  ? data.person.image.responsiveImage.height\n                  : data.person.image.height\n              \"\n              :alt=\"data.person.image.alt ? data.person.image.alt : ''\"\n            />\n            <div class=\"max-w-xs text-base lg:text-lg\" v-html=\"contactMessage\" />\n          </div>\n\n          <CallToAction\n            v-if=\"Array.isArray(data.buttons) && data.buttons.length\"\n            :data=\"data.buttons\"\n            class=\"ml-auto\"\n            filled\n            theme=\"dark\"\n            :size=\"isLG ? 'large' : 'small'\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { theme } from '#tailwind-config'\nimport type { SectionHeroSimpleRecord } from '~/types/generated'\nconst router = useRouter()\nconst props = defineProps({\n  data: {\n    type: Object as PropType<SectionHeroSimpleRecord>,\n    default: () => {}\n  }\n})\n\nconst breakpoints = useBreakpoints(theme.screens)\nconst isLG = breakpoints.greater('lg')\n\nconst contactMessage = computed(\n  () =>\n    `Talk to <b>${props.data.person?.name} ${props.data.person?.lastName}</b> about ${capitalize(\n      router.currentRoute?.value?.params?.slug as string\n    )}`\n)\n</script>\n\n<style lang=\"postcss\">\n.heroSimpleHeading mark {\n  color: white;\n}\n</style>\n"],"names":["localePathByType","useLocalePathByType","props","__props","isActive","ref","locale","useI18n","route","useRoute","page","__temp","__restore","_withAsyncContext","useAsyncGql","currentPage","computed","_b","_a","_d","_c","_f","_e","selected","availablePages","dropdown","onClickOutside","hideDropdown","router","useRouter","isLG","useBreakpoints","theme","contactMessage","capitalize"],"mappings":"0+BAyDM,KAAA,CAAE,iBAAAA,GAAqBC,IAEvBC,EAAQC,EAWRC,EAAWC,EAAI,EAAK,EACpB,CAAE,OAAAC,GAAWC,IACbC,EAAQC,IAER,CAAE,KAAMC,CAAA,GAAe,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAAC,EAAY,OAAQ,CAE/C,OAAAR,EACA,KAAME,EAAM,OAAO,KACnB,QAAS,CACP,aAAc,EAChB,CAAA,CACD,CAAA,mBACKO,EAAcC,EAAS,IAAM,iBAC1B,MAAA,CACL,IAAIC,GAAAC,EAAAR,EAAK,QAAL,YAAAQ,EAAY,OAAZ,YAAAD,EAAkB,GACtB,OAAOE,GAAAC,EAAAV,EAAK,QAAL,YAAAU,EAAY,OAAZ,YAAAD,EAAkB,MACzB,MAAME,GAAAC,EAAAZ,EAAK,QAAL,YAAAY,EAAY,OAAZ,YAAAD,EAAkB,IAAA,CAC1B,CACD,EAEKE,EAAWlB,EAAIU,EAAY,MAAM,IAAI,EACrCS,EAAiBnB,EAAI,CAAC,GAAGH,EAAM,IAAI,CAAC,EAC3BsB,EAAA,MAAM,QAAQT,EAAY,KAAK,EAExC,MAAAU,EAAWpB,EAAI,IAAI,EACVqB,EAAAD,EAAU,IAAME,EAAA,CAAc,EAE7C,SAASA,GAAe,CACtBvB,EAAS,MAAQ,EACnB,2sDCaA,MAAMwB,EAASC,IACT3B,EAAQC,EAQR2B,EADcC,EAAeC,EAAM,OAAO,EACvB,QAAQ,IAAI,EAE/BC,EAAiBjB,EACrB,IAAA,eACE,qBAAcE,EAAAhB,EAAM,KAAK,SAAX,YAAAgB,EAAmB,IAAI,KAAID,EAAAf,EAAM,KAAK,SAAX,YAAAe,EAAmB,QAAQ,cAAciB,GAChFZ,GAAAH,GAAAC,EAAAQ,EAAO,eAAP,YAAAR,EAAqB,QAArB,YAAAD,EAA4B,SAA5B,YAAAG,EAAoC,IAAA,CACrC,GAAA"}