{"version":3,"file":"static/js/EditorialSection.e58bf946.js","mappings":"+TAQO,MAAMA,GAAYC,EAAAA,EAAAA,QAAOC,EAAAA,IAAcC,WAAA,CAAAC,YAAA,gBAArBH,CAAqB,0PACxCI,EAAAA,GAESC,IAAM,eAAgB,CAC7BC,KAAM,MAIRD,IAAM,eAAgB,CACpBC,MAAMC,EAAAA,EAAAA,KAAG,iCAKXC,EAAAA,GAAGC,OAMCJ,IAAM,eAAgB,CACpBC,MAAMC,EAAAA,EAAAA,KAAG,8BAMfC,EAAAA,GAAGE,OACCL,IAAM,eAAgB,CACpBC,MAAMC,EAAAA,EAAAA,KAAG,wDAMfC,EAAAA,GAAGG,QAECN,IAAM,eAAgB,CACpBC,MAAMC,EAAAA,EAAAA,KAAG,iFAQRK,EAAUZ,EAAAA,OAAOa,GAAEX,WAAA,CAAAC,YAAA,gBAATH,CAAS,yPAC1Bc,EAAAA,GAKAT,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,2DAMZF,IAAM,eAAgB,CACpBC,MAAMC,EAAAA,EAAAA,KAAG,yBAKXC,EAAAA,GAAGC,OAEcJ,IAAM,eAAgB,CACjCC,KAAM,yBAERD,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,0CAOhBC,EAAAA,GAAGG,QAEcN,IAAM,eAAgB,CACjCC,KAAM,yBAERD,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,0CAQTS,EAAehB,EAAAA,OAAOiB,EAACf,WAAA,CAAAC,YAAA,gBAARH,CAAQ,yOAC9BkB,EAAAA,GAKAV,EAAAA,GAAGC,OAECJ,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,yCAMhBC,EAAAA,GAAGE,OAEcL,IAAM,eAAgB,CACjCC,KAAM,yBAERD,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,yCAMhBC,EAAAA,GAAGG,QAEcN,IAAM,eAAgB,CACjCC,KAAM,yBAERD,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,0CAOTY,EAAOnB,EAAAA,OAAOoB,IAAGlB,WAAA,CAAAC,YAAA,gBAAVH,CAAU,6JAGxBQ,EAAAA,GAAGC,OAECJ,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,yCAMhBC,EAAAA,GAAGE,OACcL,IAAM,eAAgB,CACjCC,KAAM,yBAIZE,EAAAA,GAAGG,QAEcN,IAAM,eAAgB,CACjCC,KAAM,yBAERD,IAAM,gBAAiB,CACrBU,OAAOR,EAAAA,EAAAA,KAAG,0CAOTc,EAAWrB,EAAAA,OAAOoB,IAAGlB,WAAA,CAAAC,YAAA,gBAAVH,CAAU,uGAM5BK,IAAM,WAAY,CAChBC,MAAMC,EAAAA,EAAAA,KAAG,mBACMe,GAAUA,EAAMjB,MAAMkB,mBAIvClB,IAAM,WAAY,CAChBmB,OAAOjB,EAAAA,EAAAA,KAAG,2HASLkB,EAAwBzB,EAAAA,OAAOoB,IAAGlB,WAAA,CAAAC,YAAA,gBAAVH,CAAU,kNAMzCQ,EAAAA,GAAGC,OAIHD,EAAAA,GAAGG,SAKIe,EAA0B1B,EAAAA,OAAOoB,IAAGlB,WAAA,CAAAC,YAAA,gBAAVH,CAAU,gJAG3CQ,EAAAA,GAAGC,OAIHD,EAAAA,GAAGE,OAEcL,IAAM,eAAgB,CACjCC,KAAM,eAIZE,EAAAA,GAAGG,QAEcN,IAAM,eAAgB,CACjCC,KAAM,gB,eCtMlB,MAAMqB,EAAmBA,EACrBC,UACAC,eACAC,WACAC,gBACAC,aACAC,aACA5B,QACA6B,eAAe,QACfC,cACAC,gBAAgB,OAChBC,WACwC,IAADC,EACvC,MAAMC,GAAeC,EAAAA,EAAAA,MAEdC,EAAUC,IAAeC,EAAAA,EAAAA,WAAS,IAClCpB,EAAgBqB,IAAqBD,EAAAA,EAAAA,UAAS,GAC/CE,EAAqBJ,EACjB,OAAJJ,QAAI,IAAJA,OAAI,EAAJA,EAAMS,aACF,OAAJT,QAAI,IAAJA,OAAI,EAAJA,EAAMU,aACNC,GAAaC,EAAAA,EAAAA,QAAuB,MACpCC,GAAgBC,EAAAA,EAAAA,OAEtBC,EAAAA,EAAAA,YAAU,KACFJ,EAAWK,SACXT,EAAkBI,EAAWK,QAAQC,aACzC,GACD,CAAmB,QAAnBhB,EAACU,EAAWK,eAAO,IAAAf,OAAA,EAAlBA,EAAoBgB,eAExB,MAUMC,GAAeC,EAAAA,EAAAA,YAAWC,EAAAA,cAGhC,OAFKpD,IAAOA,EAASkD,GAAgBA,EAAalD,OAAU,cAGxDqD,EAAAA,EAAAA,KAACC,EAAAA,EAAO,CAACtD,MAAOA,EAAOuD,WAAW,SAAQC,UACtCH,EAAAA,EAAAA,KAACI,EAAAA,cAAa,CACVzD,MAAO,CACH+B,cAAeA,EACfK,SAAUA,EACVlB,eAAgBA,GAClBsC,UAEFE,EAAAA,EAAAA,MAAChE,EAAS,CAAkBiE,GAAI/B,EAAW4B,SAAA,EACrCtB,GAAgBX,KACd8B,EAAAA,EAAAA,KAAC9C,EAAO,KACAqD,EAAAA,EAAAA,IAAkB,WACtBC,wBAAyB,CAAEC,OAAQvC,GAAW,OAGpDW,GAAgBV,KACd6B,EAAAA,EAAAA,KAAC1C,EAAY,KACLiD,EAAAA,EAAAA,IAAkB,gBACtBC,wBAAyB,CACrBC,OAAQtC,GAAgB,OAIlCU,GAAgBT,KACd4B,EAAAA,EAAAA,KAACvC,EAAI,KAAK8C,EAAAA,EAAAA,IAAkB,YAAWJ,UACnCH,EAAAA,EAAAA,KAACU,EAAAA,EAAS,CACNC,QAASvC,EACTwC,SAAS,WACTjE,MAAOA,EACP6B,aAAcA,EACdC,YAAaA,EACboC,eAAe,OAIzBhC,GAAiBT,GAAYC,KAC3BgC,EAAAA,EAAAA,MAAC5C,EAAI,KAAK8C,EAAAA,EAAAA,IAAkB,iBAAgBJ,SAAA,EACxCH,EAAAA,EAAAA,KAACrC,EAAQ,CAACmD,IAAKxB,EAAWa,UACtBH,EAAAA,EAAAA,KAACU,EAAAA,EAAS,CACNC,QAAStC,EACTuC,SAAS,gBACTjE,MAAOA,EACP6B,aAAcA,EACdC,YAAaA,EACboC,eAAe,OAGvBb,EAAAA,EAAAA,KAACjC,EAAqB,CAAAoC,UAClBH,EAAAA,EAAAA,KAAChC,EAAuB,CAAAmC,UACpBH,EAAAA,EAAAA,KAACe,EAAAA,QAAM,CACHC,QAAUC,GAhEzBA,KACjBA,EAAMC,iBACN1B,EAAc,CACVyB,MAAO,qBACPE,WAAYhC,EACZiC,iBAAkBlD,GAAW,cAEjCc,GAAaD,EAAS,EAyD8BsC,CAAYJ,GAChC,gBAAelC,EACfuC,KACIvC,EACM,eACA,iBAEVN,YAAaA,EACb8C,UAAU,EACVC,QAAQ,SAAQrB,SAEfhB,aArDTb,MA6Dd,EAIlB,MAAemD,EAAAA,KAAWxD,E","sources":["components/EditorialSection/EditorialSection.styled.ts","components/EditorialSection/EditorialSection.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport { Container as GridContainer } from \"style/components/Page\";\nimport { styleBodyLAlt, styleHeadingXL } from \"style/components/Typography\";\nimport { columnGap } from \"style/grid\";\nimport { MQ } from \"style/mediaQueries\";\n\nexport const Container = styled(GridContainer)`\n    ${columnGap}\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    padding: ${theme(\"blockInBlock\", {\n        true: \"0\",\n    })};\n    padding-bottom: 4.375rem;\n\n    ${theme(\"blockInBlock\", {\n        true: css`\n            padding-bottom: 2.1875rem;\n        `,\n    })}\n\n    ${MQ.FROM_M} {\n        display: grid;\n        grid-auto-rows: auto;\n        grid-template-columns: repeat(12, [col-start] 1fr);\n        padding-bottom: 6.125rem;\n\n        ${theme(\"blockInBlock\", {\n            true: css`\n                padding-bottom: 3.5rem;\n            `,\n        })}\n    }\n\n    ${MQ.FROM_L} {\n        ${theme(\"blockInBlock\", {\n            true: css`\n                grid-template-columns: repeat(7, [col-start] 1fr);\n            `,\n        })}\n    }\n\n    ${MQ.FROM_XL} {\n        padding-bottom: 8.75rem;\n        ${theme(\"blockInBlock\", {\n            true: css`\n                grid-template-columns: repeat(8, [col-start] 1fr);\n                padding-bottom: 4.375rem;\n            `,\n        })}\n    }\n`;\n\nexport const Heading = styled.h2`\n    ${styleHeadingXL};\n    grid-column: col-start 1 / span 4;\n    margin-bottom: 2.625rem;\n    margin-top: 0;\n\n    ${theme(\"displayOption\", {\n        Right: css`\n            grid-column: col-start 1 / span 12;\n            text-align: right;\n        `,\n    })};\n\n    ${theme(\"headingRight\", {\n        true: css`\n            text-align: right;\n        `,\n    })};\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 1 / span 12;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"col-start 1 / span 7\",\n        })};\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 4 / span 12;\n            `,\n        })}\n        margin-bottom: 4.375rem;\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 1 / span 9;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"col-start 1 / span 8\",\n        })};\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 4 / span 9;\n            `,\n        })}\n        margin-bottom: 6.125rem;\n    }\n`;\n\nexport const Introduction = styled.p`\n    ${styleBodyLAlt};\n    grid-column: col-start 1 / span 4;\n    margin-bottom: 1.625rem;\n    margin-top: 0;\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 5 / span 8;\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 2 / span 8;\n            `,\n        })}\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: col-start 5 / span 7;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"col-start 2 / span 6\",\n        })};\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 2 / span 7;\n            `,\n        })}\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 6 / span 6;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"col-start 2 / span 6\",\n        })};\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 2 / span 6;\n            `,\n        })}\n    }\n`;\n\nexport const Text = styled.div`\n    grid-column: col-start 1 / span 4;\n\n    ${MQ.FROM_M} {\n        grid-column: col-start 5 / span 8;\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 2 / span 8;\n            `,\n        })}\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"col-start 2 / span 6\",\n        })};\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: col-start 6 / span 7;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"col-start 2 / span 5\",\n        })};\n        ${theme(\"displayOption\", {\n            Right: css`\n                grid-column: col-start 2 / span 7;\n            `,\n        })}\n    }\n`;\n\nexport const ReadMore = styled.div`\n    margin-bottom: 1.625rem;\n    margin-top: 1.625rem;\n    overflow: hidden;\n    transition: all ease-in-out 0.2s;\n\n    ${theme(\"readMore\", {\n        true: css`\n            height: ${(props) => props.theme.readMoreHeight}px;\n        `,\n    })}\n\n    ${theme(\"readMore\", {\n        false: css`\n            height: 14rem;\n            mask-image: linear-gradient(to bottom, black 70%, transparent);\n            mask-position: 0 100%;\n            mask-size: 100% 200%;\n        `,\n    })}\n`;\n\nexport const ReadMoreButtonWrapper = styled.div`\n    display: grid;\n    grid-auto-rows: auto;\n    grid-template-columns: repeat(4, [col-start] 1fr);\n    text-align: center;\n\n    ${MQ.FROM_M} {\n        grid-template-columns: repeat(8, [col-start] 1fr);\n    }\n\n    ${MQ.FROM_XL} {\n        grid-template-columns: repeat(7, [col-start] 1fr);\n    }\n`;\n\nexport const ReadMoreButtonContainer = styled.div`\n    grid-column: 1 / span 4;\n\n    ${MQ.FROM_M} {\n        grid-column: 1 / span 8;\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: 1 / span 6;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"1 / span 8\",\n        })};\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: 1 / span 5;\n        grid-column: ${theme(\"blockInBlock\", {\n            true: \"1 / span 7\",\n        })};\n    }\n`;\n","import { useGTMDispatch } from \"@elgorditosalsero/react-gtm-hook\";\nimport React, {\n    ReactElement,\n    useContext,\n    useState,\n    useRef,\n    useEffect,\n} from \"react\";\nimport { ThemeContext, ThemeProvider } from \"styled-components\";\n\nimport Button from \"components/Button/Button\";\nimport Section from \"components/Section\";\nimport TextBlock from \"components/TextBlock\";\nimport useIsInEditMode from \"hooks/useIsInEditMode\";\nimport { addEditAttributes } from \"utils/episerver\";\n\nimport {\n    Container,\n    Introduction,\n    Heading,\n    Text,\n    ReadMore,\n    ReadMoreButtonWrapper,\n    ReadMoreButtonContainer,\n} from \"./EditorialSection.styled\";\nimport EditorialSectionProps from \"./EditorialSectionProps\";\n\nconst EditorialSection = ({\n    heading,\n    introduction,\n    mainBody,\n    secondaryBody,\n    identifier,\n    anchorName,\n    theme,\n    contentTheme = \"black\",\n    actionTheme,\n    displayOption = \"Left\",\n    l18n,\n}: EditorialSectionProps): ReactElement => {\n    const isInEditMode = useIsInEditMode();\n\n    const [readMore, setReadMore] = useState(false);\n    const [readMoreHeight, setReadMoreHeight] = useState(0);\n    const readMoreButtonText = readMore\n        ? l18n?.showLessText\n        : l18n?.showMoreText;\n    const contentRef = useRef<HTMLDivElement>(null);\n    const sendDataToGTM = useGTMDispatch();\n\n    useEffect(() => {\n        if (contentRef.current) {\n            setReadMoreHeight(contentRef.current.scrollHeight);\n        }\n    }, [contentRef.current?.scrollHeight]);\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n        event.preventDefault();\n        sendDataToGTM({\n            event: \"editorial_showmore\",\n            click_text: readMoreButtonText,\n            editorialHeading: heading || \"undefined\",\n        });\n        setReadMore(!readMore); // eslint-disable-line\n    };\n\n    const themeContext = useContext(ThemeContext);\n    if (!theme) theme = (themeContext && themeContext.theme) || \"lightgray\";\n\n    return (\n        <Section theme={theme} alignItems=\"center\">\n            <ThemeProvider\n                theme={{\n                    displayOption: displayOption,\n                    readMore: readMore,\n                    readMoreHeight: readMoreHeight,\n                }}\n            >\n                <Container key={identifier} id={anchorName}>\n                    {(isInEditMode || heading) && (\n                        <Heading\n                            {...addEditAttributes(\"Heading\")}\n                            dangerouslySetInnerHTML={{ __html: heading || \"\" }}\n                        />\n                    )}\n                    {(isInEditMode || introduction) && (\n                        <Introduction\n                            {...addEditAttributes(\"Introduction\")}\n                            dangerouslySetInnerHTML={{\n                                __html: introduction || \"\",\n                            }}\n                        />\n                    )}\n                    {(isInEditMode || mainBody) && (\n                        <Text {...addEditAttributes(\"MainBody\")}>\n                            <TextBlock\n                                content={mainBody}\n                                areaName=\"mainBody\"\n                                theme={theme}\n                                contentTheme={contentTheme}\n                                actionTheme={actionTheme}\n                                editorialGrid={true}\n                            />\n                        </Text>\n                    )}\n                    {(isInEditMode || (mainBody && secondaryBody)) && (\n                        <Text {...addEditAttributes(\"SecondaryBody\")}>\n                            <ReadMore ref={contentRef}>\n                                <TextBlock\n                                    content={secondaryBody}\n                                    areaName=\"secondaryBody\"\n                                    theme={theme}\n                                    contentTheme={contentTheme}\n                                    actionTheme={actionTheme}\n                                    editorialGrid={true}\n                                />\n                            </ReadMore>\n                            <ReadMoreButtonWrapper>\n                                <ReadMoreButtonContainer>\n                                    <Button\n                                        onClick={(event) => handleClick(event)}\n                                        aria-expanded={readMore}\n                                        icon={\n                                            readMore\n                                                ? \"bigArrowUp28\"\n                                                : \"bigArrowDown28\"\n                                        }\n                                        actionTheme={actionTheme}\n                                        isExpand={true}\n                                        variant=\"simple\"\n                                    >\n                                        {readMoreButtonText}\n                                    </Button>\n                                </ReadMoreButtonContainer>\n                            </ReadMoreButtonWrapper>\n                        </Text>\n                    )}\n                </Container>\n            </ThemeProvider>\n        </Section>\n    );\n};\n\nexport default React.memo(EditorialSection);\n"],"names":["Container","styled","GridContainer","withConfig","componentId","columnGap","theme","true","css","MQ","FROM_M","FROM_L","FROM_XL","Heading","h2","styleHeadingXL","Right","Introduction","p","styleBodyLAlt","Text","div","ReadMore","props","readMoreHeight","false","ReadMoreButtonWrapper","ReadMoreButtonContainer","EditorialSection","heading","introduction","mainBody","secondaryBody","identifier","anchorName","contentTheme","actionTheme","displayOption","l18n","_contentRef$current","isInEditMode","useIsInEditMode","readMore","setReadMore","useState","setReadMoreHeight","readMoreButtonText","showLessText","showMoreText","contentRef","useRef","sendDataToGTM","useGTMDispatch","useEffect","current","scrollHeight","themeContext","useContext","ThemeContext","_jsx","Section","alignItems","children","ThemeProvider","_jsxs","id","addEditAttributes","dangerouslySetInnerHTML","__html","TextBlock","content","areaName","editorialGrid","ref","Button","onClick","event","preventDefault","click_text","editorialHeading","handleClick","icon","isExpand","variant","React"],"sourceRoot":""}