{"version":3,"file":"LandsideCarousel-9f693f90.js","sources":["../../../app/javascript/vuecomponents/LandsideCarousel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { dir } from '@@/bits/current_dir'\nimport { __ } from '@@/bits/intl'\nimport type { CarouselItem } from '@@/bits/landside_helper'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIconButton, { OzIconButtonColorScheme } from '@@/library/v4/components/OzIconButton.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport type { VueCssClass } from '@@/types'\nimport { useCarousel } from '@@/vuecomposables/carousel'\nimport { storeToRefs } from 'pinia'\nimport { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    carouselItems: CarouselItem[]\n    carouselName: string\n    carouselAriaLabelSmallerThanDesktop: string\n    isDarkMode: boolean\n    xDescription?: boolean\n    descriptionClasses?: VueCssClass | undefined\n    ringOffsetColorClasses?: VueCssClass\n    autoplay?: boolean\n  }>(),\n  {\n    xDescription: false,\n    descriptionClasses: undefined,\n    ringOffsetColorClasses: undefined,\n    autoplay: false,\n  },\n)\n\nconst { windowWidth, isSmallerThanDesktop, isSmallerThanTabletLandscape, isSmallerThanTabletPortrait } = storeToRefs(\n  useWindowSizeStore(),\n)\n\nconst carouselImageContainerRef = ref<HTMLElement>()\nconst carouselButtonContainerMobileRef = ref<HTMLElement>()\nconst carouselButtonMobileRefs = ref<HTMLElement[]>()\n\nconst carouselImageWidth = ref(0)\nconst carouselScrollFromButtonSelect = ref(false)\nconst isTimedScroll = ref(false)\nconst isActiveImageInFullView = ref(true)\n\nconst carouselPaddingX = computed<number>(() => {\n  if (isSmallerThanTabletPortrait.value) {\n    return 16\n  } else if (isSmallerThanDesktop.value) {\n    return 20\n  } else {\n    return 0\n  }\n})\n\nconst carouselGapBetweenSlides = computed<number>(() => {\n  if (isSmallerThanTabletPortrait.value) {\n    return 16\n  } else if (isSmallerThanTabletLandscape.value) {\n    return 24\n  } else {\n    return 32\n  }\n})\n\nconst onTransitionToAnotherSlide = () => {\n  isTimedScroll.value = true\n  isActiveImageInFullView.value = false\n}\n\nconst {\n  currentSlideIndex,\n  startAutoplay,\n  startAutoplayIfUnpaused,\n  pauseAutoplay,\n  toggleAutoplay,\n  isAutoplaying,\n  transitToNextSlide,\n  transitToPreviousSlide,\n} = useCarousel({\n  slides: props.carouselItems,\n  onTransitionToPreviousSlide: onTransitionToAnotherSlide,\n  onTransitionToNextSlide: onTransitionToAnotherSlide,\n})\n\nconst isAutoplayTriggeredManually = ref(false)\nconst toggleAutoplayFromUserInput = () => {\n  isAutoplayTriggeredManually.value = true\n  toggleAutoplay()\n}\n\nconst pauseAutoplayIfAutoplayButtonIsNotClicked = () => {\n  // We don't have autoplay on mobile so we don't need to pause it\n  if (isSmallerThanDesktop.value) return\n\n  if (!isAutoplayTriggeredManually.value) {\n    pauseAutoplay()\n  }\n}\n\nconst resumeAutoplayIfAutoplayButtonIsNotClicked = () => {\n  // We don't have autoplay on mobile so we don't need to resume it\n  if (isSmallerThanDesktop.value) return\n\n  if (!isAutoplayTriggeredManually.value) {\n    startAutoplay()\n  }\n}\n\nconst updateCarouselImageWidth = () => {\n  const carouselWidth = carouselImageContainerRef.value?.clientWidth ?? carouselImageWidth.value\n  // Subtract the carousel width by the padding-left and the gap between the first and second slides\n  const availableSpaceForSlides = carouselWidth - carouselPaddingX.value - carouselGapBetweenSlides.value\n\n  if (isSmallerThanDesktop.value) {\n    // In views smaller than desktop, the carousel's next slide peek is 1/6 of the slide width.\n    // This means that the card width is 6/7 of the available space, and the next slide peek is 1/7 of the available space.\n    carouselImageWidth.value = (availableSpaceForSlides / 7) * 6\n  } else {\n    carouselImageWidth.value = carouselWidth * 1\n  }\n}\n\nconst handleButtonClick = (index: number) => {\n  currentSlideIndex.value = index\n  isActiveImageInFullView.value = false\n  carouselScrollFromButtonSelect.value = true\n}\n\nconst handleUserManualScroll = (currentImageIndex: number) => {\n  currentSlideIndex.value = currentImageIndex\n}\n\nconst handleScrollEnd = (currentImageIndex: number) => {\n  const reachedTargetItem = currentSlideIndex.value === currentImageIndex\n  // Only remove flags if scrolled to target (and not any other image)\n  if (reachedTargetItem) {\n    carouselScrollFromButtonSelect.value = false\n    isTimedScroll.value = false\n    isActiveImageInFullView.value = true\n  }\n}\n\nconst imageScrollHandler = (e: Event) => {\n  if (e.target === null) return\n  isActiveImageInFullView.value = false\n\n  const target = e.target as HTMLDivElement\n\n  // Since image has width of `carouselImageWidth.value`.\n  // if first image is in view, target.scrollLeft = 0, currentImageIndex = target.scrollLeft / carouselImageWidth.value = 0.\n  // if second image is in view, target.scrollLeft = carouselImageWidth.value (one image width on the left), currentImageIndex = carouselImageWidth.value / carouselImageWidth.value = 1.\n  // Using round so that the image with the most content in view is set as the active item\n  // Using abs because scrollLeft is negative for RTL\n  const currentImageIndex = Math.round(Math.abs(target.scrollLeft) / carouselImageWidth.value)\n\n  // if scroll is from user manually scrolling\n  if (!carouselScrollFromButtonSelect.value && !isTimedScroll.value) {\n    handleUserManualScroll(currentImageIndex)\n  }\n\n  // scroll snap complete event, when scroll position is a multiple of image width\n  // There's an edge case where certain viewports result in floating point width. using `divide and modulo 1` instead of just `modulo` to check if is multiple of image width\n  // `RightImage` refers to image on the right (LTR) when there are 2 images in view\n  const percentageOfRightImageInView = Math.abs(target.scrollLeft / carouselImageWidth.value) % 1\n  // threshold chosen as a small number to account for calculation errors with floating points mentioned above,\n  // and what looks visually alright when hiding the side images during scroll\n  const leftThreshold = 0.005\n  const rightThreshold = 0.995\n  if (\n    percentageOfRightImageInView < leftThreshold || // scrolling left snap\n    percentageOfRightImageInView > rightThreshold // scrolling right snap\n  ) {\n    handleScrollEnd(currentImageIndex)\n  }\n}\n\nconst scrollActiveImageIntoView = () => {\n  if (carouselImageContainerRef.value) {\n    // total width of number of images left of active item\n    let activeImageScrollLeft = currentSlideIndex.value * carouselImageWidth.value\n    if (dir() === 'rtl') {\n      activeImageScrollLeft *= -1\n    }\n    carouselImageContainerRef.value.scroll({\n      left: activeImageScrollLeft,\n      behavior: 'smooth',\n    })\n  }\n}\n\nconst scrollActiveButtonIntoView = () => {\n  // Scroll active button to the center\n  if (carouselButtonMobileRefs.value && carouselButtonContainerMobileRef.value) {\n    const buttonContainerWidth = carouselButtonContainerMobileRef.value.clientWidth\n    const targetButtonWidth = carouselButtonMobileRefs.value[currentSlideIndex.value].clientWidth\n    const targetPositionDistanceFromLeft = (buttonContainerWidth - targetButtonWidth) / 2\n    const targetButtonOffsetLeft = carouselButtonMobileRefs.value[currentSlideIndex.value].offsetLeft\n    const parentOffsetLeft = carouselButtonContainerMobileRef.value.offsetLeft\n    const buttonScrollPosition = targetButtonOffsetLeft - parentOffsetLeft - targetPositionDistanceFromLeft\n    carouselButtonContainerMobileRef.value.scroll({ left: buttonScrollPosition, behavior: 'smooth' })\n  }\n}\n\nonMounted(() => {\n  // start at first item\n  nextTick(() => {\n    if (carouselImageContainerRef.value) {\n      carouselImageContainerRef.value.scrollLeft = 0\n    }\n  })\n\n  setTimeout(() => {\n    updateCarouselImageWidth()\n  }, 0)\n\n  carouselImageContainerRef.value?.addEventListener('scroll', imageScrollHandler)\n  if (props.autoplay) startAutoplayIfUnpaused()\n})\nonUnmounted(() => {\n  carouselImageContainerRef.value?.removeEventListener('scroll', imageScrollHandler)\n})\n\nwatch(windowWidth, updateCarouselImageWidth)\n\nwatch(\n  isSmallerThanDesktop,\n  () => {\n    if (isSmallerThanDesktop.value || !props.autoplay) {\n      pauseAutoplay()\n    } else {\n      startAutoplay()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(currentSlideIndex, () => {\n  // Scroll active image into view if user selects button or timed scroll\n  if (carouselScrollFromButtonSelect.value || isTimedScroll.value) {\n    scrollActiveImageIntoView()\n  }\n\n  scrollActiveButtonIntoView()\n})\n</script>\n\n<template>\n  <section\n    :aria-roledescription=\"__('carousel')\"\n    :aria-labelledby=\"`${carouselName}-header`\"\n    class=\"w-full h-full flex flex-col py-1 desktop:p-1\"\n  >\n    <p :id=\"`${carouselName}-carousel-label`\" class=\"sr-only\">\n      {{\n        isSmallerThanDesktop\n          ? carouselAriaLabelSmallerThanDesktop\n          : __('Carousel is at slide %{currentSlide} of %{numSlides}', {\n              currentSlide: currentSlideIndex + 1,\n              numSlides: carouselItems.length,\n            })\n      }}\n    </p>\n    <div class=\"relative group\">\n      <p v-if=\"!isSmallerThanDesktop\" :id=\"`${carouselName}-carousel-description`\" class=\"sr-only\">\n        {{\n          isAutoplaying\n            ? __('Carousel is autoplaying. Click to pause.')\n            : __('Carousel is paused. Click to resume autoplaying.')\n        }}\n      </p>\n      <!-- Slides -->\n      <ul\n        ref=\"carouselImageContainerRef\"\n        :class=\"[\n          'w-full box-border flex overflow-x-scroll no-scrollbar desktop:rounded-3xl',\n          {\n            'pointer-events-none': carouselScrollFromButtonSelect,\n          },\n          // Focus\n          'focus-visible:ring-2.5 focus-visible:ring-offset-[1.5px]',\n          !isDarkMode && [\n            'focus-visible:ring-grape-500',\n            ringOffsetColorClasses || 'focus-visible:ring-offset-light-ui-100',\n          ],\n          isDarkMode && [\n            'focus-visible:ring-canary-500',\n            ringOffsetColorClasses || 'focus-visible:ring-offset-dark-ui-100',\n          ],\n        ]\"\n        :style=\"{\n          scrollSnapType: 'x mandatory',\n          gap: `${carouselGapBetweenSlides}px`,\n          'padding-inline': `${carouselPaddingX}px`,\n        }\"\n        :aria-labelledby=\"`${carouselName}-carousel-label`\"\n        :aria-describedby=\"!isSmallerThanDesktop ? `${carouselName}-carousel-description` : undefined\"\n        tabindex=\"0\"\n        @focusin=\"pauseAutoplayIfAutoplayButtonIsNotClicked\"\n        @focusout=\"resumeAutoplayIfAutoplayButtonIsNotClicked\"\n      >\n        <!-- Carousel -->\n        <template v-for=\"(carouselItem, index) in carouselItems\">\n          <li\n            :key=\"index\"\n            class=\"flex flex-col\"\n            :style=\"{\n              scrollSnapAlign: 'center',\n              scrollSnapStop: 'always',\n            }\"\n            :aria-roledescription=\"__('Slide')\"\n            :aria-labelledby=\"`${carouselName}-carousel-slide-title-${index}`\"\n          >\n            <ImageThumbnail\n              v-if=\"carouselImageWidth > 0\"\n              :src=\"carouselItem.image.url\"\n              :fallback-to-placeholder=\"true\"\n              :original-image-height=\"carouselItem.image.originalHeight\"\n              :original-image-width=\"carouselItem.image.originalWidth\"\n              :width=\"carouselImageWidth\"\n              :title=\"carouselItem.description\"\n              :aspect-ratio=\"16 / 9\"\n              :process-image=\"true\"\n              :class=\"[\n                'rounded-t-xl tablet-landscape:rounded-t-3xl',\n                !xDescription && 'rounded-b-xl tablet-landscape:rounded-b-3xl',\n                isActiveImageInFullView && index !== currentSlideIndex && !isSmallerThanDesktop && 'invisible',\n              ]\"\n              alt=\"\"\n            />\n            <p\n              :id=\"`${carouselName}-carousel-slide-title-${index}`\"\n              :class=\"[\n                'rounded-b-xl tablet-landscape:rounded-b-3xl text-body grow desktop:grow-0 px-5 tablet-portrait:px-8 py-4 tablet-portrait:py-6',\n                descriptionClasses,\n                !xDescription && 'sr-only',\n              ]\"\n            >\n              {{ carouselItem.description }}\n            </p>\n          </li>\n        </template>\n      </ul>\n    </div>\n    <!-- Navigation control buttons -->\n    <div v-if=\"!isSmallerThanDesktop\" class=\"mt-6 mx-6 flex items-center gap-4\" :aria-label=\"__('Slide controls')\">\n      <OzIconButton\n        :color-scheme=\"OzIconButtonColorScheme.SecondaryClear\"\n        :icon-name=\"isAutoplaying ? 'pause_outline' : 'play_outline'\"\n        :icon-size=\"24\"\n        :label=\"isAutoplaying ? __('Pause autoplay') : __('Resume autoplay')\"\n        :dark-mode=\"isDarkMode\"\n        @click=\"toggleAutoplayFromUserInput\"\n      />\n      <ul class=\"flex items-center flex-1 gap-1\" :aria-label=\"__('Navigate to specific slides in the carousel')\">\n        <template v-for=\"(_, index) in carouselItems\">\n          <li :key=\"index\" class=\"w-full list-none\">\n            <OzBaseButton\n              :class=\"[\n                'group w-full h-1.5 relative overflow-hidden',\n                // Border radius\n                index === 0 && 'rounded-s-[50px] rounded-e-sm',\n                index === carouselItems.length - 1 && 'rounded-s-sm rounded-e-[50px]',\n                index !== 0 && index !== carouselItems.length - 1 && 'rounded-xs',\n                // Focus\n                'focus-visible:ring-2.5 focus-visible:ring-offset-[1.5px]',\n                !isDarkMode && [\n                  // Focus\n                  'focus-visible:ring-grape-500',\n                  ringOffsetColorClasses || 'focus-visible:ring-offset-light-ui-100',\n                  // Background color\n                  index < currentSlideIndex && 'bg-grape-500',\n                  index === currentSlideIndex && isAutoplaying && 'bg-button-light',\n                  index === currentSlideIndex && !isAutoplaying && 'bg-grape-500',\n                  index > currentSlideIndex && [\n                    // Base\n                    'bg-button-light',\n                    // Hover\n                    'hhover:bg-button-hover-light',\n                    // Focus\n                    'focus-visible:bg-button-hover-light',\n                    // Active\n                    'hactive:bg-grape-500',\n                  ],\n                ],\n                isDarkMode && [\n                  // Focus\n                  'focus-visible:ring-canary-500',\n                  ringOffsetColorClasses || 'focus-visible:ring-offset-dark-ui-100',\n                  // Background color\n                  index < currentSlideIndex && 'bg-canary-500',\n                  index === currentSlideIndex && isAutoplaying && 'bg-button-dark',\n                  index === currentSlideIndex && !isAutoplaying && 'bg-canary-500',\n                  index > currentSlideIndex && [\n                    // Base\n                    'bg-button-dark',\n                    // Hover\n                    'hhover:bg-button-hover-dark',\n                    // Focus\n                    'focus-visible:bg-button-hover-dark',\n                    // Active\n                    'hactive:bg-canary-500',\n                  ],\n                ],\n              ]\"\n              :aria-label=\"\n                __('Navigate to slide %{slideNumber} of %{totalSlidesCount}', {\n                  slideNumber: index + 1,\n                  totalSlidesCount: carouselItems.length,\n                })\n              \"\n              @click=\"handleButtonClick(index)\"\n            >\n              <div\n                v-if=\"isAutoplaying && index === currentSlideIndex\"\n                :class=\"[\n                  'absolute top-0 z-50 w-full h-1.5 animate-progress-indicator',\n                  !isDarkMode ? 'bg-grape-500' : 'bg-canary-500',\n                  dir() === 'ltr' ? 'origin-left' : 'origin-right',\n                ]\"\n              />\n            </OzBaseButton>\n          </li>\n        </template>\n      </ul>\n      <div role=\"group\" class=\"flex items-center\">\n        <OzIconButton\n          :color-scheme=\"OzIconButtonColorScheme.SecondaryClear\"\n          :icon-name=\"'chevron_left_center'\"\n          :icon-size=\"24\"\n          :label=\"__('Previous slide')\"\n          :dark-mode=\"isDarkMode\"\n          @click=\"transitToPreviousSlide\"\n        />\n        <OzIconButton\n          :color-scheme=\"OzIconButtonColorScheme.SecondaryClear\"\n          :icon-name=\"'chevron_right_center'\"\n          :icon-size=\"24\"\n          :label=\"__('Next slide')\"\n          :dark-mode=\"isDarkMode\"\n          @click=\"transitToNextSlide\"\n        />\n      </div>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n@keyframes progress-indicator {\n  0% {\n    width: 0%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n\n.animate-progress-indicator {\n  animation: progress-indicator 5s linear;\n}\n</style>\n"],"names":["windowWidth","isSmallerThanDesktop","isSmallerThanTabletLandscape","isSmallerThanTabletPortrait","storeToRefs","useWindowSizeStore","carouselImageContainerRef","ref","carouselButtonContainerMobileRef","carouselButtonMobileRefs","carouselImageWidth","carouselScrollFromButtonSelect","isTimedScroll","isActiveImageInFullView","carouselPaddingX","computed","value","carouselGapBetweenSlides","onTransitionToAnotherSlide","currentSlideIndex","startAutoplay","startAutoplayIfUnpaused","pauseAutoplay","toggleAutoplay","isAutoplaying","transitToNextSlide","transitToPreviousSlide","useCarousel","slides","props","carouselItems","onTransitionToPreviousSlide","onTransitionToNextSlide","isAutoplayTriggeredManually","toggleAutoplayFromUserInput","pauseAutoplayIfAutoplayButtonIsNotClicked","resumeAutoplayIfAutoplayButtonIsNotClicked","updateCarouselImageWidth","carouselWidth","clientWidth","availableSpaceForSlides","handleButtonClick","index","handleUserManualScroll","currentImageIndex","handleScrollEnd","imageScrollHandler","e","target","Math","round","abs","scrollLeft","percentageOfRightImageInView","leftThreshold","rightThreshold","scrollActiveImageIntoView","activeImageScrollLeft","dir","scroll","left","behavior","scrollActiveButtonIntoView","buttonContainerWidth","targetButtonWidth","targetPositionDistanceFromLeft","targetButtonOffsetLeft","offsetLeft","parentOffsetLeft","buttonScrollPosition","onMounted","nextTick","setTimeout","addEventListener","autoplay","onUnmounted","removeEventListener","watch","immediate"],"mappings":"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"}