{"version":3,"file":"1.6c854f66ed4aace2.js","mappings":"uLAKO,MAOMA,EAAQC,IAAD,CAChBC,KAAMC,EAAAA,GACNC,QAAS,CACLH,a,wPCJR,MAAMI,EAAe,CACjBC,QAAS,CACLC,WAAY,OACZC,QAAS,EACTC,OAAQ,QAEZC,QAAS,CACLH,WAAY,qBACZI,OAAQ,OAGVC,EAAmB,CACrBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAY,GACZC,UAAU,EACVC,WAAW,GAGTC,EAAoBC,GACPA,EAASC,KAAI,CAACC,EAAMC,KAC/B,IAAKD,IAASA,EAAKE,QAAUF,EAAKE,MAAMJ,SACpC,OAIJ,MAAMK,EAAeH,EAAKE,MAAMJ,SAASM,MACpCC,GAAqB,QAAbA,EAAIzB,OAEjB,OAAKuB,GAAiBA,EAAaD,OAAUC,EAAaD,MAAMI,IAK5D,uBACIC,IAAKN,EACLO,MAAO,CACHC,gBAAiB,OAASN,EAAaD,MAAMI,IAAM,KAEvDI,UAAU,0BAVlB,CAIA,IAkIR,EApHwBR,IACpB,MAAMS,GAAWC,EAAAA,EAAAA,OACX,QAACjC,EAAD,MAAUsB,IAASY,EAAAA,EAAAA,KAAaC,GAAUA,EAAMC,iBAChDC,GAAUC,EAAAA,EAAAA,cAAY,IAAMN,EAASjC,GAAK,KAAS,CAACiC,IACpDO,EAAoBjB,IACtBU,EAASjC,GAAK,IACdiC,ED5DwBV,KAAD,CAC3BrB,KAAMuC,EAAAA,GACNrC,QAAS,CACLmB,WCyDSmB,CAAgBnB,GAAzB,EAGJ,OAAQC,EAAMmB,QAAUnB,EAAMmB,OAAOC,OAAS,EAC1C,gBAAC,EAAAC,SAAD,MAEA,gBAAC,EAAAA,SAAD,KACI,uBAAKb,UAAU,sBACX,uBAAKA,UAAU,oBACX,0BAAQA,UAAU,mCACd,qBACI,WAAUR,EAAMmB,OAAO,GAAGf,IAC1BkB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFV,EAAiB,EAAjB,EAEJR,UAAU,gBACVmB,IAAI,WACJC,wBAAyB,CACrBC,OAAQ7B,EAAMmB,OAAO,GAAGW,UAKxC,uBAAKtB,UAAU,2CACX,uBAAKA,UAAU,gCACX,uBAAKA,UAAU,0DACf,uBAAKA,UAAU,0DACf,gBAAC,KAAD,CACIuB,gBAAgB,EAChBC,QAAS,CAACC,EAAAA,IACVC,YAAa,CACT,IAAK,CACDC,cAAe,EACfC,aAAc,GAElB,KAAM,CACFD,cAAe,EACfC,aAAc,IAGtBC,WAAY,CACRC,OAAQ,sBACRC,OAAQ,uBAEZH,aAAc,GACdD,cAAe,GAEdnC,EAAMmB,OAAOtB,KACV,CAAC2C,EAAOzC,IACJA,EAAQ,GACJ,gBAAC,KAAD,CACIS,UAAU,kCACVH,IAAKN,GAEL,qBACI,WAAUyC,EAAMpC,IAChBmB,SAAS,MACTC,QAAS,IACLR,EAAiBjB,GAErBS,UAAU,gBACVoB,wBAAyB,CACrBC,OAAQW,EAAMV,eAWtD,gBAAC,IAAD,CACIW,aAAa,EACbC,eAAe,EACfC,OAAQlE,EACRmE,eAAgB9B,EAChBR,MAAOzB,EACPgE,2BAA2B,GAE3B,gBAAC,KAAD,KACQzD,EADR,CAEI0D,aAAc/C,EACdS,UAAU,YACVuC,aAAcpD,IAEbK,EAAMmB,OAAOtB,KAAI,CAACmD,EAAOjD,IACtB,uBACIM,IAAM,SAAQN,IACdS,UAAU,wBAEV,0BACIgB,QAASV,EACTN,UAAU,wBAFd,KAMA,uBAAKJ,IAAK4C,EAAM5C,IAAK6C,OAAO,MAAMC,IAAKF,EAAME,IAAK1C,UAAU,0BAlGpF,C","sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/Components/LightboxImages.js"],"sourcesContent":["import {\n    LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\n    LIGHTBOX_IMAGES_SHOW,\n} from '../constants';\n\nexport const setCurrentIndex = (index) => ({\n    type: LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\n    payload: {\n        index,\n    },\n});\n\nexport const show = (visible) => ({\n    type: LIGHTBOX_IMAGES_SHOW,\n    payload: {\n        visible,\n    },\n});\n","import React, {Fragment, useCallback} from 'react';\nimport Modal from 'react-modal';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport {Carousel as Lightbox} from 'react-responsive-carousel';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {show, setCurrentIndex} from '../Actions/LightboxImages.action';\nimport {Swiper, SwiperSlide} from \"swiper/react\";\nimport {Navigation} from \"swiper\";\nimport \"swiper/css\";\nimport \"swiper/css/navigation\";\n\nconst customStyles = {\n    content: {\n        background: 'none',\n        padding: 0,\n        border: 'none',\n    },\n    overlay: {\n        background: 'rgba(0, 0, 0, 0.8)',\n        zIndex: 2003,\n    },\n};\nconst LightboxSettings = {\n    showStatus: false,\n    showIndicators: false,\n    useKeyboardArrows: true,\n    thumbWidth: 50,\n    autoPlay: false,\n    autoFocus: true,\n};\n\nconst renderThumbnails = (children) => {\n    const images = children.map((item, index) => {\n        if (!item || !item.props || !item.props.children) {\n            return undefined;\n        }\n\n        // find img to get source\n        const imageElement = item.props.children.find(\n            (ele) => ele.type === 'img'\n        );\n        if (!imageElement || !imageElement.props || !imageElement.props.src) {\n            return undefined;\n        }\n\n        return (\n            <div\n                key={index}\n                style={{\n                    backgroundImage: 'url(' + imageElement.props.src + ')',\n                }}\n                className=\"thumbnail__image\"\n            />\n        );\n    });\n\n    return images;\n};\n\nconst LightboxImages = (props) => {\n    const dispatch = useDispatch();\n    const {visible, index} = useSelector((state) => state.lightboxImages);\n    const onClose = useCallback(() => dispatch(show(false)), [dispatch]);\n    const onClickThumbnail = (index) => {\n        dispatch(show(true));\n        dispatch(setCurrentIndex(index));\n    };\n    \n    return !props.images || props.images.length < 1 ? (\n        <Fragment/>\n    ) : (\n        <Fragment>\n            <div className=\"row product-images\">\n                <div className=\"small-12 columns\">\n                    <figure className=\"product-detail__image-container\">\n                        <a\n                            data-src={props.images[0].src}\n                            href=\"#\"\n                            itemProp=\"url\"\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClickThumbnail(0);\n                            }}\n                            className=\"product-image\"\n                            rel=\"nofollow\"\n                            dangerouslySetInnerHTML={{\n                                __html: props.images[0].html,\n                            }}\n                        ></a>\n                    </figure>\n                </div>\n                <div className=\"small-12 columns medium-flex-dir-column\">\n                    <div className=\"product-detail__image-slider\">\n                        <div className=\"swiper-button-prev product-detail__swiper-button-prev\"></div>\n                        <div className=\"swiper-button-next product-detail__swiper-button-next\"></div>\n                        <Swiper\n                            allowTouchMove={false}\n                            modules={[Navigation]}\n                            breakpoints={{\n                                640: {\n                                    slidesPerView: 5,\n                                    spaceBetween: 8\n                                },\n                                1024: {\n                                    slidesPerView: 5,\n                                    spaceBetween: 8\n                                }\n                            }}\n                            navigation={{\n                                nextEl: '.swiper-button-next',\n                                prevEl: '.swiper-button-prev'\n                            }}\n                            spaceBetween={16}\n                            slidesPerView={3}\n                        >\n                            {props.images.map(\n                                (image, index) =>\n                                    index > 0 && (\n                                        <SwiperSlide\n                                            className=\"product-detail__image-container\"\n                                            key={index}\n                                        >\n                                            <a\n                                                data-src={image.src}\n                                                itemProp=\"url\"\n                                                onClick={() =>\n                                                    onClickThumbnail(index)\n                                                }\n                                                className=\"product-image\"\n                                                dangerouslySetInnerHTML={{\n                                                    __html: image.html\n                                                }}\n                                            >\n                                            </a>\n                                        </SwiperSlide>\n                                    )\n                            )}\n                        </Swiper>\n                    </div>\n                </div>\n            </div>\n            <Modal\n                ariaHideApp={false}\n                preventScroll={true}\n                isOpen={visible}\n                onRequestClose={onClose}\n                style={customStyles}\n                shouldCloseOnOverlayClick={false}\n            >\n                <Lightbox\n                    {...LightboxSettings}\n                    selectedItem={index}\n                    className=\"light-box\"\n                    renderThumbs={renderThumbnails}\n                >\n                    {props.images.map((value, index) => (\n                        <div\n                            key={`figure${index}`}\n                            className=\"light-box__container\"\n                        >\n                            <button\n                                onClick={onClose}\n                                className=\"light-box__close-btn\"\n                            >\n                                &times;\n                            </button>\n                            <img src={value.src} height=\"700\" alt={value.alt} className=\"light-box__image\"/>\n                        </div>\n                    ))}\n                </Lightbox>\n            </Modal>\n        </Fragment>\n    )\n};\n\nexport default LightboxImages;\n"],"names":["show","visible","type","LIGHTBOX_IMAGES_SHOW","payload","customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","map","item","index","props","imageElement","find","ele","src","key","style","backgroundImage","className","dispatch","useDispatch","useSelector","state","lightboxImages","onClose","useCallback","onClickThumbnail","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","images","length","Fragment","href","itemProp","onClick","e","preventDefault","rel","dangerouslySetInnerHTML","__html","html","allowTouchMove","modules","Navigation","breakpoints","slidesPerView","spaceBetween","navigation","nextEl","prevEl","image","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","selectedItem","renderThumbs","value","height","alt"],"sourceRoot":""}