{"version":3,"file":"AmplienceEditorialTimeline-v2.js","sources":["../../../../../design-system/components/Editorial/Timeline/EditorialTimelineBlock.vue","../../../../../design-system/composables/useDragIntertia.ts","../../../../../design-system/components/Editorial/Timeline/EditorialTimelineContainer.vue","../../../../../integration-layer/components/Amplience/AmplienceEditorialTimeline.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { EditorialTimelineBlockProps } from './EditorialTimelineBlock.props'\n\ndefineProps<EditorialTimelineBlockProps>()\n\nconst emit = defineEmits<{ selected: [index: number] }>()\nconst el = ref<HTMLElement | null>(null)\ndefineExpose({ el })\n\nconst handleClick = (yearIndex: number) => {\n  emit('selected', yearIndex)\n}\n</script>\n\n<template>\n  <div ref=\"el\" class=\"flex flex-col\">\n    <!-- DOT & LINE -->\n    <div>\n      <div class=\"mb-2 mt-2 flex items-center md:mt-4 lg:mt-6\">\n        <div class=\"bg-primitives-black h-3 w-3 rounded-full\"></div>\n        <div v-if=\"!isLastBlock\" class=\"bg-primitives-black h-px w-full\"></div>\n      </div>\n      <!-- TITLE -->\n      <button\n        class=\"text-light-1 text-timeline mb-6 w-min px-4 md:mb-8 lg:mb-12\"\n        @click=\"handleClick(index)\"\n      >\n        {{ titleBlock }}\n      </button>\n    </div>\n    <!-- CARDS -->\n    <div\n      class=\"flex cursor-grab flex-nowrap gap-2 md:gap-4 lg:gap-6\"\n      data-dragscroll\n    >\n      <EditorialTimelineCard\n        v-for=\"(card, index) in cards\"\n        :key=\"`timeline-${titleBlock}-card-n-${index}`\"\n        :aspect-ratio=\"aspectRatio\"\n        :card=\"card\"\n        :class=\"{ 'last:pr-16 last:lg:pr-[120px]': !isLastBlock }\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.text-timeline {\n  @screen md {\n    font-size: 4rem;\n    font-weight: 300;\n    line-height: 7.5rem;\n    letter-spacing: 0.025rem;\n  }\n\n  @screen lg {\n    font-size: 5rem;\n    font-weight: 300;\n    line-height: 7.5rem;\n    letter-spacing: 0.025rem;\n  }\n}\n</style>\n","export const useDragInertia = (element: MaybeRef) => {\n  const velocityX = ref(0)\n  const inertiaAnimationFrame = ref()\n  const FRICTION_COEFF = 0.9 // coeff (0 < FRICTION_COEFF < 1)\n  const MIN_VELOCITY = 0.5\n\n  const onDragScrollStart = () => {\n    if (inertiaAnimationFrame.value) {\n      cancelAnimationFrame(inertiaAnimationFrame.value)\n      inertiaAnimationFrame.value = null\n    }\n    velocityX.value = 0\n  }\n\n  const onDragScrollMove = (e: CustomEvent) => {\n    velocityX.value = e.detail.deltaX\n  }\n\n  const onDragScrollEnd = async () => {\n    await nextTick()\n    applyInertia()\n  }\n\n  const applyInertia = () => {\n    const container = element.value\n    if (!container) {\n      return\n    }\n\n    const step = () => {\n      if (Math.abs(velocityX.value) < MIN_VELOCITY) {\n        velocityX.value = 0\n        inertiaAnimationFrame.value = null\n        return\n      }\n\n      container.scrollLeft += velocityX.value\n      velocityX.value *= FRICTION_COEFF\n      inertiaAnimationFrame.value = requestAnimationFrame(step)\n    }\n    inertiaAnimationFrame.value = requestAnimationFrame(step)\n  }\n\n  return { onDragScrollStart, onDragScrollMove, onDragScrollEnd }\n}\n","<script lang=\"ts\" setup>\nimport { dragscroll as vDragscroll } from 'vue-dragscroll'\nimport type UIChipsWrapper from '@design-system/components/UI/UIChipsWrapper.vue'\nimport type { EditorialTimelineContainerProps } from './EditorialTimelineContainer.props'\nimport type { WrapperChipType } from '@design-system/components/UI/UIChipsWrapper.props'\n\n// Declare scrollEndTimer in the global window object\ndeclare global {\n  interface Window {\n    scrollEndTimer: NodeJS.Timeout\n  }\n}\n\nconst props = defineProps<EditorialTimelineContainerProps>()\n\nconst { breakpoint } = useProjectBreakpoint()\nconst isDesktop = breakpoint.greater('md')\n\nconst chips = ref<WrapperChipType[]>(\n  props.blocks.map((block, index) => {\n    return {\n      label: block.titleBlock,\n      selected: index === 0,\n    }\n  })\n)\n\nconst blockRefs = ref<(HTMLElement | null)[]>([])\nconst chipsWrapperRef = ref<InstanceType<typeof UIChipsWrapper> | null>(null)\nconst timelineBlocksContainerRef = ref<HTMLElement | null>()\nconst lockScroll = ref(false)\nconst { onDragScrollStart, onDragScrollMove, onDragScrollEnd } = useDragInertia(timelineBlocksContainerRef)\n\nconst scrollBlock = (selectedIndex: number) => {\n  nextTick(() => {\n    requestAnimationFrame(() => {\n      const selectedBlock = blockRefs.value[selectedIndex]\n\n      if (selectedBlock && timelineBlocksContainerRef.value) {\n        const container = timelineBlocksContainerRef.value\n        const paddingLeft = parseInt(\n          window.getComputedStyle(document.querySelector('.chip')!).paddingLeft\n        )\n\n        const scrollToPosition =\n          selectedBlock.getBoundingClientRect().left -\n          container.getBoundingClientRect().left +\n          container.scrollLeft -\n          paddingLeft\n\n        container.scrollTo({\n          left: scrollToPosition,\n          behavior: 'smooth',\n        })\n        // TODO: Wait for scrollend full compatibility on Safari and Mobile browsers and remove on scroll\n        // useEventListener(\n        //   container,\n        //   'scrollend',\n        //   () => (lockScroll.value = false),\n        //   { once: true }\n        // )\n\n        container.onscroll = () => {\n          clearTimeout(window.scrollEndTimer)\n          window.scrollEndTimer = setTimeout(\n            () => (lockScroll.value = false),\n            100\n          )\n        }\n      }\n    })\n  })\n}\n\nconst handleSelectYear = async (index: number) => {\n  lockScroll.value = true\n  chipsWrapperRef.value?.changeSelectedChip(index)\n  scrollBlock(index)\n}\n\nonMounted(() => {\n  blockRefs.value.forEach((item, index) => {\n    useIntersectionObserver(\n      item,\n      ([entry]) => {\n        if (entry.isIntersecting && !lockScroll.value) {\n          chipsWrapperRef.value?.changeSelectedChip(index)\n        }\n      },\n      {\n        threshold: [0, 0.5, 1.0],\n        rootMargin: `0px -50% 0px -50%`,\n      }\n    )\n  })\n})\n</script>\n\n<template>\n  <div class=\"bg-primitives-off-white py-16\">\n    <div class=\"grid-standard\">\n      <div class=\"col-span-12\">\n        <div\n          class=\"mt-6 flex flex-col justify-center gap-4 text-center lg:mt-8 xl:mt-10\"\n        >\n          <UtilsMarkdown\n            v-if=\"title\"\n            :content=\"title\"\n            is-preprocessed\n            container=\"h2\"\n            class=\"text-book-4 md:text-book-3\"\n          />\n          <UtilsMarkdown\n            v-if=\"description\"\n            :content=\"description\"\n            is-preprocessed\n            container=\"p\"\n            class=\"text-light-5\"\n          />\n        </div>\n      </div>\n    </div>\n    <div class=\"timeline-grid timeline-grid-selector\">\n      <div class=\"col-span-12\">\n        <!-- years -->\n        <UIChipsWrapper\n          ref=\"chipsWrapperRef\"\n          class=\"my-6 lg:my-8 xl:my-10\"\n          :chips=\"chips\"\n          :default-selected-chip=\"0\"\n          :disable-internal-state=\"true\"\n          :is-timeline-style=\"true\"\n          @selected=\"\n            (selectedChipIndex: number) => handleSelectYear(selectedChipIndex)\n          \"\n        />\n        <!-- cards -->\n        <div\n          ref=\"timelineBlocksContainerRef\"\n          v-dragscroll:nochilddrag.x=\"{ active: isDesktop }\"\n          class=\"scrollbar-hide timeline-blocks-container flex overflow-x-scroll\"\n          @dragscrollstart=\"onDragScrollStart\"\n          @dragscrollmove=\"onDragScrollMove\"\n          @dragscrollend=\"onDragScrollEnd\"\n        >\n          <EditorialTimelineBlock\n            v-for=\"(block, index) in blocks\"\n            :ref=\"\n              (el: any) =>\n                (blockRefs[index] = (el as ComponentPublicInstance).$el)\n            \"\n            v-bind=\"block\"\n            :key=\"`block-year-${block.titleBlock}`\"\n            :index=\"index\"\n            :is-last-block=\"index === blocks.length - 1\"\n            :aspect-ratio=\"mediaAspectRatio\"\n            class=\"chip shrink-0\"\n            @selected=\"\n              (selectedYearIndex: number) => handleSelectYear(selectedYearIndex)\n            \"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport type {\n  EditorialTimelineBlock,\n  EditorialTimelineContainerProps,\n} from '@design-system/components/Editorial/Timeline/EditorialTimelineContainer.props'\nimport type { EditorialTimeline } from '@integration-layer/ampliance/schemas/editorial-timeline-schema.localized'\nconst props = defineProps<{\n  deliveryId: string\n  locale: string\n  vse?: string\n  content?: EditorialTimeline\n}>()\n\nconst data = await useComponentResponse<EditorialTimeline>(props)\n\ntype AspectRatio = '16/9' | '4/3' | '3/4' | '1/1' | '4/5' | '5/4'\n\nconst blocks: EditorialTimelineBlock[] = (data.value?.blocks ?? []).map(\n  block => ({\n    titleBlock: block.titleBlock as string,\n    cards:\n      block.cards?.map((card: any) => ({\n        media: card.media,\n        logo: card.logo,\n        location: card.location,\n      })) ?? [],\n  })\n)\n\nconst transformedData: EditorialTimelineContainerProps = {\n  mediaAspectRatio: data.value?.mediaAspectRatio as AspectRatio,\n  blocks: blocks,\n  title: data.value?.title,\n  description: data.value?.description,\n}\n</script>\n\n<template>\n  <div>\n    <EditorialTimelineContainer v-bind=\"transformedData\" />\n  </div>\n</template>\n"],"names":["__props","__emit","useDragInertia","element","velocityX","ref","inertiaAnimationFrame","FRICTION_COEFF","MIN_VELOCITY","onDragScrollStart","onDragScrollMove","e","onDragScrollEnd","nextTick","applyInertia","container","step","_hoisted_3","_sfc_main$1","_defineComponent","props","breakpoint","useProjectBreakpoint","isDesktop","chips","block","index","blockRefs","chipsWrapperRef","timelineBlocksContainerRef","lockScroll","scrollBlock","selectedIndex","selectedBlock","paddingLeft","scrollToPosition","handleSelectYear","_a","onMounted","item","useIntersectionObserver","entry","data","__temp","__restore","_withAsyncContext","useComponentResponse","blocks","card","transformedData","_b","_c","_d","_ctx","_cache","_component_EditorialTimelineContainer","__nuxt_component_0"],"mappings":"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"}