{"version":3,"file":"CU64ADmu.js","sources":["../../../../components/careers-quote-block.vue","../../../../pages/index.vue"],"sourcesContent":["<template>\n  <section class=\"careers-quote ds-background-color-black\">\n    <div class=\"ds-container\">\n      <div class=\"ds-grid\">\n        <div class=\"ds-grid__col ds-grid__col--no-gutter ds-grid__col--12 ds-md-grid__col--5 ds-lg-grid__col--6\">\n          <div class=\"careers-quote__image-box\">\n            <DsImageElement\n              v-if=\"quote.image\"\n              :image=\"quote.image\"\n              :screen=\"$screen\"\n              class=\"careers-quote__image-box__image\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"\n            ds-grid__col ds-grid__col--12 ds-md-grid__col--7 ds-lg-grid__col--5 ds-lg-grid__col--offset-1\n            ds-padding-y-48 ds-md-padding-y-96\n          \"\n        >\n          <p\n            class=\"ds-heading-small ds-md-heading ds-font-weight ds-color-white\"\n            v-text=\"quote.quote\"\n          />\n          <p\n            class=\"ds-text-medium ds-color-white ds-margin-top-12\"\n            v-text=\"quote.author\"\n          />\n\n          <DsLink\n            v-if=\"quote.link\"\n            :url=\"quote.link.url\"\n            :open-in-new-window=\"quote.link.openInNewWindow\"\n            :nuxt=\"quote.link.nuxt\"\n            :content=\"quote.link.title\"\n            :icon-right=\"{ category: 'arrows', name: 'chevron-right-small' }\"\n            class=\"ds-margin-top-24\"\n          />\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script setup>\nimport { DsLink, DsImageElement } from 'awds'\nconst { $screen } = useNuxtApp()\n\ndefineProps({\n  quote: {\n    type: Object,\n    required: true\n  }\n})\n</script>\n\n<style lang=\"scss\" scoped>\n@import 'awds/foundation-vars.scss';\n@import 'awds/foundation-mixins.scss';\n\n.careers-quote {\n  position: relative;\n\n  &__image-box {\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    overflow: hidden;\n\n    &__image {\n      height: auto;\n      width: 100%;\n    }\n\n    @include screen('medium') {\n      left: 0;\n      position: absolute;\n      width: 41.6666666667%;\n\n      &__image {\n        height: 100%;\n        width: auto;\n\n        :deep() img {\n          height: 100%;\n          width: auto;\n        }\n      }\n    }\n\n    @include screen('large') {\n      width: 50%;\n    }\n  }\n}\n</style>\n","<template>\n  <DsPageContent>\n    <!-- Heading -->\n    <DsHero\n      v-if=\"content.headingTitle\"\n      :title=\"content.headingTitle\"\n      theme=\"light\"\n      alignment=\"center\"\n      with-title-size-large\n    />\n    <DsSectionImage\n      v-if=\"content.headingMedia\"\n      theme-variant=\"light-grey\"\n    >\n      <div class=\"ds-grid\">\n        <div class=\"ds-grid__col\">\n          <DsScreenWrapper\n            v-if=\"content.headingMedia\"\n            :ready=\"hydrateReady\"\n          >\n            <DsVideoPlayer\n              :aria-label-play=\"labels.play\"\n              :aria-label-close=\"labels.close\"\n              v-bind=\"content.headingMedia\"\n              :screen=\"screen\"\n            />\n          </DsScreenWrapper>\n        </div>\n      </div>\n    </DsSectionImage>\n    <!-- Intro -->\n    <DsSection\n      v-if=\"content.introTitle\"\n      theme=\"grey\"\n    >\n      <div class=\"ds-grid\">\n        <h2 class=\"ds-heading ds-grid__col ds-grid__col--12 ds-md-grid__col--4 ds-margin-bottom-24\">\n          {{ content.introTitle }}\n        </h2>\n        <div class=\"ds-grid__col ds-md-grid__col--offset-1 ds-grid__col--12 ds-md-grid__col--7\">\n          <RichText\n            v-if=\"content.introDescription\"\n            :data=\"content.introDescription\"\n          />\n          <DsLink\n            v-if=\"content.introLink\"\n            class=\"ds-margin-top-24\"\n            :url=\"content.introLink.url\"\n            :open-in-new-window=\"content.introLink.openInNewWindow\"\n            :nuxt=\"content.introLink.nuxt\"\n            :content=\"content.introLink.title\"\n            :icon-right=\"{ category: 'arrows', name: 'chevron-right-small' }\"\n          />\n        </div>\n      </div>\n    </DsSection>\n    <!-- Company formula -->\n    <CareersCompanyFormula\n      v-if=\"content.companyFormulaItems && content.companyFormulaItems.length\"\n      :title=\"content.companyFormulaTitle\"\n      :description=\"content.companyFormulaDescription\"\n      :items=\"content.companyFormulaItems\"\n    />\n    <!-- Quote -->\n    <CareersQuoteBlock\n      v-if=\"content.quote\"\n      :quote=\"content.quote\"\n    />\n    <!-- Career types -->\n    <section\n      v-if=\"content.careerTypes\"\n      class=\"ds-background-color-grey-100\"\n    >\n      <DsImageGallery\n        class=\"ds-padding-y-48 ds-md-padding-y-96\"\n        :screen=\"screen\"\n        :items=\"content.careerTypes.items.length\"\n        :title=\"content.careerTypes.title\"\n        :description=\"content.careerTypes.description\"\n        :width=\"{ small: 272, large: 576 }\"\n      >\n        <template #default=\"{ index }\">\n          <DsCard\n            :image=\"content.careerTypes.items[index - 1].image\"\n            :title=\"content.careerTypes.items[index - 1].title\"\n            :text=\"content.careerTypes.items[index - 1].description\"\n            :link=\"content.careerTypes.items[index - 1].link\"\n            aspect-ratio=\"16/9\"\n            with-content-padding\n            class=\"ds-background-color-white ds-height-full\"\n          />\n        </template>\n      </DsImageGallery>\n    </section>\n    <!-- Benefits -->\n    <DsSection v-if=\"content.benefitsItems\">\n      <div class=\"ds-grid\">\n        <div class=\"ds-grid__col\">\n          <h2\n            class=\"ds-heading\"\n            v-text=\"content.benefitsTitle\"\n          />\n        </div>\n      </div>\n      <DsGrid\n        :column-width=\"{ small: 12, medium: 4, large: 4 }\"\n        :items=\"content.benefitsItems\"\n        class=\"ds-margin-top-48\"\n      >\n        <template #default=\"{ item }\">\n          <DsCardTextIcon\n            :icon=\"item.icon\"\n            :title=\"item.title\"\n            icon-frame-size=\"24\"\n          >\n            <RichText :data=\"item.description\" />\n          </DsCardTextIcon>\n        </template>\n      </DsGrid>\n    </DsSection>\n    <!-- Locations -->\n    <DsScreenWrapper\n      v-if=\"content.locationsMedia\"\n      :ready=\"hydrateReady\"\n    >\n      <div class=\"ds-grid\">\n        <div class=\"ds-grid__col\">\n          <DsSectionImage\n            v-if=\"content.locationsMedia\"\n            theme-variant=\"light-grey\"\n            :screen=\"screen\"\n            :image=\"content.locationsMedia\"\n          />\n        </div>\n      </div>\n    </DsScreenWrapper>\n    <DsSection\n      v-if=\"locationsData\"\n      theme=\"grey\"\n    >\n      <CareersBlockOffices\n        :title=\"content.locationsTitle\"\n        :locations=\"locationsData\"\n      />\n    </DsSection>\n    <DsSection>\n      <div class=\"ds-grid\">\n        <div class=\"ds-grid__col\">\n          <CareersVacanciesList\n            with-limit\n            sort-by-latest\n            as-widget\n          />\n        </div>\n      </div>\n    </DsSection>\n  </DsPageContent>\n</template>\n\n<script setup>\nimport {\n  DsLink,\n  DsHero,\n  DsSection,\n  DsSectionImage,\n  DsImageGallery,\n  DsCard,\n  DsGrid,\n  DsCardTextIcon,\n  DsScreenWrapper,\n  DsVideoPlayer,\n  DsPageContent\n} from 'awds'\nimport { queryPageCareers, queryPageCareersLocationsLite } from '../data-layer/queries'\n\nconst { locale } = useI18n()\nconst { screen } = useScreen()\nconst { hydrateReady } = useHydrateHook()\n\nconst { useAsyncDataWithQuery, useRelatedPagesAsyncDataWithQuery, onBeforeAdyenData, onAfterAdyenData, content } =\n  useCareersPageData()\nconst { labels } = useCareersGlobalData()\n\nawait onBeforeAdyenData({ withRoutes: true, globalDataContentType: 'PageCareers' })\n\nconst { data } = await useAsyncData('careers-main-' + locale.value, async () => {\n  // Cities, FormsLabels\n  const [page, locations] = await Promise.all([\n    useAsyncDataWithQuery(queryPageCareers, { pageSlug: 'careers' }),\n    useRelatedPagesAsyncDataWithQuery(queryPageCareersLocationsLite, { skipMapping: true })\n  ])\n\n  return {\n    pageData: page.pageData,\n    locationsData: locations\n  }\n})\n\nawait onAfterAdyenData(data.value)\n\n// Computed\nconst locationsData = computed(() => {\n  return data.value?.locationsData?.items || []\n})\n</script>\n"],"names":["$screen","useNuxtApp","locale","useI18n","screen","useScreen","hydrateReady","useHydrateHook","useAsyncDataWithQuery","useRelatedPagesAsyncDataWithQuery","onBeforeAdyenData","onAfterAdyenData","content","useCareersPageData","labels","useCareersGlobalData","__temp","__restore","_withAsyncContext","data","useAsyncData","page","locations","queryPageCareers","queryPageCareersLocationsLite","locationsData","computed","_b","_a"],"mappings":"00CA8CA,KAAM,CAAE,QAAAA,CAAS,EAAGC,EAAW,wyCCiI/B,KAAM,CAAE,OAAAC,CAAQ,EAAGC,EAAQ,EACrB,CAAE,OAAAC,CAAQ,EAAGC,GAAU,EACvB,CAAE,aAAAC,CAAc,EAAGC,GAAe,EAElC,CAAE,sBAAAC,EAAuB,kCAAAC,EAAmC,kBAAAC,EAAmB,iBAAAC,EAAkB,QAAAC,CAAS,EAC9GC,EAAmB,EACf,CAAE,OAAAC,CAAQ,EAAGC,EAAqB,EAExC,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMR,EAAkB,CAAE,WAAY,GAAM,sBAAuB,aAAe,CAAA,CAAA,cAElF,KAAM,CAAE,KAAAS,CAAM,GAAS,CAAAH,EAAAC,CAAA,EAAAC,EAAA,SAAAE,EAAa,gBAAkBlB,EAAO,MAAO,SAAY,CAE9E,KAAM,CAACmB,EAAMC,CAAS,EAAI,MAAM,QAAQ,IAAI,CAC1Cd,EAAsBe,GAAkB,CAAE,SAAU,SAAS,CAAE,EAC/Dd,EAAkCe,GAA+B,CAAE,YAAa,EAAI,CAAE,CAC1F,CAAG,EAED,MAAO,CACL,SAAUH,EAAK,SACf,cAAeC,CACjB,CACF,EAAC,aAAA,CAAA,mBAEK,CAAAN,EAAAC,CAAA,EAAAC,EAAA,IAAAP,EAAiBQ,EAAK,KAAK,CAAA,cAGjC,MAAMM,EAAgBC,EAAS,IAAM,SACnC,QAAOC,GAAAC,EAAAT,EAAK,QAAL,YAAAS,EAAY,gBAAZ,YAAAD,EAA2B,QAAS,CAAC,CAC9C,CAAC"}