{"version":3,"sources":["webpack:///./Scripts/Components/SliderArrows.js","webpack:///./Scripts/Components/ProductSlider.js"],"names":["className","onLeftClick","color","showBackground","onRightClick","leftEnabled","rightEnabled","leftVisible","rightVisible","size","onClick","properties","ShouldShow","property","ProductSlider","props","products","isMobile","useIsMobile","useState","swiperInstance","setSwiperInstance","swiperCentered","setSwiperCentered","length","show","settings","spaceBetween","slidesPerView","freeModeSticky","resistanceRatio","loop","onSwiper","instance","virtualSize","onResize","breakpoints","0","centeredSlides","300","768","1440","SLIDES_PER_VIEW","product","i","key","gtmProduct","class","href","url","src","image1","image2","brand","styleName","name","campaignPrice","price","discountPercent","dangerouslySetInnerHTML","__html","content","description","slidePrev","slideNext","realIndex"],"mappings":"kKAGe,4BAAGA,iBAAH,MAAe,GAAf,EAAmBC,EAAnB,EAAmBA,YAAaC,EAAhC,EAAgCA,MAAhC,IAAuCC,sBAAvC,SAA8DC,EAA9D,EAA8DA,aAA9D,IAA4EC,mBAA5E,aAAgGC,oBAAhG,aAAqHC,mBAArH,aAAyIC,oBAAzI,SAA8JC,EAA9J,EAA8JA,KAA9J,OAA0K,oCACpLF,GAAe,yBAAKP,UAAS,gDAAqCA,EAArC,aAAmDG,EAAkD,GAAjC,iCAAuCO,QAASL,GAAeJ,GAC7J,kBAAC,IAAD,CAAWQ,KAAMA,EAAMP,MAAOA,KAEjCM,GAAgB,yBAAKR,UAAS,iDAAsCA,EAAtC,aAAoDG,EAAmD,GAAlC,iCAAwCO,QAASJ,GAAgBF,GACjK,kBAAC,IAAD,CAAYK,KAAMA,EAAMP,MAAOA,Q,sMCJvC,qCAEA,IACIS,EAAa,KAEjB,SAASC,EAAWC,GAChB,YAA4B,IAAdF,GAA2C,MAAdA,GAAsB,IAAAA,GAAU,KAAVA,EAAoBE,GA4F1EC,UAzFO,SAAAC,GAAS,IACnBC,EAAaD,EAAbC,SAEFC,EAAWC,cAHU,EAIiBC,qBAJjB,WAIpBC,EAJoB,KAIJC,EAJI,OAKiBF,qBALjB,WAKpBG,EALoB,KAKJC,EALI,KAOX,MAAZP,GAAoBA,EAASQ,OAAS,IACtCb,EAAaK,EAAS,GAAGS,MAG7B,IAiCMC,EAAW,CACbC,aAAc,EACdC,cArDgB,EAsDhBC,gBAAgB,EAChBC,gBAAiB,EACjBC,MAAM,EACNC,SAAU,SAAAC,GACNZ,EAAkBY,GAClBV,EAAkBU,EAASC,aAAeD,EAASxB,OAEvD0B,SAAU,SAAAF,GACNV,EAAkBU,EAASC,aAAeD,EAASxB,OAEvD2B,YAAa,CACTC,EAAG,CACCT,cAAe,IACfU,gBAAgB,GAEpBC,IAAK,CACDX,cAAe,KAEnBY,IAAK,CACDZ,cAzEQ,EA0ERU,gBAAgB,GAEpBG,KAAM,CACFb,cAAec,EACfJ,gBAAgB,KAK5B,OAAO,yBAAKtC,UAAWsB,EAAiB,2BAA6B,IACjE,kBAAC,IAAWI,EAlEc,IAAAV,GAAQ,KAARA,GAAa,SAAC2B,EAASC,GAAV,OACvC,kBAAC,IAAD,CAAa5C,UAAU,sBAAsB6C,IAAKD,GAC7CD,EAAQG,YAAc,+BAAWC,MAAM,eAAe,IAAeJ,EAAQG,aAC9E,uBAAGE,KAAML,EAAQM,IAAMN,EAAQM,IAAM,IACjC,gCACI,yBAAKC,IAAKP,EAAQQ,OAAQnD,UAAU,WAClCiB,GAAY0B,EAAQS,QAAU,yBAAKF,IAAKP,EAAQS,OAAQpD,UAAU,YAExE,iCACI,yBAAKA,UAAU,+BACX,6BACKY,EAAW,UAAY,0BAAMZ,UAAU,8BAA8B2C,EAAQU,OAC7EzC,EAAW,SAAW,0BAAMZ,UAAU,6BAA6B2C,EAAQW,WAAaX,EAAQY,QAGxG3C,EAAW,UAAY,yBAAKZ,UAAU,8BAClC2C,EAAQa,cAAgBb,EAAQa,cAAgBb,EAAQc,MACxDd,EAAQa,eAAiB,oCACtB,0BAAMxD,UAAU,kCACX2C,EAAQc,OAEb,0BAAMzD,UAAU,mCACX2C,EAAQe,mBAGff,EAAQc,OAAS,0BAAME,wBAAyB,CAACC,OAAQ,aAE/D,0BAAMC,QAASlB,EAAQmB,oBAyC/B,kBAAC,IAAD,CACI7D,YAAa,kBAAMmB,GAAkBA,EAAe2C,aACpD3D,aAAc,kBAAMgB,GAAkBA,EAAe4C,aACrDxD,aAAc,kBAAMY,GAAkBA,EAAe6C,WAAcjD,EAASQ,OAAS,EAzF7E,GA0FRjB,YAAa,kBAAMa,GAAkBA,EAAe6C,UAAY","file":"25.57c014ad73a156f8ee8f.js","sourcesContent":["import { CaretLeft, CaretRight } from \"phosphor-react\"\r\nimport React from \"react\"\r\n\r\nexport default ({ className = \"\", onLeftClick, color, showBackground = true, onRightClick, leftEnabled = true, rightEnabled = true, leftVisible = true, rightVisible = true, size }) => (<>\r\n    {leftVisible && <div className={`slider-arrow slider-arrow--left ${className} ${!showBackground ? \"slider-arrow--hide-background\": \"\"}`} onClick={leftEnabled && onLeftClick}>\r\n        <CaretLeft size={size} color={color} />\r\n    </div>}\r\n    {rightVisible && <div className={`slider-arrow slider-arrow--right ${className} ${!showBackground ? \"slider-arrow--hide-background\" : \"\"}`} onClick={rightEnabled && onRightClick}>\r\n        <CaretRight size={size} color={color} />\r\n    </div>}\r\n</>)","import React, { useEffect, useState } from \"react\"\r\nimport SliderArrows from \"./SliderArrows\"\r\nimport { Swiper, SwiperSlide } from 'swiper/react';\r\nimport useIsMobile from \"../Hooks/useIsMobile\";\r\nimport('swiper/swiper.scss');\r\n\r\nconst SLIDES_PER_VIEW = 4\r\nvar properties = null;\r\n\r\nfunction ShouldShow(property) {\r\n    return typeof properties != 'undefined' && properties != null && properties.includes(property);\r\n}\r\n\r\nconst ProductSlider = props => {\r\n    const { products } = props\r\n\r\n    const isMobile = useIsMobile()\r\n    const [swiperInstance, setSwiperInstance] = useState()\r\n    const [swiperCentered, setSwiperCentered] = useState()\r\n\r\n    if (products != null && products.length > 0){\r\n        properties = products[0].show;\r\n    }\r\n\r\n    const getProductCards = () => products.map((product, i) => \r\n        <SwiperSlide className=\"product-slider-card\" key={i}>\r\n            {product.gtmProduct && <json-data class=\"gtm-product\">{JSON.stringify(product.gtmProduct)}</json-data>}\r\n            <a href={product.url ? product.url : \"\"}>\r\n                <figure>\r\n                    <img src={product.image1} className=\"first\" />\r\n                    {!isMobile && product.image2 && <img src={product.image2} className=\"second\" />}\r\n                </figure>\r\n                <article>\r\n                    <div className=\"product-slider-card__header\">\r\n                        <div>\r\n                            {ShouldShow(\"brand\") && <span className=\"product-slider-card__brand\">{product.brand}</span>}\r\n                            {ShouldShow(\"name\") && <span className=\"product-slider-card__name\">{product.styleName || product.name}</span>}\r\n                        </div>\r\n                    </div>\r\n                    {ShouldShow(\"price\") && <div className=\"product-slider-card__price\">\r\n                        {product.campaignPrice ? product.campaignPrice : product.price}\r\n                        {product.campaignPrice && <>\r\n                            <span className=\"product-slider-card__old-price\">\r\n                                {product.price}\r\n                            </span>\r\n                            <span className=\"product-slider-card__amount-off\">\r\n                                {product.discountPercent}\r\n                            </span>\r\n                        </>}\r\n                        {!product.price && <span dangerouslySetInnerHTML={{__html: \"&nbsp;\"}}></span>}\r\n                    </div>}\r\n                    <meta content={product.description} />\r\n                </article>\r\n            </a>\r\n        </SwiperSlide>\r\n    )\r\n\r\n    const settings = {\r\n        spaceBetween: 1,\r\n        slidesPerView: SLIDES_PER_VIEW,\r\n        freeModeSticky: true,\r\n        resistanceRatio: 0,\r\n        loop: true,\r\n        onSwiper: instance => {\r\n            setSwiperInstance(instance)\r\n            setSwiperCentered(instance.virtualSize <= instance.size)\r\n        },\r\n        onResize: instance => {\r\n            setSwiperCentered(instance.virtualSize <= instance.size)\r\n        },\r\n        breakpoints: {\r\n            0: {\r\n                slidesPerView: 1.2,\r\n                centeredSlides: true,\r\n            },\r\n            300: {\r\n                slidesPerView: 2.2,\r\n            },\r\n            768: {\r\n                slidesPerView: SLIDES_PER_VIEW,\r\n                centeredSlides: false,\r\n            },\r\n            1440: {\r\n                slidesPerView: SLIDES_PER_VIEW+1,\r\n                centeredSlides: false,\r\n            }\r\n        } \r\n    }\r\n\r\n    return <div className={swiperCentered ? \"product-slider--centered\" : \"\"}>\r\n        <Swiper {...settings}>\r\n            {getProductCards()}\r\n            <SliderArrows \r\n                onLeftClick={() => swiperInstance && swiperInstance.slidePrev()} \r\n                onRightClick={() => swiperInstance && swiperInstance.slideNext()} \r\n                rightVisible={() => swiperInstance && swiperInstance.realIndex <= (products.length - 1 - SLIDES_PER_VIEW)}\r\n                leftVisible={() => swiperInstance && swiperInstance.realIndex > 0}\r\n            />\r\n        </Swiper>\r\n    </div>\r\n}\r\n\r\nexport default ProductSlider"],"sourceRoot":""}