{"version":3,"file":"Carousel.6487cdf3.js","sources":["../../src/components/icons/Arrow.vue","../../src/components/icons/Arrow.vue?vue&type=template&id=c6ede632&lang.js","../../src/components/icons/ReturnArrow.vue","../../src/components/icons/ReturnArrow.vue?vue&type=template&id=3d00181d&lang.js","../../src/components/styled/CarouselNavigation.vue","../../src/components/styled/CarouselNavigation.vue?vue&type=template&id=091bf168&lang.js","../../src/components/CarouselNavigation.vue","../../src/components/CarouselNavigation.vue?vue&type=template&id=5310adba&lang.js","../../src/components/Carousel.tsx"],"sourcesContent":["<template>\n  <svg :width=\"width\" :height=\"height\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M5.423 6.51L0 11.93l.725.744L6.91 6.51.725.325 0 1.067 5.423 6.51z\"\n      :fill=\"color\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"Arrow\",\n  components: {},\n  props: {\n    color: {\n      type: String,\n      required: true\n    },\n    width: {\n      type: String,\n      required: true\n    },\n    height: {\n      type: String,\n      required: true\n    }\n  }\n});\n</script>\n","<template>\n  <svg :width=\"width\" :height=\"height\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M5.423 6.51L0 11.93l.725.744L6.91 6.51.725.325 0 1.067 5.423 6.51z\"\n      :fill=\"color\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"Arrow\",\n  components: {},\n  props: {\n    color: {\n      type: String,\n      required: true\n    },\n    width: {\n      type: String,\n      required: true\n    },\n    height: {\n      type: String,\n      required: true\n    }\n  }\n});\n</script>\n","<template>\n  <svg :width=\"width\" :height=\"height\">\n    <path\n      d=\"M3.776 4.693l-.662.757L0 2.725 3.114 0l.662.757-1.675 1.465h3.625c2.676 0 4.86 2.224 4.86 4.918a4.86 4.86 0 01-4.754 4.859L5.726 12H.158v-1.006h5.568A3.855 3.855 0 009.581 7.14c0-2.11-1.685-3.858-3.757-3.911l-.098-.001H2.101l1.675 1.465z\"\n      :fill=\"color\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"ReturnArrow\",\n  components: {},\n  props: {\n    color: {\n      type: String,\n      required: true\n    },\n    width: {\n      type: String,\n      required: true\n    },\n    height: {\n      type: String,\n      required: true\n    }\n  }\n});\n</script>\n","<template>\n  <svg :width=\"width\" :height=\"height\">\n    <path\n      d=\"M3.776 4.693l-.662.757L0 2.725 3.114 0l.662.757-1.675 1.465h3.625c2.676 0 4.86 2.224 4.86 4.918a4.86 4.86 0 01-4.754 4.859L5.726 12H.158v-1.006h5.568A3.855 3.855 0 009.581 7.14c0-2.11-1.685-3.858-3.757-3.911l-.098-.001H2.101l1.675 1.465z\"\n      :fill=\"color\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  name: \"ReturnArrow\",\n  components: {},\n  props: {\n    color: {\n      type: String,\n      required: true\n    },\n    width: {\n      type: String,\n      required: true\n    },\n    height: {\n      type: String,\n      required: true\n    }\n  }\n});\n</script>\n","<template>\n  <div :class=\"classes.carouselNavigationWrapper\">\n    <ReturnArrow v-if=\"this.return\" :color=\"iconColor\" width=\"11\" height=\"12\" />\n    <Arrow v-else :color=\"iconColor\" width=\"7\" height=\"13\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/ad-data-composition/src/theme\";\nimport {\n  ButtonStyle,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport Arrow from \"../icons/Arrow.vue\";\nimport ReturnArrow from \"../icons/ReturnArrow.vue\";\n\nexport default defineComponent({\n  name: \"CarouselNavigation\",\n  components: { Arrow, ReturnArrow },\n  props: {\n    buttonId: {\n      type: String,\n      required: false\n    },\n    direction: {\n      type: String,\n      required: true\n    },\n    return: {\n      type: Boolean\n    }\n  },\n  setup(props) {\n    const { getButtonStyle } = injectBrand();\n    const buttonStyle = computed(() => getButtonStyle(props.buttonId));\n\n    const styleComputed = computed(() => ({\n      buttonStyle: buttonStyle.value,\n      direction: props.direction\n    }));\n\n    const iconColor = computed(() => buttonStyle.value?.iconColor);\n\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    const { classes } = useStyles(styleComputed);\n\n    return {\n      classes,\n      iconColor,\n      testClassName: computed(() => \"text-style-market-name\")\n    };\n  }\n});\n\nconst defaultStyling = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"30px\",\n  borderColor: \"#000\",\n  borderStyle: \"solid\",\n  borderWidth: \"1px\",\n  autoInteractions: true\n};\n\nconst { useStyles } = createUseStyles<\n  \"carouselNavigationWrapper\",\n  {\n    buttonStyle: ButtonStyle;\n    direction: string;\n  }\n>({\n  carouselNavigationWrapper: {\n    backgroundColor: props =>\n      props.buttonStyle.backgroundColor || defaultStyling.backgroundColor,\n    borderColor: props =>\n      props.buttonStyle.borderColor || defaultStyling.borderColor,\n    borderStyle: props =>\n      props.buttonStyle.borderStyle || defaultStyling.borderStyle,\n    borderWidth: props =>\n      props.buttonStyle.borderWidth || defaultStyling.borderWidth,\n    transform: props =>\n      `rotate(${props.direction === \"previous\" ? \"180deg\" : \"0deg\"})`,\n    width: \"30px\",\n    height: \"40px\",\n    textAlign: \"center\",\n    lineHeight: \"7px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    boxSizing: \"border-box\",\n    cursor: \"pointer\",\n    borderBottomLeftRadius: props => {\n      if (props.buttonStyle.borderRadius === 0) {\n        return 0;\n      }\n      return props.buttonStyle.borderRadius || defaultStyling.borderRadius;\n    },\n    borderTopLeftRadius: props => {\n      if (props.buttonStyle.borderRadius == 0) {\n        return 0;\n      }\n      return props.buttonStyle.borderRadius || defaultStyling.borderRadius;\n    },\n    borderBottomRightRadius: \"0px !important\",\n    borderTopRightRadius: \"0px !important\",\n    \"&:hover\": {\n      backgroundColor: props => props.buttonStyle.actions.hover.backgroundColor\n    },\n    \"&:active\": {\n      backgroundColor: props => props.buttonStyle.actions.active.backgroundColor\n    }\n  }\n});\n</script>\n","<template>\n  <div :class=\"classes.carouselNavigationWrapper\">\n    <ReturnArrow v-if=\"this.return\" :color=\"iconColor\" width=\"11\" height=\"12\" />\n    <Arrow v-else :color=\"iconColor\" width=\"7\" height=\"13\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/ad-data-composition/src/theme\";\nimport {\n  ButtonStyle,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport Arrow from \"../icons/Arrow.vue\";\nimport ReturnArrow from \"../icons/ReturnArrow.vue\";\n\nexport default defineComponent({\n  name: \"CarouselNavigation\",\n  components: { Arrow, ReturnArrow },\n  props: {\n    buttonId: {\n      type: String,\n      required: false\n    },\n    direction: {\n      type: String,\n      required: true\n    },\n    return: {\n      type: Boolean\n    }\n  },\n  setup(props) {\n    const { getButtonStyle } = injectBrand();\n    const buttonStyle = computed(() => getButtonStyle(props.buttonId));\n\n    const styleComputed = computed(() => ({\n      buttonStyle: buttonStyle.value,\n      direction: props.direction\n    }));\n\n    const iconColor = computed(() => buttonStyle.value?.iconColor);\n\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    const { classes } = useStyles(styleComputed);\n\n    return {\n      classes,\n      iconColor,\n      testClassName: computed(() => \"text-style-market-name\")\n    };\n  }\n});\n\nconst defaultStyling = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"30px\",\n  borderColor: \"#000\",\n  borderStyle: \"solid\",\n  borderWidth: \"1px\",\n  autoInteractions: true\n};\n\nconst { useStyles } = createUseStyles<\n  \"carouselNavigationWrapper\",\n  {\n    buttonStyle: ButtonStyle;\n    direction: string;\n  }\n>({\n  carouselNavigationWrapper: {\n    backgroundColor: props =>\n      props.buttonStyle.backgroundColor || defaultStyling.backgroundColor,\n    borderColor: props =>\n      props.buttonStyle.borderColor || defaultStyling.borderColor,\n    borderStyle: props =>\n      props.buttonStyle.borderStyle || defaultStyling.borderStyle,\n    borderWidth: props =>\n      props.buttonStyle.borderWidth || defaultStyling.borderWidth,\n    transform: props =>\n      `rotate(${props.direction === \"previous\" ? \"180deg\" : \"0deg\"})`,\n    width: \"30px\",\n    height: \"40px\",\n    textAlign: \"center\",\n    lineHeight: \"7px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    boxSizing: \"border-box\",\n    cursor: \"pointer\",\n    borderBottomLeftRadius: props => {\n      if (props.buttonStyle.borderRadius === 0) {\n        return 0;\n      }\n      return props.buttonStyle.borderRadius || defaultStyling.borderRadius;\n    },\n    borderTopLeftRadius: props => {\n      if (props.buttonStyle.borderRadius == 0) {\n        return 0;\n      }\n      return props.buttonStyle.borderRadius || defaultStyling.borderRadius;\n    },\n    borderBottomRightRadius: \"0px !important\",\n    borderTopRightRadius: \"0px !important\",\n    \"&:hover\": {\n      backgroundColor: props => props.buttonStyle.actions.hover.backgroundColor\n    },\n    \"&:active\": {\n      backgroundColor: props => props.buttonStyle.actions.active.backgroundColor\n    }\n  }\n});\n</script>\n","<template>\n  <StyledCarouselNavigation\n    :direction=\"direction\"\n    :return=\"this.return\"\n    :buttonId=\"buttonId\"\n    ref=\"targetEl\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport StyledCarouselNavigation from \"./styled/CarouselNavigation.vue\";\nimport { composePopoverForm } from \"@fresh8/ad-data-composition/src/popoverForm\";\n\nexport default defineComponent({\n  name: \"CarouselNavigation\",\n  components: {\n    StyledCarouselNavigation\n  },\n  props: {\n    direction: {\n      type: String,\n      required: true\n    },\n    return: {\n      type: Boolean\n    }\n  },\n  setup() {\n    const { adTemplate, brand } = injectBrand();\n    const buttonId = computed(() => adTemplate.value.carouselNavigationButton);\n\n    const { targetEl } = composePopoverForm(\"Navigation Button\", [\n      {\n        type: \"navigationButton\",\n        get: () => brand.value.adTemplate.carouselNavigationButton,\n        set: (value: string) =>\n          (brand.value.adTemplate.carouselNavigationButton = value)\n      }\n    ]);\n\n    return {\n      buttonId,\n      targetEl\n    };\n  }\n});\n</script>\n\n<style></style>\n","<template>\n  <StyledCarouselNavigation\n    :direction=\"direction\"\n    :return=\"this.return\"\n    :buttonId=\"buttonId\"\n    ref=\"targetEl\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport StyledCarouselNavigation from \"./styled/CarouselNavigation.vue\";\nimport { composePopoverForm } from \"@fresh8/ad-data-composition/src/popoverForm\";\n\nexport default defineComponent({\n  name: \"CarouselNavigation\",\n  components: {\n    StyledCarouselNavigation\n  },\n  props: {\n    direction: {\n      type: String,\n      required: true\n    },\n    return: {\n      type: Boolean\n    }\n  },\n  setup() {\n    const { adTemplate, brand } = injectBrand();\n    const buttonId = computed(() => adTemplate.value.carouselNavigationButton);\n\n    const { targetEl } = composePopoverForm(\"Navigation Button\", [\n      {\n        type: \"navigationButton\",\n        get: () => brand.value.adTemplate.carouselNavigationButton,\n        set: (value: string) =>\n          (brand.value.adTemplate.carouselNavigationButton = value)\n      }\n    ]);\n\n    return {\n      buttonId,\n      targetEl\n    };\n  }\n});\n</script>\n\n<style></style>\n","import { computed, defineComponent, ref, watch, watchEffect } from \"vue\";\nimport debounce from \"lodash.debounce\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { AnalyticEvents } from \"@fresh8/types/src/analytics\";\n\nimport { useHandleAnalytics } from \"../lib/analytics\";\nimport CarouselNavigation from \"./CarouselNavigation.vue\";\nimport {\n  useTemplateSize,\n  SMALL_RESPONSIVE,\n  LEADERBOARD,\n  LARGE_LEADERBOARD,\n  LARGE_RESPONSIVE,\n  BILLBOARD,\n  SKYSCRAPER,\n  LARGE_MPU\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\nimport { injectAdSize } from \"../hooks/useAdSize\";\nimport { injectCarouselContext } from \"../lib/provideInjectors\";\n\n// Hack to get around importing vue files into JSX\nconst _CarouselNavigation = CarouselNavigation as any;\n\nconst useStyles = createUseStyles({\n  carousel: {\n    display: \"flex\",\n    flex: \"1\",\n    position: \"relative\",\n    alignSelf: \"flex-start\",\n    width: \"100%\",\n    height: \"100%\"\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flex: \"1 0 100%\",\n    position: \"relative\",\n    boxSizing: 'content-box',\n    \"& .current\": {\n      transform: \"translateX(0%)\"\n    },\n    \"& .previous\": {\n      transform: \"translateX(-100%)\"\n    },\n    \"& .next\": {\n      transform: \"translateX(100%)\"\n    },\n    \"&:first-child\": {\n      marginRight: \"50px\"\n    }\n  },\n  slide: {\n    height: \"100%\",\n    flex: 1,\n    position: \"absolute\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    \"& > *\": {\n      marginRight: props => props.padding + \"px\"\n    },\n    \"&:last-of-type\": {\n      \"& > div\": {\n        marginRight: 0\n      }\n    },\n    \"&.moving\": {\n      transition: \"transform 0.3s ease\"\n    }\n  },\n  navigation: {\n    height: \"100%\",\n    position: \"absolute\",\n    width: \"30px\",\n    flex: \"0 0 30px\",\n    zIndex: 99,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    \"&.small-slider\": {\n      \"& .nav-button\": {\n        transition: \"all 0.1s ease\",\n        position: \"relative\",\n        left: props => props.isMicro ? \"-2px\" : \"-8px\",\n        opacity: 0.5,\n        \"& > svg\": {\n          transition: \"all 0.1s ease\",\n          position: \"relative\",\n          left: props => props.isMicro ? \"-2px\" : \"-8px\"\n        }\n      },\n      \"&:hover\": {\n        \"& .nav-button\": {\n          left: \"0px\",\n          opacity: 1,\n          \"& > svg\": {\n            left: \"-4px\"\n          }\n        }\n      }\n    }\n  },\n  navNext: {\n    justifyContent: \"flex-end\",\n    right: \"-10px\"\n  },\n  navPrev: {\n    marginLeft: \"-5px\",\n    justifyContent: \"flex-start\",\n    left: \"-10px\"\n  }\n});\n\nconst getBreakpoints = size => {\n  switch (size.name) {\n    case SMALL_RESPONSIVE.name:\n      return {\n        adPadding: 6,\n        itemMaxWidth: 380,\n        offSet: 0,\n        previousWidth: 38,\n        teaseWidth: 38\n      };\n    case LEADERBOARD.name:\n      return {\n        adPadding: 4,\n        itemMaxWidth: 428,\n        offSet: 143,\n        previousWidth: 30,\n        teaseWidth: 150\n      };\n    case LARGE_LEADERBOARD.name:\n      return {\n        adPadding: 4,\n        itemMaxWidth: 528,\n        offSet: 143,\n        previousWidth: 30,\n        teaseWidth: 150\n      };\n    case LARGE_RESPONSIVE.name:\n    case BILLBOARD.name:\n      return {\n        adPadding: 8,\n        itemMaxWidth: 360,\n        offSet: 0,\n        previousWidth: 60,\n        teaseWidth: 60\n      };\n    case SKYSCRAPER.name:\n      return {\n        adPadding: 8,\n        itemMaxWidth: 230,\n        offSet: 0,\n        previousWidth: 4,\n        teaseWidth: 4,\n        navigatorWidth: 16\n      };\n    case LARGE_MPU.name:\n      return {\n        adPadding: 8,\n        itemMaxWidth: 370,\n        offSet: 0,\n        previousWidth: 32,\n        teaseWidth: 32\n      }\n    default:\n      return {\n        adPadding: 8,\n        itemMaxWidth: 370,\n        offSet: 0,\n        previousWidth: 42,\n        teaseWidth: 42\n      };\n  }\n};\n\nexport default defineComponent({\n  name: \"Carousel\",\n  components: { CarouselNavigation },\n  setup(props, context) {\n    const $handleAnalytics = useHandleAnalytics();\n    const activeSlide = ref(0);\n    const moving = ref(false);\n    const { size } = useTemplateSize();\n    const adSize = injectAdSize();\n    const carouselContext = injectCarouselContext();\n\n    const slotItems = [];\n    // Take each slot and merge their children together to make up the slides\n    for (const slot of context?.slots?.default?.() || []) {\n      if (slot.children != \"v-if\") {\n        for (const child of slot.children as []) {\n          slotItems.push(child);\n        }\n      }\n    }\n\n    const adWidth = computed(() => {\n      return (size && size.value.width) || adSize.value.width;\n    });\n\n    const breakpointSizings = computed(() => {\n      return getBreakpoints(size.value);\n    });\n\n    const itemsOnView = computed(() => {\n      if (adWidth) {\n        const result = Math.round(\n          (adWidth.value - breakpointSizings.value.offSet - breakpointSizings.value.teaseWidth) /\n            breakpointSizings.value.itemMaxWidth\n        );\n        return slotItems.length > result ? result : slotItems.length;\n      }\n      return 1;\n    });\n\n    watchEffect(() => {\n      carouselContext.value.itemsOnView = itemsOnView.value\n    })\n\n    const displayNavigation = computed(\n      () => slotItems.length > itemsOnView.value\n    );\n\n    const nextSlideTeaseWidth = computed(() => {\n      if (!displayNavigation.value) {\n        return 0;\n      }\n\n      return breakpointSizings.value.teaseWidth;\n    });\n\n    const previousSlideWidth = computed(()=>{\n      if (!displayNavigation.value) {\n        return 0;\n      }\n\n      return breakpointSizings.value.previousWidth;\n    });\n\n    const prevNavigatorWidth = computed(()=>{\n      if (breakpointSizings.value.navigatorWidth) {\n        return `${breakpointSizings.value.navigatorWidth}px`\n      }\n      return activeSlide.value !== lastActiveSlideIndex.value\n                  ? `${previousSlideWidth.value}px`\n                  : \"initial\"\n    });\n\n    const navigatorWidth = computed(() => {\n      if (breakpointSizings.value.navigatorWidth) {\n        return `${breakpointSizings.value.navigatorWidth}px`\n      }\n      return activeSlide.value !== lastActiveSlideIndex.value\n                  ? `${nextSlideTeaseWidth.value}px`\n                  : \"initial\"\n    });\n\n    const itemWidth = computed(() => {\n      return (\n        (adWidth.value -\n          breakpointSizings.value.offSet -\n          (breakpointSizings.value.adPadding * 2) -\n          nextSlideTeaseWidth.value) /\n        itemsOnView.value\n      );\n    });\n\n    const lastActiveSlideIndex = computed(\n      () => slotItems.length - itemsOnView.value\n    );\n\n    const handleInteraction = () => {\n      const statsEvent = AnalyticEvents.INTERACTED;\n      const statsDesc = \"Carousel Navigation\";\n\n      $handleAnalytics(statsEvent, statsDesc);\n    };\n\n    // prevents jarring transitions when clicking rapidly.\n    const stopMoving = debounce(() => (moving.value = false), 500, true);\n\n    const moveBackward = (event: MouseEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n      moving.value = true;\n      if (activeSlide.value > 0) {\n        activeSlide.value--;\n      }\n      stopMoving();\n      handleInteraction();\n    };\n\n    const moveForward = (event: MouseEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n      moving.value = true;\n      if (activeSlide.value === lastActiveSlideIndex.value) {\n        activeSlide.value = 0;\n      } else {\n        activeSlide.value++;\n      }\n      stopMoving();\n      handleInteraction();\n    };\n\n    // Makes sure the current active card persists when changing window size.\n    watch(\n      lastActiveSlideIndex,\n      (value, oldValue) => {\n        if (value !== oldValue && activeSlide.value === oldValue) {\n          activeSlide.value = value;\n        }\n      },\n      {}\n    );\n\n    const getSlideOffset = index => {\n      if (adWidth.value && itemWidth.value) {\n        let calc = (index - activeSlide.value) * itemWidth.value;\n\n        if (activeSlide.value === lastActiveSlideIndex.value && lastActiveSlideIndex.value !== 0) {\n          // Only slides enough to line last card up with the right edge of ad.\n          calc =\n            adWidth.value -\n            breakpointSizings.value.offSet -\n            breakpointSizings.value.adPadding * 2 +\n            // margin between slides\n            -itemWidth.value * (slotItems.length - index);\n        }\n        return `translateX(${calc}px)`;\n      }\n    };\n\n    const reativeStyles = computed(() => ({\n      padding: breakpointSizings.value?.adPadding || 8,\n      isMicro: size.value.name === SKYSCRAPER.name\n    }));\n    const classes = useStyles(reativeStyles);\n\n    return () => (\n      <div class={classes.value.carousel}>\n        {activeSlide.value > 0 && (\n          <div\n            style={{\n              width: prevNavigatorWidth.value\n            }}\n            class={[\n              classes.value.navigation,\n              classes.value.navPrev,\n              (size.value.name === SMALL_RESPONSIVE.name ||\n                size.value.name === LEADERBOARD.name ||\n                size.value.name === LARGE_LEADERBOARD.name ||\n                size.value.name === SKYSCRAPER.name) &&\n                \"small-slider\"\n            ]}\n            onClick={moveBackward}\n          >\n            <_CarouselNavigation direction=\"previous\" class=\"nav-button previous\" />\n          </div>\n        )}\n\n        <div class={classes.value.slidesContainer}>\n          {slotItems.map((item, index) => (\n            <div\n              class={[classes.value.slide, moving.value ? \"moving\" : null, 'slide']}\n              key={index}\n              style={{\n                transform: getSlideOffset(index),\n                width: `${itemWidth.value}px`\n              }}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n\n        {displayNavigation.value && (\n          <div\n            style={{\n              // sets the width to the width of the teased card if no displaying last card.\n              width: navigatorWidth.value\n            }}\n            class={[classes.value.navigation, classes.value.navNext]}\n            onClick={moveForward}\n          >\n            <_CarouselNavigation\n              direction=\"next\"\n              return={activeSlide.value === lastActiveSlideIndex.value}\n              class=\"nav-button next\"\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n});\n"],"names":["defineComponent","name","components","props","color","type","String","required","width","height","_createBlock","_ctx","_createVNode","fill-rule","clip-rule","d","fill","Arrow","ReturnArrow","buttonId","direction","return","Boolean","[object Object]","getButtonStyle","injectBrand","computed","buttonStyle","value","iconColor","classes","useStyles","styleComputed","testClassName","createUseStyles","carouselNavigationWrapper","backgroundColor","defaultStyling","borderColor","borderStyle","borderWidth","transform","textAlign","lineHeight","display","justifyContent","alignItems","boxSizing","cursor","borderBottomLeftRadius","borderRadius","borderTopLeftRadius","borderBottomRightRadius","borderTopRightRadius","&:hover","actions","hover","&:active","active","class","StyledCarouselNavigation","adTemplate","brand","carouselNavigationButton","targetEl","composePopoverForm","get","brand2","set","ref","CarouselNavigation2","carousel","flex","position","alignSelf","slidesContainer","& .current","& .previous","& .next","&:first-child","marginRight","slide","& > *","padding","&:last-of-type","& > div","&.moving","transition","navigation","zIndex","&.small-slider","& .nav-button","left","isMicro","opacity","& > svg","navNext","right","navPrev","marginLeft","CarouselNavigation","useHandleAnalytics","size","useTemplateSize2","injectAdSize","injectCarouselContext","context","slots","default","slot","children","push","child","adSize","SMALL_RESPONSIVE","adPadding","itemMaxWidth","offSet","previousWidth","teaseWidth","LEADERBOARD","LARGE_LEADERBOARD","LARGE_RESPONSIVE","BILLBOARD","SKYSCRAPER","navigatorWidth","LARGE_MPU","getBreakpoints","adWidth","Math","round","breakpointSizings","slotItems","length","result","itemsOnView","displayNavigation","activeSlide","lastActiveSlideIndex","previousSlideWidth","nextSlideTeaseWidth","AnalyticEvents","INTERACTED","statsEvent","debounce","moving","preventDefault","stopPropagation","oldValue","itemWidth","index","calc","reativeStyles","style","prevNavigatorWidth","onClick","moveBackward","_CarouselNavigation","map","key","getSlideOffset","item","moveForward"],"mappings":"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"}