{"version":3,"sources":["components/year-review/components/list/YRListItem.jsx","components/year-review/components/list/YRList.jsx"],"names":["YRListItem","item","style","useState","tooltipVisible","setTooltipVisible","unit","icons","flags","valueColor","tooltip","formattedValue","Number","isInteger","values","FormatGraphDataService","addCommas","twoDecimalPlaces","hasTooltip","undefined","hasEmptyTooltip","className","viewBox","focusable","xlinkHref","icon","src","alt","Manager","Reference","ref","onMouseOver","onFocus","onMouseOut","onBlur","type","name","Popper","placement","offset","popperProps","dangerouslySetInnerHTML","__html","color","defaultProps","YRList","data","sortByValue","numberOfItems","finalData","map","element","index"],"mappings":"kKAQMA,EAAa,SAAC,GAAqB,IAAnBC,EAAkB,EAAlBA,KAAMC,EAAY,EAAZA,MACxB,EAA4CC,oBAAS,GAArD,mBAAOC,EAAP,KAAuBC,EAAvB,KAGIC,EAKAJ,EALAI,KACAC,EAIAL,EAJAK,MACAC,EAGAN,EAHAM,MACAC,EAEAP,EAFAO,WACAC,EACAR,EADAQ,QAGEC,EAAiBC,OAAOC,UAAUZ,EAAKa,QACvCC,IAAuBC,UAAUf,EAAKa,QACtCC,IAAuBE,iBAAiBhB,EAAKa,QAE7CI,EAAaR,QAA4BS,IAAjBlB,EAAKS,QAC7BU,EAAkBV,QAA4BS,IAAjBlB,EAAKS,QAExC,OACI,sBACIW,UAAU,eADd,UAIMd,IAAUC,GACR,qBAAKa,UAAU,qBAAqBC,QAAQ,YAAYC,UAAU,QAAlE,SACI,qBAAKC,UAAS,mBAAcvB,EAAKwB,KAAOxB,EAAKwB,KAAO,kBAG3DjB,GACG,qBAAKa,UAAU,qBAAf,SACI,qBACIK,IAAG,sFAAiFzB,EAAKwB,KAAtF,QACHE,IAAI,OACJN,UAAU,6BAItB,sBAAKA,UAAU,qBAAf,UACKH,GACG,eAACU,EAAA,EAAD,WACI,cAACC,EAAA,EAAD,UACK,gBAAGC,EAAH,EAAGA,IAAH,OACG,yBACIT,UAAU,wBACV,eAAcpB,EAAKS,QACnBqB,YAAa,kBAAM1B,GAAkB,IACrC2B,QAAS,kBAAM3B,GAAkB,IACjC4B,WAAY,kBAAM5B,GAAkB,IACpC6B,OAAQ,kBAAM7B,GAAkB,IAChC8B,KAAK,SACLL,IAAKA,EART,UAWK7B,EAAKmC,KACL1B,GACG,sBAAMW,UAAU,yBAAhB,iBAbR,UASYpB,EAAKmC,KATjB,eAmBPhC,GACG,cAACiC,EAAA,EAAD,CACIC,UAAU,YACVC,OAAO,QAFX,SAIK,SAAAC,GAAW,OACR,qBACInB,UAAU,sBACVS,IAAKU,EAAYV,IACjB5B,MAAOsC,EAAYtC,MACnB,iBAAgBsC,EAAYF,UAJhC,SAMI,4BAAIrC,EAAKS,kBAOhCU,GACG,qBAAKC,UAAU,iCAAf,SACKpB,EAAKmC,QAGZlB,IAAeE,GACb,qBAAKC,UAAU,qBAAf,SACI,sBAAMoB,wBAAyB,CAAEC,OAAQzC,EAAKmC,UAGtD,sBACIf,UAAU,sBACVnB,MAAOO,EAAa,CAAEkC,MAAOlC,GAAe,GAFhD,UAKKE,EACAL,IAHIL,EAAKa,aAxEbb,EAAKmC,OAkFtBpC,EAAW4C,aAAe,CACtB1C,MAAO,IAQIF,QChHT6C,EAAS,SAAC,GAAqB,IAAnBC,EAAkB,EAAlBA,KAAM5C,EAAY,EAAZA,MAEhBiC,EAGAjC,EAHAiC,KACAY,EAEA7C,EAFA6C,YAFJ,EAII7C,EADA8C,qBAHJ,MAGoB,GAHpB,EAMMC,EAAYF,EAAchC,IAAuBgC,YAAYD,GAAQA,EAE3E,OACI,qBAAKzB,UAAS,iBAAYc,EAAI,cAAUA,GAAS,IAAnC,OAAwCa,EAAgB,GAAK,eAAiB,IAA5F,SACI,qBAAK3B,UAAU,iBAAf,SACK4B,EAAUC,KAAI,SAACC,EAASC,GACrB,QAAIA,EAAQJ,IAKR,cAAC,EAAD,CACI/C,KAAMkD,EACNjD,MAAOA,GACFiD,EAAQf,cASzCS,EAAOD,aAAe,CAClB1C,MAAO,IAQI2C","file":"js/38.e63f9814.chunk.js","sourcesContent":["/* eslint-disable react/no-danger */\n\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Manager, Reference, Popper } from 'react-popper';\n\nimport FormatGraphDataService from 'components/year-review/services/FormatGraphDataService';\n\nconst YRListItem = ({ item, style }) => {\n    const [tooltipVisible, setTooltipVisible] = useState(false);\n\n    const {\n        unit,\n        icons,\n        flags,\n        valueColor,\n        tooltip,\n    } = style;\n\n    const formattedValue = Number.isInteger(item.values)\n        ? FormatGraphDataService.addCommas(item.values)\n        : FormatGraphDataService.twoDecimalPlaces(item.values);\n\n    const hasTooltip = tooltip && item.tooltip !== undefined;\n    const hasEmptyTooltip = tooltip && item.tooltip === undefined;\n\n    return (\n        <div\n            className=\"yr-list-item\"\n            key={item.name}\n        >\n            {(icons && !flags) && (\n                <svg className=\"yr-list-item__icon\" viewBox=\"0 0 36 36\" focusable=\"false\">\n                    <use xlinkHref={`#yr-icon-${item.icon ? item.icon : 'globe-blue'}`} />\n                </svg>\n            )}\n            {flags && (\n                <div className=\"yr-list-item__flag\">\n                    <img\n                        src={`/themes/custom/drupack/resources/components/year-review/assets/images/flags/${item.icon}.svg`}\n                        alt=\"Flag\"\n                        className=\"yr-list-item__flag-img\"\n                    />\n                </div>\n            )}\n            <div className=\"yr-list-item__info\">\n                {hasTooltip && (\n                    <Manager>\n                        <Reference>\n                            {({ ref }) => (\n                                <button\n                                    className=\"yr-list-item__tooltip\"\n                                    data-tooltip={item.tooltip}\n                                    onMouseOver={() => setTooltipVisible(true)}\n                                    onFocus={() => setTooltipVisible(true)}\n                                    onMouseOut={() => setTooltipVisible(false)}\n                                    onBlur={() => setTooltipVisible(false)}\n                                    type=\"button\"\n                                    ref={ref}\n                                    key={`${item.name}-popper`}\n                                >\n                                    {item.name}\n                                    {tooltip && (\n                                        <span className=\"yr-list-item__question\">?</span>\n                                    )}\n                                </button>\n                            )}\n                        </Reference>\n\n                        {tooltipVisible && (\n                            <Popper\n                                placement=\"top-start\"\n                                offset=\"0, 20\"\n                            >\n                                {popperProps => (\n                                    <div\n                                        className=\"yr-tooltip is-small\"\n                                        ref={popperProps.ref}\n                                        style={popperProps.style}\n                                        data-placement={popperProps.placement}\n                                    >\n                                        <p>{item.tooltip}</p>\n                                    </div>\n                                )}\n                            </Popper>\n                        )}\n                    </Manager>\n                )}\n                {hasEmptyTooltip && (\n                    <div className=\"yr-list-item__tooltip is-empty\">\n                        {item.name}\n                    </div>\n                )}\n                {!hasTooltip && !hasEmptyTooltip && (\n                    <div className=\"yr-list-item__name\">\n                        <span dangerouslySetInnerHTML={{ __html: item.name }} />\n                    </div>\n                )}\n                <div\n                    className=\"yr-list-item__value\"\n                    style={valueColor ? { color: valueColor } : {}}\n                    key={item.values}\n                >\n                    {formattedValue}\n                    {unit}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nYRListItem.defaultProps = {\n    style: {},\n};\n\nYRListItem.propTypes = {\n    item: PropTypes.objectOf(PropTypes.any).isRequired,\n    style: PropTypes.objectOf(PropTypes.any),\n};\n\nexport default YRListItem;\n","/* eslint-disable react/no-danger */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport FormatGraphDataService from 'components/year-review/services/FormatGraphDataService';\nimport YRListItem from './YRListItem';\n\nconst YRList = ({ data, style }) => {\n    const {\n        type,\n        sortByValue,\n        numberOfItems = 18,\n    } = style;\n\n    const finalData = sortByValue ? FormatGraphDataService.sortByValue(data) : data;\n\n    return (\n        <div className={`yr-list${type ? ` is-${type}` : \"\"}${numberOfItems > 20 ? ' is-overflow' : ''}`}>\n            <div className=\"yr-list__inner\">\n                {finalData.map((element, index) => {\n                    if (index > numberOfItems) {\n                        return false;\n                    }\n\n                    return (\n                        <YRListItem\n                            item={element}\n                            style={style}\n                            key={element.name}\n                        />\n                    );\n                })}\n            </div>\n        </div>\n    );\n};\n\nYRList.defaultProps = {\n    style: {},\n};\n\nYRList.propTypes = {\n    data: PropTypes.arrayOf(PropTypes.any).isRequired,\n    style: PropTypes.objectOf(PropTypes.any),\n};\n\nexport default YRList;\n"],"sourceRoot":""}