{"version":3,"sources":["webpack:///./Scripts/components/Svg.js","webpack:///./Scripts/components/CategorySlider.js"],"names":["Svg","_ref","_context","_context2","icon","_ref$extraClass","extraClass","_ref$color","color","_trimInstanceProperty","_concatInstanceProperty","concat","call","length","React","createElement","src","alt","CategorySlider","values","_valuesInstanceProperty","slidesToShowByDefault","onEdgeHit","prevBtnRef","useRef","nextBtnRef","CustomArrow","_ref2","onClick","_ref2$direction","direction","_ref2$extraClass","_ref2$elementRef","elementRef","className","type","ref","settings","onEdge","current","console","log","style","setProperty","onInit","beforeChange","currentSlide","nextSlide","touchThreshold","dots","infinite","speed","prevArrow","nextArrow","slidesToShow","slidesToScroll","rtl","rows","mobileFirst","variableWidth","swipeToSlide","responsive","breakpoint","Slider","_mapInstanceProperty","value","index","key","dangerouslySetInnerHTML","__html","html"],"mappings":"6NAUaA,EAAM,SAAHC,GAAiD,IAAAC,EAAAC,EAApCC,EAAIH,EAAJG,KAAIC,EAAAJ,EAAEK,kBAAU,IAAAD,EAAG,GAAEA,EAAAE,EAAAN,EAAEO,aAAK,IAAAD,EAAG,GAAEA,EAC5CE,IAAAP,EAAAQ,IAAAP,EAAA,aAAAQ,OAAaP,EAAI,MAAAQ,KAAAT,EAAIG,IAAUM,KAAAV,GAM7C,OAJIM,EAAMK,QACK,UAAJF,OAAcH,GAIrBM,IAAAC,cAAA,WACID,IAAAC,cAAA,OAAKC,IAAI,yBAAyBC,IAAI,OC2GnCC,UAxHQ,SAAHjB,GAAmB,IAAbkB,EAAMC,IAAAnB,GACxBoB,EAAwBF,EAAON,OAAS,EAAI,EAAIM,EAAON,OACvDS,GAAY,EAEVC,EAAaC,iBAAO,MACpBC,EAAaD,iBAAO,MAEpBE,EAAc,SAAHC,GAA2E,IAArEC,EAAOD,EAAPC,QAAOC,EAAAF,EAAEG,iBAAS,IAAAD,EAAG,OAAMA,EAAAE,EAAAJ,EAAErB,kBAAU,IAAAyB,EAAG,GAAEA,EAAAC,EAAAL,EAAEM,kBAAU,IAAAD,EAAG,KAAIA,EAClF,OACIlB,IAAAC,cAAA,UAAQmB,UAAS,eAAAvB,OAAiBL,GAC1B6B,KAAK,SACLP,QAASA,EACTQ,IAAKH,GAETnB,IAAAC,cAACf,EAAG,CAACI,KAAK,UAAUE,WAAU,WAAAK,OAAamB,OAoCjDO,EAAW,CACbC,OAhCW,SAACR,GACPP,EAAWgB,SAAYd,EAAWc,UAEvCC,QAAQC,IAAI,iBAAkBX,GAC9BR,GAAY,EACM,UAAdQ,EACAP,EAAWgB,QAAQG,MAAMC,YAAY,UAAW,QAEhDlB,EAAWc,QAAQG,MAAMC,YAAY,UAAW,UAyBpDC,OARW,WACNrB,EAAWgB,SAEhBhB,EAAWgB,QAAQG,MAAMC,YAAY,UAAW,SAMhDE,aAtBY,SAACC,EAAcC,GACtBxB,EAAWgB,SAAYd,EAAWc,UAEvCC,QAAQC,IAAI,oBAAqBK,EAAe,KAAOC,GACnDzB,EACAA,GAAY,GAIhBC,EAAWgB,QAAQG,MAAMC,YAAY,UAAW,SAChDlB,EAAWc,QAAQG,MAAMC,YAAY,UAAW,YAahDK,eAAgB,GAChBC,MAAM,EACNC,UAAU,EACVC,MAAO,IACPC,UAAWtC,IAAAC,cAACW,EAAW,CAACpB,WAAW,aAAa2B,WAAYV,IAC5D8B,UAAWvC,IAAAC,cAACW,EAAW,CAACpB,WAAW,aAAawB,UAAU,QAAQG,WAAYR,IAC9E6B,aAAcjC,EACdkC,eAAgBlC,EAChBmC,KAAK,EACLC,KAAM,EACNC,aAAa,EACbC,eAAe,EACfC,cAAc,EACdC,WAAY,CACR,CACIC,WAAY,IACZzB,SAAU,CACNkB,eAAgB,EAChBD,aAAc,IAGtB,CACIQ,WAAY,IACZzB,SAAU,CACNkB,eAAgB,EAChBD,aAAc,IAGtB,CACIQ,WAAY,IACZzB,SAAU,CACNkB,eAAgB,EAChBD,aAAc,IAGtB,CACIQ,WAAY,IACZzB,SAAU,CACNkB,eAAgB,EAChBD,aAAc,IAGtB,CACIQ,WAAY,KACZzB,SAAU,CACNkB,eAAgB,EAChBD,aAAc,MAM9B,OACIxC,IAAAC,cAACgD,IAAW1B,EACP2B,IAAA7C,GAAMP,KAANO,GAAW,SAAC8C,EAAOC,GAAK,OACrBpD,IAAAC,cAAA,OACIoD,IAAG,SAAAxD,OAAWuD,GACdE,wBAAyB,CACrBC,OAAQJ,EAAMK","file":"18.9207a89c4cb79b913ae2.js","sourcesContent":["import React from 'react';\r\n\r\n/**\r\n *\r\n * @param {string} icon Name of the icon\r\n * @param {string} extraClass Extra class names as a string, no leading/trailing spaces needed.\r\n * @param {string } color see which colors that are available in icons.scss\r\n * @returns {JSX.Element}\r\n * @constructor\r\n */\r\nexport const Svg = function({icon, extraClass = '', color = ''}) {\r\n    let elClass = `icon icon-${icon} ${extraClass}`.trim();\r\n\r\n    if (color.length) {\r\n        elClass += ` icon--${color}`;\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <img src=\"/ui/images/chevron.svg\" alt=\"\"></img>\r\n        </div>        \r\n    );\r\n}","import React, { useRef } from 'react';\r\nimport Slider from 'react-slick';\r\nimport 'slick-carousel/slick/slick.css';\r\nimport 'slick-carousel/slick/slick-theme.css';\r\nimport { Svg } from './Svg';\r\n\r\nconst CategorySlider = ({ values }) => {\r\n    let slidesToShowByDefault = values.length > 3 ? 3 : values.length;\r\n    let onEdgeHit = false;\r\n\r\n    const prevBtnRef = useRef(null);\r\n    const nextBtnRef = useRef(null);\r\n\r\n    const CustomArrow = ({ onClick, direction = 'left', extraClass = '', elementRef = null}) => {\r\n        return (\r\n            <button className={`slick-arrow ${extraClass}`}\r\n                    type=\"button\"\r\n                    onClick={onClick}\r\n                    ref={elementRef}\r\n            >\r\n                <Svg icon=\"chevron\" extraClass={`chevron-${direction}`} />\r\n            </button>\r\n        );\r\n    };\r\n\r\n    const OnEdge = (direction) => {\r\n        if (!prevBtnRef.current || !nextBtnRef.current) return;\r\n\r\n        console.log('edge was hit: ', direction);\r\n        onEdgeHit = true;\r\n        if (direction === 'right') {\r\n            prevBtnRef.current.style.setProperty('display', 'none');\r\n        } else {\r\n            nextBtnRef.current.style.setProperty('display', 'none');\r\n        }\r\n    };\r\n\r\n    const OnSwipe = (currentSlide, nextSlide) => {\r\n        if (!prevBtnRef.current || !nextBtnRef.current) return;\r\n\r\n        console.log('OnSwipe was hit: ', currentSlide + ': ' + nextSlide);\r\n        if (onEdgeHit) {\r\n            onEdgeHit = false;\r\n            return;\r\n        }\r\n\r\n        prevBtnRef.current.style.setProperty('display', 'block');\r\n        nextBtnRef.current.style.setProperty('display', 'block');\r\n    };\r\n\r\n    const OnInit = () => {\r\n        if (!prevBtnRef.current) return;\r\n\r\n        prevBtnRef.current.style.setProperty('display', 'none');\r\n    };\r\n\r\n    const settings = {\r\n        onEdge: OnEdge,\r\n        onInit: OnInit,\r\n        beforeChange: OnSwipe,\r\n        touchThreshold: 75,\r\n        dots: false,\r\n        infinite: false,\r\n        speed: 200,\r\n        prevArrow: <CustomArrow extraClass=\"slick-prev\" elementRef={prevBtnRef}/>,\r\n        nextArrow: <CustomArrow extraClass=\"slick-next\" direction=\"right\" elementRef={nextBtnRef}/>,\r\n        slidesToShow: slidesToShowByDefault,\r\n        slidesToScroll: slidesToShowByDefault,\r\n        rtl: false,\r\n        rows: 1,\r\n        mobileFirst: false,\r\n        variableWidth: true,\r\n        swipeToSlide: true,\r\n        responsive: [\r\n            {\r\n                breakpoint: 300,\r\n                settings: {\r\n                    slidesToScroll: 1,\r\n                    slidesToShow: 1,\r\n                },\r\n            },\r\n            {\r\n                breakpoint: 400,\r\n                settings: {\r\n                    slidesToScroll: 1,\r\n                    slidesToShow: 1,\r\n                },\r\n            },\r\n            {\r\n                breakpoint: 500,\r\n                settings: {\r\n                    slidesToScroll: 1,\r\n                    slidesToShow: 2,\r\n                },\r\n            },\r\n            {\r\n                breakpoint: 767,\r\n                settings: {\r\n                    slidesToScroll: 2,\r\n                    slidesToShow: 4,\r\n                },\r\n            },\r\n            {\r\n                breakpoint: 1024,\r\n                settings: {\r\n                    slidesToScroll: 2,\r\n                    slidesToShow: 5,\r\n                },\r\n            },\r\n        ],\r\n    };\r\n\r\n    return (\r\n        <Slider {...settings}>\r\n            {values.map((value, index) => (\r\n                <div\r\n                    key={`figure${index}`}\r\n                    dangerouslySetInnerHTML={{\r\n                        __html: value.html,\r\n                    }}\r\n                ></div>\r\n            ))}\r\n        </Slider>\r\n    );\r\n};\r\n\r\nexport default CategorySlider;\r\n"],"sourceRoot":""}