{"version":3,"sources":["webpack:///./Scripts/Components/ProductSlider.js","webpack:///./Scripts/Components/LightboxImages.js","webpack:///./Scripts/Containers/LightboxImages.container.js"],"names":["ProductSlider","props","_context","React","createElement","className","Carousel","breakPoints","width","itemsToShow","itemsToScroll","showArrows","pagination","focusOnSelect","renderArrow","_ref","type","onClick","isEdge","pointer","consts","PREV","src","alt","height","disabled","NEXT","_mapInstanceProperty","media","call","mediaItem","index","_context2","mediaElement","dataset","tagtype","_Object$assign","apply","Object","_concatInstanceProperty","_toConsumableArray","_Array$from","attributes","_ref2","name","value","_defineProperty","key","LightboxImages","_context3","length","Fragment","id","_context4","_ref3","Lightbox","_extends","showThumbnails","showImageCount","connect","state","isOpen","lightboxImages","visible","currentImage","dispatch","onClose","show","onClickNext","next","onClickPrev","previous","onClickThumbnail","setCurrentIndex"],"mappings":"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","file":"30.7d816911f1e319e0b101.js","sourcesContent":["import React from 'react';\r\nimport Carousel, { consts } from 'react-elastic-carousel';\r\n\r\nfunction ProductSlider(props) {\r\n    const breakPoints = [\r\n        { width: 1, itemsToShow: 1 },\r\n        { width: 550, itemsToShow: 2, itemsToScroll: 2 },\r\n        { width: 768, itemsToShow: 3 },\r\n        { width: 1200, itemsToShow: 4 },\r\n    ];\r\n\r\n    function arrow({ type, onClick, isEdge }) {\r\n        const pointer =\r\n            type === consts.PREV ? (\r\n                <img\r\n                    src=\"/ui/images/arrow-back.svg\"\r\n                    alt=\"Arrow left\"\r\n                    width={16}\r\n                    height={16}\r\n                />\r\n            ) : (\r\n                <img\r\n                    src=\"/ui/images/arrow-forward.svg\"\r\n                    alt=\"Arrow right\"\r\n                    width={16}\r\n                    height={16}\r\n                />\r\n            );\r\n\r\n        return (\r\n            <button\r\n                onClick={onClick}\r\n                disabled={isEdge}\r\n                className={\r\n                    type === consts.NEXT\r\n                        ? 'rec-arrow rec-arrow-right'\r\n                        : 'rec-arrow'\r\n                }\r\n            >\r\n                {pointer}\r\n            </button>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <div className=\"product-slider-react\">\r\n            <Carousel\r\n                breakPoints={breakPoints}\r\n                showArrows={true}\r\n                pagination={false}\r\n                focusOnSelect={true}\r\n                renderArrow={arrow}\r\n            >\r\n                {props.media.map((mediaItem, index) => {\r\n                    const mediaElement = React.createElement(\r\n                        mediaItem.dataset.tagtype,\r\n                        Object.assign(\r\n                            {},\r\n                            ...Array.from(\r\n                                mediaItem.attributes,\r\n                                ({ name, value }) => ({ [name]: value }),\r\n                            ),\r\n                        ),\r\n                    );\r\n                    return <div key={index}>{mediaElement}</div>;\r\n                })}\r\n            </Carousel>\r\n        </div>\r\n    );\r\n}\r\nexport default ProductSlider;\r\n","import React, { Fragment } from 'react';\r\nimport Lightbox from 'react-images';\r\nimport ProductSlider from '../Components/ProductSlider';\r\n\r\nconst LightboxImages = props =>\r\n    !props.media || props.media.length < 1 ? (\r\n        <></>\r\n    ) : (\r\n        <>\r\n            <div\r\n                id=\"product-images-slider\"\r\n                className={\r\n                    props.media.length == 1\r\n                        ? 'product-images-container only-one-image'\r\n                        : 'product-images-container'\r\n                }\r\n            >\r\n                {props.media.map((mediaItem, index) => {\r\n                    const mediaElement = React.createElement(\r\n                        mediaItem.dataset.tagtype,\r\n                        Object.assign(\r\n                            {},\r\n                            ...Array.from(\r\n                                mediaItem.attributes,\r\n                                ({ name, value }) => ({ [name]: value }),\r\n                            ),\r\n                        ),\r\n                    );\r\n\r\n                    return (\r\n                        <figure\r\n                            key={index}\r\n                            className=\"product-detail__image-container\"\r\n                        >\r\n                            {mediaElement}\r\n                        </figure>\r\n                    );\r\n                })}\r\n            </div>\r\n            <div id=\"supersized-images\" className=\"supersize-images closed\">\r\n                <div id=\"supersize-closer\" className=\"supersize-closer\">\r\n                    <img src=\"/ui/images/close_black.svg\" alt=\"Close icon\" />\r\n                </div>\r\n                <div className=\"supersize-image-wrapper\">\r\n                    {props.media.map((mediaItem, index) => {\r\n                        const mediaElement = React.createElement(\r\n                            mediaItem.dataset.tagtype,\r\n                            Object.assign(\r\n                                {},\r\n                                ...Array.from(\r\n                                    mediaItem.attributes,\r\n                                    ({ name, value }) => ({ [name]: value }),\r\n                                ),\r\n                            ),\r\n                        );\r\n\r\n                        return (\r\n                            <figure\r\n                                key={index}\r\n                                className=\"product-detail__image-container\"\r\n                            >\r\n                                {mediaElement}\r\n                            </figure>\r\n                        );\r\n                    })}\r\n                </div>\r\n            </div>\r\n            <Lightbox\r\n                showThumbnails={false}\r\n                showImageCount={false}\r\n                {...props}\r\n            />\r\n            <ProductSlider {...props} />\r\n        </>\r\n    );\r\n\r\nexport default LightboxImages;\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport LightboxImages from '../Components/LightboxImages';\r\nimport { setCurrentIndex, show, previous, next } from '../Actions/LightboxImages.action';\r\n\r\nconst LightboxImagesContainer = props => <LightboxImages {...props} />;\r\n\r\nconst mapStateToProps = (state) => {\r\n    return {\r\n        isOpen: state.lightboxImages.visible,\r\n        currentImage: state.lightboxImages.index,\r\n    }\r\n}\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n    return {\r\n        onClose: () => dispatch(show(false)),\r\n        onClickNext: () => dispatch(next()),\r\n        onClickPrev: () => dispatch(previous()),\r\n        onClickThumbnail: (index) => {\r\n            dispatch(show(true));\r\n            dispatch(setCurrentIndex(index));\r\n        },\r\n    }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LightboxImagesContainer);"],"sourceRoot":""}