{"version":3,"file":"static/js/LanguagePicker.13eae441.js","mappings":"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","sources":["components/LanguagePicker/LanguagePicker.styled.ts","components/LanguagePicker/LanguagePicker.tsx"],"sourcesContent":["import { styled, css } from \"styled-components\";\nimport theme from \"styled-theming\";\n\nimport Icon from \"components/Icon\";\nimport Link from \"components/Link\";\nimport { styleBodyM, styleHeadingS } from \"style/components/Typography\";\nimport { MQ } from \"style/mediaQueries\";\n\nconst backgroundColor = theme(\"inHeader\", {\n    true: \"--background-default\",\n    false: \"--block-blue-default\",\n});\n\nconst backgroundBorderColor = theme(\"inHeader\", {\n    true: \"--line-on-neutral-default\",\n    false: \"--line-on-blue-default\",\n});\n\nconst textColor = theme(\"inHeader\", {\n    true: \"--text-on-neutral-primary\",\n    false: \"--text-inverted\",\n});\n\nconst linkBorderColor = theme(\"inHeader\", {\n    true: \"--text-on-neutral-link-alt-border\",\n    false: \"--text-inverted-link-border\",\n});\n\nexport const LanguagePicker = styled.div`\n    align-self: flex-end;\n    grid-column: 1 / span 2;\n    grid-row: 2;\n\n    svg {\n        margin-right: 0.4375rem;\n        vertical-align: -0.5em;\n    }\n`;\n\nexport const Container = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const OpenDialogButton = styled.button`\n    background: none;\n    border: none;\n    color: var(--text-inverted);\n    cursor: pointer;\n    transition:\n        border-color 0.2s ease-in-out,\n        color 0.2s ease-in-out;\n    ${theme(\"inHeader\", {\n        true: css`\n            color: inherit;\n            transition: none;\n\n            &:hover {\n                color: var(--button-on-neutral-outline-hover);\n            }\n        `,\n    })};\n\n    &:focus-visible {\n        outline: 7px solid var(--button-focus);\n        outline-offset: 0;\n    }\n\n    span {\n        border-bottom: 1px solid var(--color-white-o00);\n        margin-left: 0.875rem;\n    }\n\n    &:hover span {\n        border-bottom: 1px solid var(--text-inverted);\n    }\n`;\n\nexport const Wrapper = styled.div.attrs<{\n    $isOpen: boolean;\n}>(() => ({}))`\n    background-color: var(${backgroundColor});\n    border-radius: 0.25rem;\n    bottom: 4.375rem;\n    box-shadow: 0 -1.75rem 1.75rem rgba(0 0 0 / 20%);\n    color: var(${textColor});\n    display: ${(props) => (props.$isOpen ? \"block\" : \"none\")};\n    grid-column: 1 / span 4;\n    left: 0;\n    padding-bottom: 0.4375rem;\n    position: absolute;\n    width: 100%;\n    ${theme(\"inHeader\", {\n        true: css`\n            bottom: auto;\n            box-shadow: 0 1.75rem 1.75rem rgba(0 0 0 / 20%);\n            grid-column: 1 / span 4;\n            top: 4.375rem;\n            z-index: 1;\n        `,\n    })};\n\n    ${MQ.FROM_M} {\n        bottom: 3.75rem;\n        grid-column: 4 / span 6;\n        ${theme(\"inHeader\", {\n            true: css`\n                bottom: auto;\n                grid-column: 6 / span 6;\n                top: 5.375rem;\n            `,\n        })};\n    }\n\n    ${MQ.FROM_L} {\n        grid-column: 1 / span 4;\n        ${theme(\"inHeader\", {\n            true: css`\n                grid-column: 8 / span 4;\n            `,\n        })};\n    }\n\n    ${MQ.FROM_XL} {\n        grid-column: 1 / span 3;\n        ${theme(\"inHeader\", {\n            true: css`\n                grid-column: 9 / span 3;\n                top: 5.75rem;\n            `,\n        })};\n    }\n`;\n\nexport const Sites = styled.div`\n    display: flex;\n    flex-flow: column nowrap;\n`;\n\nexport const Site = styled.div`\n    border-bottom: 1px solid var(${backgroundBorderColor});\n    padding: 1.3125rem;\n\n    &:last-child {\n        border-bottom: none;\n    }\n`;\n\nexport const SiteName = styled.div`\n    ${styleHeadingS}\n    color: var(${textColor});\n    margin-bottom: 0.4375rem;\n`;\n\nexport const Languages = styled.div`\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.4375rem 1.3125rem;\n`;\n\nexport const LanguageSelected = styled.span`\n    ${styleBodyM};\n    color: var(${textColor});\n`;\n\nexport const Check = styled(Icon)`\n    margin-right: 0.4375rem;\n`;\n\nexport const Language = styled(Link)`\n    ${styleBodyM};\n    border-color: var(${linkBorderColor});\n    color: var(${textColor});\n\n    &:hover {\n        border-color: var(${textColor});\n    }\n`;\n","import {\n    ThemeProvider as MuiThemeProvider,\n    createTheme,\n} from \"@mui/material/styles\";\nimport React, {\n    ReactElement,\n    useState,\n    useRef,\n    useEffect,\n    RefObject,\n} from \"react\";\nimport isEqual from \"react-fast-compare\";\nimport { ThemeProvider } from \"styled-components\";\n\nimport Icon from \"components/Icon\";\n\nimport {\n    Wrapper,\n    Container,\n    Language,\n    Site,\n    Sites,\n    SiteName,\n    Languages,\n    LanguageSelected,\n    OpenDialogButton,\n    Check,\n} from \"./LanguagePicker.styled\";\nimport LanguagePickerProps from \"./LanguagePickerProps\";\n\nconst LanguagePicker = ({\n    sites,\n    className,\n    inHeader = false,\n}: LanguagePickerProps): ReactElement => {\n    const [open, setOpen] = useState<boolean>(false);\n    const languagePickerRef = useRef(null);\n    const buttonRef = useRef(null);\n\n    const currentSite = sites?.find((site) => {\n        return site.languages?.some((language) => language.isSelected);\n    });\n\n    const currentLanguage = currentSite?.languages?.find(\n        (language) => language.isSelected,\n    );\n\n    const handleClick = (): void => {\n        setOpen(!open);\n    };\n\n    useEffect(() => {\n        const listener = (event: MouseEvent | TouchEvent) => {\n            // Do nothing if clicking ref's element or descendent elements\n            if (\n                !open ||\n                [languagePickerRef, buttonRef].some(\n                    (r: RefObject<HTMLDivElement>) =>\n                        r.current && r.current.contains(event.target as Node),\n                )\n            ) {\n                return;\n            }\n            setOpen(false);\n        };\n\n        document.addEventListener(\"mousedown\", listener);\n        document.addEventListener(\"touchstart\", listener);\n        return () => {\n            document.removeEventListener(\"mousedown\", listener);\n            document.removeEventListener(\"touchstart\", listener);\n        };\n    }, [open, languagePickerRef, buttonRef]);\n\n    return (\n        <MuiThemeProvider theme={createTheme()}>\n            <ThemeProvider\n                theme={{\n                    inHeader: inHeader,\n                }}\n            >\n                <Container className={className} id=\"languages\">\n                    <OpenDialogButton\n                        onClick={handleClick}\n                        ref={buttonRef}\n                        title={currentSite?.name}\n                    >\n                        <Icon icon={open ? \"close28\" : \"globe28\"} />\n                        {!inHeader && (\n                            <span>\n                                {currentSite?.name}\n                                {currentLanguage &&\n                                    ` (${currentLanguage?.name})`}\n                            </span>\n                        )}\n                    </OpenDialogButton>\n                    <Wrapper $isOpen={open} ref={languagePickerRef}>\n                        <Sites>\n                            {sites?.map((site, index) => (\n                                <Site key={`site-${index}`}>\n                                    <SiteName>{site.name}</SiteName>\n                                    <Languages>\n                                        {site.languages?.map(\n                                            (language, languageIndex) => {\n                                                return language.isSelected ? (\n                                                    <LanguageSelected\n                                                        key={`language-${languageIndex}`}\n                                                    >\n                                                        <Check icon=\"check28\" />\n                                                        {language.name}\n                                                    </LanguageSelected>\n                                                ) : (\n                                                    <Language\n                                                        url={language.url}\n                                                        title={language.name}\n                                                        key={`language-${languageIndex}`}\n                                                        fullfetch={true}\n                                                    >\n                                                        {language.name}\n                                                    </Language>\n                                                );\n                                            },\n                                        )}\n                                    </Languages>\n                                </Site>\n                            ))}\n                        </Sites>\n                    </Wrapper>\n                </Container>\n            </ThemeProvider>\n        </MuiThemeProvider>\n    );\n};\n\nexport default React.memo(LanguagePicker, isEqual);\n"],"names":["backgroundColor","theme","true","false","backgroundBorderColor","textColor","linkBorderColor","Container","styled","div","withConfig","componentId","OpenDialogButton","button","css","Wrapper","attrs","props","$isOpen","MQ","FROM_M","FROM_L","FROM_XL","Sites","Site","SiteName","styleHeadingS","Languages","LanguageSelected","span","styleBodyM","Check","Icon","Language","Link","LanguagePicker","sites","className","inHeader","_currentSite$language","open","setOpen","useState","languagePickerRef","useRef","buttonRef","currentSite","find","site","_site$languages","languages","some","language","isSelected","currentLanguage","useEffect","listener","event","r","current","contains","target","document","addEventListener","removeEventListener","_jsx","MuiThemeProvider","createTheme","children","ThemeProvider","_jsxs","id","onClick","handleClick","ref","title","name","icon","map","index","_site$languages2","languageIndex","url","fullfetch","React","isEqual"],"sourceRoot":""}