{"version":3,"file":"js/284.chunk.js","mappings":"oLAM+B,IAAAA,eAAc,CAAC,IAEzB,QAAO,SAAY;;;;;;;;GAShB,QAAO,SAAY;;;;;;;;;;;;;;;;ECXpC,MAAMC,GAAuB,IAAAD,eAAc,CAE9CE,sBAAuB,OACvBC,wBAAyB,SCU7B,MAjByB,CAACC,EAAWC,EAAIC,KACrC,MAAM,sBAAEJ,EAAqB,wBAAEC,IDQU,IAAAI,YAAWN,ICPpD,IAAAO,YAAU,MACDJ,GAAaE,IAAgBD,EAAGI,SACjCP,EAAsB,CAClBG,KACAD,YACAE,gBAGD,MACCF,GAAaE,IACbH,EAAwBC,EAAWE,EACvC,IAEL,CAACF,EAAWE,GAAa,E,uCCZhC,MAAMI,EAAe,CAAC,KAAK,EAAAC,GAAI,EAAAC,GAAI,EAAAC,IAkFnC,MAjFsBC,IAClB,IAAIC,EACJ,MAAMV,GAAK,IAAAW,UACLC,GAAQ,IAAAC,UAAQ,KAClB,IAAIH,EAAII,EAAIC,EAAIC,EAAIC,EAAIC,EAAIC,EAAIC,EAAIC,EACpC,GAAmBC,MAAfb,EAAMc,MAAoB,CAC1B,IAAIC,EAA+E,QAAxEV,EAA0B,QAApBJ,EAAKD,EAAMgB,WAAwB,IAAPf,OAAgB,EAASA,EAAGgB,YAAyB,IAAPZ,OAAgB,EAASA,EAAGL,EAAMc,OAI7H,OAHId,EAAMkB,oBACNH,EAAmG,QAA5FR,EAA0B,QAApBD,EAAKN,EAAMgB,WAAwB,IAAPV,OAAgB,EAASA,EAAGN,EAAMkB,0BAAuC,IAAPX,OAAgB,EAASA,EAAGP,EAAMc,QAE1IC,CACX,CACA,GAAIf,EAAMmB,KAAM,CACZ,IAAIC,EAAiB,IAAMpB,EAAMmB,KAAO,IACpCE,EAAiB,IAAMrB,EAAMmB,KAAO,KACpCH,EAA+E,QAAxEP,EAA0B,QAApBD,EAAKR,EAAMgB,WAAwB,IAAPR,OAAgB,EAASA,EAAGS,YAAyB,IAAPR,OAAgB,EAASA,EAAGa,MAAMC,GAAMA,IAAMA,EAAEC,SAASJ,IAAmBG,EAAEC,SAASH,MAKlL,GAJKL,GAAsB,MAAfhB,EAAMmB,OAEdH,EAA+E,QAAxEL,EAA0B,QAApBD,EAAKV,EAAMgB,WAAwB,IAAPN,OAAgB,EAASA,EAAGO,YAAyB,IAAPN,OAAgB,EAASA,EAAGW,MAAMC,GAAMA,IAAMA,EAAEC,SAAS,QAAUD,EAAEC,SAAS,YAErKR,EACA,OAAOA,CAEf,CACA,OAA4B,QAApBJ,EAAKZ,EAAMgB,WAAwB,IAAPJ,OAAgB,EAASA,EAAGK,KAAK,EAAE,GACxE,CAACjB,EAAMgB,IAAKhB,EAAMc,MAAOd,EAAMmB,OAEkC,IAA9DnB,aAAqC,EAASA,EAAMc,SAAiBd,aAAqC,EAASA,EAAMc,SAAWvB,IAAMS,EAAMyB,eAElJ,EAAiBzB,EAAMV,UAAWC,EAAIS,EAAMR,aAEhD,MAAMkC,GAAY,IAAAtB,UAAQ,KAAQ,IAAIH,EAAI,OAAO0B,EAAA,aAAqBxB,EAAO,KAA0B,QAApBF,EAAKD,EAAMgB,WAAwB,IAAPf,OAAgB,EAASA,EAAG2B,IAAI,GAAK,CAACzB,IAC/I0B,GAAoB,EAAAC,EAAA,KACpBC,GAAa,IAAA3B,UAAQ,KACvB,IAAIH,EAAII,EACR,OAAIwB,GAAqBG,OAAOC,MAAMC,GAC3BP,EAAA,aAAqBxB,EAAO,EAAAgC,GAAyB,QAApBlC,EAAKD,EAAMgB,WAAwB,IAAPf,OAAgB,EAASA,EAAG2B,IAAK,KAAM,QAGpGD,EAAA,aAAqBxB,EAAO,EAAAJ,GAAyB,QAApBM,EAAKL,EAAMgB,WAAwB,IAAPX,OAAgB,EAASA,EAAGuB,IAAK,KAAM,OAC/G,GACD,CAACC,EAAmB1B,IACjBiC,GAAc,IAAAhC,UAAQ,KACxB,IAAIiC,EAAO,GAKX,OAJCrC,EAAMsC,OAAS1C,GAAc2C,SAAQ,CAACC,EAAIC,KACvC,IAAIxC,EACJoC,EAAKK,KAAK,GAAGf,EAAA,aAAqBxB,EAAOqC,EAAyB,QAApBvC,EAAKD,EAAMgB,WAAwB,IAAPf,OAAgB,EAASA,EAAG2B,IAAK5B,EAAM2C,eAAeH,EAAGI,SAAS,IAEzIP,EAAKQ,KAAK,KAAK,GACvB,CAAC1C,IACE2C,GAAkB,IAAA1C,UAAQ,KAC5B,IAAIiC,EAAO,GAKX,OAJCrC,EAAMsC,OAAS1C,GAAc2C,SAAQ,CAACC,EAAIC,KACvC,IAAIxC,EACJoC,EAAKK,KAAK,GAAGf,EAAA,aAAqBxB,EAAOqC,EAAyB,QAApBvC,EAAKD,EAAMgB,WAAwB,IAAPf,OAAgB,EAASA,EAAG2B,IAAK5B,EAAM2C,WAAY,WAAWH,EAAGI,SAAS,IAEjJP,EAAKQ,KAAK,KAAK,GACvB,CAAC1C,IACE4C,GAAgB,IAAA3C,UAAQ,IACnBJ,EAAMgD,WAAatB,EAAY,8EACvC,CAACvB,IACE8C,GAAU,IAAA7C,UAAQ,KACpB,IAAIH,EAAII,EACR,MAAMS,EAAkC,QAAzBb,EAAKD,EAAMkD,gBAA6B,IAAPjD,EAAgBA,EAAKD,EAAMc,MAC3E,MAAO,GAAGd,EAAM4B,MAA6B,QAApBvB,EAAKL,EAAMgB,WAAwB,IAAPX,OAAgB,EAASA,EAAGuB,OAAOd,GAAS,EAAI,IAAIA,EAAQ,IAAM,IAAI,GAC5H,CAACX,IACEgD,EAAgB,gBAAoB,UAAW,CAAEC,UAAW,IAAW,CAAEC,UAAWrD,EAAMsD,cAAgBtD,EAAMoD,YAClH,gBAAoB,SAAUG,OAAOC,OAAO,CAAC,GAAKxD,EAAMsD,cAAgB,CAAE,cAAiBR,GAAoB,CAAEW,OAAQzD,EAAMsD,aAAeR,EAAkBC,EAAe5B,KAAM,gBACrL,gBAAoB,SAAUoC,OAAOC,OAAO,CAAC,GAAKxD,EAAMsD,cAAgB,CAAE,cAAiBlB,GAAgB,CAAEqB,OAAQzD,EAAMsD,aAAelB,EAAcW,EAAe5B,KAAM,gBAC7K,gBAAoB,MAAO,CAAEuC,IAAK1D,EAAM0D,KAAOnE,EAAIqC,IAAKqB,EAASU,IAAK3D,EAAMsD,aAAevB,EAAaL,EAAW,aAAc,OAAQ,WAAY1B,EAAMc,OAAS,EAAGsC,UAAW,IAAW,CAAEC,UAAWrD,EAAMsD,cAAgBtD,EAAMoD,WAAY,mBAAoBrB,EAElQ6B,OAAQ,YAAYC,MAAO7D,EAAM6D,MAAO,cAAmFhD,OAAnEb,aAAqC,EAASA,EAAM8D,YAA2B9D,aAAqC,EAASA,EAAM8D,aAAe9D,EAAM4B,QAA+B,QAApB3B,EAAKD,EAAMgB,WAAwB,IAAPf,OAAgB,EAASA,EAAG2B,QAC3R,OAAI5B,EAAM+D,UACCZ,EAENnD,EAAMgB,IAIH,gBAAoB,MAAO,CAAEoC,UAAW,gBAAiB,gBAAiBpD,EAAMgE,SAAU,YAAahE,EAAMmB,MAAQgC,GAHjH,gBAAoB,MAAO,CAAEC,UAAW,gBAAiB,gBAAiBpD,EAAMgE,SAAU,YAAahE,EAAMmB,MACjH,gBAAoB,MAAO,CAAES,IAAK,GAAI+B,IAAK,yHAA0H,WAAY3D,EAAMc,OAAS,EAAGsC,UAAWpD,EAAMoD,UAAWR,MAAO,WAAWgB,OAAQ,YAAYC,MAAO7D,EAAM6D,QAE/I,C","sources":["webpack:///./assets/moncler/src/components/routerTransitions/AnimatedProvider.tsx","webpack:///./assets/moncler/src/components/routerTransitions/AnimatedRoute.tsx","webpack:///./assets/moncler/src/components/routerTransitions/useAnimatedImage.tsx","webpack:///./assets/moncler/src/components/product/ProductImage.tsx"],"sourcesContent":["import { motion, useAnimation } from 'framer-motion';\nimport React, { createContext, useContext, useRef } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { originXYZero, pushTransition } from './transitions';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nexport const AnimatedContext = createContext({});\n// ANCHOR intermediary style\nconst Intermediary = styled(motion.div) `\n position: fixed;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n display: none;\n overflow: hidden;\n`;\nconst IntermediaryImg = styled(motion.img) `\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n max-width: 100vw;\n object-position: 50% 50%;\n transition: all 0.5s ease-out;\n\n &.transitioning {\n object-position: 50% 0%;\n }\n`;\nconst AnimatedProvider = (props) => {\n // State\n const location = useLocation();\n const firstRender = useRef(true);\n const bodyHeight = useRef(null);\n const store = {\n enter: null,\n exit: null,\n };\n const intermediary = { el: useRef(null), animation: useAnimation() };\n const playbackHooks = useRef({\n done: [],\n setup: [],\n animate: [],\n appMounted: [],\n });\n // Methods\n const subscribe = (key, cb) => {\n playbackHooks.current[key].push(cb);\n };\n const unsubscribe = (key, cb) => {\n playbackHooks.current[key] = [...playbackHooks.current[key].filter((entry) => entry !== cb)];\n };\n const setIntermediarySrc = async (exitSrc) => {\n const img = intermediary.el.current.querySelector('img');\n img.src = exitSrc;\n await img.decode();\n };\n const resetIntermediary = async () => {\n const intermediaryAnimation = intermediary.animation;\n intermediaryAnimation.set({\n display: 'none',\n top: 0,\n left: 0,\n width: 0,\n height: 0,\n transition: {\n duration: 0,\n delay: 0,\n },\n });\n setTimeout(() => {\n intermediary.el.current.querySelector('img').src = '';\n intermediary.el.current.querySelector('img').classList.remove('transitioning');\n }, 100);\n };\n const resetStore = () => {\n store.exit = null;\n store.enter = null;\n };\n const skipAnimation = async (params) => {\n var _a;\n const { animate, done } = playbackHooks.current;\n const { enter, exit, transition, viewport } = params;\n const scrollY = (viewport === null || viewport === void 0 ? void 0 : viewport.scrollY) || 0;\n const header = document.getElementsByTagName('header')[0];\n const catalogContainer = document.getElementById('catalog');\n if ((transition === null || transition === void 0 ? void 0 : transition.direction) === 'out') {\n header === null || header === void 0 ? void 0 : header.classList.add('no-transition');\n }\n await Promise.all(animate.map(async (cb) => await cb(params)));\n enter.animation.set(Object.assign({ opacity: 1, pointerEvents: 'all', y: 0, x: 0, scale: 1 }, originXYZero));\n await Promise.all(done.map(async (cb) => await cb(params)));\n if ((_a = enter === null || enter === void 0 ? void 0 : enter.el) === null || _a === void 0 ? void 0 : _a.current) {\n enter.el.current.style.position = 'static';\n }\n catalogContainer.style.removeProperty('overflow');\n catalogContainer.style.removeProperty('height');\n header === null || header === void 0 ? void 0 : header.classList.remove('transitioning');\n document.documentElement.scrollTop = scrollY;\n exit.done();\n enter.done();\n resetStore();\n if (transition.direction === 'out') {\n header === null || header === void 0 ? void 0 : header.classList.remove('header--pdp');\n header === null || header === void 0 ? void 0 : header.classList.remove('no-transition');\n }\n };\n // SECTION - No Transition --------------------------------------------------------------------\n const noTransition = async (params) => {\n const { setup } = playbackHooks.current;\n const { enter, exit, transition } = params;\n const catalogContainer = document.getElementById('catalog');\n if (transition.direction === 'in') {\n bodyHeight.current = `${catalogContainer.offsetHeight}`;\n }\n else {\n catalogContainer.style.height = `${bodyHeight.current}px`;\n }\n const header = document.getElementsByTagName('header')[0];\n if (transition.direction === 'in') {\n header === null || header === void 0 ? void 0 : header.classList.add('header--pdp');\n }\n else {\n header === null || header === void 0 ? void 0 : header.classList.add('no-transition');\n header === null || header === void 0 ? void 0 : header.classList.remove('header--pdp');\n }\n enter.el.current.style.zIndex = '0';\n exit.el.current.style.zIndex = '1';\n exit.el.current.style.position = 'relative';\n enter.el.current.style.position = 'absolute';\n // Setup\n await Promise.all(setup.map(async (cb) => await cb(params)));\n skipAnimation(params);\n };\n // !SECTION End No transition\n // SECTION - Push --------------------------------------------------------------------\n const push = async (params) => {\n var _a, _b;\n const { setup, animate, done } = playbackHooks.current;\n const { enter, exit, transition, viewport } = params;\n const catalogContainer = document.getElementById('catalog');\n // debugger;\n if (transition.direction === 'in') {\n bodyHeight.current = `${catalogContainer.offsetHeight}`;\n }\n else {\n // catalogContainer.style.height = `${bodyHeight.current}px`;\n }\n const header = document.getElementsByTagName('header')[0];\n if (window.innerWidth < window.mqObj['md'] && transition.direction === 'in') {\n header === null || header === void 0 ? void 0 : header.classList.add('header--pdp');\n header === null || header === void 0 ? void 0 : header.classList.add('transitioning');\n }\n else if (window.innerWidth > window.mqObj['md']) {\n header === null || header === void 0 ? void 0 : header.classList.remove('header--pdp');\n }\n const scale = (transition === null || transition === void 0 ? void 0 : transition.direction) === 'in' ? 0.7 : 1 / 0.7;\n const scrollY = (viewport === null || viewport === void 0 ? void 0 : viewport.scrollY) || 0;\n const exitScrollTop = window.scrollY;\n // const exitRect = exit.el.current.getBoundingClientRect();\n // const enterRect = enter.el.current.getBoundingClientRect();\n const winHeight = document.documentElement.clientHeight;\n const exitOriginY = winHeight / 2 + exitScrollTop;\n // const enterOriginY = (winHeight / 2 + scrollY) / enterRect.height;\n exit.el.current.style.zIndex = '2'; // Needed for PLP to be over PDP's accordions\n exit.el.current.style.position = 'fixed';\n exit.el.current.style.top = `-${exitScrollTop}px`;\n enter.el.current.style.position = 'static';\n enter.el.current.style.zIndex = '0';\n // Setup\n // await Promise.all(setup.map(async (cb: Function) => await cb(params)));\n //check if page is not ready\n if (!((_a = exit === null || exit === void 0 ? void 0 : exit.el) === null || _a === void 0 ? void 0 : _a.current) || !((_b = enter === null || enter === void 0 ? void 0 : enter.el) === null || _b === void 0 ? void 0 : _b.current)) {\n console.warn('ANIMATION SKIPPED FOR AJAX PROBLEM');\n skipAnimation(params);\n return;\n }\n await Promise.all(animate.map(async (cb) => await cb(params)));\n document.documentElement.scrollTop = scrollY;\n exit.animation.set({\n top: -exitScrollTop + 'px',\n transformOrigin: `center ${exitOriginY}px`,\n });\n await exit.animation.start({\n scale: [1, 1 / scale],\n opacity: [1, 0, 0],\n transition: {\n ease: pushTransition.transition.ease,\n duration: 0.75,\n },\n });\n exit.done();\n enter.animation.start({\n opacity: [0, 1],\n transition: {\n ease: pushTransition.transition.ease,\n duration: 0.5,\n },\n });\n // Clean up\n await Promise.all(done.map(async (cb) => await cb(params)));\n if (transition.direction === 'in' && window.isMobile()) {\n enter.el.current.querySelector('.product-hero-gallery').classList.add('fix-flicker-ios');\n }\n enter.animation.set({\n pointerEvents: 'all',\n });\n enter.done();\n resetStore();\n if (transition.direction === 'out') {\n header === null || header === void 0 ? void 0 : header.classList.remove('header--pdp');\n }\n header === null || header === void 0 ? void 0 : header.classList.remove('transitioning');\n if (transition.direction === 'in' && window.isMobile()) {\n setTimeout(() => {\n enter.el.current.querySelector('.product-hero-gallery').classList.remove('fix-flicker-ios');\n }, 150);\n }\n };\n // !SECTION End Push\n const getCustomTime = () => {\n const cookiename = 'devtranstime';\n let name = cookiename + '=';\n let decodedCookie = decodeURIComponent(document.cookie);\n let ca = decodedCookie.split(';');\n for (let i = 0; i < ca.length; i++) {\n let c = ca[i];\n while (c.charAt(0) == ' ') {\n c = c.substring(1);\n }\n if (c.indexOf(name) == 0) {\n return parseInt(c.substring(name.length, c.length));\n }\n }\n return null;\n };\n const CUSTOM_TIME = getCustomTime();\n const TOTAL_TIME = CUSTOM_TIME || 1.2;\n const handleTime = (time) => {\n return (time / 12) * TOTAL_TIME;\n };\n // !SECTION End Zoomout\n // SECTION Zoom in --------------------------------------------------------------------\n const handleZoomIn = async (params) => {\n var _a, _b;\n const { setup, animate, done } = playbackHooks.current;\n const { enter, exit, viewport, transition } = params;\n const { state } = location;\n const header = document.getElementsByTagName('header')[0];\n const tickerBar = document.querySelector('.ticker-bar');\n const catalogContainer = document.getElementById('catalog');\n // const stickyTray = document.querySelector('.sticky-tray') as HTMLElement;\n const exitTile = document.querySelector(`[data-productuuid=\"${state.transition.productUuid}\"]`);\n if (transition.direction === 'in') {\n bodyHeight.current = `${catalogContainer.offsetHeight}`;\n }\n else {\n catalogContainer.style.height = `${bodyHeight.current}px`;\n }\n header.classList.add('header--pdp');\n header.classList.add('transitioning');\n // Setup\n enter.el.current.style.position = 'absolute';\n catalogContainer.style.overflow = 'hidden';\n // if (stickyTray) stickyTray.style.opacity = '0';\n await Promise.all(setup.map(async (cb) => await cb(params)));\n const availableEnterAnimatedImages = enter.animatedImages.filter((image) => image.productId);\n const enterImagesCount = availableEnterAnimatedImages.length;\n let enterImage;\n if (enterImagesCount === 1) {\n enterImage = availableEnterAnimatedImages[0];\n }\n else {\n enterImage = availableEnterAnimatedImages.find((i) => {\n return i.productId === state.transition.productId;\n });\n }\n const exitImage = exit.animatedImages.find((image) => {\n return image.productUuid === state.transition.productUuid;\n });\n //check if page is not ready\n if (!((_a = enterImage === null || enterImage === void 0 ? void 0 : enterImage.el) === null || _a === void 0 ? void 0 : _a.current) || !((_b = exitImage === null || exitImage === void 0 ? void 0 : exitImage.el) === null || _b === void 0 ? void 0 : _b.current)) {\n console.warn('ANIMATION SKIPPED FOR AJAX PROBLEM');\n skipAnimation(params);\n await resetIntermediary();\n return;\n }\n const exitingImageSrc = enterImage.el.current.dataset.qualityImg;\n await setIntermediarySrc(exitingImageSrc);\n // ANCHOR zoomIN standard\n const exitRect = exitImage.el.current.getBoundingClientRect(); // Repaint\n const exitTileRect = exitTile.getBoundingClientRect(); // Repaint\n const enterRect = enterImage.el.current.getBoundingClientRect(); // Repaint\n const scale = exitRect.width / enterRect.width;\n intermediary.el.current.querySelector('img').classList.add('transitioning');\n const intermediaryAnimation = intermediary.animation;\n // animazioni di setup\n intermediaryAnimation.set(Object.assign({ display: 'block', width: exitRect.width / scale, height: exitRect.height / scale, x: exitTileRect.left, y: exitTileRect.top /* + scrollTop */, scale: scale, opacity: 0, zIndex: 4 }, originXYZero));\n intermediaryAnimation.start({\n position: 'fixed',\n transition: {\n duration: handleTime(1),\n },\n });\n enter.animation.set({\n pointerEvents: 'all',\n y: 0,\n opacity: 0,\n zIndex: 4,\n });\n await Promise.all(animate.map(async (cb) => await cb(params)));\n // Actual Transitions\n // ANCHOR * ENTER โœ… --------------------------------------------------------------------\n enter.animation.start({\n visibility: 'visible',\n transition: {\n duration: handleTime(8),\n delay: handleTime(1),\n },\n });\n // ANCHOR * INTERMEDIARY ๐ŸŒ† --------------------------------------------------------------------\n intermediaryAnimation.start({\n // intermediary opacity\n opacity: 1,\n transition: {\n duration: handleTime(2),\n // times: [0, 0.08, 0.8, 1],\n },\n });\n // ANCHOR * EXIT โŒ --------------------------------------------------------------------\n exit.animation.start({\n // exit opacity\n opacity: 0,\n transition: {\n duration: handleTime(4),\n delay: handleTime(1),\n },\n });\n const interEnterY = tickerBar ? tickerBar.offsetHeight : 0;\n await intermediaryAnimation.start({\n // intermediary movement\n x: 0,\n y: interEnterY,\n scale: 1,\n height: enterRect.height,\n transition: {\n duration: handleTime(4),\n delay: handleTime(1),\n },\n });\n // @ts-ignore scrollBehavior should accepts 'instant' indeed\n window.scroll({ top: 0, left: 0, behavior: 'instant' });\n await enter.animation.start({\n opacity: 1,\n transition: {\n duration: handleTime(2),\n },\n });\n // ANCHOR * CLEAN UP โญ๏ธ -------------------------------------------------------------------\n enter.el.current.style.position = 'static';\n exit.el.current.style.position = 'static';\n header.classList.remove('transitioning');\n catalogContainer.style.removeProperty('overflow');\n catalogContainer.style.removeProperty('height');\n exit.done();\n enter.done();\n await Promise.all(done.map(async (cb) => await cb(params)));\n await resetIntermediary();\n resetStore();\n };\n // !SECTION\n const submitEnter = async (enter) => {\n if (firstRender.current) {\n const { appMounted } = playbackHooks.current;\n await Promise.all(appMounted.map(async (cb) => {\n await cb();\n }));\n firstRender.current = false;\n }\n else {\n store.enter = enter;\n ready();\n }\n };\n const submitExit = (exit) => {\n store.exit = exit;\n ready();\n };\n // ANCHOR - Ready --------------------------------------------------------------------\n const ready = async () => {\n const { state } = location;\n const { exit, enter } = store;\n if (!exit || !enter)\n return;\n // OE-14793 - PLP click on color swatch not works the zoom()\n const animationObject = {\n exit,\n enter,\n viewport: state === null || state === void 0 ? void 0 : state.viewport,\n transition: state === null || state === void 0 ? void 0 : state.transition,\n };\n if (window.tileToPlpTransition !== 'none') {\n if (window.tileToPlpTransition === 'push') {\n await push(animationObject);\n }\n else if (window.tileToPlpTransition === 'scale') {\n if (state.transition.direction === 'in' && window.innerWidth < window.mqObj['md']) {\n await handleZoomIn(animationObject);\n }\n else {\n await push(animationObject);\n }\n }\n }\n else {\n await noTransition(animationObject);\n }\n if (state.transition.direction === 'out') {\n ScrollTrigger.disable();\n }\n else {\n ScrollTrigger.refresh();\n }\n // update global variable in order to force chat refresh\n //@ts-ignore\n if (window.chatObject)\n window.chatObject.value = new Date().getTime();\n };\n const context = {\n submitExit,\n submitEnter,\n subscribe,\n unsubscribe,\n };\n // Render\n return (React.createElement(AnimatedContext.Provider, { value: context },\n React.createElement(Intermediary, { ref: intermediary.el, animate: intermediary.animation },\n React.createElement(IntermediaryImg, { src: \"\", alt: \"\", className: \"intermediary-image\" })),\n props.children));\n};\nexport const useAnimatedContext = () => {\n return useContext(AnimatedContext);\n};\nexport default AnimatedProvider;\n","import { __rest } from \"tslib\";\nimport { motion, useAnimation } from 'framer-motion';\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react';\nimport { Route, useLocation } from 'react-router-dom';\nimport { Transition } from 'react-transition-group';\nimport { useAnimatedContext } from './AnimatedProvider';\nexport const AnimatedRouteContext = createContext({\n // Cannot remove default values!\n registerAnimatedImage: () => { },\n unregisterAnimatedImage: () => { },\n});\nexport const useAnimatedRouteContext = () => useContext(AnimatedRouteContext);\n// Component\nconst AnimatedRoute = (props) => {\n const { path, exact, children } = props, rest = __rest(props, [\"path\", \"exact\", \"children\"]);\n const el = useRef();\n const endListener = useRef(() => { });\n const [animatedImages, setanimatedImages] = useState([]);\n const { subscribe, unsubscribe, submitEnter, submitExit } = useAnimatedContext();\n const { pathname } = useLocation();\n const animation = useAnimation();\n useEffect(() => {\n const onAppMounted = () => {\n animation.set({\n opacity: 1,\n pointerEvents: 'all',\n });\n };\n subscribe('appMounted', onAppMounted);\n return () => {\n unsubscribe('appMounted', onAppMounted);\n };\n }, []);\n const done = () => {\n endListener.current();\n };\n const handleEntering = () => {\n // console.info('%c [transition] handleEntering', 'color: green;');\n submitEnter({\n el,\n done,\n animation,\n animatedImages,\n });\n };\n const handleExit = () => {\n // console.info('%c [transition] handleExit', 'color: red;');\n submitExit({\n el,\n done,\n animation,\n animatedImages,\n });\n };\n const methods = {\n registerAnimatedImage(image) {\n // console.info('%c registerAnimatedImage transition', 'background-color: green;', image);\n setanimatedImages((state) => {\n if (typeof state != 'object') {\n return state;\n }\n if (!state.find((el) => el.productUuid == image.productUuid)) {\n // console.info('%c [transition] registerAnimatedImage - add: ', 'background-color: blue;', image, '\\n current state: ', state);\n state.push(image);\n }\n else if (!state.find((el) => el.productId == image.productId)) {\n // console.info('%c [transition] registerAnimatedImage - add: ', 'background-color: blue;', image, '\\n current state: ', state);\n state.push(image);\n }\n return state;\n });\n },\n unregisterAnimatedImage(productId, productUuid) {\n // console.info('%c unregisterAnimatedImage transition', 'background-color: red;', productId);\n setanimatedImages((state) => {\n if (typeof state != 'object') {\n return state;\n }\n // console.info('%c [transition] unregisterAnimatedImage - remove: ', 'background-color: purple;', productId, '\\n current state: ', state);\n return state.filter((image) => {\n return image.productUuid !== productUuid;\n });\n });\n },\n };\n const initialStyle = {\n opacity: 0,\n pointerEvents: 'none',\n width: '100%',\n top: 0,\n left: 0,\n zIndex: 1,\n backgroundColor: '#fff',\n };\n return (React.createElement(AnimatedRouteContext.Provider, { value: methods },\n React.createElement(Route, Object.assign({ exact: exact, path: path }, rest), (location) => {\n var _a;\n return (React.createElement(Transition, { appear: true, unmountOnExit: true, onEntering: handleEntering, onExit: handleExit, in: pathname === ((_a = location.match) === null || _a === void 0 ? void 0 : _a.url), \n //@ts-ignore\n addEndListener: (node, done) => {\n endListener.current = done;\n } },\n React.createElement(motion.div, { ref: el, animate: animation, initial: initialStyle },\n React.createElement(React.Fragment, null, children))));\n })));\n};\nexport default AnimatedRoute;\n","import { useEffect } from 'react';\nimport { useAnimatedRouteContext } from './AnimatedRoute';\nconst useAnimatedImage = (productId, el, productUuid) => {\n const { registerAnimatedImage, unregisterAnimatedImage } = useAnimatedRouteContext();\n useEffect(() => {\n if ((productId || productUuid) && el.current) {\n registerAnimatedImage({\n el,\n productId,\n productUuid,\n });\n }\n return () => {\n if (productId || productUuid) {\n unregisterAnimatedImage(productId, productUuid);\n }\n };\n }, [productId, productUuid]);\n};\nexport default useAnimatedImage;\n","import useAnimatedImage from '@moncler/components/routerTransitions/useAnimatedImage';\nimport imageutils, { LG, MD, SM, XS, XXS } from '@utils/imageutils';\nimport classNames from 'classnames';\nimport React, { useMemo, useRef } from 'react';\nimport useBreakpoint from '@utils/useBreakpoint';\nconst defaultSizes = [XXS, XS, SM, MD];\nconst ProductImage = (props) => {\n var _a;\n const el = useRef();\n const image = useMemo(() => {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n if (props.index != undefined) {\n let url = (_b = (_a = props.img) === null || _a === void 0 ? void 0 : _a.urls) === null || _b === void 0 ? void 0 : _b[props.index];\n if (props.genderImageSorted) {\n url = (_d = (_c = props.img) === null || _c === void 0 ? void 0 : _c[props.genderImageSorted]) === null || _d === void 0 ? void 0 : _d[props.index];\n }\n return url;\n }\n if (props.type) {\n let imageoldsuffix = '_' + props.type + '.';\n let imagenewsuffix = '_' + props.type + '1.';\n let img = (_f = (_e = props.img) === null || _e === void 0 ? void 0 : _e.urls) === null || _f === void 0 ? void 0 : _f.find((u) => u && (u.includes(imageoldsuffix) || u.includes(imagenewsuffix)));\n if (!img && props.type === 'X') {\n // fallback su F per vecchie immagini\n img = (_h = (_g = props.img) === null || _g === void 0 ? void 0 : _g.urls) === null || _h === void 0 ? void 0 : _h.find((u) => u && (u.includes('_F.') || u.includes('_F1.')));\n }\n if (img) {\n return img;\n }\n }\n return (_j = props.img) === null || _j === void 0 ? void 0 : _j.urls[0];\n }, [props.img, props.index, props.type]);\n // custom hook per animated image - funziona solo se tutti รจ tre i parametri sono valorizzati e mi trovo dentro AnimatedRoute\n if (((props === null || props === void 0 ? void 0 : props.index) == 0 || !(props === null || props === void 0 ? void 0 : props.index)) && el && props.animatedImage) {\n // useAnimatedImage(props.productId, el);\n useAnimatedImage(props.productId, el, props.productUuid);\n }\n const lowResImg = useMemo(() => { var _a; return imageutils.transform(image, XXS, (_a = props.img) === null || _a === void 0 ? void 0 : _a.alt); }, [image]);\n const currentBreakpoint = useBreakpoint();\n const hiResImage = useMemo(() => {\n var _a, _b;\n if (currentBreakpoint >= window.mqObj.md) {\n return imageutils.transform(image, LG, (_a = props.img) === null || _a === void 0 ? void 0 : _a.alt, null, 'avif');\n }\n else {\n return imageutils.transform(image, MD, (_b = props.img) === null || _b === void 0 ? void 0 : _b.alt, null, 'avif');\n }\n }, [currentBreakpoint, image]);\n const multipleSrc = useMemo(() => {\n let srcs = [];\n (props.sizes || defaultSizes).forEach((sz, i) => {\n var _a;\n srcs.push(`${imageutils.transform(image, sz, (_a = props.img) === null || _a === void 0 ? void 0 : _a.alt, props.imgQuality)} ${sz.width}w`);\n });\n return srcs.join(', ');\n }, [image]);\n const multipleSrcAvif = useMemo(() => {\n let srcs = [];\n (props.sizes || defaultSizes).forEach((sz, i) => {\n var _a;\n srcs.push(`${imageutils.transform(image, sz, (_a = props.img) === null || _a === void 0 ? void 0 : _a.alt, props.imgQuality, 'avif')} ${sz.width}w`);\n });\n return srcs.join(', ');\n }, [image]);\n const lazyPosterImg = useMemo(() => {\n return props.lazyLowRes ? lowResImg : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n }, [image]);\n const altText = useMemo(() => {\n var _a, _b;\n const index = (_a = props.seoIndex) !== null && _a !== void 0 ? _a : props.index;\n return `${props.alt || ((_b = props.img) === null || _b === void 0 ? void 0 : _b.alt)}${index >= 0 ? ` ${index + 1}` : ''}`;\n }, [image]);\n const imageElement = (React.createElement(\"picture\", { className: classNames({ lazyload: !props.lazyDisabled }, props.className) },\n React.createElement(\"source\", Object.assign({}, (!props.lazyDisabled && { ['data-srcset']: multipleSrcAvif }), { srcSet: props.lazyDisabled ? multipleSrcAvif : lazyPosterImg, type: 'image/avif' })),\n React.createElement(\"source\", Object.assign({}, (!props.lazyDisabled && { ['data-srcset']: multipleSrc }), { srcSet: props.lazyDisabled ? multipleSrc : lazyPosterImg, type: 'image/webp' })),\n React.createElement(\"img\", { ref: props.ref || el, alt: altText, src: props.lazyDisabled ? hiResImage : lowResImg, \"data-sizes\": \"auto\", \"data-idx\": props.index || 0, className: classNames({ lazyload: !props.lazyDisabled }, props.className), \"data-quality-img\": hiResImage, \n //width={\"100%\"}\n height: XXS.height, style: props.style, \"aria-hidden\": (props === null || props === void 0 ? void 0 : props.ariaHidden) != undefined ? props === null || props === void 0 ? void 0 : props.ariaHidden : !!props.alt || !!((_a = props.img) === null || _a === void 0 ? void 0 : _a.alt) })));\n if (props.onlyImage) {\n return imageElement;\n }\n if (!props.img) {\n return (React.createElement(\"div\", { className: \"product-image\", \"data-tiletype\": props.tiletype, \"data-type\": props.type },\n React.createElement(\"img\", { alt: \"\", src: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkZmD+DwABGwEHEIRMfwAAAABJRU5ErkJggg==\", \"data-idx\": props.index || 0, className: props.className, width: XXS.width, height: XXS.height, style: props.style })));\n }\n return (React.createElement(\"div\", { className: \"product-image\", \"data-tiletype\": props.tiletype, \"data-type\": props.type }, imageElement));\n};\nexport default ProductImage;\n"],"names":["createContext","AnimatedRouteContext","registerAnimatedImage","unregisterAnimatedImage","productId","el","productUuid","useContext","useEffect","current","defaultSizes","XS","SM","MD","props","_a","useRef","image","useMemo","_b","_c","_d","_e","_f","_g","_h","_j","undefined","index","url","img","urls","genderImageSorted","type","imageoldsuffix","imagenewsuffix","find","u","includes","animatedImage","lowResImg","imageutils","alt","currentBreakpoint","useBreakpoint","hiResImage","window","mqObj","md","LG","multipleSrc","srcs","sizes","forEach","sz","i","push","imgQuality","width","join","multipleSrcAvif","lazyPosterImg","lazyLowRes","altText","seoIndex","imageElement","className","lazyload","lazyDisabled","Object","assign","srcSet","ref","src","height","style","ariaHidden","onlyImage","tiletype"],"sourceRoot":""}