{"version":3,"sources":["webpack:///./Scripts/Components/ProductsCarousel.js"],"names":["ProductsCarousel","_React$PureComponent","props","_this","_callSuper","ref","React","createRef","_inherits","key","value","window","__litium","loadBuyButtons","this","current","loadSalesInput","loadWishlistSelect","loadWishlistFavorites","_this$props","title","layout","carouselId","titleToId","replaceAll","dataSlider","productsCarousel","itemsOnDesktop","undefined","itemsOnBigDesktop","createElement","className","concat","data-list-id","Slider","autoplaySpeed","arrows","dots","infinite","swipeToSlide","slidesToShow","speed","responsive","breakpoint","settings","map","i","index","dangerouslySetInnerHTML","__html","PureComponent"],"mappings":"uhDA0CMA,GAAgBC,IACpB,SAAAD,EAAYE,G,GAAO,gBAAAF,EAEc,OAD7BG,EAAAC,EAAA,KAAAJ,EAAA,CAAME,EAAK,GACNG,IAAMC,IAAMC,UAAU,EAAEJ,E,wDACjC,CAACK,I,IAAAR,E,4GAAA,O,6JAAAA,G,EAAA,EAAAS,IAAA,oBAAAC,MAED,WACEC,OAAOC,SAASC,eAAeC,KAAKT,IAAIU,OAAO,EAC/CJ,OAAOC,SAASI,eAAeF,KAAKT,IAAIU,OAAO,EAC/CJ,OAAOC,SAASK,mBAAmB,EACnCN,OAAOC,SAASM,sBAAsB,CACxC,CAAC,GAAAT,IAAA,SAAAC,MAED,WAAS,IAAAS,EAC+BL,KAAKZ,MAAnCkB,EAAKD,EAALC,MAAOC,EAAMF,EAANE,OAAQC,EAAUH,EAAVG,WAEjBC,EAAYH,EAAMI,WAAW,YAAa,EAAE,EAC5CC,EAAad,OAAOC,SAASc,iBAAiBH,GAC9CI,EAA4B,gBAAXN,EAA2B,EAAIO,OAChDC,EAA+B,gBAAXR,EAA2B,EAAIO,OAEzD,OACEtB,IAAAwB,cAAA,OAAKC,UAAU,iCAAiC,EAC9CzB,IAAAwB,cAAA,OAAKC,UAAU,KAAK,EAClBzB,IAAAwB,cAAA,OAAKC,UAAU,+CAA+C,EAC5DzB,IAAAwB,cAAA,MAAIC,UAAU,gCAAgC,EAAEX,CAAU,CACvD,EACLd,IAAAwB,cAAA,OACEC,UAAS,2CAAAC,OACPX,EAAS,2BAA6BA,EAAS,EAAE,EAEnDhB,IAAKS,KAAKT,IACV4B,eAAcX,CAAW,EAEzBhB,IAAAwB,cAACI,IAvE4C,CAExDC,cAAe,IACfC,OAAQ,GACRC,KAAM,GACNC,SAAU,GACVC,aAAc,GACdC,aAgEgDX,GAhEb,EACnCY,MAAO,IACPC,WAAY,CACV,CACEC,WAAY,KACZC,SAAU,CACRJ,aA0D0Bb,GA1DM,CAClC,CACF,EACA,CACEgB,WAAY,IACZC,SAAU,CACRJ,aAAc,CAChB,CACF,EACA,CACEG,WAAY,IACZC,SAAU,CACRJ,aAAc,CAChB,CACF,EACA,CACEG,WAAY,IACZC,SAAU,CACRJ,aAAc,CAChB,CACF,EAEH,EAsCaf,GAAcA,EAAWoB,IAAI,SAACC,EAAGC,GAChC,OACEzC,IAAAwB,cAAA,OAAKrB,IAAG,SAAAuB,OAAWe,CAAK,EAAIC,wBAAyB,CAAEC,OAAQH,CAAE,CAAE,CAAO,CAC9E,CAAC,CACO,CACL,CACF,CACF,CAET,CAAC,K,+EAAA,GA7C4BxC,IAAM4C,aAAa,EA+CnClD,W","file":"11.js","sourcesContent":["\r\nimport React from 'react';\r\nimport Slider from \"react-slick\";\r\nimport \"slick-carousel/slick/slick.css\";\r\n\r\nconst settings = (itemsOnDesktop, itemsOnBigDesktop) => ({\r\n  // could be customizable on BE\r\n autoplaySpeed: 1000,\r\n arrows: true,\r\n dots: true,\r\n infinite: true,\r\n swipeToSlide: true,\r\n slidesToShow: itemsOnBigDesktop || 5,\r\n speed: 1000,\r\n responsive: [\r\n   {\r\n     breakpoint: 1800,\r\n     settings: {\r\n       slidesToShow: itemsOnDesktop || 4,\r\n     }\r\n   },\r\n   {\r\n     breakpoint: 980,\r\n     settings: {\r\n       slidesToShow: 3,\r\n     }\r\n   },\r\n   {\r\n     breakpoint: 640,\r\n     settings: {\r\n       slidesToShow: 2,\r\n     }\r\n   },\r\n   {\r\n     breakpoint: 480,\r\n     settings: {\r\n       slidesToShow: 1,\r\n     }\r\n   }\r\n ]\r\n});\r\n\r\nclass ProductsCarousel extends React.PureComponent {\r\n  constructor(props) {\r\n      super(props);\r\n      this.ref = React.createRef();\r\n  }\r\n\r\n  componentDidMount() {\r\n    window.__litium.loadBuyButtons(this.ref.current);\r\n    window.__litium.loadSalesInput(this.ref.current);\r\n    window.__litium.loadWishlistSelect();\r\n    window.__litium.loadWishlistFavorites();\r\n  }\r\n\r\n  render() {\r\n    const { title, layout, carouselId } = this.props;\r\n    // TODO: titleToId replace with some block/component ID\r\n    const titleToId = title.replaceAll(/[\\W_0-9]/g, '');\r\n    const dataSlider = window.__litium.productsCarousel[titleToId];\r\n    const itemsOnDesktop = layout === 'nextToImage' ? 3 : undefined;\r\n    const itemsOnBigDesktop = layout === 'nextToImage' ? 3 : undefined;\r\n    \r\n    return (\r\n      <div className=\"product-carousel-block__wrapper\">\r\n        <div className=\"row\">\r\n          <div className=\"columns small-12 product-carousel-block__info\">\r\n            <h3 className=\"product-carousel-block__header\">{title}</h3>\r\n          </div>\r\n          <div\r\n            className={`columns small-12 product-carousel-block ${\r\n              layout ? \"product-carousel-block--\" + layout : \"\"\r\n            }`}\r\n            ref={this.ref}\r\n            data-list-id={carouselId}\r\n          >\r\n            <Slider {...settings(itemsOnDesktop, itemsOnBigDesktop)}> \r\n                \r\n            {dataSlider && dataSlider.map((i, index) => {\r\n              return (\r\n                <div key={`figure${index}`} dangerouslySetInnerHTML={{ __html: i }} ></div>)\r\n            })}\r\n            </Slider>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n};\r\nexport default ProductsCarousel;\r\n"],"sourceRoot":""}