{"version":3,"file":"DYTrmLp1.js","sources":["../../../../components/ProductFinder/Stage/index.vue","../../../../components/ProductFinder/PromoTeaser/index.vue","../../../../components/ProductFinder/GridBannerTeaser/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  <NuxtLink\n    :to=\"linkPath\"\n    class=\"relative block aspect-square w-full items-center bg-green px-16 pt-16 align-middle transition duration-300 ease-in-out md:px-32 md:pt-[21px]\"\n    :class=\"{ 'hover:bg-green-dark': hasLink }\"\n  >\n    <div class=\"absolute left-0 w-full pl-16 md:top-24 md:h-32 md:pl-32\">\n      <div class=\"flex gap-24\">\n        <p\n          class=\"w-fit rounded-full bg-white px-[13px] text-[12px] text-grey-dark-02 mobile-only:py-6 md:px-16 md:py-10 md:text-xs\"\n        >\n          {{ $texts('offer', 'Offer') }}\n        </p>\n      </div>\n    </div>\n    <div class=\"flex h-full w-full flex-col justify-between\">\n      <!-- used as spacer to position the image -->\n      <div class=\"h-0 w-full shrink md:h-30\"></div>\n      <MediaImage\n        v-if=\"image\"\n        loading=\"lazy\"\n        class=\"h-3/5 w-full\"\n        v-bind=\"image\"\n        :image-style=\"imageStyle\"\n        img-class=\"object-contain h-full w-full\"\n      />\n      <Text\n        class=\"w-full pb-12 text-[24px] uppercase leading-[28px] text-white md:pb-24 md:text-[32px] md:leading-[34px]\"\n      >\n        {{ headline }}\n      </Text>\n    </div>\n  </NuxtLink>\n</template>\n\n<script lang=\"ts\" setup>\nimport { type MediaImageFragment } from '#graphql-operations'\n\nconst { $texts } = useEasyTexts()\n\nconst props = defineProps<{\n  image?: MediaImageFragment\n  headline?: string\n  link?: {\n    uri?: {\n      path?: string\n    }\n  }\n}>()\n\nconst hasLink = computed(() => !!props.link?.uri?.path)\nconst linkPath = computed(() => props.link?.uri?.path || '')\n\nconst imageStyle = defineImageStyle({\n  type: 'sizes',\n  sizes: {\n    sm: 710,\n    md: 330,\n  },\n})\n</script>\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","$texts","useEasyTexts","props","__props","hasLink","computed","_b","_a","linkPath","data","useAsyncData","useCachedGraphqlQuery","viewport","useViewport","columns","ref","teaserGrid","calculateColumns","watch","getComponentType","item","CommerceProductTeaser","GridBannerTeaser","PromoTeaser","items","teasersList","banner","_c","promoTeaserIdx","combinedItems","acc","cur","idx","nextAcc","onMounted"],"mappings":"0qBA0CA,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,2uBCtBD,MAAMD,EAAaC,EAAiB,CAClC,KAAM,QACN,MAAO,CACL,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,IAAK,IACL,KAAM,GACR,CAAA,CACD,srBCHK,KAAA,CAAE,OAAAC,GAAWC,IAEbC,EAAQC,EAURC,EAAUC,EAAS,aAAM,OAAC,GAACC,GAAAC,EAAAL,EAAM,OAAN,YAAAK,EAAY,MAAZ,MAAAD,EAAiB,MAAI,EAChDE,EAAWH,EAAS,aAAM,QAAAC,GAAAC,EAAAL,EAAM,OAAN,YAAAK,EAAY,MAAZ,YAAAD,EAAiB,OAAQ,GAAE,EAErDR,EAAaC,EAAiB,CAClC,KAAM,QACN,MAAO,CACL,GAAI,IACJ,GAAI,GACN,CAAA,CACD,q2BChBD,MAAMG,EAAQC,EAMR,CAAE,KAAAM,IAAS,CAAAf,EAAAC,CAAA,EAAAC,EAAA,SAAMc,GACrB,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,EAAQnB,EAAS,IAAM,WAC3B,MAAMoB,IAAclB,EAAAE,EAAK,MAAM,UAAX,YAAAF,EAAoB,OAAQ,CAAA,EAC1CmB,IAASpB,EAAAG,EAAK,MAAM,UAAX,YAAAH,EAAqB,KAAM,KAE1C,KAAIqB,EAAAzB,EAAM,WAAN,YAAAyB,EAAgB,QAAS,GAAKF,EAAY,OAAS,EACrD,OAAOvB,EAAM,SAGf,IAAI0B,EAAiB,EAEf,MAAAC,EAAgB3B,EAAM,SAAS,OACnC,CAAC4B,EAAKC,EAAKC,IAAQ,CAGf,GAAAN,GACA,oBAAqBA,GACrBM,GAAO,GAAKP,EAAY,OAAS,MAAQ,EAalC,MAXS,CACd,GAAGK,EACH,CACE,GAAI,oBACJ,SAAUJ,EAAO,gBACjB,MAAOA,EAAO,WACd,KAAMA,EAAO,SACf,EACA,CAAE,GAAGK,EAAK,MAAOA,EAAI,OAAS,EAAG,CAAA,EAI1B,GAAAC,IAAQ,GAAKA,EAAM,IAAM,EAAG,CACrC,MAAMC,EAAU,CACd,GAAGH,EACH,CACE,GAAGL,EAAYG,EAAiBH,EAAY,MAAM,EAClD,GAAI,GAAGG,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,OAAA7B,EAAM,MACT2B,EACAA,EAAc,MACZ,EACAA,EAAc,OAAUA,EAAc,OAASf,EAAQ,KAAA,CACzD,CACL,EAED,OAAAoB,EAAUjB,CAAgB"}