{"version":3,"sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/Components/ProductPageCarousel.js"],"names":["setCurrentIndex","index","type","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","payload","show","visible","LIGHTBOX_IMAGES_SHOW","ProductSlider","props","dispatch","useDispatch","useSelector","state","lightboxImages","onClose","useCallback","sliderRef","useRef","settings","dots","infinite","speed","lazyLoad","arrows","slidesToShow","slidesToScroll","appendDots","React","className","onClick","current","slickPrev","slickNext","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","customPaging","slide","src","children","dataset","dotsClass","useEffect","placeholder","document","querySelector","remove","Slider","_extends","ref","map","child","i","itemProp","onClickThumbnail","dangerouslySetInnerHTML","__html","innerHTML","key","Modal","ariaHideApp","preventScroll","isOpen","onRequestClose","style","content","background","padding","border","overlay","zIndex","shouldCloseOnOverlayClick","initialSlide","value"],"mappings":"0HAKO,MAAMA,EAAmBC,IAAK,CACjCC,KAAMC,KACNC,QAAS,CACLH,WAIKI,EAAQC,IAAO,CACxBJ,KAAMK,KACNH,QAAS,CACLE,Y,2VCRO,SAASE,EAAcC,GAElC,MAAMC,GAAWC,WACX,QAAEL,EAAO,MAAEL,IAAUW,SAAaC,GAAUA,EAAMC,iBAClDC,GAAUC,kBAAY,IAAMN,GAASL,QAAK,KAAS,CAACK,IAMpDO,GAAYC,cASlB,MAYMC,EAAW,CACbC,MAAM,EACNC,UAAU,EACVC,MAAO,IACPC,UAAU,EACVC,QAAQ,EACRC,aAAc,EACdC,eAAgB,EAChBC,WAAYP,GACRQ,gBAAA,OAAKC,UAAU,0BACXD,gBAAA,UAAQ1B,KAAK,SAAS,YAAU,OAAO2B,UAAU,yBAAyBC,QAASA,KAzB3Fb,EAAUc,QAAQC,WAyB0F,GAAC,aACjGJ,gBAAA,MAAIC,UAAU,sBAAsBT,GACxCQ,gBAAA,UAAQ1B,KAAK,SAAS,YAAU,OAAO2B,UAAU,yBAAyBC,QAASA,KA9B3Fb,EAAUc,QAAQE,WA8BsF,GAAC,WAIvGC,EAAmB,CACrBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAY,GACZC,UAAU,EACVC,WAAW,EACXC,aAAc,SAASC,GACnB,OACEd,gBAAA,SACEA,gBAAA,OAAKe,IAAK,GAAGlC,EAAMmC,SAASF,GAAOG,QAAQF,QAGjD,EACFvB,MAAM,EACN0B,UAAW,cAgBf,OAPAC,gBAAU,KACN,MAAMC,EAAcC,UAAUC,cAAc,uCACzCF,GACCA,EAAYG,QAChB,GACF,IAGEvB,2BAAA,KAEAA,gBAACwB,IAAMC,EAAA,CAACC,IAAKrC,GAAeE,GAfrBV,EAAMmC,SAASW,KAAI,CAACC,EAAOC,IACvB7B,gBAAA,OAAK,WAAU4B,EAAMX,QAAQF,IAAKe,SAAS,MAAM5B,QAASA,IA9D/C7B,KACtBS,GAASL,QAAK,IACdK,GAASV,OAAgBC,GAAO,EA4D2C0D,CAAiBF,GAAIG,wBAAyB,CAACC,OAAQL,EAAMM,WAAYC,IAAK,gCAAkCN,OAiB3L7B,gBAACoC,IAAK,CACNC,aAAa,EACbC,eAAe,EACfC,OAAQ7D,EACR8D,eAAgBrD,EAChBsD,MAtEiB,CACjBC,QAAS,CACLC,WAAY,OACZC,QAAS,EACTC,OAAQ,QAEZC,QAAS,CACLH,WAAY,qBACZI,OAAQ,OA+DZC,2BAA2B,GACvBhD,gBAACwB,IAAMC,EAAA,GACCnB,EAAgB,CACpB2C,aAAc5E,EACd4B,UAAU,cAELpB,EAAMmC,SAASW,KAAI,CAACuB,EAAO7E,IACxB2B,gBAAA,OACImC,IAAK,SAAS9D,IACd4B,UAAU,wBAEVD,gBAAA,OAAKe,IAAKmC,EAAMjC,QAAQF,IAAKd,UAAU,yBAMvDD,gBAAA,UACAE,QAASf,EACTc,UAAU,wBACT,MAMb,C","file":"424.9a5e779abbd463cc778a.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, useState, useEffect, useCallback, useRef } from \"react\";\nimport Slider from \"react-slick\";\nimport Modal from 'react-modal';\nimport { Carousel as Lightbox } from 'react-responsive-carousel';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { show, setCurrentIndex } from '../Actions/LightboxImages.action';\n\nexport default function ProductSlider(props) {\n\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    const sliderRef = useRef();\n\n    var next = () => {\n        sliderRef.current.slickNext();\n    }\n    var previous = () => {\n        sliderRef.current.slickPrev();\n    }\n\n    const 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    };\n\n    const settings = {\n        dots: true,      \n        infinite: true,\n        speed: 500,\n        lazyLoad: true,\n        arrows: false,\n        slidesToShow: 1,\n        slidesToScroll: 1,\n        appendDots: dots => (\n            <div className=\"custom-slider-controls\">\n                <button type=\"button\" data-role=\"none\" className=\"slick-arrow slick-prev\" onClick={() => previous()}> Previous</button>\n                    <ul className=\"slick-dots-wrapper\">{dots}</ul>\n                <button type=\"button\" data-role=\"none\" className=\"slick-arrow slick-next\" onClick={() => next()}> Next</button>       \n            </div>\n        )};\n    \n    const LightboxSettings = {\n        showStatus: false,\n        showIndicators: false,\n        useKeyboardArrows: true,\n        thumbWidth: 50,\n        autoPlay: false,\n        autoFocus: true,\n        customPaging: function(slide) {\n            return (\n              <a>\n                <img src={`${props.children[slide].dataset.src}`} />\n              </a>\n            );\n          },\n        dots: true,\n        dotsClass: \"slick-dots\",\n    };\n\n    var getImages = () => {\n        return props.children.map((child, i) => {\n            return <div data-src={child.dataset.src} itemProp=\"url\" onClick={() => onClickThumbnail(i)} dangerouslySetInnerHTML={{__html: child.innerHTML}} key={\"product-page-carousel__image-\" + i}></div>\n        });\n    }\n\n    useEffect(() => {\n        const placeholder = document?.querySelector(\".product-page-carousel__placeholder\");\n        if(placeholder){\n            placeholder.remove();\n        }\n    },[])\n\n    return(\n        <>\n        {/* <a className=\"product-page-carousel__icon\" href=\"#\"><i className=\"product-page-carousel__icon--wishlist\"></i></a> */}\n        <Slider ref={sliderRef} {...settings}>\n            {getImages()}\n        </Slider>\n        <Modal\n        ariaHideApp={false}\n        preventScroll={true}\n        isOpen={visible}\n        onRequestClose={onClose}\n        style={customStyles}\n        shouldCloseOnOverlayClick={true}>\n            <Slider\n                {...LightboxSettings}\n                initialSlide={index}\n                className=\"light-box\"\n                >\n                    {props.children.map((value, index) => (\n                        <div\n                            key={`figure${index}`}\n                            className=\"light-box__container\"\n                        >\n                            <img src={value.dataset.src} className=\"light-box__image\"></img> \n\n                        </div>\n                    ))}\n\n            </Slider>\n            <button\n            onClick={onClose}\n            className=\"light-box__close-btn\"\n            >\n             &times;\n        </button>\n    </Modal>\n        </>\n    );\n}"],"sourceRoot":""}