{"version":3,"file":"EditorialDiscoverAlternative-v2.js","sources":["../../../../../design-system/components/Editorial/EditorialDiscoverAlternative.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ChipContent,\n  CombinedChip,\n  EditorialDiscoverAlternativeProps,\n} from './EditorialDiscoverAlternative.props'\n\nconst { breakpoint } = useProjectBreakpoint()\n\nconst { ts } = useI18n()\n\nconst props = withDefaults(defineProps<EditorialDiscoverAlternativeProps>(), {\n  alphabeticalOrder: true,\n})\n\nconst isMobile = ref()\n\nconst hoverStates = reactive<Record<number, boolean>>({})\nconst initHoverStates = () => {\n  props.chips.forEach((chip, index) => {\n    hoverStates[index] = false\n  })\n}\n\nonMounted(initHoverStates)\n\nwatch(() => props.chips, initHoverStates, { immediate: true })\n\nconst defaultView = computed(() =>\n  props.defaultView === 'grid' ? 'gridWall' : 'gridThree'\n)\n\nconst selectedChip = ref(0)\n\nconst sortedChips = computed(() => {\n  const chips = [...props.chips]\n  const allContent: ChipContent = chips.flatMap(\n    (chip: CombinedChip) => chip.chipContent.content\n  )\n  const viewAllChip: CombinedChip = {\n    chip: {\n      label: `${ts('view_all')}`,\n      selected: false,\n      isTimelineStyle: false,\n    },\n    chipContent: { content: allContent },\n  }\n\n  if (props.alphabeticalOrder) {\n    chips.sort((a, b) => {\n      if (a.chip.label.toLowerCase() < b.chip.label.toLowerCase()) {\n        return -1\n      }\n      if (a.chip.label.toLowerCase() > b.chip.label.toLowerCase()) {\n        return 1\n      }\n      return 0\n    })\n  }\n  chips.unshift(viewAllChip)\n  return chips\n})\n\nconst selectedChipsContentLength = computed(\n  () => sortedChips.value[selectedChip.value].chipContent.content.length\n)\nconst selectedView = ref(defaultView.value ?? 'gridThree')\n\nconst isGridThreeView = computed(() => selectedView.value === 'gridThree')\n\nconst gridColumn = Number(props.gridColumn)\n\nconst baseNumberOfSlideToShow = computed(() =>\n  isMobile.value ? 6 : gridColumn * 3\n)\n\nconst dynamicNumberOfSlidesToShow = ref(baseNumberOfSlideToShow.value)\n\nconst slidesToShow = computed(() => {\n  return sortedChips.value[selectedChip.value].chipContent.content\n})\n\nconst handleSelectedChip = (index: number) => {\n  selectedChip.value = index\n  resetDynamicSlidesToShow()\n}\n\nconst handleSelectedView = (view: string) => {\n  selectedView.value = view\n  resetDynamicSlidesToShow()\n}\n\nconst showMoreFunction = () => {\n  if (dynamicNumberOfSlidesToShow.value < selectedChipsContentLength.value) {\n    dynamicNumberOfSlidesToShow.value += baseNumberOfSlideToShow.value\n  }\n}\n\nconst showAllFunction = () => {\n  dynamicNumberOfSlidesToShow.value = selectedChipsContentLength.value\n}\n\nconst resetDynamicSlidesToShow = () => {\n  dynamicNumberOfSlidesToShow.value = baseNumberOfSlideToShow.value\n}\n\nconst chipsLabelModifier = computed(() => {\n  return sortedChips.value.map((singleChip: CombinedChip) => {\n    return {\n      label: `${singleChip.chip.label} (${singleChip.chipContent ? singleChip.chipContent.content.length : 'Null'})`,\n      selected: false,\n    }\n  })\n})\nwatch(\n  () => breakpoint.smaller('md').value,\n  newVal => {\n    isMobile.value = newVal\n    resetDynamicSlidesToShow()\n  },\n  { immediate: true }\n)\n\nconst UILinkComponent = resolveComponent('UILink')\n</script>\n\n<template>\n  <div\n    class=\"editorial-discover-alternative text-text-primary bg-background-secondary pt-6 lg:pb-6\"\n  >\n    <div class=\"flex flex-col gap-10 py-10 text-center\">\n      <div v-if=\"title || subtitle\" class=\"flex flex-col gap-4 px-4 lg:px-16\">\n        <UtilsMarkdown\n          v-if=\"title\"\n          :content=\"title\"\n          is-preprocessed\n          container=\"span\"\n          class=\"text-book-4 lg:text-book-3 w-full\"\n        />\n        <UtilsMarkdown\n          v-if=\"subtitle\"\n          :content=\"subtitle\"\n          is-preprocessed\n          container=\"span\"\n          class=\"text-light-5\"\n        />\n      </div>\n      <div v-if=\"chipsLabelModifier.length > 2\" class=\"w-full px-4 lg:px-16\">\n        <UIChipsWrapper\n          :chips=\"chipsLabelModifier\"\n          :is-timeline-style=\"chipStyle === 'timeline'\"\n          :default-selected-chip=\"0\"\n          @selected=\"handleSelectedChip\"\n        />\n      </div>\n      <div v-if=\"showGridSelector\" class=\"flex justify-center gap-10\">\n        <button\n          :class=\"isGridThreeView ? 'viewSelected' : 'viewUnselected'\"\n          @click=\"handleSelectedView('gridThree')\"\n        >\n          <DefaultIconsGridThree class=\"h-5 w-5\" />\n        </button>\n        <button\n          :class=\"isGridThreeView ? 'viewUnselected' : 'viewSelected'\"\n          @click=\"handleSelectedView('gridWall')\"\n        >\n          <DefaultIconsGridWall class=\"h-5 w-5\" />\n        </button>\n      </div>\n      <div v-if=\"isGridThreeView\">\n        <UISliderEditorialWithArrows\n          :items=\"sortedChips[selectedChip].chipContent.content\"\n          :has-no-space-between=\"cardsConfiguration?.hasNoSpaceBetween\"\n          :loop=\"sortedChips[selectedChip].chipContent.content.length > 3\"\n          :show-navigation=\"\n            sortedChips[selectedChip].chipContent.content.length > 3\n          \"\n          :type=\"cardsConfiguration?.type\"\n          :card-dimensions=\"cardsConfiguration?.cardDimensions\"\n          :mobile-centered=\"cardsConfiguration?.mobileCentered\"\n          :padding=\"cardsConfiguration?.padding\"\n        >\n          <template #default=\"{ item, index }\">\n            <div\n              class=\"card-container underline-effect-appear relative flex flex-col gap-8\"\n            >\n              <component\n                :is=\"item.link?.length ? UILinkComponent : 'div'\"\n                class=\"flex flex-col gap-8\"\n                :type=\"item.link && item.link[0].type\"\n                :target=\"item.link && item.link[0].target\"\n                :internal-link=\"\n                  item.link && item.link.length && item.link[0].internalLink\n                \"\n                @mouseover=\"hoverStates[index] = true\"\n                @mouseleave=\"hoverStates[index] = false\"\n              >\n                <div\n                  :class=\"{\n                    'card main-media-card gap-[1px]': item.hoverElement,\n                  }\"\n                  class=\"image-slider-container\"\n                >\n                  <UIMedia v-bind=\"item.element\" :aspect-ratio=\"aspectRatio\" />\n                </div>\n                <div\n                  v-if=\"item.hoverElement\"\n                  class=\"card hover-image-card absolute top-0\"\n                >\n                  <UIMedia\n                    v-bind=\"item.hoverElement\"\n                    :aspect-ratio=\"aspectRatio\"\n                  />\n                </div>\n\n                <div class=\"flex flex-col items-center gap-2 pb-10\">\n                  <UtilsMarkdown\n                    v-if=\"item.title\"\n                    :content=\"item.title\"\n                    is-preprocessed\n                    container=\"span\"\n                    class=\"md:text-book-5 text-book-6\"\n                    :class=\"{\n                      'text-effect': item.link?.length,\n                    }\"\n                  />\n                  <UtilsMarkdown\n                    v-if=\"item.subtitle\"\n                    :content=\"item.subtitle\"\n                    is-preprocessed\n                    container=\"span\"\n                    class=\"md:text-light-5 text-light-6\"\n                    :class=\"{\n                      'text-effect': item.link?.length,\n                    }\"\n                  />\n                </div>\n              </component>\n            </div>\n          </template>\n        </UISliderEditorialWithArrows>\n      </div>\n      <div\n        v-else\n        class=\"grid grid-cols-2 gap-[1px]\"\n        :class=\"[\n          { 'md:grid-cols-3': gridColumn === 3 },\n          { 'md:grid-cols-4': gridColumn === 4 },\n          { 'px-4 lg:px-16': gridPadding },\n        ]\"\n      >\n        <div\n          v-for=\"(content, contentIndex) in slidesToShow\"\n          :key=\"`${content.title}-${contentIndex}`\"\n          class=\"block\"\n          :class=\"[\n            { hidden: contentIndex >= dynamicNumberOfSlidesToShow },\n            gridColumn === 3 && gridPadding\n              ? 'md:grid-slide-3-padded'\n              : 'md:grid-slide-3',\n            gridColumn === 4 && gridPadding\n              ? 'md:grid-slide-4-padded'\n              : 'md:grid-slide-4',\n          ]\"\n        >\n          <div\n            class=\"card-container underline-effect-appear relative flex flex-col gap-8\"\n          >\n            <component\n              :is=\"content.link?.length ? UILinkComponent : 'div'\"\n              class=\"flex flex-col gap-8\"\n              :type=\"\n                content.link && content.link.length && content.link[0].type\n              \"\n              :target=\"\n                content.link && content.link.length && content.link[0].target\n              \"\n              :internal-link=\"\n                content.link &&\n                content.link.length &&\n                content.link[0].internalLink\n              \"\n              :aria-label=\"\n                content.link && content.link.length && content.link[0].ariaLabel\n              \"\n              @mouseover=\"hoverStates[contentIndex] = true\"\n              @mouseleave=\"hoverStates[contentIndex] = false\"\n            >\n              <div :class=\"{ 'card main-media-card': content.hoverElement }\">\n                <UIMedia v-bind=\"content.element\" :aspect-ratio=\"aspectRatio\" />\n              </div>\n              <div\n                v-if=\"content.hoverElement\"\n                class=\"card hover-image-card absolute top-0\"\n              >\n                <UIMedia\n                  v-bind=\"content.hoverElement\"\n                  :aspect-ratio=\"aspectRatio\"\n                />\n              </div>\n\n              <div\n                v-if=\"content.title || content.subtitle\"\n                class=\"flex flex-col items-center gap-2 pb-10\"\n              >\n                <span\n                  v-if=\"content.title\"\n                  class=\"md:text-book-5 text-book-6 text-effect w-fit\"\n                >\n                  {{ content.title }}\n                </span>\n                <span\n                  v-if=\"content.subtitle\"\n                  class=\"md:text-light-5 text-light-6 text-effect w-fit\"\n                >\n                  {{ content.subtitle }}\n                </span>\n              </div>\n            </component>\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"\n          !isGridThreeView &&\n          dynamicNumberOfSlidesToShow < selectedChipsContentLength\n        \"\n        class=\"flex flex-col items-center gap-2\"\n      >\n        <AtomsCta :icon-show-default=\"false\" @click=\"showMoreFunction\">\n          <template #label>\n            {{\n              `${$ts('plp.showMore')} (${dynamicNumberOfSlidesToShow}/${selectedChipsContentLength})`\n            }}\n          </template>\n        </AtomsCta>\n        <AtomsCta\n          anatomy=\"link\"\n          class=\"py-sm\"\n          :icon-show-default=\"false\"\n          @click=\"showAllFunction\"\n        >\n          <template #label>\n            {{ `${$ts('plp.showAll')} (${selectedChipsContentLength})` }}\n          </template>\n        </AtomsCta>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.viewSelected {\n  @apply text-text-primary;\n}\n\n.viewUnselected {\n  @apply text-text-inactive;\n}\n\n:deep(.swiper) {\n  width: 100%;\n  height: 100%;\n}\n\n:deep(.swiper-slide) {\n  width: 66.67%; // 100% / 1.5\n\n  @screen md {\n    width: 40%; // 100% / 2.5\n  }\n\n  @screen lg {\n    width: 28.57%; // 100% / 3.5\n  }\n}\n\n:deep(.grid-slide-3-padded) {\n  width: calc((100vw - 32px) / 2);\n\n  @screen md {\n    width: calc((100vw - 32px) / 3);\n  }\n\n  @screen lg {\n    width: calc((100vw - 128px) / 3);\n  }\n}\n\n:deep(.grid-slide-4-padded) {\n  width: calc((100vw) / 2);\n\n  @screen md {\n    width: calc((100vw - 32px) / 4);\n  }\n\n  @screen ml {\n    width: calc((100vw - 128px) / 4);\n  }\n}\n\n:deep(.grid-slide-3) {\n  width: 50vw;\n\n  @screen md {\n    width: 33.33vw;\n  }\n\n  @screen lg {\n    width: 33.33vw;\n  }\n}\n\n:deep(.grid-slide-4) {\n  width: 50vw;\n\n  @screen md {\n    width: 25vh;\n  }\n\n  @screen lg {\n    width: 25vh;\n  }\n}\n\n.card-container {\n  .card {\n    transition: opacity 0.4s ease;\n  }\n  .main-media-card {\n    opacity: 1;\n  }\n  .hover-image-card {\n    opacity: 0;\n  }\n  &:hover {\n    .main-media-card {\n      opacity: 0;\n    }\n    .hover-image-card {\n      opacity: 1;\n    }\n  }\n}\n\n.swiper-button-next-unique::after,\n.swiper-button-prev-unique::after,\n.swiper-button-next-unique,\n.swiper-button-prev-unique {\n  --swiper-navigation-size: 14px;\n  --swiper-navigation-sides-offset: 20px;\n  --swiper-navigation-top-offset: 45%;\n  @apply text-text-primary;\n}\n</style>\n"],"names":["__props","breakpoint","useProjectBreakpoint","ts","useI18n","props","isMobile","ref","hoverStates","reactive","initHoverStates","chip","index","onMounted","watch","defaultView","computed","selectedChip","sortedChips","chips","allContent","viewAllChip","a","b","selectedChipsContentLength","selectedView","isGridThreeView","gridColumn","baseNumberOfSlideToShow","dynamicNumberOfSlidesToShow","slidesToShow","handleSelectedChip","resetDynamicSlidesToShow","handleSelectedView","view","showMoreFunction","showAllFunction"],"mappings":"i4CAOM,SAAa,CAAA,EAEb,MAAA,CAAK,EAEX,UAAc,CAAA,EAId,kBAAqB,CAEf,KAAA,QACN,UACE,EACE,YAAA,CAAA,EAAqB,WACtB,CAAA,EACH,YAAA,CAEA,KAAA,OAEA,EAEA,YAAoB,CAAA,EAAA,iBACI,CACxB,KAAA,OAEM,EAEA,mBAAc,CAAA,CAClB,EACA,MAAAA,GACE,KAAwB,CAC1B,WAAAC,CACA,EAAAC,GAAkC,EAC1B,CAAA,GAAAC,CACoB,EAAAC,GACd,EACVC,EAAiBL,EACnBM,EAAAC,EAAA,EACAC,EAAeC,GAAoB,EAAA,EACrCC,EAAA,IAAA,CAEAL,QAA6B,QAAA,CAAAM,EAAAC,IAAA,CACrBJ,EAAMI,CAAS,EAAA,EACnB,CAAI,CACK,EACTC,GAAAH,CAAA,EACII,EAAA,IAAET,EAAW,MAAAK,EAAkB,CAC1B,UAAA,EAAA,CACT,EACO,MAAAK,EAAAC,EAAA,IAAAX,EAAA,cAAA,OAAA,WAAA,WAAA,EACRY,EAAAV,EAAA,CAAA,EACHW,EAAAF,EAAA,IAAA,CACA,MAAMG,EAAQ,CAAW,GAAAd,EAAA,KAAA,EAClBe,EAAAD,EAAA,QAAAR,GAAAA,EAAA,YAAA,OAAA,EACRU,EAAA,CAED,KAAmC,OACf,GAAAlB,EAAA,cACpB,SAAA,GACM,gBAAe,EAErB,EAEM,YAAA,CAEA,QAA0BiB,CAAA,CAEhC,EAEM,OAAAf,EAAA,mBAEAc,EAAA,KAAA,CAAAG,EAAAC,IACeD,EAAA,KAAA,MAAA,YAAmB,EAAAC,EAAA,WAAmB,cAC1D,GAGCD,EAAA,KAAqB,MAAA,YAAA,EAAAC,EAAA,KAAA,MAAA,cACI,EAGrB,CACJ,EAEFJ,EAAA,QAAAE,CAAA,GAGE,CAAI,EACFG,IAA6D,IAAAN,EAAA,MAAAD,EAAA,KAAA,EAAA,YAAA,QAAA,MAAA,EAC/DQ,EAAAlB,EAAAQ,EAAA,OAAA,WAAA,EACFW,EAAAV,EAAA,IAAAS,EAAA,QAAA,WAAA,EAEME,SAAwBtB,EAAA,UAAA,EAC5BuB,IAA+D,IAAAtB,EAAA,MAAA,EAAAqB,EAAA,CAAA,EACjEE,EAAAtB,EAAAqB,EAAA,KAAA,EAEME,QACJZ,EAAA,MAAAD,EAA4D,KAAA,EAAA,YAAA,OAC9D,EAEMc,GAAqBnB,GAAS,CAClCK,EAAmB,MAAAL,EACVoB,EAAA,CAAA,EAELC,EAAUC,GAAA,CACZT,EAAA,MAAAS,EACFF,EAAC,CACF,EACDG,GAAA,IAAA,CACQN,EAAyB,MAAAL,EAAA,QACrBK,EAAA,OAAAD,EAAA,MAEiB,EAC3BQ,GAAA,IAAA,CACAP,EAAkB,MAAAL,EAAA,KACpB,EAEMQ"}