{"version":3,"file":"cdd94a41.js","sources":["../../../node_modules/swiper/modules/scrollbar/scrollbar.js","../../../node_modules/swiper/modules/a11y/a11y.js","../../../src/components/base/rec-swiper/RecSwiper.client.tsx"],"sourcesContent":["import { getDocument } from 'ssr-window';\nimport $ from '../../shared/dom.js';\nimport { nextTick } from '../../shared/utils.js';\nimport createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';\nexport default function Scrollbar(_ref) {\n let {\n swiper,\n extendParams,\n on,\n emit\n } = _ref;\n const document = getDocument();\n let isTouched = false;\n let timeout = null;\n let dragTimeout = null;\n let dragStartPos;\n let dragSize;\n let trackSize;\n let divider;\n extendParams({\n scrollbar: {\n el: null,\n dragSize: 'auto',\n hide: false,\n draggable: false,\n snapOnRelease: true,\n lockClass: 'swiper-scrollbar-lock',\n dragClass: 'swiper-scrollbar-drag',\n scrollbarDisabledClass: 'swiper-scrollbar-disabled',\n horizontalClass: `swiper-scrollbar-horizontal`,\n verticalClass: `swiper-scrollbar-vertical`\n }\n });\n swiper.scrollbar = {\n el: null,\n dragEl: null,\n $el: null,\n $dragEl: null\n };\n\n function setTranslate() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n const {\n scrollbar,\n rtlTranslate: rtl,\n progress\n } = swiper;\n const {\n $dragEl,\n $el\n } = scrollbar;\n const params = swiper.params.scrollbar;\n let newSize = dragSize;\n let newPos = (trackSize - dragSize) * progress;\n\n if (rtl) {\n newPos = -newPos;\n\n if (newPos > 0) {\n newSize = dragSize - newPos;\n newPos = 0;\n } else if (-newPos + dragSize > trackSize) {\n newSize = trackSize + newPos;\n }\n } else if (newPos < 0) {\n newSize = dragSize + newPos;\n newPos = 0;\n } else if (newPos + dragSize > trackSize) {\n newSize = trackSize - newPos;\n }\n\n if (swiper.isHorizontal()) {\n $dragEl.transform(`translate3d(${newPos}px, 0, 0)`);\n $dragEl[0].style.width = `${newSize}px`;\n } else {\n $dragEl.transform(`translate3d(0px, ${newPos}px, 0)`);\n $dragEl[0].style.height = `${newSize}px`;\n }\n\n if (params.hide) {\n clearTimeout(timeout);\n $el[0].style.opacity = 1;\n timeout = setTimeout(() => {\n $el[0].style.opacity = 0;\n $el.transition(400);\n }, 1000);\n }\n }\n\n function setTransition(duration) {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n swiper.scrollbar.$dragEl.transition(duration);\n }\n\n function updateSize() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n const {\n scrollbar\n } = swiper;\n const {\n $dragEl,\n $el\n } = scrollbar;\n $dragEl[0].style.width = '';\n $dragEl[0].style.height = '';\n trackSize = swiper.isHorizontal() ? $el[0].offsetWidth : $el[0].offsetHeight;\n divider = swiper.size / (swiper.virtualSize + swiper.params.slidesOffsetBefore - (swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));\n\n if (swiper.params.scrollbar.dragSize === 'auto') {\n dragSize = trackSize * divider;\n } else {\n dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);\n }\n\n if (swiper.isHorizontal()) {\n $dragEl[0].style.width = `${dragSize}px`;\n } else {\n $dragEl[0].style.height = `${dragSize}px`;\n }\n\n if (divider >= 1) {\n $el[0].style.display = 'none';\n } else {\n $el[0].style.display = '';\n }\n\n if (swiper.params.scrollbar.hide) {\n $el[0].style.opacity = 0;\n }\n\n if (swiper.params.watchOverflow && swiper.enabled) {\n scrollbar.$el[swiper.isLocked ? 'addClass' : 'removeClass'](swiper.params.scrollbar.lockClass);\n }\n }\n\n function getPointerPosition(e) {\n if (swiper.isHorizontal()) {\n return e.type === 'touchstart' || e.type === 'touchmove' ? e.targetTouches[0].clientX : e.clientX;\n }\n\n return e.type === 'touchstart' || e.type === 'touchmove' ? e.targetTouches[0].clientY : e.clientY;\n }\n\n function setDragPosition(e) {\n const {\n scrollbar,\n rtlTranslate: rtl\n } = swiper;\n const {\n $el\n } = scrollbar;\n let positionRatio;\n positionRatio = (getPointerPosition(e) - $el.offset()[swiper.isHorizontal() ? 'left' : 'top'] - (dragStartPos !== null ? dragStartPos : dragSize / 2)) / (trackSize - dragSize);\n positionRatio = Math.max(Math.min(positionRatio, 1), 0);\n\n if (rtl) {\n positionRatio = 1 - positionRatio;\n }\n\n const position = swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;\n swiper.updateProgress(position);\n swiper.setTranslate(position);\n swiper.updateActiveIndex();\n swiper.updateSlidesClasses();\n }\n\n function onDragStart(e) {\n const params = swiper.params.scrollbar;\n const {\n scrollbar,\n $wrapperEl\n } = swiper;\n const {\n $el,\n $dragEl\n } = scrollbar;\n isTouched = true;\n dragStartPos = e.target === $dragEl[0] || e.target === $dragEl ? getPointerPosition(e) - e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] : null;\n e.preventDefault();\n e.stopPropagation();\n $wrapperEl.transition(100);\n $dragEl.transition(100);\n setDragPosition(e);\n clearTimeout(dragTimeout);\n $el.transition(0);\n\n if (params.hide) {\n $el.css('opacity', 1);\n }\n\n if (swiper.params.cssMode) {\n swiper.$wrapperEl.css('scroll-snap-type', 'none');\n }\n\n emit('scrollbarDragStart', e);\n }\n\n function onDragMove(e) {\n const {\n scrollbar,\n $wrapperEl\n } = swiper;\n const {\n $el,\n $dragEl\n } = scrollbar;\n if (!isTouched) return;\n if (e.preventDefault) e.preventDefault();else e.returnValue = false;\n setDragPosition(e);\n $wrapperEl.transition(0);\n $el.transition(0);\n $dragEl.transition(0);\n emit('scrollbarDragMove', e);\n }\n\n function onDragEnd(e) {\n const params = swiper.params.scrollbar;\n const {\n scrollbar,\n $wrapperEl\n } = swiper;\n const {\n $el\n } = scrollbar;\n if (!isTouched) return;\n isTouched = false;\n\n if (swiper.params.cssMode) {\n swiper.$wrapperEl.css('scroll-snap-type', '');\n $wrapperEl.transition('');\n }\n\n if (params.hide) {\n clearTimeout(dragTimeout);\n dragTimeout = nextTick(() => {\n $el.css('opacity', 0);\n $el.transition(400);\n }, 1000);\n }\n\n emit('scrollbarDragEnd', e);\n\n if (params.snapOnRelease) {\n swiper.slideToClosest();\n }\n }\n\n function events(method) {\n const {\n scrollbar,\n touchEventsTouch,\n touchEventsDesktop,\n params,\n support\n } = swiper;\n const $el = scrollbar.$el;\n if (!$el) return;\n const target = $el[0];\n const activeListener = support.passiveListener && params.passiveListeners ? {\n passive: false,\n capture: false\n } : false;\n const passiveListener = support.passiveListener && params.passiveListeners ? {\n passive: true,\n capture: false\n } : false;\n if (!target) return;\n const eventMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';\n\n if (!support.touch) {\n target[eventMethod](touchEventsDesktop.start, onDragStart, activeListener);\n document[eventMethod](touchEventsDesktop.move, onDragMove, activeListener);\n document[eventMethod](touchEventsDesktop.end, onDragEnd, passiveListener);\n } else {\n target[eventMethod](touchEventsTouch.start, onDragStart, activeListener);\n target[eventMethod](touchEventsTouch.move, onDragMove, activeListener);\n target[eventMethod](touchEventsTouch.end, onDragEnd, passiveListener);\n }\n }\n\n function enableDraggable() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n events('on');\n }\n\n function disableDraggable() {\n if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;\n events('off');\n }\n\n function init() {\n const {\n scrollbar,\n $el: $swiperEl\n } = swiper;\n swiper.params.scrollbar = createElementIfNotDefined(swiper, swiper.originalParams.scrollbar, swiper.params.scrollbar, {\n el: 'swiper-scrollbar'\n });\n const params = swiper.params.scrollbar;\n if (!params.el) return;\n let $el = $(params.el);\n\n if (swiper.params.uniqueNavElements && typeof params.el === 'string' && $el.length > 1 && $swiperEl.find(params.el).length === 1) {\n $el = $swiperEl.find(params.el);\n }\n\n $el.addClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);\n let $dragEl = $el.find(`.${swiper.params.scrollbar.dragClass}`);\n\n if ($dragEl.length === 0) {\n $dragEl = $(`
`);\n $el.append($dragEl);\n }\n\n Object.assign(scrollbar, {\n $el,\n el: $el[0],\n $dragEl,\n dragEl: $dragEl[0]\n });\n\n if (params.draggable) {\n enableDraggable();\n }\n\n if ($el) {\n $el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.scrollbar.lockClass);\n }\n }\n\n function destroy() {\n const params = swiper.params.scrollbar;\n const $el = swiper.scrollbar.$el;\n\n if ($el) {\n $el.removeClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);\n }\n\n disableDraggable();\n }\n\n on('init', () => {\n if (swiper.params.scrollbar.enabled === false) {\n // eslint-disable-next-line\n disable();\n } else {\n init();\n updateSize();\n setTranslate();\n }\n });\n on('update resize observerUpdate lock unlock', () => {\n updateSize();\n });\n on('setTranslate', () => {\n setTranslate();\n });\n on('setTransition', (_s, duration) => {\n setTransition(duration);\n });\n on('enable disable', () => {\n const {\n $el\n } = swiper.scrollbar;\n\n if ($el) {\n $el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.scrollbar.lockClass);\n }\n });\n on('destroy', () => {\n destroy();\n });\n\n const enable = () => {\n swiper.$el.removeClass(swiper.params.scrollbar.scrollbarDisabledClass);\n\n if (swiper.scrollbar.$el) {\n swiper.scrollbar.$el.removeClass(swiper.params.scrollbar.scrollbarDisabledClass);\n }\n\n init();\n updateSize();\n setTranslate();\n };\n\n const disable = () => {\n swiper.$el.addClass(swiper.params.scrollbar.scrollbarDisabledClass);\n\n if (swiper.scrollbar.$el) {\n swiper.scrollbar.$el.addClass(swiper.params.scrollbar.scrollbarDisabledClass);\n }\n\n destroy();\n };\n\n Object.assign(swiper.scrollbar, {\n enable,\n disable,\n updateSize,\n setTranslate,\n init,\n destroy\n });\n}","import classesToSelector from '../../shared/classes-to-selector.js';\nimport $ from '../../shared/dom.js';\nexport default function A11y(_ref) {\n let {\n swiper,\n extendParams,\n on\n } = _ref;\n extendParams({\n a11y: {\n enabled: true,\n notificationClass: 'swiper-notification',\n prevSlideMessage: 'Previous slide',\n nextSlideMessage: 'Next slide',\n firstSlideMessage: 'This is the first slide',\n lastSlideMessage: 'This is the last slide',\n paginationBulletMessage: 'Go to slide {{index}}',\n slideLabelMessage: '{{index}} / {{slidesLength}}',\n containerMessage: null,\n containerRoleDescriptionMessage: null,\n itemRoleDescriptionMessage: null,\n slideRole: 'group',\n id: null\n }\n });\n let liveRegion = null;\n\n function notify(message) {\n const notification = liveRegion;\n if (notification.length === 0) return;\n notification.html('');\n notification.html(message);\n }\n\n function getRandomNumber(size) {\n if (size === void 0) {\n size = 16;\n }\n\n const randomChar = () => Math.round(16 * Math.random()).toString(16);\n\n return 'x'.repeat(size).replace(/x/g, randomChar);\n }\n\n function makeElFocusable($el) {\n $el.attr('tabIndex', '0');\n }\n\n function makeElNotFocusable($el) {\n $el.attr('tabIndex', '-1');\n }\n\n function addElRole($el, role) {\n $el.attr('role', role);\n }\n\n function addElRoleDescription($el, description) {\n $el.attr('aria-roledescription', description);\n }\n\n function addElControls($el, controls) {\n $el.attr('aria-controls', controls);\n }\n\n function addElLabel($el, label) {\n $el.attr('aria-label', label);\n }\n\n function addElId($el, id) {\n $el.attr('id', id);\n }\n\n function addElLive($el, live) {\n $el.attr('aria-live', live);\n }\n\n function disableEl($el) {\n $el.attr('aria-disabled', true);\n }\n\n function enableEl($el) {\n $el.attr('aria-disabled', false);\n }\n\n function onEnterOrSpaceKey(e) {\n if (e.keyCode !== 13 && e.keyCode !== 32) return;\n const params = swiper.params.a11y;\n const $targetEl = $(e.target);\n\n if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) {\n if (!(swiper.isEnd && !swiper.params.loop)) {\n swiper.slideNext();\n }\n\n if (swiper.isEnd) {\n notify(params.lastSlideMessage);\n } else {\n notify(params.nextSlideMessage);\n }\n }\n\n if (swiper.navigation && swiper.navigation.$prevEl && $targetEl.is(swiper.navigation.$prevEl)) {\n if (!(swiper.isBeginning && !swiper.params.loop)) {\n swiper.slidePrev();\n }\n\n if (swiper.isBeginning) {\n notify(params.firstSlideMessage);\n } else {\n notify(params.prevSlideMessage);\n }\n }\n\n if (swiper.pagination && $targetEl.is(classesToSelector(swiper.params.pagination.bulletClass))) {\n $targetEl[0].click();\n }\n }\n\n function updateNavigation() {\n if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;\n const {\n $nextEl,\n $prevEl\n } = swiper.navigation;\n\n if ($prevEl && $prevEl.length > 0) {\n if (swiper.isBeginning) {\n disableEl($prevEl);\n makeElNotFocusable($prevEl);\n } else {\n enableEl($prevEl);\n makeElFocusable($prevEl);\n }\n }\n\n if ($nextEl && $nextEl.length > 0) {\n if (swiper.isEnd) {\n disableEl($nextEl);\n makeElNotFocusable($nextEl);\n } else {\n enableEl($nextEl);\n makeElFocusable($nextEl);\n }\n }\n }\n\n function hasPagination() {\n return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;\n }\n\n function hasClickablePagination() {\n return hasPagination() && swiper.params.pagination.clickable;\n }\n\n function updatePagination() {\n const params = swiper.params.a11y;\n if (!hasPagination()) return;\n swiper.pagination.bullets.each(bulletEl => {\n const $bulletEl = $(bulletEl);\n\n if (swiper.params.pagination.clickable) {\n makeElFocusable($bulletEl);\n\n if (!swiper.params.pagination.renderBullet) {\n addElRole($bulletEl, 'button');\n addElLabel($bulletEl, params.paginationBulletMessage.replace(/\\{\\{index\\}\\}/, $bulletEl.index() + 1));\n }\n }\n\n if ($bulletEl.is(`.${swiper.params.pagination.bulletActiveClass}`)) {\n $bulletEl.attr('aria-current', 'true');\n } else {\n $bulletEl.removeAttr('aria-current');\n }\n });\n }\n\n const initNavEl = ($el, wrapperId, message) => {\n makeElFocusable($el);\n\n if ($el[0].tagName !== 'BUTTON') {\n addElRole($el, 'button');\n $el.on('keydown', onEnterOrSpaceKey);\n }\n\n addElLabel($el, message);\n addElControls($el, wrapperId);\n };\n\n const handleFocus = e => {\n const slideEl = e.target.closest(`.${swiper.params.slideClass}`);\n if (!slideEl || !swiper.slides.includes(slideEl)) return;\n const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;\n const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);\n if (isActive || isVisible) return;\n\n if (swiper.isHorizontal()) {\n swiper.el.scrollLeft = 0;\n } else {\n swiper.el.scrollTop = 0;\n }\n\n swiper.slideTo(swiper.slides.indexOf(slideEl), 0);\n };\n\n const initSlides = () => {\n const params = swiper.params.a11y;\n\n if (params.itemRoleDescriptionMessage) {\n addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage);\n }\n\n if (params.slideRole) {\n addElRole($(swiper.slides), params.slideRole);\n }\n\n const slidesLength = swiper.params.loop ? swiper.slides.filter(el => !el.classList.contains(swiper.params.slideDuplicateClass)).length : swiper.slides.length;\n\n if (params.slideLabelMessage) {\n swiper.slides.each((slideEl, index) => {\n const $slideEl = $(slideEl);\n const slideIndex = swiper.params.loop ? parseInt($slideEl.attr('data-swiper-slide-index'), 10) : index;\n const ariaLabelMessage = params.slideLabelMessage.replace(/\\{\\{index\\}\\}/, slideIndex + 1).replace(/\\{\\{slidesLength\\}\\}/, slidesLength);\n addElLabel($slideEl, ariaLabelMessage);\n });\n }\n };\n\n const init = () => {\n const params = swiper.params.a11y;\n swiper.$el.append(liveRegion); // Container\n\n const $containerEl = swiper.$el;\n\n if (params.containerRoleDescriptionMessage) {\n addElRoleDescription($containerEl, params.containerRoleDescriptionMessage);\n }\n\n if (params.containerMessage) {\n addElLabel($containerEl, params.containerMessage);\n } // Wrapper\n\n\n const $wrapperEl = swiper.$wrapperEl;\n const wrapperId = params.id || $wrapperEl.attr('id') || `swiper-wrapper-${getRandomNumber(16)}`;\n const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';\n addElId($wrapperEl, wrapperId);\n addElLive($wrapperEl, live); // Slide\n\n initSlides(); // Navigation\n\n let $nextEl;\n let $prevEl;\n\n if (swiper.navigation && swiper.navigation.$nextEl) {\n $nextEl = swiper.navigation.$nextEl;\n }\n\n if (swiper.navigation && swiper.navigation.$prevEl) {\n $prevEl = swiper.navigation.$prevEl;\n }\n\n if ($nextEl && $nextEl.length) {\n initNavEl($nextEl, wrapperId, params.nextSlideMessage);\n }\n\n if ($prevEl && $prevEl.length) {\n initNavEl($prevEl, wrapperId, params.prevSlideMessage);\n } // Pagination\n\n\n if (hasClickablePagination()) {\n swiper.pagination.$el.on('keydown', classesToSelector(swiper.params.pagination.bulletClass), onEnterOrSpaceKey);\n } // Tab focus\n\n\n swiper.$el.on('focus', handleFocus, true);\n };\n\n function destroy() {\n if (liveRegion && liveRegion.length > 0) liveRegion.remove();\n let $nextEl;\n let $prevEl;\n\n if (swiper.navigation && swiper.navigation.$nextEl) {\n $nextEl = swiper.navigation.$nextEl;\n }\n\n if (swiper.navigation && swiper.navigation.$prevEl) {\n $prevEl = swiper.navigation.$prevEl;\n }\n\n if ($nextEl) {\n $nextEl.off('keydown', onEnterOrSpaceKey);\n }\n\n if ($prevEl) {\n $prevEl.off('keydown', onEnterOrSpaceKey);\n } // Pagination\n\n\n if (hasClickablePagination()) {\n swiper.pagination.$el.off('keydown', classesToSelector(swiper.params.pagination.bulletClass), onEnterOrSpaceKey);\n } // Tab focus\n\n\n swiper.$el.off('focus', handleFocus, true);\n }\n\n on('beforeInit', () => {\n liveRegion = $(``);\n });\n on('afterInit', () => {\n if (!swiper.params.a11y.enabled) return;\n init();\n });\n on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {\n if (!swiper.params.a11y.enabled) return;\n initSlides();\n });\n on('fromEdge toEdge afterInit lock unlock', () => {\n if (!swiper.params.a11y.enabled) return;\n updateNavigation();\n });\n on('paginationUpdate', () => {\n if (!swiper.params.a11y.enabled) return;\n updatePagination();\n });\n on('destroy', () => {\n if (!swiper.params.a11y.enabled) return;\n destroy();\n });\n}","import {useEffect, useState, Suspense} from 'react';\nimport {Swiper, SwiperSlide} from 'swiper/react';\nimport {Navigation, Pagination, Scrollbar, A11y} from 'swiper';\nimport {\n reportDySlotClick,\n reportDyVariationEvent,\n getCurrencyCode,\n fetchIntlRecsPrices,\n getProductIdsFromRecs,\n // getFixedCurrencies,\n // getCurrencyMappings,\n} from '../../../util/dy-utils.js';\nimport {Image, useNavigate, useLocalization} from '@shopify/hydrogen';\nimport clsx from 'clsx';\nimport './RecSwiper.scss';\n\nexport default function RecSwiper({\n recs, // rec slots from DY\n custom, // custom options from DY\n tabs, // used for tabbed recs (true/false)\n modules, // pagiantion, scrollbar, arrows (object)\n params, // custom swiper js parameters (object of objects)\n intlTabbedPrices, // only passed in from tabbed recs\n}: {\n recs: any;\n custom: any;\n tabs: boolean;\n modules: any;\n params: any;\n intlTabbedPrices: Array<[]>;\n}): JSX.Element {\n const {country} = useLocalization();\n const cc = getCurrencyCode();\n const [intlPrices, setIntlPrices] = useState