{"version":3,"file":"js/3692.chunk.js","mappings":"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","sources":["webpack:///./assets/common/src/ui/modal/ModalDialog.tsx","webpack:///./assets/common/src/utils/useBreakpoint.ts","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 React, { Suspense } from 'react';\nimport { autoChooseComponent } from '@common/utils/brandDiffsUtils';\nconst StoneModalDialog = React.lazy(() => import('@stone/components/modal/ModalDialog'));\nconst MocnclerModalDialog = React.lazy(() => import('@moncler/components/modal/ModalDialog'));\nconst ModalDialog = (props) => {\n    return (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) }, autoChooseComponent({\n        MO: React.createElement(MocnclerModalDialog, Object.assign({}, props)),\n        ST: React.createElement(StoneModalDialog, Object.assign({}, props, { isLegacy: true })),\n    })));\n};\nexport default ModalDialog;\n","import { useEffect, useState } from 'react';\nconst getInitialBreakpointValue = () => {\n    var _a;\n    // get initial breakpoint is called before the page is fully loaded and innerWith may be 0. windows.mqObj may not be set\n    const mediaQueries = window.mqObj;\n    const documentWidth = window.innerWidth || ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width);\n    if (documentWidth == 0 || !mediaQueries) {\n        return;\n    }\n    const filtered = Object.keys(mediaQueries).filter((key) => mediaQueries[key] <= documentWidth);\n    const initalBr = filtered.length ? mediaQueries[filtered[filtered.length - 1]] : mediaQueries['xs'];\n    // console.info('[getInitialBreakpointValue]: ', documentWidth, initalBr);\n    return initalBr;\n};\nconst mediaQueries = Object.assign({ '<xs': 0 }, window.mqObj);\nconst useBreakpoint = () => {\n    const [currentBreakpoint, setCurrentBreakpoint] = useState(getInitialBreakpointValue());\n    const getCurrentBreakpoint = () => {\n        var _a;\n        const documentWidth = window.innerWidth || ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width);\n        if (documentWidth == 0) {\n            return;\n        }\n        const filtered = Object.keys(mediaQueries).filter((key) => mediaQueries[key] <= documentWidth);\n        return mediaQueries[filtered[filtered.length - 1]];\n    };\n    const handleResize = () => {\n        const currentBr = getCurrentBreakpoint();\n        if (currentBr && currentBr !== currentBreakpoint) {\n            // console.info('%c[React - Breakpoint change] ', 'color: green;font-weight: bold;', currentBr);\n            setCurrentBreakpoint(currentBr);\n        }\n    };\n    // const debounceResize = () => {\n    //   handleResize();\n    // };\n    useEffect(() => {\n        window.addEventListener('resize', handleResize);\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    });\n    return currentBreakpoint;\n};\nexport default useBreakpoint;\n","import { useAnimation } from 'framer-motion';\nimport React, { createContext, useContext, useRef } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { originXYZero, pushTransition } from './transitions';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nexport const AnimatedContext = createContext({});\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 intermediaryImg = { el: useRef(null), animation: useAnimation() };\n    const intermediaryWrapper = useRef(null);\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 = intermediaryImg.el.current;\n        img.src = exitSrc;\n        await img.decode();\n    };\n    const resetIntermediary = async () => {\n        intermediaryWrapper.current.querySelector('.fade-backdrop').classList.remove('transitioning');\n        intermediaryImg.el.current.classList.remove('shown');\n        intermediaryImg.el.current.classList.remove('transitioning');\n        intermediaryImg.el.current.src = '';\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 { animate, done } = playbackHooks.current;\n        const { enter, exit, transition, viewport } = params;\n        const catalogContainer = document.getElementById('catalog');\n        if (transition.direction === 'in') {\n            bodyHeight.current = `${catalogContainer.offsetHeight}`;\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 winHeight = document.documentElement.clientHeight;\n        const exitOriginY = winHeight / 2 + exitScrollTop;\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.overflow = `hidden`;\n        exit.el.current.style.scale = `1`;\n        exit.el.current.style.opacity = `1`;\n        const pushTransitionEase = pushTransition.transition.ease.join(',');\n        exit.el.current.style.transition = `scale .75s cubic-bezier(${pushTransitionEase}), opacity .33s cubic-bezier(${pushTransitionEase})`;\n        enter.el.current.style.transition = `opacity .5s cubic-bezier(${pushTransitionEase})`;\n        enter.el.current.style.position = 'static';\n        enter.el.current.style.zIndex = '0';\n        enter.el.current.style.opacity = '0';\n        enter.el.current.style.scale = '1';\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.el.current.style.top = `-${exitScrollTop}px`;\n        exit.el.current.style.transformOrigin = `center ${exitOriginY}px`;\n        //  exit.animation.start\n        exit.el.current.style.scale = `${1 / scale}`;\n        exit.el.current.style.opacity = `0`;\n        await new Promise((resolve) => {\n            setTimeout(() => {\n                resolve(1);\n            }, 750);\n        });\n        exit.done();\n        enter.el.current.style.opacity = '1';\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.el.current.style.pointerEvents = 'all';\n        enter.el.current.style.scale = '';\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, 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        try {\n            await setIntermediarySrc(exitingImageSrc);\n        }\n        catch (error) {\n            console.log('intermediaryImage Decoding error', error);\n            skipAnimation(params);\n            await resetIntermediary();\n            return;\n        }\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        const leftAnchored = exitTileRect.left <= 0;\n        intermediaryImg.el.current.style.setProperty('transform-origin', leftAnchored ? '0 0' : '100% 0');\n        let intermediaryX = 0;\n        let intermediaryY = exitTileRect.top / scale;\n        intermediaryImg.el.current.style.setProperty('--intermediaryT', `scale(${scale}) translate(${intermediaryX}px, ${intermediaryY}px)`);\n        intermediaryImg.el.current.classList.add('shown');\n        await new Promise((resolve) => {\n            setTimeout(() => {\n                resolve(1);\n            }, 100);\n        });\n        // animazioni di setup\n        enter.animation.set({\n            pointerEvents: 'all',\n            y: 0,\n            zIndex: 10,\n        });\n        await Promise.all(animate.map(async (cb) => await cb(params)));\n        // Actual Transitions\n        // ANCHOR * INTERMEDIARY 🌆 --------------------------------------------------------------------\n        intermediaryY = tickerBar ? tickerBar.offsetHeight : 0;\n        intermediaryImg.el.current.classList.add('transitioning');\n        intermediaryWrapper.current.querySelector('.fade-backdrop').classList.add('transitioning');\n        intermediaryImg.el.current.style.setProperty('--intermediaryT', `translate(-${intermediaryX}px, ${intermediaryY}px)`);\n        const finalScale = (enterRect.height / exitRect.height) * scale;\n        intermediaryX = ((enterRect.width * finalScale - window.innerWidth) / 2 / finalScale) * (leftAnchored ? -1 : 1);\n        // Animating both scale and translate creates an unwanted \"curve\" in the tile's movement, better add scale in a second moment\n        intermediaryImg.el.current.style.setProperty('--intermediaryT', `scale(${finalScale}) translate(${intermediaryX}px, ${intermediaryY}px)`);\n        await new Promise((resolve) => {\n            intermediaryImg.el.current.addEventListener('transitionend', () => {\n                resolve(1);\n            }, { once: true });\n        });\n        // ANCHOR * EXIT ❌ --------------------------------------------------------------------\n        // Removed EXIT animation ( the exit will be covered - not needed )\n        // @ts-ignore scrollBehavior should accepts 'instant' indeed\n        window.scroll({ top: 0, left: 0, behavior: 'instant' });\n        // ANCHOR * ENTER ✅ --------------------------------------------------------------------\n        await enter.animation.start({\n            opacity: 1,\n            transition: {\n                duration: handleTime(2),\n            },\n        });\n        // ANCHOR * CLEAN UP ⭐️ -------------------------------------------------------------------\n        resetIntermediary();\n        enter.el.current.style.position = 'static';\n        enter.el.current.style.scale = '';\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        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(\"div\", { ref: intermediaryWrapper, className: \"intermediary-wrapper\" },\n            React.createElement(\"img\", { ref: intermediaryImg.el, src: \"\", alt: \"\", className: \"intermediary-image\" }),\n            React.createElement(\"div\", { className: \"fade-backdrop\" })),\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":["StoneModalDialog","MocnclerModalDialog","props","Suspense","fallback","MO","Object","assign","ST","isLegacy","mediaQueries","window","mqObj","currentBreakpoint","setCurrentBreakpoint","useState","_a","documentWidth","innerWidth","visualViewport","width","filtered","keys","filter","key","length","getInitialBreakpointValue","handleResize","currentBr","getCurrentBreakpoint","useEffect","addEventListener","removeEventListener","createContext","AnimatedRouteContext","registerAnimatedImage","unregisterAnimatedImage","productId","el","productUuid","useContext","current","defaultSizes","XS","SM","MD","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","useBreakpoint","hiResImage","md","LG","multipleSrc","srcs","sizes","forEach","sz","i","push","imgQuality","join","multipleSrcAvif","lazyPosterImg","lazyLowRes","altText","seoIndex","imageElement","className","lazyload","lazyDisabled","srcSet","ref","src","height","style","ariaHidden","onlyImage","tiletype"],"sourceRoot":""}