{"version":3,"file":"i417h1l2.js","sources":["../../../../../common/components/AwStandardPartials/AwLargeBannerCarousel.vue"],"sourcesContent":["<template>\n  <div :class=\"[$style.mainContainer, {[$style.mainContainerFixedHeight]: hasFillBackground}]\">\n    <div :class=\"$style.carouselWrapper\">\n      <div :class=\"[$style.controlWrapper, $style.left]\">\n        <client-only>\n          <lv-button\n            :aria-pressed=\"isRunning.toString()\"\n            :aria-label=\"$awt('aw.common.aw_carousel_image.toggle')\"\n            :class=\"['awSrOnlyUntilSelected', $style.toggleButton]\"\n            :styling=\"screenRange['tablet-min'] ? 'primary-light-just-icon' : 'small-primary-light-just-icon'\"\n            @click=\"toggleRunningState\"\n          >\n            <lv-icon :name=\"isRunning ? 'pause-24' : 'play-24'\" :size=\"screenRange['tablet-min'] ? 24 : 16\" />\n          </lv-button>\n          <lv-button :aria-label=\"$awt('aw.common.aw_carousel_image.prev')\" :styling=\"screenRange['tablet-min'] ? 'primary-light-just-icon' : 'small-primary-light-just-icon'\" @click=\"$refs.largeBannerCarousel.prev()\">\n            <lv-icon :name=\"screenRange['tablet-min'] ? 'arrow-left-24' : 'arrow-left-16'\" :size=\"screenRange['tablet-min'] ? 24 : 10\" />\n          </lv-button>\n        </client-only>\n      </div>\n      <div :class=\"$style.carouselItemsWrapper\">\n        <b-carousel\n          :id=\"carouselId\"\n          ref=\"largeBannerCarousel\"\n          v-model=\"activeIndex\"\n          v-bind=\"configOptions\"\n          :interval=\"isRunning ? configOptions.interval : 0\"\n          :class=\"{'carousel-vertical': false, 'large-banner-carousel': true }\"\n        >\n          <b-carousel-slide v-for=\"(component, idx) in content.components\" :key=\"`carousel-slide-${idx}`\" background=\"transparent\">\n            <template #img>\n              <component\n                :is=\"getComponent(component.type)\"\n                :key=\"gridElementKey(component)\"\n                :content-id=\"component.contentId\"\n                :content=\"{ ...component, isLargeBannerCarousel: true}\"\n                :class=\"[$style.carouselItem, {[$style.carouselItemBackgroundRepeateFill]: component.backgroundRepeat === 'fill'}]\"\n                :analytics-measurable=\"analyticsMeasurable\"\n                :is-analytics-run-by-standard=\"false\"\n                :analytics-banner-interaction=\"analyticsBannerInteractionForBanner[idx]\"\n              />\n            </template>\n          </b-carousel-slide>\n        </b-carousel>\n      </div>\n      <div :class=\"[$style.controlWrapper, $style.right]\">\n        <client-only>\n          <lv-button :aria-label=\"$awt('aw.common.aw_carousel_image.next')\" :styling=\"screenRange['tablet-min'] ? 'primary-light-just-icon' : 'small-primary-light-just-icon'\" @click=\"$refs.largeBannerCarousel.next()\">\n            <lv-icon :name=\"screenRange['tablet-min'] ? 'arrow-right-24' : 'arrow-right-16'\" :size=\"screenRange['tablet-min'] ? 24 : 10\" />\n          </lv-button>\n        </client-only>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n  import { useNuxtApp } from 'nuxt/app';\n  import ContentPageTypeConfig from '~~/common/config/ContentPageTypeConfig';\n  import { AnalyticsBannerInteraction } from '~~/common/utils/AnalyticsBannerInteraction';\n  import { usePlayPauseStore, PPS_PLAY, PPS_PAUSE } from '~~/common/stores/playPause';\n  import { useUserInterfaceStore } from '~~/common/stores/userInterface';\n  import { useDeliveryStore } from '~~/shop/stores/delivery';\n  import analyticsBannerInteractionMixin, { createThrottledSendBannerViewInteraction } from '~~/common/mixins/analyticsBannerInteractionMixin.js';\n  import { LvIcon, LvButton } from '~~/common/components/loginet-vue-shop/index.mjs';\n\n  const { $logger } = useNuxtApp();\n\n  const props = defineProps({\n    ...analyticsBannerInteractionMixin.props,\n    content: {\n      type: Object,\n      required: true,\n    },\n  });\n  const activeIndex = ref(0);\n  const configOptions = {\n    interval: 6000,\n  };\n  const hasFillBackground = computed(() => {\n    return props.content.components.some(component => component.backgroundRepeat === 'fill');\n  });\n  const carouselId = computed(() => {\n    return `${props.content.layoutTemplate}_${props.content.id}`;\n  });\n  const screenRange = computed(() => {\n    return useUserInterfaceStore().mediaQueries;\n  });\n  const isRunning = computed(() => {\n    return usePlayPauseStore().playPauseState[carouselId.value] !== PPS_PAUSE;\n  });\n  const gridElementKey = computed(() => {\n    return component => `grid-${component?.contentId ?? ''}-${useDeliveryStore().setup?.id}`;\n  });\n  const analyticsBannerInteractionForBanner = computed(() => {\n    return props.content.components.map((e, idx) => {\n      return AnalyticsBannerInteraction.create({\n        ...props.analyticsBannerInteraction,\n        promotionBannerIndex: idx + 1,\n      });\n    });\n  });\n  onMounted(() => {\n    const throttledSendBannerViewInteraction = createThrottledSendBannerViewInteraction();\n    watch(\n      activeIndex,\n      (newVal) => {\n        throttledSendBannerViewInteraction({\n          analyticsMeasurable: props.analyticsMeasurable,\n          analyticsBannerInteraction: analyticsBannerInteractionForBanner.value[newVal],\n        });\n      },\n      {\n        immediate: true,\n      },\n    );\n  });\n  function toggleRunningState () {\n    usePlayPauseStore().setPlayPauseState({\n      uuid: carouselId.value,\n      value: isRunning.value ? PPS_PAUSE : PPS_PLAY,\n    });\n  }\n  function getComponent (type) {\n    return ContentPageTypeConfig[type]?.component || $logger.error(`${type} is not a valid ContentPageTypeConfig type.`);\n  }\n</script>\n\n<style module lang=\"scss\" rel=\"stylesheet/scss\">\n.mainContainer {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  &FixedHeight {\n    min-height: 376px;\n\n    @include tablet(min) {\n      min-height: 396px;\n    }\n  }\n\n  .toggleButton {\n    position: absolute;\n    transform: translateY(calc(-100% - 10px));\n  }\n\n  .carouselWrapper {\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    width: 100%;\n\n    .controlWrapper {\n      position: absolute;\n      z-index: 2;\n      display: flex;\n      width: 48px;\n\n      @include tablet(min) {\n        width: 76px;\n      }\n\n      &.left,\n      &.right {\n        align-self: center;\n      }\n\n      &.left {\n        left: 0;\n        justify-content: flex-end;\n      }\n\n      &.right {\n        right: 0;\n        justify-content: flex-start;\n      }\n    }\n\n    .carouselItemsWrapper {\n      position: relative;\n      width: 100%;\n    }\n\n    .carouselItem {\n      border-radius: 32px;\n\n      &BackgroundRepeateFill {\n        overflow: hidden;\n        height: 376px;\n\n        [data-background-image] {\n          height: 376px;\n        }\n\n        @include tablet(min) {\n          height: 396px;\n\n          [data-background-image] {\n            height: 396px;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["$logger","useNuxtApp","props","__props","activeIndex","ref","configOptions","hasFillBackground","computed","component","carouselId","screenRange","useUserInterfaceStore","isRunning","usePlayPauseStore","PPS_PAUSE","gridElementKey","_a","useDeliveryStore","analyticsBannerInteractionForBanner","idx","AnalyticsBannerInteraction","onMounted","throttledSendBannerViewInteraction","createThrottledSendBannerViewInteraction","watch","newVal","toggleRunningState","PPS_PLAY","getComponent","type","ContentPageTypeConfig"],"mappings":"+1BAiEE,KAAM,CAAE,QAAAA,CAAS,EAAGC,EAAY,EAE1BC,EAAQC,EAORC,EAAcC,EAAI,CAAC,EACnBC,EAAgB,CACpB,SAAU,GACX,EACKC,EAAoBC,EAAS,IAC1BN,EAAM,QAAQ,WAAW,KAAKO,GAAaA,EAAU,mBAAqB,MAAM,CACxF,EACKC,EAAaF,EAAS,IACnB,GAAGN,EAAM,QAAQ,cAAc,IAAIA,EAAM,QAAQ,EAAE,EAC3D,EACKS,EAAcH,EAAS,IACpBI,EAAuB,EAAC,YAChC,EACKC,EAAYL,EAAS,IAClBM,EAAiB,EAAG,eAAeJ,EAAW,KAAK,IAAMK,CACjE,EACKC,EAAiBR,EAAS,IACvBC,GAAa,OAAA,eAAQA,GAAA,YAAAA,EAAW,YAAa,EAAE,KAAIQ,EAAAC,EAAgB,EAAG,QAAnB,YAAAD,EAA0B,EAAE,GACvF,EACKE,EAAsCX,EAAS,IAC5CN,EAAM,QAAQ,WAAW,IAAI,CAAC,EAAGkB,IAC/BC,EAA2B,OAAO,CACvC,GAAGnB,EAAM,2BACT,qBAAsBkB,EAAM,CACpC,CAAO,CACF,CACF,EACDE,EAAU,IAAM,CACd,MAAMC,EAAqCC,EAA0C,EACrFC,EACErB,EACCsB,GAAW,CACVH,EAAmC,CACjC,oBAAqBrB,EAAM,oBAC3B,2BAA4BiB,EAAoC,MAAMO,CAAM,CACtF,CAAS,CACF,EACD,CACE,UAAW,EACZ,CACF,CACL,CAAG,EACD,SAASC,GAAsB,CAC7Bb,EAAiB,EAAG,kBAAkB,CACpC,KAAMJ,EAAW,MACjB,MAAOG,EAAU,MAAQE,EAAYa,CAC3C,CAAK,CACL,CACE,SAASC,EAAcC,EAAM,OAC3B,QAAOC,EAAAA,EAAsBD,CAAI,IAA1BC,YAAAA,EAA6B,YAAa/B,EAAQ,MAAM,GAAG8B,CAAI,6CAA6C,CACvH"}