{"version":3,"file":"EditorialContent-v2.js","sources":["../../../../../design-system/components/Molecules/LinkWrapper/MoleculesLinkWrapperMedia.vue","../../../../../design-system/components/Editorial/EditorialContent.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MoleculesLinkWrapperMediaProps } from './MoleculesLinkWrapperMedia.props'\nimport { withLeadingSlash } from 'ufo'\n\nconst props = defineProps<MoleculesLinkWrapperMediaProps>()\nconst { openDialog } = useDialog()\n\nconst localePath = useLocalePath()\n\nconst url = computed(() => {\n  // Check if there is an internal link\n  if (props.internalLink?.urlSlug) {\n    return withLeadingSlash(props.internalLink.urlSlug)\n  }\n  // Check if props.target is an external URL\n  if (props.target && !/^https?:\\/\\//.test(props.target)) {\n    // If it's not an external URL, apply withLeadingSlash\n    return localePath(withLeadingSlash(props.target || ''))\n  }\n  // If it's an external URL, return it directly\n  return props.target || ''\n})\n</script>\n\n<template>\n  <button\n    v-if=\"type === 'overlay' || type === 'sidesheet'\"\n    :aria-label=\"ariaLabel\"\n    @click=\"openDialog(target)\"\n  >\n    <slot />\n  </button>\n  <NuxtLink\n    v-else\n    :to=\"\n      type === 'anchor' && !internalLink?.urlSlug\n        ? {\n            hash: `#${target}`,\n          }\n        : url\n    \"\n    :target=\"type === 'blank' ? '_blank' : undefined\"\n    :aria-label=\"ariaLabel\"\n    ><slot\n  /></NuxtLink>\n</template>\n","<script setup lang=\"ts\">\nimport type { EditorialContentProps } from './EditorialContent.props'\nimport type { Brand } from '@design-system/index'\nimport type { Video } from '../UI/UIMedia.props'\n\nconst props = withDefaults(defineProps<EditorialContentProps>(), {\n  logoSize: 's',\n  contentAlignment: 'center',\n  padding: 'default',\n  firstPageContent: false,\n  widthTextContainer: 100,\n})\nconst shopTheLookModalIdRef = ref(null)\ndefineExpose({ shopTheLookModalIdRef })\n\nconst { breakpoint } = useProjectBreakpoint()\nconst isMobile = breakpoint.smaller('lg')\n\nconst animationContainer = ref(null)\nconst isAnimationContainerInViewport = ref(false)\n\nconst opacityGradientBottom = computed(() =>\n  props.opacityGradient && props.opacityGradient.bottom > 0\n    ? props.opacityGradient?.bottom / 10\n    : 0\n)\nconst opacityGradientMid = computed(() =>\n  props.opacityGradient && props.opacityGradient.mid > 0\n    ? props.opacityGradient?.mid / 10\n    : 0\n)\nconst opacityGradientTop = computed(() =>\n  props.opacityGradient && props.opacityGradient.top > 0\n    ? props.opacityGradient?.top / 10\n    : 0\n)\nconst widthTextContainer = computed(() => `${props.widthTextContainer}%`)\n\n// We want to animate inner container when content is bottom aligned and is not an hero banner\nconst showAnimation =\n  ['bottom-left', 'bottom-center'].includes(props.contentAlignment) &&\n  !props.firstPageContent\n\nconst animationCss = computed(() => ({\n  'animate-from-bottom': showAnimation,\n  'is-in-viewport': isAnimationContainerInViewport.value,\n}))\n\nif (showAnimation) {\n  useIntersectionObserver(animationContainer, ([{ isIntersecting }]) => {\n    if (isIntersecting) {\n      isAnimationContainerInViewport.value = true\n    }\n  })\n}\n\nuseState('hasHeroBanner', () => props.firstPageContent)\n\nconst paddingOptions = {\n  s: 'p-4 lg:p-8',\n  m: 'p-4 lg:p-12',\n  l: 'p-4 lg:p-16',\n  default: 'positive-padding py-4 md:py-12 lg:py-16',\n}\n\nconst innerContainerAlignementOptions = {\n  center: 'justify-center content-center text-center items-center',\n  left: 'justify-start items-start align-middle my-auto',\n  'bottom-left': 'justify-start align-bottom items-start',\n  'bottom-center': 'justify-center items-center align-bottom text-center',\n}\n\nconst outerContainerAlignementOptions = {\n  center: 'justify-center content-center text-center items-center',\n  left: 'justify-start content-start items-start align-middle',\n  'bottom-left': 'items-end justify-start',\n  'bottom-center': 'items-end justify-center',\n}\n\nconst logoSizeOptions = {\n  s: 'w-40 h-full',\n  m: 'lg:w-full w-52 lg:max-w-[244px] h-full',\n  l: 'lg:w-full w-64 lg:max-w-[400px] h-full',\n}\n\nconst bgMobileMediaHasVideoControls = computed(() => {\n  if (\n    props.bgMobileMedia?.length !== 1 ||\n    props.bgMobileMedia?.at(0)?.media?.type !== 'video'\n  )\n    return false\n  const video = props.bgMobileMedia?.at(0)?.media as Video\n\n  return video?.anatomy === 'standard'\n})\n\nconst innerContainerClasses = computed(() => ({\n  'lg:bottom-0 lg:top-0 lg:flex lg:items-end': showAnimation,\n  'lg:justify-start': showAnimation && props.contentAlignment === 'bottom-left',\n  'lg:justify-center':\n    showAnimation && props.contentAlignment === 'bottom-center',\n  'bottom-14 lg:bottom-0': bgMobileMediaHasVideoControls.value,\n}))\n\nconst options = computed(() => {\n  return {\n    padding: paddingOptions[props.padding],\n    innerContainerAlign:\n      innerContainerAlignementOptions[props.contentAlignment],\n    outerContainerAlign:\n      outerContainerAlignementOptions[props.contentAlignment],\n    logoSizeClass: logoSizeOptions[props.logoSize],\n    desktopAspectRatio: props.desktopAspectRatio ?? '4/5',\n    mobileAspectRatio: props.mobileAspectRatio ?? '4/5',\n  }\n})\nconst moleculesLinkWrapperMediaComponent = resolveComponent(\n  'MoleculesLinkWrapperMedia'\n)\n\nconst showInnerContainer = computed(\n  () =>\n    !!props.logoMedia?.length ||\n    !!props.logo?.length ||\n    (props.bgDesktopMedia && props.bgDesktopMedia?.length >= 2) ||\n    (props.bgMobileMedia && props.bgMobileMedia?.length >= 2) ||\n    props.title ||\n    props.subtitle ||\n    props.text ||\n    !!props.linkLabel?.length\n)\nconst { deferredTransparencyState } = useDefaultHeaderConfig()\n</script>\n\n<template>\n  <div\n    class=\"editorial-content outer-container relative flex w-full\"\n    :class=\"[\n      options.outerContainerAlign,\n      `!md:aspect-${options.desktopAspectRatio ?? '4/5'}`,\n      `!aspect-${options.mobileAspectRatio ?? '4/5'}`,\n      firstPageContent\n        ? deferredTransparencyState.active\n          ? 'editorial-first-content-header-transparent'\n          : 'editorial-first-content'\n        : 'h-full',\n    ]\"\n  >\n    <!-- Background image container -->\n    <component\n      :is=\"linkLabel?.length === 1 ? moleculesLinkWrapperMediaComponent : 'div'\"\n      :type=\"linkLabel?.length === 1 ? linkLabel[0].type : ''\"\n      :target=\"linkLabel?.length === 1 ? linkLabel[0].target : ''\"\n      :internal-link=\"linkLabel?.length === 1 ? linkLabel[0].internalLink : ''\"\n      :aria-label=\"linkLabel?.length === 1 ? linkLabel[0].ariaLabel : ''\"\n      class=\"media-container relative inset-0 z-10 h-full w-full\"\n    >\n      <!-- Gradient Overlay -->\n      <div\n        class=\"gradient-overlay object-fit pointer-events-none absolute inset-0 z-50\"\n        :class=\"{ 'gradient-overlay': showGradient }\"\n        :style=\"{\n          '--opacity-bottom': opacityGradientBottom,\n          '--opacity-mid': opacityGradientMid,\n          '--opacity-top': opacityGradientTop,\n        }\"\n      />\n\n      <div\n        v-if=\"bgDesktopMedia && bgDesktopMedia.length > 1\"\n        class=\"desktop-media h-full w-full\"\n        :class=\"[bgMobileMedia?.length ? 'hidden lg:contents' : 'contents']\"\n      >\n        <UISliderBasic\n          id=\"editorial-content-desktop\"\n          :items=\"bgDesktopMedia\"\n          grap-cursor\n          navigation-element-id=\"slider-pagination-desktop\"\n          :navigation-color=\"bulletPaginationColor\"\n          :breakpoints=\"{\n            '(max-width: 1024px)': { active: false },\n          }\"\n        >\n          <template #slide=\"{ item }\">\n            <UIMedia\n              v-bind=\"item\"\n              ref=\"shopTheLookModalIdRef\"\n              :aspect-ratio=\"options.desktopAspectRatio\"\n              class=\"h-full w-full shrink-0 grow-0 basis-full object-cover object-top\"\n            />\n          </template>\n        </UISliderBasic>\n      </div>\n\n      <div\n        v-else-if=\"bgDesktopMedia?.length === 1\"\n        :class=\"[bgMobileMedia?.length ? 'hidden lg:contents' : 'contents']\"\n      >\n        <UIMedia\n          v-if=\"bgDesktopMedia?.[0]?.media\"\n          ref=\"shopTheLookModalIdRef\"\n          v-bind=\"{\n            ...bgDesktopMedia[0],\n            media: {\n              ...bgDesktopMedia[0].media,\n              ...(bgDesktopMedia[0].media.type === 'video' && {\n                autoplay: !isMobile && bgDesktopMedia[0].media.autoplay,\n              }),\n            },\n          }\"\n          :aspect-ratio=\"options.desktopAspectRatio\"\n          class=\"h-full w-full object-cover object-top\"\n        />\n      </div>\n      <div\n        v-if=\"bgMobileMedia && bgMobileMedia.length > 1\"\n        class=\"mobile-media h-full w-full\"\n        :class=\"[bgDesktopMedia?.length ? 'contents lg:hidden' : 'contents']\"\n      >\n        <UISliderBasic\n          id=\"editorial-content-mobile\"\n          :items=\"bgMobileMedia\"\n          navigation-element-id=\"slider-pagination-mobile\"\n          :navigation-color=\"bulletPaginationColor\"\n          grap-cursor\n          :breakpoints=\"{\n            '(min-width: 1024px)': { active: false },\n          }\"\n        >\n          <template #slide=\"{ item }\">\n            <UIMedia\n              v-bind=\"item\"\n              ref=\"shopTheLookModalIdRef\"\n              :aspect-ratio=\"options.mobileAspectRatio\"\n              class=\"h-full w-full shrink-0 grow-0 basis-full object-cover object-top\"\n            />\n          </template>\n        </UISliderBasic>\n      </div>\n      <div\n        v-else-if=\"bgMobileMedia?.length === 1\"\n        :class=\"[bgDesktopMedia?.length ? 'contents lg:hidden' : 'contents']\"\n      >\n        <UIMedia\n          ref=\"shopTheLookModalIdRef\"\n          v-bind=\"{\n            ...bgMobileMedia[0],\n            media: {\n              ...bgMobileMedia[0].media,\n              ...(bgMobileMedia[0].media.type === 'video' && {\n                autoplay: isMobile && bgMobileMedia[0].media.autoplay,\n              }),\n            },\n          }\"\n          :aspect-ratio=\"options.mobileAspectRatio\"\n          class=\"h-full w-full object-cover object-top\"\n        />\n      </div>\n    </component>\n\n    <!-- Inner Container -->\n    <div\n      v-if=\"showInnerContainer\"\n      class=\"inner-container pointer-events-none absolute z-10 min-w-[40%]\"\n      :class=\"innerContainerClasses\"\n      :style=\"{ width: widthTextContainer }\"\n    >\n      <div\n        ref=\"animationContainer\"\n        :class=\"{ 'lg:flex lg:h-2/3 lg:items-end': showAnimation }\"\n      >\n        <div\n          class=\"gap-sm lg:gap-md px-sm py-xxl lg:p-4xl flex flex-col\"\n          :class=\"[\n            { 'lg:sticky lg:bottom-0': showAnimation },\n            [options.innerContainerAlign, options.padding],\n          ]\"\n        >\n          <div v-if=\"logoMedia?.length\">\n            <UIMedia\n              :media=\"logoMedia[0]\"\n              :class=\"[logoSizeOptions[logoSize]]\"\n            />\n          </div>\n          <div\n            v-for=\"(singleLogo, index) in logo?.slice(0, 2)\"\n            v-else-if=\"logo && logo.length\"\n            :key=\"singleLogo + index\"\n            :class=\"`text-editorial-${logoColor}`\"\n          >\n            <component\n              :is=\"megaLogoMap[singleLogo as Brand]\"\n              :key=\"singleLogo\"\n              :class=\"[options.logoSizeClass]\"\n            />\n          </div>\n\n          <!-- Pagination bullet -->\n          <div\n            v-if=\"bgDesktopMedia && bgDesktopMedia?.length >= 2\"\n            id=\"slider-pagination-desktop\"\n            class=\"hidden lg:block\"\n          />\n\n          <div\n            v-if=\"bgMobileMedia && bgMobileMedia?.length >= 2\"\n            id=\"slider-pagination-mobile\"\n            class=\"lg:hidden\"\n          />\n\n          <UtilsMarkdown\n            v-if=\"title\"\n            :content=\"title\"\n            is-preprocessed\n            container=\"h2\"\n            class=\"text-book-4 lg:text-book-3 uppercase\"\n            :class=\"[animationCss, [`text-editorial-${titleColor}`]]\"\n          />\n\n          <UtilsMarkdown\n            v-if=\"subtitle\"\n            :content=\"subtitle\"\n            is-preprocessed\n            container=\"span\"\n            class=\"text-book-5 lg:text-book-4 uppercase\"\n            :class=\"[animationCss, `text-editorial-${subtitleColor}`]\"\n          />\n          <span\n            v-if=\"text\"\n            class=\"text-book-5\"\n            :class=\"[animationCss, `text-editorial-${textColor}`]\"\n          >\n            <UtilsMarkdown :content=\"text\" />\n          </span>\n          <div\n            v-if=\"linkLabel?.length\"\n            class=\"pointer-events-auto flex flex-wrap items-center gap-6 align-middle\"\n            :class=\"[\n              {\n                'justify-center': props.contentAlignment.includes('center'),\n                'animate-with-delay': showAnimation,\n              },\n              [animationCss],\n            ]\"\n          >\n            <UILink\n              v-for=\"(link, index) in linkLabel.slice(0, 4)\"\n              :key=\"`${link.label}-${index}`\"\n              class=\"!text-link-5 flex shrink-0 flex-wrap text-center\"\n              :class=\"{ '!px-0': link.backgroundColor === 'transparent' }\"\n              v-bind=\"link\"\n              :data-testid=\"`link-to-plp-${index}`\"\n              :data-tracking=\"`CTA_${link.target}`\"\n              pos-tracking=\"hero\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.gradient-overlay {\n  background: linear-gradient(\n    0deg,\n    rgba(0, 0, 0, var(--opacity-bottom)) 0%,\n    rgba(0, 0, 0, var(--opacity-mid)) 50%,\n    rgba(0, 0, 0, var(--opacity-top)) 100%\n  );\n}\n\n.animate-from-bottom {\n  opacity: 0;\n  transform: translateY(100%);\n  transition:\n    transform 1s ease,\n    opacity 1s ease;\n\n  &.animate-with-delay {\n    transition-delay: 1s;\n  }\n\n  &.is-in-viewport {\n    opacity: 1;\n    transform: translateY(0%);\n  }\n}\n</style>\n"],"names":["props","__props","openDialog","useDialog","localePath","url","computed","_a","withLeadingSlash","__expose","shopTheLookModalIdRef","ref","breakpoint","useProjectBreakpoint","isMobile","animationContainer","isAnimationContainerInViewport","opacityGradientBottom","opacityGradientMid","opacityGradientTop","widthTextContainer","showAnimation","animationCss","useIntersectionObserver","isIntersecting","useState","paddingOptions","innerContainerAlignementOptions","outerContainerAlignementOptions","logoSizeOptions","bgMobileMediaHasVideoControls","_d","_c","_b","video","_f","_e","innerContainerClasses","options"],"mappings":"mjBAIA,MAAMA,EAAQC,EACR,CAEN,WAAAC,CAEM,EAAAC,KAEAC,KAA6B,EACxBC,EAAAC,EAAA,IAAA,OACT,OAAAC,EAAAP,EAAA,eAAA,MAAAO,EAAA,yBAEyC,SAGzCP,EAAA,QAAA,CAAA,eAAA,KAAAA,EAAA,MAAA,IAEuBQ,EAAAR,EAAA,QAAA,EAAA,CAAA,85BCfzB,EAOM,QAAA,CACO,QAAE,SAET,EACA,sBAAsB,CAAA,EAEtB,iBAAA,CACA,KAAA,QAEN,QAA8B,EAAS,EAIvC,gBAAA,CAAA,EACA,mBAA2B,CAAS,QAC5B,GAEF,CAEN,EAAoC,MAAAC,EAC5B,CAGR,OAAAQ,CACA,EAAA,CAGM,MAAAT,EAAAC,EAIAS,EAAwBC,EAAO,IAAA,EAAAF,EACZ,CACvB,sBAAAC,CAAiD,CACjD,EAEF,KAAmB,CACjB,WAAAE,CACE,EAAAC,GAAoB,EAClBC,EAAAF,EAAA,QAAA,IAAuC,EACzCG,EAAAJ,EAAA,IAAA,EACDK,EAAAL,EAAA,EAAA,EACHM,EAAAX,EAAA,IAAA,OAAA,OAAAN,EAAA,iBAAAA,EAAA,gBAAA,OAAA,IAAAO,EAAAP,EAAA,kBAAA,YAAAO,EAAA,QAAA,GAAA,EAAA,EAESW,EAAuBZ,EAAA,IAAsB,OAAA,OAAAN,EAAA,iBAAAA,EAAA,gBAAA,IAAA,IAAAO,EAAAP,EAAA,kBAAA,YAAAO,EAAA,KAAA,GAAA,EAAA,EAEhDY,GAAiBb,EAAA,IAAA,OAAA,OAAAN,EAAA,iBAAAA,EAAA,gBAAA,IAAA,IAAAO,EAAAP,EAAA,kBAAA,YAAAO,EAAA,KAAA,GAAA,EAAA,EAClBa,GAAAd,EAAA,IAAA,GAAAN,EAAA,kBAAA,GAAA,EACAqB,EAAA,CAAA,cAAA,eAAA,EAAA,SAAArB,EAAA,gBAAA,GAAA,CAAAA,EAAA,iBACAsB,EAAAhB,EAAA,KAAA,CACH,sBAASe,EACX,iBAAAL,EAAA,KAEA,EAAA,EACUK,GACRE,GAAMR,EAAA,CAAA,CAAA,CACS,eAAAS,CAAA,CACE,IAAA,CACnBA,IAEMR,EAAkC,MAAA,GAC9B,CACF,EACSS,GACE,gBAAA,IAAAzB,EAAA,gBAAA,EACnB,MAAA0B,GAAA,CAEA,EAAA,aACE,EAAG,cACH,EAAG,cACH,QAAG,yCACL,EAEMC,IAEF,OAAA,yDAGO,KAAA,iDACT,cAAc,yCAEd,gBAA0B,sDAC3B,EAEKC,GAAwC,CAC5C,OAA6C,yDAC7C,KAAA,uDACA,cAAA,0BAEA,0CACA,EAEIC,GACG,EAAA,cACL,EAAA,yCACA,EAAA,wCAEA,EAEAC,GAA+BxB,EAAc,IAAA,iBAC7C,KAAAC,EAAAP,EAAA,gBAAA,YAAAO,YAAgD,KAAAwB,GAAAC,GAAAC,EAAAjC,EAAA,gBAAA,YAAAiC,EAAA,GAAA,KAAA,YAAAD,EAAA,QAAA,YAAAD,EAAA,QAAA,QAAA,MAAA,GAChD,MAAAG,GAAAC,GAAAC,EAAApC,EAAA,gBAAA,YAAAoC,EAA8C,GAAA,KAA9C,YAAAD,EAA8C,MAChD,OAAAD,GAAA,YAAAA,EAAA,WAAA,UAAA,CACD,EACKG,GAAqC/B,EAAA,KAAA,CACzC,4CAAAe,EACF,mBAAAA,GAAArB,EAAA,mBAAA,cAEA,oBAA2BqB,GAAArB,EAAA,mBAAA,gBACzB,wBACqB8B,GACL,KAMK,EACvB,EACMQ,EAA4BhC,EAAA"}