{"version":3,"file":"BO8YsqiU.js","sources":["../../../../components/ProductFinder/Stage/index.vue","../../../../components/ProductFinder/PromoTeaser/index.vue","../../../../components/ProductFinder/Results/index.vue"],"sourcesContent":["<template>\n  <div class=\"layout-grid items-end py-56 md:py-72\">\n    <div\n      class=\"product-finder-stage-grid col-start-2 col-end-5 mb-48 md:col-end-9 md:mb-0\"\n    >\n      <p class=\"typo-overline-large mb-16 uppercase\">\n        {{ overline }}\n      </p>\n      <Text\n        v-if=\"headline\"\n        class=\"typo-headline-1 uppercase\"\n        :class=\"{\n          'font-bold': isRebranding,\n        }\"\n      >\n        {{ headline }}\n      </Text>\n    </div>\n    <div\n      v-if=\"image\"\n      class=\"col-start-3 col-end-[-2] row-start-2 aspect-square md:col-start-10 md:row-start-1\"\n    >\n      <MediaImage\n        v-bind=\"image\"\n        img-class=\"object-cover h-full\"\n        eager\n        preload\n        :image-style=\"imageStyle\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { type MediaImageFragment } from '#graphql-operations'\n\ndefineProps<{\n  overline: string\n  headline?: string\n  image?: MediaImageFragment\n}>()\n\nconst isRebranding = await useFeatureFlag()\n\nconst imageStyle = defineImageStyle({\n  type: 'sizes',\n  aspectRatio: 1,\n  sizes: {\n    sm: 270,\n    md: 340,\n    lg: 356,\n    xl: 416,\n  },\n})\n</script>\n\n<style scoped>\n.product-finder-stage-grid {\n  @media screen and (max-width: 300px) {\n    grid-column-end: 6;\n  }\n}\n</style>\n","<template>\n  <div class=\"relative\">\n    <MediaImage\n      v-if=\"image\"\n      v-bind=\"image\"\n      class=\"ratio-image aspect-square\"\n      img-class=\"object-cover\"\n      :image-style=\"imageStyle\"\n    />\n    <div\n      class=\"absolute bottom-0 left-0 z-20 px-24 py-16 text-white md:px-32 md:py-24\"\n    >\n      <h2\n        v-if=\"headline\"\n        class=\"text-2xl font-light uppercase mobile-only:mb-8 md:text-3xl/[48px]\"\n      >\n        {{ headline }}\n      </h2>\n      <span class=\"text text-md font-light\">{{ subHeadline }}</span>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { type MediaImageFragment } from '#graphql-operations'\n\ndefineProps<{\n  image?: MediaImageFragment\n  headline?: string\n  subHeadline?: string\n}>()\nconst imageStyle = defineImageStyle({\n  type: 'sizes',\n  sizes: {\n    sm: 740,\n    md: 425,\n    lg: 330,\n    xl: 360,\n    xxl: 420,\n    xxxl: 600,\n  },\n})\n</script>\n\n<style lang=\"postcss\" scoped>\n.teaser {\n  @apply relative min-w-[415px];\n\n  figure {\n    &:before {\n      content: '';\n      @apply absolute bottom-0 right-0 z-10 block h-[66%] w-full transition duration-300 ease-in-out;\n      background: linear-gradient(\n        180deg,\n        rgba(0, 0, 0, 0.2) 0%,\n        rgba(0, 0, 0, 0) 0.01%,\n        rgba(0, 0, 0, 0.25) 24.32%,\n        rgba(0, 0, 0, 0.65) 100%\n      );\n    }\n  }\n  &:hover {\n    figure {\n      &:before {\n        background: linear-gradient(\n          180deg,\n          rgba(0, 0, 0, 0.02) 0%,\n          rgba(0, 0, 0, 0) 0.01%,\n          rgba(0, 0, 0, 0.03) 24.32%,\n          rgba(0, 0, 0, 0.06) 100%\n        );\n      }\n    }\n  }\n}\n</style>\n","<template>\n  <ul\n    class=\"layout-grid justify-center\"\n    :class=\"{ 'mobile-only:pt-24': strap }\"\n  >\n    <div\n      ref=\"teaserGrid\"\n      class=\"layout-grid-contain grid mobile-only:grid-cols-1 mobile-only:gap-y-16 md:grid-cols-2 md:gap-24 lg:grid-cols-3 xxxl:mx-[-264px]\"\n    >\n      <li v-for=\"item of items\" :key=\"item.id\" class=\"col-span-1\">\n        <component\n          :is=\"getComponentType(item)\"\n          v-bind=\"'sku' in item ? { variation: item } : item\"\n          :strap=\"strap\"\n          class=\"w-full\"\n          :class=\"{\n            'bg-grey-light-03': getComponentType(item) !== GridBannerTeaser,\n          }\"\n        />\n      </li>\n    </div>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  type MediaImageFragment,\n  type ProductFinderItemFragment,\n} from '#graphql-operations'\nimport CommerceProductTeaser from '@/components/Product/Variation/Teaser/index.vue'\nimport PromoTeaser from '@/components/ProductFinder/PromoTeaser/index.vue'\nimport GridBannerTeaser from '@/components/ProductFinder/GridBannerTeaser/index.vue'\n\ntype PromoItem = {\n  id: string\n  headline?: string\n  subHeadline?: string\n  image?: MediaImageFragment\n  link?: string\n}\n\ntype ResultItem = ProductFinderItemFragment | PromoItem\n\nconst props = defineProps<{\n  products: Array<ProductFinderItemFragment>\n  final?: boolean\n  strap?: boolean\n}>()\n\nconst { data } = await useAsyncData(\n  async () => {\n    const v = await useCachedGraphqlQuery('promoTeasers')\n    return v.data\n  },\n  {\n    default: () => ({ teasers: { list: [] }, banners: [] }),\n  },\n)\n\nconst { viewport } = useViewport()\n\nconst columns = ref(1)\nconst teaserGrid = ref<HTMLElement>()\nconst calculateColumns = () => {\n  if (!teaserGrid.value) {\n    return\n  }\n\n  columns.value = getComputedStyle(teaserGrid.value)\n    .getPropertyValue('grid-template-columns')\n    .split(' ').length\n}\n\nwatch(viewport, calculateColumns)\n\nconst getComponentType = (item: ResultItem) => {\n  if ('sku' in item) {\n    return CommerceProductTeaser\n  }\n\n  if (item.id === 'grid_banner_promo') {\n    return GridBannerTeaser\n  }\n\n  return PromoTeaser\n}\n\nconst items = computed(() => {\n  const teasersList = data.value.teasers?.list ?? []\n  const banner = data.value.banners?.[0] ?? null\n\n  if (props.products?.length < 8 || teasersList.length < 1) {\n    return props.products\n  }\n\n  let promoTeaserIdx = 0\n\n  const combinedItems = props.products.reduce<Array<ResultItem>>(\n    (acc, cur, idx) => {\n      // Add the grid banner in place of the first promo teaser. And repeat after all promo teasers are displayed.\n      if (\n        banner &&\n        'fieldGridBanner' in banner &&\n        idx % (6 * (teasersList.length + 1)) === 6\n      ) {\n        const nextAcc = [\n          ...acc,\n          {\n            id: 'grid_banner_promo',\n            headline: banner.fieldGridBanner,\n            image: banner.fieldImage,\n            link: banner.fieldLink,\n          },\n          { ...cur, title: cur.title ?? '' },\n        ]\n\n        return nextAcc\n      } else if (idx !== 0 && idx % 6 === 0) {\n        const nextAcc = [\n          ...acc,\n          {\n            ...teasersList[promoTeaserIdx % teasersList.length],\n            id: `${promoTeaserIdx}_promo`,\n          },\n          { ...cur, title: cur.title ?? '' },\n        ]\n        promoTeaserIdx++\n\n        return nextAcc\n      }\n\n      return [...acc, { ...cur, title: cur.title ?? '' }]\n    },\n    [],\n  )\n\n  // remove last non-full grid row if there is still more to load.\n  return props.final\n    ? combinedItems\n    : combinedItems.slice(\n        0,\n        combinedItems.length - (combinedItems.length % columns.value),\n      )\n})\n\nonMounted(calculateColumns)\n</script>\n"],"names":["isRebranding","__temp","__restore","_withAsyncContext","useFeatureFlag","imageStyle","defineImageStyle","props","__props","data","useAsyncData","useCachedGraphqlQuery","viewport","useViewport","columns","ref","teaserGrid","calculateColumns","watch","getComponentType","item","CommerceProductTeaser","GridBannerTeaser","PromoTeaser","items","computed","teasersList","_a","banner","_b","_c","promoTeaserIdx","combinedItems","acc","cur","idx","nextAcc","onMounted"],"mappings":"2rBA0CA,MAAMA,GAAe,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,GAAe,mBAEpCC,EAAaC,EAAiB,CAClC,KAAM,QACN,YAAa,EACb,MAAO,CACL,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,GACN,CAAA,CACD,0uBCtBD,MAAMD,EAAaC,EAAiB,CAClC,KAAM,QACN,MAAO,CACL,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,IAAK,IACL,KAAM,GACR,CAAA,CACD,wcCED,MAAMC,EAAQC,EAMR,CAAE,KAAAC,IAAS,CAAAR,EAAAC,CAAA,EAAAC,EAAA,SAAMO,EACrB,UACY,MAAMC,EAAsB,cAAc,GAC3C,KAEX,CACE,QAAS,KAAO,CAAE,QAAS,CAAE,KAAM,CAAA,GAAM,QAAS,CAAA,GACpD,EACF,aAAA,CAAA,mBAEM,CAAE,SAAAC,GAAaC,IAEfC,EAAUC,EAAI,CAAC,EACfC,EAAaD,IACbE,EAAmB,IAAM,CACxBD,EAAW,QAIRF,EAAA,MAAQ,iBAAiBE,EAAW,KAAK,EAC9C,iBAAiB,uBAAuB,EACxC,MAAM,GAAG,EAAE,OAAA,EAGhBE,EAAMN,EAAUK,CAAgB,EAE1B,MAAAE,EAAoBC,GACpB,QAASA,EACJC,EAGLD,EAAK,KAAO,oBACPE,EAGFC,GAGHC,EAAQC,EAAS,IAAM,WAC3B,MAAMC,IAAcC,EAAAlB,EAAK,MAAM,UAAX,YAAAkB,EAAoB,OAAQ,CAAA,EAC1CC,IAASC,EAAApB,EAAK,MAAM,UAAX,YAAAoB,EAAqB,KAAM,KAE1C,KAAIC,EAAAvB,EAAM,WAAN,YAAAuB,EAAgB,QAAS,GAAKJ,EAAY,OAAS,EACrD,OAAOnB,EAAM,SAGf,IAAIwB,EAAiB,EAEf,MAAAC,EAAgBzB,EAAM,SAAS,OACnC,CAAC0B,EAAKC,EAAKC,IAAQ,CAGf,GAAAP,GACA,oBAAqBA,GACrBO,GAAO,GAAKT,EAAY,OAAS,MAAQ,EAalC,MAXS,CACd,GAAGO,EACH,CACE,GAAI,oBACJ,SAAUL,EAAO,gBACjB,MAAOA,EAAO,WACd,KAAMA,EAAO,SACf,EACA,CAAE,GAAGM,EAAK,MAAOA,EAAI,OAAS,EAAG,CAAA,EAI1B,GAAAC,IAAQ,GAAKA,EAAM,IAAM,EAAG,CACrC,MAAMC,EAAU,CACd,GAAGH,EACH,CACE,GAAGP,EAAYK,EAAiBL,EAAY,MAAM,EAClD,GAAI,GAAGK,CAAc,QACvB,EACA,CAAE,GAAGG,EAAK,MAAOA,EAAI,OAAS,EAAG,CAAA,EAEnC,OAAAH,IAEOK,CACT,CAEO,MAAA,CAAC,GAAGH,EAAK,CAAE,GAAGC,EAAK,MAAOA,EAAI,OAAS,EAAA,CAAI,CACpD,EACA,CAAC,CAAA,EAII,OAAA3B,EAAM,MACTyB,EACAA,EAAc,MACZ,EACAA,EAAc,OAAUA,EAAc,OAASlB,EAAQ,KAAA,CACzD,CACL,EAED,OAAAuB,EAAUpB,CAAgB"}