{"data":{"allStrapiModules":{"nodes":[{"name":"kima-hp-overlay","configJSON":"{\"name\":\"KIMA Homepage - children as overlays\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"KIMA Homepage - children as overlays\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _, { before } from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\n\n\nconst Root = styled('div')(({ theme }) => ({\n height: \"100vh\",\n textTransform:\"uppercase\"\n}));\nRoot.defaultProps = {\n \"data-id\": \"Root\"\n };\n\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 0,\n backgroundSize: \"cover\",\n width:\"100%\",\n height: 'calc(100vh - 59px)',\n\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"BackgroundImage\"\n };\n\nconst Logo = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 10,\n left: 16,\n background: 'url(/images/logo-kinemathek.png) no-repeat',\n height: 120,\n color: 'transparent',\n}));\nLogo.defaultProps = {\n \"data-id\": \"Logo\"\n };\n\nconst Claim = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 181,\n left: 16,\n height: 60,\n background: 'url(/images/audioguide.png) no-repeat',\n color: 'transparent',\n // '&:before': {\n // content: '\"\"',\n // position: 'absolute',\n // bottom: 0,\n // left: 50,\n // width: '100%',\n // height: '1rem',\n // display: 'block',\n // background:'hotpink'\n // }\n}));\n\nconst Children = styled('div')(({ theme }) => ({\n position:\"absolute\",\n bottom: \"10px\",\n left: \"10px\"\n}));\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n background: 'var(--home-childlink-bg)',\n padding: '7px 15px',\n marginTop: 10,\n display: 'block',\n borderRadius: 4,\n width: 'fit-content',\n textDecoration: 'none',\n color: '#fff',\n fontSize: '1.3rem',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n
\n \n {entity.title}\n {entity.shortDesc}\n \n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return {child.title}\n })}\n \n \n\n
\n \n \n}\n\nexport default EntityPage;"}]},{"name":"homepage-2","configJSON":"{\"name\":\"ImageList\",\"description\":\"ImageList for Startpage\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"ImageList\",\n \"description\": \"ImageList for Startpage\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nconst Root = styled('div')(({ theme }) => ({\n\n}));\nRoot.defaultProps = {\n \"data-id\": \"Root\"\n };\n// ----------------------------------------------------------\nconst HomeContainer = styled('div')(({ theme }) => ({\n height: 'calc(100vh - 55px)',\n display: 'flex',\n flexDirection: 'column',\n alignContent: 'flex-start',\n justifyContent: 'flex-start',\n margin: '0 8px',\n}));\nHomeContainer.defaultProps = {\n \"data-id\": \"HomeContainer\"\n };\n// ----------------------------------------------------------\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 2,\n backgroundSize: \"cover\",\n flexBasis:\"40%\",\n backgroundPosition:\"left top!important\"\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"Header\"\n };\n// ----------------------------------------------------------\nconst Title1 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 15,\n transform: 'translateY(-104%)',\n background: 'transparent',\n WebkitBackgroundSize: 'contain',\n backgroundSize: 'contain',\n height: 145,\n width: 110,\n color: 'transparent',\n\n}));\n// ----------------------------------------------------------\nconst Title2 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 38,\n left: 14,\n height: 60,\n color: '#fff',\n fontFamily: 'frequenz',\n fontSize: 68,\n lineHeight: 1,\n}));\n// ----------------------------------------------------------\nconst ChildrenUl = styled('ul')(({ theme }) => ({\n margin: 0,\n padding: 0,\n listStyleType: 'none',\n display: 'block',\n position:\"relative\"\n}));\n// ----------------------------------------------------------\nChildrenUl.defaultProps = {\n \"data-id\": \"ChildrenUl\"\n };\n// ----------------------------------------------------------\nconst ChildLi = styled('li')(({ theme }) => ({\n margin:\"0\",\n padding:\"0\",\n position: 'relative',\n borderBottom: '1px solid',\n borderColor: theme.palette.mode === \"light\" ? \"#333\" : \"#DDD\",\n}));\nChildLi.defaultProps = {\"data-id\": \"ChildLi\"};\n\n// ----------------------------------------------------------\nconst ChildLiIcon = styled('div')(({ theme }) => ({\n position: 'absolute',\n right: 0,\n top: '50%',\n transform: 'translateY(-50%)',\n}));\nChildLiIcon.defaultProps = {\n \"data-id\": \"ChildLiIcon\"\n };\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n display: 'block',\n textDecoration: 'none',\n padding: '15px 10px',\n paddingLeft: '4px',\n backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n backgroundPosition: '97% center',\n color: theme.palette.mode === \"light\" ? \"#222\" : \"#FFF\",\n fontSize: '1.3rem',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n \n \n\n {entity.shortDesc}\n \n \n {entity.title}\n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return (\n \n\n {child.title}\n \n \n \n \n );\n })}\n \n\n\n \n \n \n}\n\nexport default EntityPage;"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
\n
\n \n \n \n
\n\n
\n\n {image !== null ?\n
: <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
\n
 
\n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
\n }\n
\n
\n \n
\n\n
\n
\n \n }\n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: '#333',\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#fff',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n background: 'transparent',\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: '17px',\n borderBottom: '1px solid #eee',\n paddingTop: '11px',\n paddingBottom: '11px',\n display: 'block',\n paddingLeft: '0px',\n color: '#ffffff',\n textDecoration: 'none',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n zIndex: 65535\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto'\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n borderRadius: 20 / 2,\n },\n}));"}]},{"name":"renoir","configJSON":"{\"name\":\"Renoir\",\"description\":\"Adopted UI for STDL-Renoir; provides list and all components\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"collapsible.css","content":".Collapsible {\n width: 100%;\n display: block;\n border-bottom: 1px solid #999;\n position: relative;\n}\n\n.Collapsible__trigger {\n cursor: pointer;\n display: block;\n width: 100%;\n height: 100%;\n font-family: inherit;\n padding: 16px 50px 16px 8px;\n font-size: 18px;\n line-height: 1.2;\n font-weight: 400;\n user-select: none;\n text-transform: none;\n}\n\n.Collapsible__trigger:after {\n font-family: 'FontAwesome';\n content: '\\2303';\n position: absolute;\n right: 10px;\n top: 14px;\n display: block;\n transition: transform 300ms;\n transform: rotateZ(180deg);\n\n}\n\n.Collapsible__trigger.is-open:after {\n transform: rotateZ(0deg);\n top: 17px;\n}\n"},{"name":"config.json","content":"{\n \"name\": \"Renoir\",\n \"description\": \"Adopted UI for STDL-Renoir; provides list and all components\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"\nimport React, { useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage } from \"gatsby-plugin-image\";\nimport { BgImage } from \"gbimage-bridge\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport Menu from \"../imagelist/menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\nimport List from \"./list\";\n\nimport \"./reni-settings.css\";\nimport \"./richtext.css\";\nimport \"./collapsible.css\"\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n root: `${PREFIX}-root`,\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n padding: '0',\n textDecoration: 'none',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif;',\n },\n\n}));\n\nconst HeadlineDiv = styled('div')(({ theme }) => ({\n padding: '14px 8px',\n fontSize: '20px',\n lineHeight: '15px',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n}));\n\nconst BildbuttonLink = styled(Link)(() => ({\n display: 'block',\n position: 'absolute',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n fontStretch: 'normal',\n font: '15px opensans, Verdana, Helvetica, Arial, sans-serif',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'hsla(0, 0%, 0%, 0.27)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n}));\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule, pageContext } = props;\n\n const { defaultLocale } = pageContext;\n\n const image = entity.largeImage ? getImage(entity.largeImage.localFile) : null;\n const headline = (entity.shortDesc || '').replace(/(?:\\r\\n|\\r|\\n)/g, '
');\n\n const [keypadShown, setKeypadShown] = useState(config?.showKeypadFirst || false);\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n\n return \n \n {keypadShown ?\n :\n\n
\n {image !== null &&\n
\n \n {config.headerLink !== undefined && config.headerLink !== null &&\n {config.headerLink.title}\n }\n \n
\n }\n {headline?.length > 0 && {headline}}\n\n \n\n \n
\n }\n \n ;\n};\n\nexport default EntityPage;\n"},{"name":"list.js","content":"\nimport React, { Fragment, useCallback, useEffect } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\";\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport Menu from \"../imagelist/menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\n\nimport { useLocalStorage } from '../../components/hooks';\n\nconst PREFIX = 'List';\n\nconst classes = {\n listItem: `${PREFIX}-listItem`,\n listLink: `${PREFIX}-listLink`,\n listImg: `${PREFIX}-listImg`,\n titleDiv: `${PREFIX}-titleDiv`,\n titleFlex: `${PREFIX}-titleFlex`,\n title1: `${PREFIX}-title1`,\n title2: `${PREFIX}-title2`,\n title3: `${PREFIX}-title3`,\n numCode: `${PREFIX}-numCode`,\n playButton: `${PREFIX}-playButton`\n};\n\nconst Root = styled('ul')((\n {\n theme\n }\n) => ({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n [`& .${classes.listItem}`]: {\n textDecoration: 'none',\n display: 'block',\n cursor: 'pointer',\n padding: '0',\n color: theme.palette.primary.main,\n background: theme.palette.mode === 'light' ? '#efefef' : '#1b1b1b',\n listStyle: 'none',\n display: 'flex',\n justifyContent: 'flex-start',\n minHeight: '48px',\n margin: '5px 0px 5px 0px',\n overflow: 'hidden',\n alignItems: 'stretch',\n\n\n },\n\n [`& .${classes.listLink}`]: {\n textDecoration: 'none',\n // color: '#000',\n\n },\n\n /* STANDART\n listImg: {\n maxWidth: '110px',\n display: 'flex',\n\n },*/\n\n /* CUSTOM 1 */\n\n [`& .${classes.listImg}`]: {\n width: 130,\n minWidth: 130,\n minHeight: 100,\n maxHeight: 125,\n },\n\n /* End CUSTOM 1*/\n\n [`& .${classes.titleDiv}`]: {\n minWidth: '0',\n overflow: 'hidden',\n\n\n padding: '10px 28px 10px 8px'\n\n },\n\n [`& .${classes.titleFlex}`]: {\n\n display: 'flex',\n flexGrow: '1',\n\n alignItems: 'center',\n position: 'relative',\n minHeight: '80px',\n },\n\n [`& .${classes.title1}`]: {\n fontSize: '15px',\n textTransform: 'uppercase',\n marginBottom: '0',\n paddingRight: '25px',\n lineHeight: '1.15',\n fontWeight: 'bold',\n },\n\n [`& .${classes.title2}`]: {\n fontSize: '14px',\n lineHeight: '1.2',\n marginTop: '3px',\n paddingRight: '20px',\n },\n\n [`& .${classes.title3}`]: {\n fontSize: '14px',\n marginBottom: '0px',\n marginTop: '2px',\n fontWeight: 'normal',\n },\n\n [`& .${classes.numCode}`]: {\n position: 'absolute',\n right: '10px',\n bottom: '7px',\n fontSize: '13px',\n fontWeight: 'bold'\n },\n\n [`& .${classes.playButton}`]: {\n position: 'absolute',\n right: '6px',\n top: '50%',\n transform: 'translateY(-50%)',\n }\n}));\n\nconst List = ({ entity, pageContext }) => {\n const { strapiChildren: entities } = entity;\n\n const { defaultLocale, locale } = pageContext;\n\n const [scrollPos, setScrollPos] = useLocalStorage(`module.renoir-list-scrollpos-${locale}.${entity.identifier}`, 0);\n const onNavigate = useCallback((e) => {\n setScrollPos(e.view.pageYOffset);\n }, [setScrollPos]);\n\n useEffect(() => {\n window.scrollTo(0, scrollPos);\n }, [scrollPos]);\n\n return (\n \n {entities.map((entity, n) => {\n const listRole = _.find(entity.Roles, { strapi_component: 'role.list-child' });\n\n const title1 = listRole?.line1 || entity.title || '';\n const title2 = listRole?.line2 || false;\n const title3 = listRole?.line3 || false;\n\n const numCode = parseInt(listRole?.numCode || 0) || '';\n\n const image = entity.smallImage ? getImage(entity.smallImage.localFile) : null;\n return (\n \n \n
  • \n\n {image !== null ?\n : <>}\n
    \n
    \n
    {title1}
    \n
    {title2}
    \n
    {title3}
    \n
    {numCode}
    \n
    \n \"play\"\n
    \n
    \n
    \n\n
    • \n \n\n     \n );\n\n })}\n     \n );\n\n};\n\nexport default List;\n"},{"name":"reni-settings.css","content":"/*.carousel.carousel-slider {\n position: relative;\n margin: 0;\n overflow: hidden;\n max-height: 60vh;\n}*/\n\n.FullScreenWrapper-fullscreen .carousel.carousel-slider {\n max-height: unset;\n}\n\n.carousel.carousel-slider .control-arrow {\n opacity: 0.7!important;\n}\n\n/* .ComponentsWrapper-padding + .ComponentsWrapper-padding {\n padding-top: 0;\n} */\n\n.react-transform-wrapper {\n max-height: 70vh;\n}\n\nhtml {\n --playerBg: #fafafa;\n}\n\n.dark {\n --playerBg: #414141;\n}"},{"name":"richtext.css","content":".richtext {\n font: 16px opensans, Verdana, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n line-height: 1.5;\n\n}\n\n.richtext img {\n width: 100%;\n height: auto;\n}\n\n.richtext h2 {\n margin-top: 10px;\n margin-bottom: 0px;\n text-transform: uppercase;\n font-size: 18px;\n line-height: 1.2;\n font-weight: bold;\n}\n\n.richtext h2 span.text-big {\n font-size: 24px;\n padding-bottom: 24px;\n display: inline-block;\n}\n\n.richtext h3 {\n margin-bottom: 10px;\n margin-top: 10px;\n line-height: 1.2;\n font-weight: 500;\n font-size: 18px;\n}\n\n.richtext h4 {\n font-weight: 700;\n font-size: 18px;\n margin-top: 14px;\n margin-bottom: 2px;\n line-height: 1.5;\n}\n\n.richtext p,\n.richtext div.raw-html-embed {\n line-height: 1.5;\n margin-top: 0px;\n margin-bottom: 8px;\n}\n\n\n.richtext a {\n color: var(--font-color);\n font-weight: 400;\n text-decoration: underline;\n}\n\na.abox, .Collapsible__contentOuter a {\n color: var(--font-color);\n display: block;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n text-transform: none;\n font-weight: 400;\n text-decoration: none;\n border: 1px solid var(--font-color);\n padding: 4px 8px;\n margin: 14px 0;\n}\n\n/* .richtext a:has(u) {\n border: 0;\n display: inline;\n margin: 0;\n padding: 0;\n} */\n\n.richtext hr {\n border: 0px;\n box-shadow: none;\n height: 1px;\n background: var(--font-color);\n margin: 28px 0;\n}\n\n.richtext figure.image {\n margin: 20px 0;\n}\n\n.richtext blockquote {\n margin: 0;\n}\n\n.richtext blockquote p {\n font-size: 1px;\n line-height: 0;\n display: block;\n height: 10px;\n margin: 0;\n}\n\nsup, sub {\n vertical-align: baseline;\n position: relative;\n top: -0.4em;\n }\n sub {\n top: 0.4em;\n }\n\n.dark .richtext {\n /* --link-background: url(./src/css/images/rightarrow-w.png) no-repeat 94% center; */\n --font-color: #fff;\n}\n\n.richtext {\n /* --link-background: url(./src/css/images/rightarrow.png) no-repeat 94% center; */\n --font-color: #000;\n}\n\n"}]},{"name":"m5k-list","configJSON":"{\"name\":\"WRM List\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"app.css","content":"@charset \"utf-8\";\n\n@font-face {\n font-family: \"mulish\";\n src: url(\"./fonts/Mulish-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: normal;\n }\n\n @font-face {\n font-family: \"mulish\";\n src: url(\"./fonts/Mulish-SemiBold.ttf\") format(\"truetype\");\n font-weight: 600;\n font-style: normal;\n }\n"},{"name":"collapsible.css","content":".Collapsible {\n width: 100%;\n display: block;\n border-bottom: 1px solid #999;\n position: relative;\n}\n\n.Collapsible__trigger {\n cursor: pointer;\n display: block;\n width: 100%;\n height: 100%;\n padding: 16px 50px 16px 10px;\n font-size: 1.2em;\n font-family: inherit;\n line-height: 1.2;\n font-weight: 700;\n user-select: none;\n text-transform: none;\n}\n\n.Collapsible__trigger:after {\n font-family: 'FontAwesome';\n content: '\\2303';\n position: absolute;\n right: 10px;\n top: 14px;\n display: block;\n transition: transform 300ms;\n transform: rotateZ(180deg);\n\n}\n\n.Collapsible__trigger.is-open:after {\n transform: rotateZ(0deg);\n top: 17px;\n}\n"},{"name":"config.json","content":"{\n \"name\": \"WRM List\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"\nimport React, { useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage } from \"gatsby-plugin-image\";\nimport { BgImage } from \"gbimage-bridge\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport \"./app.css\";\n\nimport \"./richtext.css\";\nimport \"./m5k.css\";\nimport \"../m5k-hp/m5k-hp.css\"\nimport \"./collapsible.css\";\n\nimport Menu from \"./menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\nimport List from \"./list\";\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n root: `${PREFIX}-root`,\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n padding: '0',\n textDecoration: 'none',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n },\n\n}));\n\nconst HeadlineDiv = styled('div')(({ theme }) => ({\n padding: 0,\n fontSize: 19,\n lineHeight: 1,\n textTransform: 'none',\n fontWeight: 700,\n color: '#000',\n margin: '12px 8px 4px',\n}));\n\nHeadlineDiv.defaultProps = {\"data-id\": \"HeadlineDiv\"};\n\nconst BildbuttonLink = styled(Link)(() => ({\n display: 'block',\n position: 'absolute',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n fontStretch: 'normal',\n font: '15px opensans, Verdana, Helvetica, Arial, sans-serif',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'hsla(0, 0%, 0%, 0.27)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n}));\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule, pageContext } = props;\n\n const { defaultLocale } = pageContext;\n\n const image = entity.largeImage ? getImage(entity.largeImage.localFile) : null;\n const headline = (entity.shortDesc || '').replace(/(?:\\r\\n|\\r|\\n)/g, '
    ');\n\n const [keypadShown, setKeypadShown] = useState(config?.showKeypadFirst || false);\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n\n return \n \n {keypadShown ?\n :\n\n
    \n\n {image !== null &&\n
    \n \n {config.headerLink !== undefined && config.headerLink !== null &&\n {config.headerLink.title}\n }\n
    Orient
    \n
    Ozeanien
    \n
    Nordamerika
    \n
    Myanmar
    \n
    Afrika
    \n
    Buddha-Saal
    \n
    Lateinamerika
    \n\n
    Orient
    \n
    Oceania
    \n
    North America
    \n
    Myanmar
    \n
    Africa
    \n
    Buddha-Hall
    \n
    Latin America
    \n\n     \n
    \n }\n {headline?.length > 0 && {headline}}\n\n \n\n \n
    \n }\n     \n     ;\n};\n\nexport default EntityPage;\n"},{"name":"list.js","content":"import React, { Fragment, useCallback, useEffect } from \"react\"\nimport { styled } from \"@mui/material/styles\"\nimport _ from \"lodash\"\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl, getAccessoryIcon } from \"../../util\"\n\nimport Menu from \"../imagelist/menu\"\nimport EntityKeypad from \"../../components/Keypad\"\n\nimport Wrapper from \"../../components/Wrapper\"\n\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nimport { useLocalStorage } from '../../components/hooks';\n\nconst PREFIX = \"List\"\n\nconst classes = {\n listItem: `${PREFIX}-listItem`,\n listLink: `${PREFIX}-listLink`,\n listImg: `${PREFIX}-listImg`,\n titleDiv: `${PREFIX}-titleDiv`,\n titleFlex: `${PREFIX}-titleFlex`,\n title1: `${PREFIX}-title1`,\n title2: `${PREFIX}-title2`,\n title3: `${PREFIX}-title3`,\n numCode: `${PREFIX}-numCode`,\n playButton: `${PREFIX}-playButton`\n}\n\nconst Root = styled(\"ul\")(({ theme }) => ({\n listStyleType: \"none\",\n margin: \"0\",\n marginTop: \"4px\",\n padding: \"0 8px\",\n\n [`& .${classes.listItem}`]: {\n textDecoration: \"none\",\n display: \"block\",\n cursor: \"pointer\",\n padding: \"0\",\n // color: theme.palette.secondary.main,\n color: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#1b1b1b\",\n background: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#1b1b1b\",\n listStyle: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n minHeight: \"60px\",\n margin: \"0\",\n marginBottom: 5,\n overflow: \"hidden\",\n alignItems: \"center\",\n },\n\n [`& .${classes.listLink}`]: {\n textDecoration: \"none\"\n // color: '#000',\n },\n\n\n\n [`& .${classes.listImg}`]: {\n width: \"100%\",\n height: \"210px\",\n display: \"flex\",\n flexDirection: \"column\"\n },\n\n [`& .${classes.titleDiv}`]: {\n width: \"100%\",\n overflow: \"hidden\",\n padding: \"5px 28px 5px 6px\",\n color: '#FFF',\n },\n\n [`& .${classes.titleFlex}`]: {\n display: \"flex\",\n flexGrow: \"1\",\n width: \"100%\",\n alignItems: \"center\",\n position: \"relative\",\n minHeight: \"50px\",\n marginBottom: 0,\n background: '#343434',\n },\n\n [`& .${classes.title1}`]: {\n fontSize: '1.15em',\n textTransform: 'none',\n marginBottom: 0,\n lineHeight: 1.15,\n fontWeight: 400,\n },\n\n [`& .${classes.title2}`]: {\n fontSize: '1em',\n lineHeight: 1.2,\n marginTop: 4,\n paddingRight: 20,\n },\n\n\n\n [`& .${classes.title3}`]: {\n fontSize: \"0.9em\",\n marginBottom: \"0px\",\n marginTop: \"2px\",\n fontWeight: \"normal\"\n },\n\n [`& .${classes.numCode}`]: {\n position: 'absolute',\n right: 5,\n bottom: '4px',\n fontSize: 12,\n fontWeight: '400',\n display: 'none',\n color: '#fff',\n },\n\n [`& .${classes.playButton}`]: {\n position: \"absolute\",\n right: \"0px\",\n top: \"50%\",\n transform: \"translateY(-50%)\"\n }\n}))\n\nconst List = ({ entity, pageContext }) => {\n const { strapiChildren: entities } = entity\n\n const { defaultLocale, locale } = pageContext\n\n const [scrollPos, setScrollPos] = useLocalStorage(`module.kima-list-scrollpos-${locale}.${entity.identifier}`, 0);\n const onNavigate = useCallback((e) => {\n setScrollPos(e.view.pageYOffset);\n }, [setScrollPos]);\n\n useEffect(() => {\n window.scrollTo(0, scrollPos);\n }, [scrollPos]);\n\n return (\n \n {entities.map((entity, n) => {\n const listRole = _.find(entity.Roles, {\n strapi_component: \"role.list-child\"\n })\n\n const title1 = listRole?.line1 || entity.title || \"\"\n const title2 = listRole?.line2 || false\n const title3 = listRole?.line3 || false\n\n const numCode = parseInt(listRole?.numCode || 0) || \"\"\n\n const AccessoryIcon = getAccessoryIcon({ defaultIcon: ArrowForwardIosIcon, role: listRole });\n\n const image = entity.smallImage\n ? getImage(entity.smallImage.localFile)\n : null;\n\n return (\n \n \n
  • \n {image !== null ? (\n \n ) : (\n <>\n )}\n
    \n
    \n
    {title1}
    \n
    {title2}
    \n
    {title3}
    \n
    {numCode}
    \n
    \n \n
    \n
    \n
    \n
    • \n \n     \n )\n })}\n     \n )\n}\n\nexport default List\n"},{"name":"m5k.css","content":".ComponentsWrapper-padding + .ComponentsWrapper-padding {\n padding-top: 0;\n}\n\n.m5k-list .player-controls {position: static!important;}\n\n/* headline no click event------------------------------------------------------ */\n#highlight ul > a:nth-child(1),\n#highlight ul > a:nth-child(5),\n#highlight ul > a:nth-child(11),\n#highlight ul > a:nth-child(16),\n#highlight ul > a:nth-child(18),\n#highlight ul > a:nth-child(24),\n#highlight ul > a:nth-child(29)\n{\n\tpointer-events: none;\n}\n\n/* list element --------------------------------------------------------------- */\n#highlight ul > a:nth-child(1) > li,\n#highlight ul > a:nth-child(5) > li,\n#highlight ul > a:nth-child(11) > li,\n#highlight ul > a:nth-child(16) > li,\n#highlight ul > a:nth-child(18) > li,\n#highlight ul > a:nth-child(24) > li,\n#highlight ul > a:nth-child(29) > li\n{\n max-height: 80px;\n pointer-events: none;\n\tmargin: 5px 0\n}\n\n/* list element --------------------------------------------------------------- */\n#highlight ul > a:nth-child(1) > li > .List-listImg,\n#highlight ul > a:nth-child(5) > li > .List-listImg,\n#highlight ul > a:nth-child(11) > li > .List-listImg,\n#highlight ul > a:nth-child(16) > li > .List-listImg,\n#highlight ul > a:nth-child(18) > li > .List-listImg,\n#highlight ul > a:nth-child(24) > li > .List-listImg,\n#highlight ul > a:nth-child(29) > li > .List-listImg\n{\n min-height: 80px;\n}\n\n/* headline layout */\n#highlight ul > a:nth-child(1) > li > .List-titleFlex,\n#highlight ul > a:nth-child(5) > li > .List-titleFlex,\n#highlight ul > a:nth-child(11) > li > .List-titleFlex,\n#highlight ul > a:nth-child(16) > li > .List-titleFlex,\n#highlight ul > a:nth-child(18) > li > .List-titleFlex,\n#highlight ul > a:nth-child(24) > li > .List-titleFlex,\n#highlight ul > a:nth-child(29) > li > .List-titleFlex\n{\n min-height: 80px;\n margin-top: -80px;\n pointer-events: none;\n align-items: center;\n background: none;\n\tcolor: #fff\n}\n\n/* headline Font style */\n#highlight ul > a:nth-child(1) > li > .List-titleFlex .List-title1,\n#highlight ul > a:nth-child(5) > li > .List-titleFlex .List-title1,\n#highlight ul > a:nth-child(11) > li > .List-titleFlex .List-title1,\n#highlight ul > a:nth-child(16) > li > .List-titleFlex .List-title1,\n#highlight ul > a:nth-child(18) > li > .List-titleFlex .List-title1,\n#highlight ul > a:nth-child(24) > li > .List-titleFlex .List-title1,\n#highlight ul > a:nth-child(29) > li > .List-titleFlex .List-title1\n{\n\tcolor: #fff;\n\tfont-weight: bold;\n\tfont-size: 20px;\n\ttext-transform: uppercase;\n}\n\n/* hide arrow */\n#highlight ul > a:nth-child(1) > li > .List-titleFlex .List-playButton,\n#highlight ul > a:nth-child(5) > li > .List-titleFlex .List-playButton,\n#highlight ul > a:nth-child(11) > li > .List-titleFlex .List-playButton,\n#highlight ul > a:nth-child(16) > li > .List-titleFlex .List-playButton,\n#highlight ul > a:nth-child(18) > li > .List-titleFlex .List-playButton,\n#highlight ul > a:nth-child(24) > li > .List-titleFlex .List-playButton,\n#highlight ul > a:nth-child(29) > li > .List-titleFlex .List-playButton\n{\n\tdisplay: none!important;\n}\n\n/* en liststyles */\n/* headline no click event------------------------------------------------------ */\n#en_highlight ul > a:nth-child(1),\n#en_highlight ul > a:nth-child(5),\n#en_highlight ul > a:nth-child(11),\n#en_highlight ul > a:nth-child(16),\n#en_highlight ul > a:nth-child(18),\n#en_highlight ul > a:nth-child(24),\n#en_highlight ul > a:nth-child(29)\n{\n\tpointer-events: none;\n}\n\n/* list element --------------------------------------------------------------- */\n#en_highlight ul > a:nth-child(1) > li,\n#en_highlight ul > a:nth-child(5) > li,\n#en_highlight ul > a:nth-child(11) > li,\n#en_highlight ul > a:nth-child(16) > li,\n#en_highlight ul > a:nth-child(18) > li,\n#en_highlight ul > a:nth-child(24) > li,\n#en_highlight ul > a:nth-child(29) > li\n{\n max-height: 80px;\n pointer-events: none;\n\tmargin: 5px 0\n}\n\n/* list element --------------------------------------------------------------- */\n#en_highlight ul > a:nth-child(1) > li > .List-listImg,\n#en_highlight ul > a:nth-child(5) > li > .List-listImg,\n#en_highlight ul > a:nth-child(11) > li > .List-listImg,\n#en_highlight ul > a:nth-child(16) > li > .List-listImg,\n#en_highlight ul > a:nth-child(18) > li > .List-listImg,\n#en_highlight ul > a:nth-child(24) > li > .List-listImg,\n#en_highlight ul > a:nth-child(29) > li > .List-listImg\n{\n min-height: 80px;\n}\n\n/* headline layout */\n#en_highlight ul > a:nth-child(1) > li > .List-titleFlex,\n#en_highlight ul > a:nth-child(5) > li > .List-titleFlex,\n#en_highlight ul > a:nth-child(11) > li > .List-titleFlex,\n#en_highlight ul > a:nth-child(16) > li > .List-titleFlex,\n#en_highlight ul > a:nth-child(18) > li > .List-titleFlex,\n#en_highlight ul > a:nth-child(24) > li > .List-titleFlex,\n#en_highlight ul > a:nth-child(29) > li > .List-titleFlex\n{\n min-height: 80px;\n margin-top: -80px;\n pointer-events: none;\n align-items: center;\n background: none;\n\tcolor: #fff\n}\n\n/* headline Font style */\n#en_highlight ul > a:nth-child(1) > li > .List-titleFlex .List-title1,\n#en_highlight ul > a:nth-child(5) > li > .List-titleFlex .List-title1,\n#en_highlight ul > a:nth-child(11) > li > .List-titleFlex .List-title1,\n#en_highlight ul > a:nth-child(16) > li > .List-titleFlex .List-title1,\n#en_highlight ul > a:nth-child(18) > li > .List-titleFlex .List-title1,\n#en_highlight ul > a:nth-child(24) > li > .List-titleFlex .List-title1,\n#en_highlight ul > a:nth-child(29) > li > .List-titleFlex .List-title1\n{\n\tcolor: #fff;\n\tfont-weight: bold;\n\tfont-size: 20px;\n\ttext-transform: uppercase;\n}\n\n/* hide arrow */\n#en_highlight ul > a:nth-child(1) > li > .List-titleFlex .List-playButton,\n#en_highlight ul > a:nth-child(5) > li > .List-titleFlex .List-playButton,\n#en_highlight ul > a:nth-child(11) > li > .List-titleFlex .List-playButton,\n#en_highlight ul > a:nth-child(16) > li > .List-titleFlex .List-playButton,\n#en_highlight ul > a:nth-child(18) > li > .List-titleFlex .List-playButton,\n#en_highlight ul > a:nth-child(24) > li > .List-titleFlex .List-playButton,\n#en_highlight ul > a:nth-child(29) > li > .List-titleFlex .List-playButton\n{\n\tdisplay: none!important;\n}\n/* ########### */\n\n/* Freier Rundgang Listeneintrag zu Button */\ndiv#start_free_tour ul {\n\tborder: 0;}\n\ndiv#start_free_tour li.List-listItem {\n border: 1px solid #666;\n background: #ffffff;\n width: 70%;\n margin-left: 15%;\n padding-left: 19px;\n max-height: 55px;\n}\n\ndiv#start_free_tour li.List-listItem .List-listImg{\n display: none;\n}\ndiv#start_free_tour li.List-listItem .List-title1{\n\tfont-size: 1.1em\n}\n/* ############# */\n\n.FullScreenWrapper-fullscreen {\n background-color: #f5f5f5!important;\n}\n\nhtml {\n --captionColor: #000;\n --captionBottom: 5px;\n}\n\nhtml .m5k-list {\n --captionColor: transparent;\n --captionBottom: -50px;\n}\n\n\n\n"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n event.stopPropagation();\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n e.stopPropagation();\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
    \n
    \n \n \n \n
    \n\n
    \n\n {image !== null ?\n
    : <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
    \n
     
    \n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
    \n }\n
    \n
    \n \n
    \n\n
    \n
    \n     \n }    \n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: '#FFF',\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#000',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n background: '#FFF',\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: '1.3em',\n fontWeight: 400,\n borderBottom: '1px solid',\n borderColor: '#DDD',\n paddingTop: 11,\n paddingBottom: 11,\n display: 'block',\n paddingLeft: 0,\n color: '#222',\n textDecoration: 'none',\n zIndex: 65535,\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto'\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n display: 'none',\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n borderRadius: 20 / 2,\n },\n}));"},{"name":"richtext.css","content":".m5k-list .richtext {\n font: 1em opensans, Verdana, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n line-height: 1.3;\n}\n\n.m5k-list .richtext img {\n width: 100%;\n height: auto;\n}\n\n.m5k-list .richtext h2 {\n margin-top: 10px;\n margin-bottom: 6px;\n text-transform: none;\n font-size: 1.15rem;\n line-height: 1.2;\n font-weight: bold;\n text-transform: none;\n\n}\n\n.m5k-list .richtext h3 {\n margin-bottom: 6px;\n padding-top: 10px;\n line-height: 1.2;\n font-weight: 100;\n font-size: 20px;\n\n}\n\n.m5k-list .richtext h4 {\n font-weight: normal;\n font-size: 18px;\n margin-top: 10px;\n margin-bottom: 6px;\n line-height: 1.5;\n}\n\n.m5k-list .richtext p,\n.m5k-list .richtext div.raw-html-embed {\n line-height: 1.3;\n margin-top: 0px;\n margin-bottom: 8px;\n}\n\n\n.m5k-list .richtext a {\n color: #a03324;\n text-transform: none;\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n display: inline-block;\n text-decoration: underline;\n text-underline-offset: 0.2em;\n background: #fff;\n}\n\n.m5k-list .richtext figure.image {\n margin: 20px 0;\n}\n\n.m5k-list .richtext u {\n text-transform: uppercase;\n font-size: 1rem;\n text-decoration: none;\n}\n\n.m5k-list .richtext ul {\n padding: 0 0 0 18px;\n}\n\n.m5k-list .richtext li {\n margin-bottom: 12px;\n}\n\n\n.dark .m5k-list .richtext {\n --font-color: #fff;\n}\n\n.m5k-list .richtext {\n --font-color: #000;\n}"}]},{"name":"kima-hp-list","configJSON":"{\"name\":\"KIMA Homepage - children as list below largeImg, fills screen\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"KIMA Homepage - children as list below largeImg, fills screen\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\n\nconst Root = styled('div')(({ theme }) => ({\n\n}));\nRoot.defaultProps = {\n \"data-id\": \"Root\"\n };\n// ----------------------------------------------------------\nconst HomeContainer = styled('div')(({ theme }) => ({\n height: 'calc(100vh - 5px)',\n display: 'flex',\n flexDirection: 'column',\n alignContent: 'flex-start',\n justifyContent: 'flex-start',\n margin: '6px',\n}));\nHomeContainer.defaultProps = {\n \"data-id\": \"HomeContainer\"\n };\n// ----------------------------------------------------------\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 2,\n backgroundSize: \"cover\",\n flexBasis:\"40%\",\n backgroundPosition:\"left top!important\"\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"Header\"\n };\n// ----------------------------------------------------------\nconst Title1 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 15,\n transform: 'translateY(-104%)',\n background: 'url(/images/logo-kinemathek.png) no-repeat',\n WebkitBackgroundSize: 'contain',\n backgroundSize: 'contain',\n height: 145,\n width: 110,\n color: 'transparent',\n\n}));\n// ----------------------------------------------------------\nconst Title2 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 38,\n left: 14,\n height: 60,\n color: '#fff',\n fontFamily: 'frequenz',\n fontSize: 68,\n lineHeight: 1,\n}));\n// ----------------------------------------------------------\nconst ChildrenUl = styled('ul')(({ theme }) => ({\n margin: 0,\n padding: 0,\n listStyleType: 'none',\n display: 'block',\n position:\"relative\"\n}));\nChildrenUl.defaultProps = {\n \"data-id\": \"ChildrenUl\"\n };\n// ----------------------------------------------------------\nconst ChildLi = styled('li')(({ theme }) => ({\n margin:\"0\",\n padding:\"0\"\n}));\nChildLi.defaultProps = {\n \"data-id\": \"ChildLi\"\n };\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n display: 'block',\n textDecoration: 'none',\n padding: '15px 10px',\n paddingLeft: '4px',\n background: '#FFF url(/images/smallarrow.png) no-repeat',\n backgroundPosition: '97% center',\n color: '#000',\n borderBottom: '1px solid #000',\n fontFamily: 'frequenz',\n fontSize: '1.5rem',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n \n \n\n {entity.shortDesc}\n \n \n {entity.title}\n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return (\n \n {child.title}\n \n );\n })}\n \n\n\n \n \n \n}\n\nexport default EntityPage;"}]},{"name":"imagelist","configJSON":"{\"name\":\"ImageList\",\"description\":\"ImageList for Startpage\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"ImageList\",\n \"description\": \"ImageList for Startpage\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\nimport Topbar from \"./topbar\";\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n bildbutton: `${PREFIX}-bildbutton`,\n bHeadline: `${PREFIX}-bHeadline`\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.bildbutton}`]: {\n display: 'block',\n position: 'absolute',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'rgba(86, 86, 86, 0.3)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n textTransform: 'uppercase',\n /* Custom 1 */\n // boxShadow: '0 0 0 7px rgba(183, 183, 183, 0.5), 0 0 0 21px rgba(201, 201, 201, 0.3), 0 0 0 63px rgba(211, 211, 211, 0.2), 0 0 0 186px rgba(201, 201, 201, 0.1), 0 0 0 558px rgba(190, 190, 190, 0.1)',\n // borderRadius: '50%',\n // padding: '7px 55px 7px 55px',\n /* End Custom 1 */\n },\n\n [`& .${classes.bHeadline}`]: {\n position: 'absolute',\n bottom: '62px',\n left: '11px',\n /* webkitTransform: 'translateX(-50%)', */\n /* transform: 'translateX(-50%)', */\n /*whiteSpace: 'nowrap',*/\n width: 'fit-content',\n margin: '0',\n /* text-align: 'center', */\n fontSize: '22px',\n color: '#ffffff !important',\n fontWeight: 'bold',\n textTransform: 'uppercase',\n textShadow: '2px 2px 3px hsl(0deg 0% 0% / 48%)',\n fontFamily: 'opensans',\n letterSpacing: '0',\n lineHeight: '1.1',\n }\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n\n return \n \n {/**/}\n
    \n {children.map((child, n) => {\n\n if (child.smallImage) {\n const childImg = getImage(child.smallImage.localFile);\n\n const listRole = _.find(child.Roles, { strapi_component: 'role.list-child' });\n const overlays = getOverlayImages(listRole, files);\n\n const title1 = listRole?.line1 || child.title || '';\n const title2 = listRole?.line2 || false;\n\n const { defaultLocale } = pageContext;\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return \n \n {overlays?.map(o => o)/* TODO - test*/}\n {title2 !== false &&\n
    {title2}
    }\n\n
    {title1}
    \n     \n \n } else {\n return <>;\n }\n })}\n
    \n     \n     \n}\n\nexport default EntityPage;"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n event.stopPropagation();\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n e.stopPropagation();\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
    \n
    \n \n \n \n
    \n\n
    \n\n {image !== null ?\n
    : <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
    \n
     
    \n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
    \n }\n
    \n
    \n \n
    \n\n
    \n
    \n     \n }    \n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: '#333',\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#fff',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n background: 'transparent',\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: '17px',\n borderBottom: '1px solid #eee',\n paddingTop: '11px',\n paddingBottom: '11px',\n display: 'block',\n paddingLeft: '0px',\n color: '#ffffff',\n textDecoration: 'none',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n zIndex: 65535\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto'\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#848484' : '#666',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#666' : '#666',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#555' : '#777',\n borderRadius: 20 / 2,\n },\n}));"},{"name":"topbar.js","content":"import React from \"react\";\nimport { navigate } from \"gatsby\";\n\nimport { AppBar, Toolbar, IconButton } from \"@mui/material\";\n\nimport DialpadIcon from '@mui/icons-material/Dialpad';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\nimport ListIcon from '@mui/icons-material/List';\n\nimport Root, { classes } from \"../../components/styles/menu\";\n\nimport _ from \"lodash\";\n\nimport Menu from \"./menu\"\n\nconst TopBar = ({ children, keypadSwitch, onKeypad, keypadShown,\n showBackbutton = true, title = \"Root\", transparentAppbar = false, ...props }) => {\n\n const hideBackButton = showBackbutton ? {} : { style: { display: 'none' } };\n\n const barStyle = { style: { boxShadow: 'none' } };\n if (transparentAppbar) barStyle.style.background = 'transparent';\n // geändert style backgroundColor zu background weil da noch ein background gradient von mui kommt der noch sichtbar war\n return \n \n \n\n { navigate(-1); }}\n size=\"large\">\n \n \n\n\n
    \n\n {keypadSwitch &&\n \n {keypadShown ? : }\n \n }\n\n \n\n
    \n     \n     \n {/**/}\n
    \n ;\n}\n\nexport default TopBar;\n"}]},{"name":"m5k-hp","configJSON":"{\"name\":\"WMA Homepage - children as list below largeImg, fills screen\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"WMA Homepage - children as list below largeImg, fills screen\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\nimport \"./m5k-hp.css\";\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nconst Root = styled('div')(({ theme }) => ({\n\n}));\nRoot.defaultProps = {\"data-id\": \"Root\"};\n// ----------------------------------------------------------\nconst HomeContainer = styled('div')(({ theme }) => ({\n height: 'calc(100vh - 12px)',\n display: 'flex',\n flexDirection: 'column',\n alignContent: 'flex-start',\n justifyContent: 'flex-start',\n margin: '8px',\n}));\nHomeContainer.defaultProps = {\n \"data-id\": \"HomeContainer\"\n };\n// ----------------------------------------------------------\n const Logo = styled('div')(({ theme }) => ({\n position: 'fixed',\n top: 7,\n left: 10,\n background: 'url(/images/m5klogo.svg) no-repeat',\n backgroundSize: 150,\n width: '105%',\n color: 'transparent',\n aspectRatio: '1/1',\n}));\nLogo.defaultProps = {\"data-id\": \"Logo\"};\n// ----------------------------------------------------------\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 2,\n backgroundSize: \"cover\",\n flexBasis:\"40%\",\n backgroundPosition:\"center top!important\",\n marginTop: 50,\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"Header\"\n };\n// ----------------------------------------------------------\nconst Title1 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 15,\n transform: 'translateY(-104%)',\n background: 'transparent',\n WebkitBackgroundSize: 'contain',\n backgroundSize: 'contain',\n height: 145,\n width: 110,\n color: 'transparent',\n\n}));\n// ----------------------------------------------------------\nconst Title2 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 38,\n left: 14,\n height: 60,\n color: '#fff',\n fontFamily: 'frequenz',\n fontSize: 68,\n lineHeight: 1,\n}));\n// ----------------------------------------------------------\nconst ChildrenUl = styled('ul')(({ theme }) => ({\n margin: 0,\n padding: 0,\n listStyleType: 'none',\n display: 'block',\n position:\"relative\"\n}));\n\n\n// ----------------------------------------------------------\nChildrenUl.defaultProps = {\n \"data-id\": \"ChildrenUl\"\n };\n// ----------------------------------------------------------\nconst ChildLi = styled('li')(({ theme }) => ({\n margin:\"0\",\n padding:\"0\",\n position: 'relative',\n borderBottom: 'none',\n borderColor: theme.palette.mode === \"light\" ? \"#333\" : \"#DDD\",\n}));\nChildLi.defaultProps = {\"data-id\": \"ChildLi\"};\n\n// ----------------------------------------------------------\nconst ChildLiIcon = styled('div')(({ theme }) => ({\n position: 'absolute',\n right: 0,\n top: '50%',\n transform: 'translateY(-50%)',\n display: 'none',\n}));\nChildLiIcon.defaultProps = {\n \"data-id\": \"ChildLiIcon\"\n };\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n display: 'block',\n textDecoration: 'none',\n padding: '15px 10px',\n paddingLeft: '4px',\n // backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n backgroundColor: 'transparent',\n backgroundPosition: '97% center',\n color: theme.palette.mode === \"light\" ? \"#222\" : \"#FFF\",\n fontSize: '1.2rem',\n fontWeight: 700,\n lineHeight: 1.15,\n textTransform: 'uppercase',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n \n \n {entity.title}\n {entity.shortDesc}\n \n \n {entity.title}\n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return (\n \n\n {child.title}\n \n \n \n \n );\n })}\n \n\n\n \n \n \n}\n\nexport default EntityPage;"},{"name":"m5k-hp.css","content":"/* Erstes Child willkomen */\n#root ul li:nth-child(2) a {\n color: inherit;\n}\n/* accesory Icon anzeigen obwohl ausgeblendet */\n#root ul li:nth-child(2) > * {\n\tdisplay: block!important;\n}\n\n#root ul li:nth-child(2) {\n margin-top: 6px;\n}\n\n#root ul li:nth-child(2):before {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n width: 36%;\n height: 90%;\n transform: translateY(5%);\n background: #db6dbd;\n\tz-index: 99;\n}\n#root ul li:nth-child(2) a {\n padding-right: 64%;\n animation: fromleft 900ms ease-out 0ms 1 normal forwards;\n}\n\n\n#root ul li:nth-child(3):before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n width: 40%;\n height: 90%;\n transform: translateY(5%);\n background: #32819F;\n}\n#root ul li:nth-child(3) a {\n padding-left: 45%;\n animation: fromright 900ms ease-out 0ms 1 normal forwards;\n}\n#root ul li:nth-child(3) a:after {\n content: 'Eine Highlight-Tour durchs Museum';\n display: block;\n font-size: 15px;\n font-weight: 400;\n padding-top: 5px;\n}\n/* en */\n#root div.Home ul li:nth-child(3) a:after {\n content: \"A tour of the museum's highlights\"!important;\n}\n\n/* ---- */\n#root ul li:nth-child(3) {\n min-height: 120px;\n}\n/* ------------------------------------------- */\n#root ul li:nth-child(4):before {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n width: 20%;\n height: 90%;\n transform: translateY(5%);\n background: #ED9D31;\n}\n#root ul li:nth-child(4) a {\n padding-right: 20%;\n animation: fromleft 900ms ease-out 0ms 1 normal forwards;\n}\n#root ul li:nth-child(4) a:after {\n content: 'Kontinente & Regionen';\n text-transform: uppercase;\n display: block;\n font-size: 15px;\n font-weight: 400;\n padding-top: 5px;\n}\n/* en */\n#root div.Home ul li:nth-child(4) a:after {\n content: 'Continents & regions'!important;\n}\n\n#root ul li:nth-child(4) {\n min-height: 78px;\n}\n/* ---------------------------------------------- */\n#root ul li:nth-child(5):before {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n width: 150px;\n height: 90%;\n transform: translateY(5%);\n background: #96AA76;\n}\n#root ul li:nth-child(5) a {\n padding-left: 160px;\n animation: fromright 900ms ease-out 0ms 1 normal forwards;\n}\n#root ul li:nth-child(5) a:after {\n content: 'Nummerneingabe';\n text-transform: uppercase;\n display: block;\n font-size: 15px;\n font-weight: 400;\n padding-top: 5px;\n}\n/* en */\n#root div.Home ul li:nth-child(5) a:after {\n content: 'Number entry'!important;\n}\n#root ul li:nth-child(5) {\n min-height: 75px;\n}\n\n#root ul li:nth-child(6):before {\n content: '';\n display: block;\n position: absolute;\n right: 0;\n width: 20%;\n height: 90%;\n transform: translateY(5%);\n background: #FF4D4D;\n}\n#root ul li:nth-child(6) a {\n padding-right: 20%;\n animation: fromleft 900ms ease-out 0ms 1 normal forwards;\n}\n#root ul li:nth-child(6) {\n min-height: 60px;\n}\n\n\n\n\n\n/* ########################################## */\n\n@keyframes fromleft {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(-400px);\n\t}\n\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n@keyframes fromright{\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateX(400px);\n\t}\n\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateX(0);\n\t}\n}\n\n/* ###################################################### */\n\n.highani {display: none;}\n\n#highlight .highani, #highlight .highani {\n display: block;\n color: rgb(255 255 255 / 80%);\n font-size: 21px;\n text-transform: uppercase;\n font-weight: 700;\n min-width: fit-content;\n white-space: nowrap;\n font-size-adjust: none!important;\n}\n\n#highlight .islam {\n opacity: 0;\n position: absolute;\n top: 9px;\n left: 40%;\n animation: fromleft 900ms ease-out 0ms 1 normal forwards;\n}\n#highlight .en_islam {display: none;}\n\n#highlight .ozean {\n opacity: 0;\n position: absolute;\n top: 94px;\n right: 6%;\n animation: fromright 900ms ease-out 100ms 1 normal forwards;\n}\n#highlight .en_ozean {display: none;}\n\n#highlight .myanmar {\n opacity: 0;\n position: absolute;\n top: 91px;\n left: 6%;\n animation: fromleft 900ms ease-out 300ms 1 normal forwards;\n}\n#highlight .en_myanmar {display: none;}\n\n#highlight .afrika {\n opacity: 0;\n position: absolute;\n top: 129px;\n left: 42%;\n animation: fromleft 900ms ease-out 200ms 1 normal forwards;\n}\n#highlight .en_afrika {display: none;}\n\n#highlight .nordamerika {\n opacity: 0;\n position: absolute;\n top: 49px;\n left: 3%;\n animation: fromleft 900ms ease-out 300ms 1 normal forwards;\n}\n#highlight .en_nordamerika {display: none;}\n\n#highlight .buddha {\n opacity: 0;\n position: absolute;\n top: 49px;\n right: 5%;\n animation: fromright 900ms ease-out 100ms 1 normal forwards;\n}\n#highlight .en_buddha {display: none;}\n\n#highlight .munds {\n opacity: 0;\n position: absolute;\n bottom: 8px;\n right: 27%;\n animation: fromright 900ms ease-out 50ms 1 normal forwards;\n}\n#highlight .en_munds {display: none;}\n\n/* Im m5k-list index.js wird der entity.title als Klasse gesetzt um de und en zu unterscheiden daraus ergibt sich hier bei en der Selector\n .Around.the.World.in */\n\n /* english styles für Highlight animation\noooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo */\n#highlight .Around.the.World.in .en_islam {\n display: block;\n opacity: 0;\n position: absolute;\n top: 9px;\n left: 40%;\n animation: fromleft 900ms ease-out 0ms 1 normal forwards;\n}\n\n#highlight .Around.the.World.in .islam {display: none;}\n\n#highlight .Around.the.World.in .en_ozean {\n display: block;\n opacity: 0;\n position: absolute;\n top: 94px;\n right: 6%;\n animation: fromright 900ms ease-out 100ms 1 normal forwards;\n}\n#highlight .Around.the.World.in .ozean {display: none;}\n\n#highlight .Around.the.World.in .en_myanmar {\n display: block;\n opacity: 0;\n position: absolute;\n top: 91px;\n left: 6%;\n animation: fromleft 900ms ease-out 300ms 1 normal forwards;\n}\n#highlight .Around.the.World.in .myanmar {display: none;}\n\n#highlight .Around.the.World.in .en_afrika {\n display: block;\n opacity: 0;\n position: absolute;\n top: 129px;\n left: 42%;\n animation: fromleft 900ms ease-out 200ms 1 normal forwards;\n}\n#highlight .Around.the.World.in .afrika {display: none;}\n\n#highlight .Around.the.World.in .en_nordamerika {\n display: block;\n opacity: 0;\n position: absolute;\n top: 49px;\n left: 2%;\n animation: fromleft 900ms ease-out 300ms 1 normal forwards;\n}\n#highlight .Around.the.World.in .nordamerika {display: none;}\n\n#highlight .Around.the.World.in .en_buddha {\n display: block;\n opacity: 0;\n position: absolute;\n top: 49px;\n right: 2%;\n animation: fromright 900ms ease-out 100ms 1 normal forwards;\n}\n#highlight .Around.the.World.in .buddha {display: none;}\n\n#highlight .Around.the.World.in .en_munds {\n display: block;\n opacity: 0;\n position: absolute;\n bottom: 8px;\n right: 28%;\n animation: fromright 900ms ease-out 50ms 1 normal forwards;\n}\n#highlight .Around.the.World.in .munds {display: none;}\n\n\n\n"}]},{"name":"homepage","configJSON":"{\"name\":\"ImageList\",\"description\":\"ImageList for Startpage\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"ImageList\",\n \"description\": \"ImageList for Startpage\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _, { before } from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\n\n\nconst Root = styled('div')(({ theme }) => ({\n height: \"100vh\",\n textTransform:\"uppercase\"\n}));\nRoot.defaultProps = {\n \"data-id\": \"Root\"\n };\n\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 0,\n backgroundSize: \"cover\",\n width:\"100%\",\n height: 'calc(100vh - 59px)',\n\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"BackgroundImage\"\n };\n\nconst Logo = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 10,\n left: 16,\n background: 'url(/images/logo-kinemathek.png) no-repeat',\n height: 120,\n color: 'transparent',\n}));\nLogo.defaultProps = {\n \"data-id\": \"Logo\"\n };\n\nconst Claim = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 181,\n left: 16,\n height: 60,\n background: 'url(/images/audioguide.png) no-repeat',\n color: 'transparent',\n // '&:before': {\n // content: '\"\"',\n // position: 'absolute',\n // bottom: 0,\n // left: 50,\n // width: '100%',\n // height: '1rem',\n // display: 'block',\n // background:'hotpink'\n // }\n}));\n\nconst Children = styled('div')(({ theme }) => ({\n position:\"absolute\",\n bottom: \"10px\",\n left: \"10px\"\n}));\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n background: 'var(--home-childlink-bg)',\n padding: '7px 15px',\n marginTop: 10,\n display: 'block',\n borderRadius: 4,\n width: 'fit-content',\n textDecoration: 'none',\n color: '#fff',\n fontSize: '1.3rem',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n
    \n \n {entity.title}\n {entity.shortDesc}\n \n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return {child.title}\n })}\n \n \n\n
    \n     \n     \n}\n\nexport default EntityPage;"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
    \n
    \n \n \n \n
    \n\n
    \n\n {image !== null ?\n
    : <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
    \n
     
    \n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
    \n }\n
    \n
    \n \n
    \n\n
    \n
    \n     \n }    \n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: '#333',\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#fff',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n background: 'transparent',\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: '17px',\n borderBottom: '1px solid #eee',\n paddingTop: '11px',\n paddingBottom: '11px',\n display: 'block',\n paddingLeft: '0px',\n color: '#ffffff',\n textDecoration: 'none',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n zIndex: 65535\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto'\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n borderRadius: 20 / 2,\n },\n}));"}]},{"name":"custom1","configJSON":"{\"name\":\"Custom1\",\"description\":\"Adopted UI for STDL-Renoir; provides list and all components\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"collapsible.css","content":"\n.custom1 .Collapsible {\n width: 100%;\n display: block;\n padding: 16px 50px 16px 12px;\n border-bottom: 1px solid #999;\n position: relative;\n}\n\n.custom1 .Collapsible__trigger {\n cursor: pointer;\n font-size: 16px;\n line-height: 1;\n font-weight: 400;\n user-select: none;\n text-transform: uppercase;\n /* CUSTOM 1 (Schatten-Balken rechts neben Ueberschrift) */\n border-radius: 9px;\n padding-right: 15px;\n box-shadow: rgba(211, 211, 211, 0.2) 5px 0px 0px, rgba(225, 225, 225, 0.3) 15px 0px 0px, rgba(231, 231, 231, 0.3) 30px 0px 0px;\n \n}\n/* CUSTOM 1 */\n.custom1 .Collapsible__contentOuter {\n border-radius: 10px;\n box-shadow: rgba(51, 51, 60, 0.4) 0px 5px 7px -1px;\n}\n"},{"name":"config.json","content":"{\n \"name\": \"Custom1\",\n \"description\": \"Adopted UI for STDL-Renoir; provides list and all components\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"\nimport React, { Fragment, useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage } from \"gatsby-plugin-image\";\nimport { BgImage } from \"gbimage-bridge\"\n\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport Menu from \"../imagelist/menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\n\nimport List from \"./list\";\n\nimport \"./richtext.css\";//empty, could use to override src/css/richtext.css\nimport \"./collapsible.css\"\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n root: `${PREFIX}-root`,\n headline: `${PREFIX}-headline`,\n padding: `${PREFIX}-padding`,\n bildbutton: `${PREFIX}-bildbutton`\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n padding: '0',\n textDecoration: 'none',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif;',\n },\n\n [`& .${classes.headline}`]: {\n padding: '14px 8px',\n fontSize: '20px',\n lineHeight: '15px',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n color: '#000',\n /* Standart backgroundColor: '#fff', */\n /* Custom 1*/ backgroundColor: '#f5f5f5',\n },\n\n [`& .${classes.padding}`]: {\n padding: theme.spacing(1)\n },\n [`& .${classes.bildbutton}`]: {\n display: 'block',\n position: 'absolute',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n fontStretch: 'normal',\n font: '15px opensans, Verdana, Helvetica, Arial, sans-serif',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'hsla(0, 0%, 0%, 0.27)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n textTransform: 'uppercase',\n fontWeight: 600,\n /* Custom 1 */\n // boxShadow: '0 0 0 7px rgba(183, 183, 183, 0.5), 0 0 0 21px rgba(201, 201, 201, 0.3), 0 0 0 63px rgba(211, 211, 211, 0.2), 0 0 0 186px rgba(201, 201, 201, 0.1), 0 0 0 558px rgba(190, 190, 190, 0.1)',\n // borderRadius: '50%',\n //padding: '7px 55px 7px 55px',\n /* End Custom 1 */\n }\n}));\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule, pageContext } = props;\n\n\n\n const { defaultLocale } = pageContext;\n\n const image = entity.largeImage ? getImage(entity.largeImage.localFile) : null;\n const headline = (entity.shortDesc || '').replace(/(?:\\r\\n|\\r|\\n)/g, '
    ');\n\n\n\n const [keypadShown, setKeypadShown] = useState(false);//TODO - survive reload, check cookbook ch3 - redux-reducer, gatsby redux example, gatsby-redux-plugin\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n return \n \n {keypadShown ?\n :\n\n
    \n {image !== null &&\n
    \n \n { entity.headerLink !== undefined && entity.headerLink !== null && \n {entity.headerLink.title}\n }\n \n
    \n }\n { headline?.length > 0 &&
    {headline}
    }\n\n \n\n \n
    \n }\n     \n     ;\n};\n\nexport default EntityPage;\n"},{"name":"list.js","content":"\nimport React, { Fragment, useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\";\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport Menu from \"../imagelist/menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\n\n\nconst PREFIX = 'List';\n\nconst classes = {\n listItem: `${PREFIX}-listItem`,\n listLink: `${PREFIX}-listLink`,\n listImg: `${PREFIX}-listImg`,\n titleDiv: `${PREFIX}-titleDiv`,\n titleFlex: `${PREFIX}-titleFlex`,\n title1: `${PREFIX}-title1`,\n title2: `${PREFIX}-title2`,\n title3: `${PREFIX}-title3`,\n numCode: `${PREFIX}-numCode`,\n playButton: `${PREFIX}-playButton`\n};\n\nconst Root = styled('ul')((\n {\n theme\n }\n) => ({\n [`& .${classes.listItem}`]: {\n textDecoration: 'none',\n display: 'block',\n cursor: 'pointer',\n background: '#efefef',\n padding: '0',\n /* STANDART margin: '0px 0px 6px 0px',*/ \n listStyle: 'none',\n display: 'flex',\n justifyContent: 'flex-start',\n minHeight: '48px',\n /* CUSTOM 1*/\n margin: '5px 6px 5px 6px',\n overflow: 'hidden', \n alignItems: 'center',\n borderRadius: '10px',\n boxShadow: '0 5px 7px -1px rgba(51, 51, 60, 0.4)',\n rowGap: '8px', \n \n },\n\n [`& .${classes.listLink}`]: {\n textDecoration: 'none',\n color: '#000',\n \n },\n\n /* STANDART\n listImg: {\n maxWidth: '110px',\n display: 'flex',\n\n },*/\n\n /* CUSTOM 1 */\n\n [`& .${classes.listImg}`]: {\n width: '110px',\n minWidth: '110px',\n height: '80px',\n borderRadius: '50%',\n boxShadow: '0 0 0 7px #b7b7b7, 0 0 0 21px #C9C9C9, 0 0 0 63px #D3D3D3, 0 0 0 186px #E1E1E1, 0 0 0 558px #e7e7e7',\n display: 'flex',\n },\n\n /* End CUSTOM 1*/\n\n [`& .${classes.titleDiv}`]: {\n minWidth: '0',\n overflow: 'hidden',\n\n\n padding: '10px 28px 10px 8px'\n\n },\n\n [`& .${classes.titleFlex}`]: {\n\n display: 'flex',\n flexGrow: '1',\n\n alignItems: 'center',\n position: 'relative',\n minHeight: '80px',\n },\n\n [`& .${classes.title1}`]: {\n fontSize: '15px',\n textTransform: 'uppercase',\n marginBottom: '0',\n paddingRight: '25px',\n lineHeight: '1.15',\n fontWeight: 'bold',\n },\n\n [`& .${classes.title2}`]: {\n fontSize: '14px',\n lineHeight: '1.2',\n marginTop: '3px',\n paddingRight: '20px',\n },\n\n [`& .${classes.title3}`]: {\n fontSize: '14px',\n marginBottom: '0px',\n marginTop: '2px',\n fontWeight: 'normal',\n },\n\n [`& .${classes.numCode}`]: {\n position: 'absolute',\n right: '10px',\n bottom: '7px',\n fontSize: '13px',\n fontWeight: 'bold'\n },\n\n [`& .${classes.playButton}`]: {\n position: 'absolute',\n right: '6px',\n top: '50%',\n transform: 'translateY(-50%)',\n }\n}));\n\nconst List = ({ entity, pageContext }) => {\n const { strapiChildren: entities } = entity;\n\n\n\n const { defaultLocale } = pageContext;\n\n return (\n \n {entities.map(entity => {\n const listRole = _.find(entity.Roles, { strapi_component: 'role.list-child' });\n\n const title1 = listRole?.line1 || entity.title || '';\n const title2 = listRole?.line2 || false;\n const title3 = listRole?.line3 || false;\n\n const numCode = parseInt(listRole?.numCode || 0) || '';\n\n const image = entity.smallImage ? getImage(entity.smallImage.localFile) : null;\n return (\n \n \n
  • \n\n {image !== null ?\n : <>}\n
    \n
    \n
    {title1}
    \n
    {title2}
    \n
    {title3}
    \n
    {numCode}
    \n
    \n \"play\"\n
    \n
    \n
    \n\n
    • \n \n\n     \n );\n\n })}\n     \n );\n\n};\n\nexport default List;\n"},{"name":"richtext.css","content":""}]},{"name":"material","configJSON":"{\"name\":\"Presentation\",\"description\":\"Presentation\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"autoplay\":{\"required\":false,\"type\":\"boolean\"},\"fullscreen\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"Presentation\",\n \"description\": \"Presentation\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"autoplay\": {\n \"required\": false,\n \"type\": \"boolean\"\n },\n \"fullscreen\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}"},{"name":"header.js","content":"import * as React from \"react\";\n\nimport { styled } from '@mui/material/styles';\n\nimport {\n Typography,\n Card,\n CardHeader,\n CardContent,\n CardMedia,\n} from \"@mui/material\";\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\";\n\nconst PREFIX = 'Header';\n\nconst classes = {\n card: `${PREFIX}-card`,\n cardTop: `${PREFIX}-cardTop`,\n media: `${PREFIX}-media`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n /* TODO - dup - move to layout/theme */\n [`& .${classes.card}`]: { width: \"100%\", margin: theme.spacing(1,0) },\n\n [`& .${classes.cardTop}`]: { width: \"100%\", height: 300 },\n\n [`& .${classes.media}`]: {\n width: \"100%\",\n height: \"100%\",\n }\n}));\n\nconst Header = ({ entity }) => {\n\n\n const headerTitle = (entity.shortDesc||'').replace(/(?:\\r\\n|\\r|\\n)/g, '
    ') || false;\n\n return (\n \n { entity.largeImage !== null && \n \n {/* */}\n \n \n \n \n \n \n \n }\n {headerTitle !== false && \n \n } align=\"center\" />\n }\n \n );\n}\n\nexport default Header;"},{"name":"index.js","content":"import React, { useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport Header from \"./header\";\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\nimport EntityList from \"../../components/List\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule } = props;\n const [keypadShown, setKeypadShown] = useState(config?.showKeypadFirst || false);\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n return selectedModule !== 'material' ?\n <>\n :\n \n {keypadShown ?\n \n :\n
    \n
    \n \n\n {\n entity.strapiChildren.length > 0 &&\n \n }\n\n
    \n }\n     \n};\n\nexport default EntityPage;\n"}]},{"name":"m5k-list2","configJSON":"{\"name\":\"WRM List 2\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"WRM List 2\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"\nimport React, { useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage } from \"gatsby-plugin-image\";\nimport { BgImage } from \"gbimage-bridge\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport \"../m5k-list/richtext.css\";\nimport \"../m5k-list/m5k.css\";\n\nimport Menu from \"./menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\nimport List from \"./list\";\n\nimport \"../m5k-list/app.css\";\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n root: `${PREFIX}-root`,\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n padding: '0',\n textDecoration: 'none',\n fontFamily: 'mulish, opensans, Verdana, Helvetica, Arial, sans-serif;',\n },\n\n}));\n\nconst HeadlineDiv = styled('div')(({ theme }) => ({\n padding: 0,\n fontSize: 26,\n lineHeight: 1,\n textTransform: 'none',\n fontWeight: 600,\n color: '#FB67B0!important',\n margin: '21px 8px 0px',\n}));\n\nconst BildbuttonLink = styled(Link)(() => ({\n display: 'block',\n position: 'absolute',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n fontStretch: 'normal',\n font: '15px opensans, Verdana, Helvetica, Arial, sans-serif',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'hsla(0, 0%, 0%, 0.27)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n}));\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule, pageContext } = props;\n\n const { defaultLocale } = pageContext;\n\n const image = entity.largeImage ? getImage(entity.largeImage.localFile) : null;\n const headline = (entity.shortDesc || '').replace(/(?:\\r\\n|\\r|\\n)/g, '
    ');\n\n const [keypadShown, setKeypadShown] = useState(config?.showKeypadFirst || false);\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n\n return \n \n {keypadShown ?\n :\n\n
    \n {image !== null &&\n
    \n \n {config.headerLink !== undefined && config.headerLink !== null &&\n {config.headerLink.title}\n }\n \n
    \n }\n {headline?.length > 0 && {headline}}\n\n \n\n \n
    \n }\n     \n     ;\n};\n\nexport default EntityPage;\n"},{"name":"list.js","content":"import React, { Fragment, useState } from \"react\"\nimport { styled } from \"@mui/material/styles\"\nimport _ from \"lodash\"\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl, getAccessoryIcon } from \"../../util\"\n\nimport Menu from \"../imagelist/menu\"\nimport EntityKeypad from \"../../components/Keypad\"\n\nimport Wrapper from \"../../components/Wrapper\"\n\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nconst PREFIX = \"List\"\n\nconst classes = {\n listItem: `${PREFIX}-listItem`,\n listLink: `${PREFIX}-listLink`,\n listImg: `${PREFIX}-listImg`,\n titleDiv: `${PREFIX}-titleDiv`,\n titleFlex: `${PREFIX}-titleFlex`,\n title1: `${PREFIX}-title1`,\n title2: `${PREFIX}-title2`,\n title3: `${PREFIX}-title3`,\n numCode: `${PREFIX}-numCode`,\n playButton: `${PREFIX}-playButton`\n}\n\nconst Root = styled(\"ul\")(({ theme }) => ({\n listStyleType: \"none\",\n margin: \"0\",\n marginTop:\"10px\",\n padding: 0,\n borderTop: '1px solid #ddd',\n\n\n [`& .${classes.listItem}`]: {\n textDecoration: \"none\",\n display: \"block\",\n position: \"relative\",\n cursor: \"pointer\",\n padding: \"8px 0 8px 8px\",\n color: theme.palette.primary.main,\n background: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n borderBottom: '1px solid',\n borderColor: theme.palette.mode === \"light\" ? \"#ddd\" : \"#737373\",\n listStyle: \"none\",\n display: \"flex\",\n flexDirection:\"row\",\n justifyContent: \"flex-start\",\n minHeight: \"48px\",\n margin: \"0\",\n overflow: \"hidden\",\n alignItems: \"center\",\n },\n\n [`& .${classes.listLink}`]: {\n textDecoration: \"none\"\n // color: '#000',\n },\n\n [`& .${classes.listImg}`]: {\n width: \"100px\",\n height: \"100px\",\n flexShrink: 0,\n border: \"1px solid #ddd\"\n },\n\n\n [`& .${classes.titleDiv}`]: {\n width: \"100%\",\n overflow: \"hidden\",\n padding: \"0px 28px 0px 0px\"\n },\n\n [`& .${classes.titleFlex}`]: {\n display: \"flex\",\n flexGrow: \"1\",\n alignItems: \"center\",\n position: \"relative\",\n minHeight: \"60px\",\n },\n\n [`& .${classes.title1}`]: {\n fontSize: '1.2em',\n textTransform: 'none',\n marginBottom: 0,\n lineHeight: 1.15,\n fontWeight: 600,\n },\n\n [`& .${classes.title2}`]: {\n fontSize: '1em',\n lineHeight: 1.2,\n marginTop: 4,\n paddingRight: 20,\n },\n\n [`& .${classes.title3}`]: {\n fontSize: \"0.9em\",\n marginBottom: \"0px\",\n marginTop: \"2px\",\n fontWeight: \"normal\"\n },\n\n [`& .${classes.numCode}`]: {\n position: 'absolute',\n right: 8,\n bottom: 6,\n fontSize: 13,\n fontWeight: 600,\n display: 'block',\n },\n\n [`& .${classes.playButton}`]: {\n position: \"absolute\",\n right: \"6px\",\n top: \"50%\",\n transform: \"translateY(-50%)\"\n }\n}))\n\nconst List = ({ entity, pageContext }) => {\n const { strapiChildren: entities } = entity\n\n const { defaultLocale } = pageContext\n\n return (\n \n {entities.map((entity, n) => {\n const listRole = _.find(entity.Roles, {\n strapi_component: \"role.list-child\"\n })\n\n const title1 = listRole?.line1 || entity.title || \"\"\n const title2 = listRole?.line2 || false\n const title3 = listRole?.line3 || false\n\n const numCode = parseInt(listRole?.numCode || 0) || \"\"\n\n const AccessoryIcon = getAccessoryIcon({ defaultIcon: ArrowForwardIosIcon, role: listRole});\n\n const image = entity.smallImage\n ? getImage(entity.smallImage.localFile)\n : null\n return (\n \n \n
  • \n {image !== null ? (\n \n ) : (\n <>\n )}\n
    \n
    \n
    {title1}
    \n
    {title2}
    \n
    {title3}
    \n\n
    \n \n
    \n
    \n
    \n
    {numCode}
    \n
    • \n \n     \n )\n })}\n     \n )\n}\n\nexport default List\n"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n event.stopPropagation();\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n e.stopPropagation();\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
    \n
    \n \n \n \n
    \n\n
    \n\n {image !== null ?\n
    : <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
    \n
     
    \n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
    \n }\n
    \n
    \n \n
    \n\n
    \n
    \n     \n }    \n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#000',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: '1.2rem',\n fontFamily: 'mulish, sans-serif',\n borderBottom: '1px solid',\n borderColor: theme.palette.mode === \"light\" ? \"#DDD\" : \"#FFF\",\n paddingTop: 11,\n paddingBottom: 11,\n display: 'block',\n paddingLeft: 0,\n color: theme.palette.mode === \"light\" ? \"#222\" : \"#FFF\",\n textDecoration: 'none',\n fontWeight: 'normal',\n zIndex: 65535,\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto',\n marginRight: '4px',\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n display: 'none',\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n borderRadius: 20 / 2,\n },\n}));"},{"name":"richtext.css","content":".wrm .richtext {\n font: 1.1em mulish, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n font-weight: 400;\n line-height: 1.5;\n}\n\n.wrm .richtext img {\n width: 100%;\n height: auto;\n}\n\n.wrm .richtext h2 {\n margin-top: 10px;\n margin-bottom: 10px;\n text-transform: none;\n font-size: 1.2em;\n line-height: 1.2;\n font-weight: 400;\n color: #FB67B0;\n}\n\n.wrm .richtext h3 {\n margin-bottom: 20px;\n margin-top: 10px;\n line-height: 1.2;\n font-weight: 500;\n font-size: 26px;\n}\n\n.wrm .richtext h4 {\n font-weight: normal;\n font-size: 18px;\n margin-top: 10px;\n margin-bottom: 6px;\n line-height: 1.5;\n}\n\n.wrm .richtext p,\n.wrm .richtext div.raw-html-embed {\n line-height: 1.3;\n margin-top: 0px;\n margin-bottom: 8px;\n}\n\n.wrm strong {\n font-weight: 600;\n}\n\n\n.wrm .richtext a, .wrm .richtext a:visited {\n color: var(--font-color)!important;\n text-transform: none;\n font-weight: 100;\n text-decoration: underline;\n}\n\n.wrm .richtext hr {\n border: 0px;\n box-shadow: none;\n height: 1px;\n background: var(--font-color);\n margin: 28px 0;\n}\n\n.wrm .richtext figure.image {\n margin: 20px 0;\n}\n\n\n.dark .wrm .richtext {\n --font-color: #fff;\n}\n\n.wrm .richtext {\n --font-color: #000;\n}"}]},{"name":"kima-list","configJSON":"{\"name\":\"KIMA Standard List\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"KIMA Standard List\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"\nimport React, { useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage } from \"gatsby-plugin-image\";\nimport { BgImage } from \"gbimage-bridge\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport \"./richtext.css\";\n\nimport Menu from \"./menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\nimport List from \"./list\";\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n root: `${PREFIX}-root`,\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n padding: '0 10px 0 10px',\n textDecoration: 'none',\n fontFamily: 'scto, opensans, Verdana, Helvetica, Arial, sans-serif;',\n },\n\n}));\n\nconst HeadlineDiv = styled('div')(({ theme }) => ({\n padding: \"25px 10px\",\n fontSize: \"30px\",\n lineHeight: \"1\",\n textTransform: \"none\",\n fontWeight: \"bold\",\n background: \"#000\",\n color: \"#FFF!important\",\n fontFamily:\"frequenz\",\n marginBottom: '18px',\n}));\n\nHeadlineDiv.defaultProps = {\"data-id\": \"HeadlineDiv\"};\n\nconst BildbuttonLink = styled(Link)(() => ({\n display: 'block',\n position: 'absolute',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n fontStretch: 'normal',\n font: '15px opensans, Verdana, Helvetica, Arial, sans-serif',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'hsla(0, 0%, 0%, 0.27)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n}));\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule, pageContext } = props;\n\n const { defaultLocale } = pageContext;\n\n const image = entity.largeImage ? getImage(entity.largeImage.localFile) : null;\n const headline = (entity.shortDesc || '').replace(/(?:\\r\\n|\\r|\\n)/g, '
    ');\n\n const [keypadShown, setKeypadShown] = useState(config?.showKeypadFirst || false);\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n\n return \n \n {keypadShown ?\n :\n\n
    \n {image !== null &&\n
    \n \n {config.headerLink !== undefined && config.headerLink !== null &&\n {config.headerLink.title}\n }\n \n
    \n }\n {headline?.length > 0 && {headline}}\n\n \n\n \n
    \n }\n     \n     ;\n};\n\nexport default EntityPage;\n"},{"name":"list.js","content":"import React, { Fragment, useCallback, useEffect } from \"react\"\nimport { styled } from \"@mui/material/styles\"\nimport _ from \"lodash\"\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl, getAccessoryIcon } from \"../../util\"\n\nimport Menu from \"../imagelist/menu\"\nimport EntityKeypad from \"../../components/Keypad\"\n\nimport Wrapper from \"../../components/Wrapper\"\n\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nimport { useLocalStorage } from '../../components/hooks';\n\nconst PREFIX = \"List\"\n\nconst classes = {\n listItem: `${PREFIX}-listItem`,\n listLink: `${PREFIX}-listLink`,\n listImg: `${PREFIX}-listImg`,\n titleDiv: `${PREFIX}-titleDiv`,\n titleFlex: `${PREFIX}-titleFlex`,\n title1: `${PREFIX}-title1`,\n title2: `${PREFIX}-title2`,\n title3: `${PREFIX}-title3`,\n numCode: `${PREFIX}-numCode`,\n playButton: `${PREFIX}-playButton`\n}\n\nconst Root = styled(\"ul\")(({ theme }) => ({\n listStyleType: \"none\",\n margin: \"0\",\n marginTop: \"10px\",\n padding: 0,\n [`& .${classes.listItem}`]: {\n textDecoration: \"none\",\n display: \"block\",\n cursor: \"pointer\",\n padding: \"0\",\n color: theme.palette.primary.main,\n background: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#1b1b1b\",\n listStyle: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n minHeight: \"48px\",\n margin: \"0\",\n overflow: \"hidden\",\n alignItems: \"center\",\n },\n\n [`& .${classes.listLink}`]: {\n textDecoration: \"none\"\n // color: '#000',\n },\n\n /* STANDART\n listImg: {\n maxWidth: '110px',\n display: 'flex',\n\n },*/\n\n /* CUSTOM 1 */\n\n [`& .${classes.listImg}`]: {\n width: \"100%\",\n height: \"200px\",\n display: \"flex\",\n flexDirection: \"column\"\n },\n\n /* End CUSTOM 1*/\n\n [`& .${classes.titleDiv}`]: {\n width: \"100%\",\n overflow: \"hidden\",\n padding: \"5px 28px 15px 0px\"\n },\n\n [`& .${classes.titleFlex}`]: {\n display: \"flex\",\n flexGrow: \"1\",\n width: \"100%\",\n alignItems: \"center\",\n position: \"relative\",\n minHeight: \"60px\",\n marginBottom: '6px',\n },\n\n [`& .${classes.title1}`]: {\n fontSize: \"1.2rem\",\n textTransform: \"none\",\n marginBottom: \"0\",\n lineHeight: \"1.15\",\n fontWeight: \"bold\",\n fontFamily: 'frequenz',\n },\n\n [`& .${classes.title2}`]: {\n fontSize: 17,\n fontFamily: 'frequenz',\n lineHeight: 1.2,\n marginTop: 4,\n paddingRight: 20,\n },\n\n [`& .${classes.title3}`]: {\n fontSize: \"14px\",\n marginBottom: \"0px\",\n marginTop: \"2px\",\n fontWeight: \"normal\"\n },\n\n [`& .${classes.numCode}`]: {\n position: 'absolute',\n right: 5,\n bottom: 0,\n fontFamily: 'frequenz',\n fontSize: 13,\n fontWeight: 'bold',\n display: 'block',\n },\n\n [`& .${classes.playButton}`]: {\n position: \"absolute\",\n right: \"0px\",\n top: \"50%\",\n transform: \"translateY(-50%)\"\n }\n}))\n\nconst List = ({ entity, pageContext }) => {\n const { strapiChildren: entities } = entity\n\n const { defaultLocale, locale } = pageContext\n\n const [scrollPos, setScrollPos] = useLocalStorage(`module.kima-list-scrollpos-${locale}.${entity.identifier}`, 0);\n const onNavigate = useCallback((e) => {\n setScrollPos(e.view.pageYOffset);\n }, [setScrollPos]);\n\n useEffect(() => {\n window.scrollTo(0, scrollPos);\n }, [scrollPos]);\n\n return (\n \n {entities.map((entity, n) => {\n const listRole = _.find(entity.Roles, {\n strapi_component: \"role.list-child\"\n })\n\n const title1 = listRole?.line1 || entity.title || \"\"\n const title2 = listRole?.line2 || false\n const title3 = listRole?.line3 || false\n\n const numCode = parseInt(listRole?.numCode || 0) || \"\"\n\n const AccessoryIcon = getAccessoryIcon({ defaultIcon: ArrowForwardIosIcon, role: listRole });\n\n const image = entity.smallImage\n ? getImage(entity.smallImage.localFile)\n : null;\n\n return (\n \n \n
  • \n {image !== null ? (\n \n ) : (\n <>\n )}\n
    \n
    \n
    {title1}
    \n
    {title2}
    \n
    {title3}
    \n
    {numCode}
    \n
    \n \n
    \n
    \n
    \n
    • \n \n     \n )\n })}\n     \n )\n}\n\nexport default List\n"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n event.stopPropagation();\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n e.stopPropagation();\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
    \n
    \n \n \n \n
    \n\n
    \n\n {image !== null ?\n
    : <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
    \n
     
    \n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
    \n }\n
    \n
    \n \n
    \n\n
    \n
    \n     \n }    \n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: '#FFF',\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#000',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n background: '#FFF',\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: 19,\n borderBottom: '1px solid #000',\n paddingTop: 11,\n paddingBottom: 11,\n display: 'block',\n paddingLeft: 0,\n color: '#000000',\n fontFamily: 'frequenz',\n textDecoration: 'none',\n textTransform: 'uppercase',\n fontWeight: 'bold',\n zIndex: 65535,\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto'\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n display: 'none',\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n borderRadius: 20 / 2,\n },\n}));"},{"name":"richtext.css","content":".kima .richtext {\n font: 1.1rem scto, opensans, Verdana, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n line-height: 1.3;\n}\n\n.kima .richtext img {\n width: 100%;\n height: auto;\n}\n\n.kima .richtext h2 {\n margin-top: 10px;\n margin-bottom: 14px;\n text-transform: none;\n font-size: 1.2rem;\n line-height: 1.2;\n font-weight: bold;\n font-family: 'frequenz';\n}\n\n.kima .richtext h3 {\n margin-bottom: 6px;\n padding-top: 10px;\n line-height: 1.2;\n font-weight: 100;\n font-size: 24px;\n font-family: 'frequenz';\n text-transform: uppercase;\n}\n\n.kima .richtext h4 {\n font-weight: normal;\n font-size: 18px;\n margin-top: 10px;\n margin-bottom: 6px;\n line-height: 1.5;\n}\n\n.kima .richtext p,\n.kima .richtext div.raw-html-embed {\n line-height: 1.3;\n margin-top: 0px;\n margin-bottom: 8px;\n}\n\n\n.kima .richtext a {\n border: 2px solid var(--font-color);\n color: var(--font-color);\n padding: 7px 7px 7px 7px;\n text-transform: none;\n font-weight: bold;\n font-size: 16px;\n margin: 15px 0 0 0;\n display: inline-block;\n text-decoration: none !important;\n background: #fff;\n}\n\n.kima .richtext figure.image {\n margin: 20px 0;\n}\n\n.kima .richtext u {\n text-transform: uppercase;\n font-size: 1rem;\n text-decoration: none;\n}\n\n\n.dark .kima .richtext {\n --font-color: #fff;\n}\n\n.kima .richtext {\n --font-color: #000;\n}"}]},{"name":"wma-hp-overlay","configJSON":"{\"name\":\"WMA Homepage - children as overlays\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"WMA Homepage - children as overlays\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _, { before } from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\n\n\nconst Root = styled('div')(({ theme }) => ({\n height: \"100vh\",\n textTransform:\"uppercase\"\n}));\nRoot.defaultProps = {\n \"data-id\": \"Root\"\n };\n\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 0,\n backgroundSize: \"cover\",\n width:\"100%\",\n height: 'calc(100vh - 59px)',\n\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"BackgroundImage\"\n };\n\nconst Logo = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 10,\n left: 16,\n background: 'url(/images/logo-kinemathek.png) no-repeat',\n height: 120,\n color: 'transparent',\n}));\nLogo.defaultProps = {\n \"data-id\": \"Logo\"\n };\n\nconst Claim = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 181,\n left: 16,\n height: 60,\n background: 'url(/images/audioguide.png) no-repeat',\n color: 'transparent',\n // '&:before': {\n // content: '\"\"',\n // position: 'absolute',\n // bottom: 0,\n // left: 50,\n // width: '100%',\n // height: '1rem',\n // display: 'block',\n // background:'hotpink'\n // }\n}));\n\nconst Children = styled('div')(({ theme }) => ({\n position:\"absolute\",\n bottom: \"10px\",\n left: \"10px\"\n}));\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n background: 'var(--home-childlink-bg)',\n padding: '7px 15px',\n marginTop: 10,\n display: 'block',\n borderRadius: 4,\n width: 'fit-content',\n textDecoration: 'none',\n color: '#fff',\n fontSize: '1.3rem',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n
    \n \n {entity.title}\n {entity.shortDesc}\n \n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return {child.title}\n })}\n \n \n\n
    \n     \n     \n}\n\nexport default EntityPage;"}]},{"name":"wma-hp-list","configJSON":"{\"name\":\"WMA Homepage - children as list below largeImg, fills screen\",\"description\":\"\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"WMA Homepage - children as list below largeImg, fills screen\",\n \"description\": \"\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"import React from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { BgImage } from \"gbimage-bridge\"\nimport { getImage } from \"gatsby-plugin-image\"\n\nimport { Link } from \"gatsby\"\n\nimport { getEntityUrl, getOverlayImages } from \"../../util\";\nimport Wrapper from \"../../components/Wrapper\";\n\n\nimport \"core-js/proposals/string-match-all\";//polyfill for old Androids; TODO - move away from here\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nconst Root = styled('div')(({ theme }) => ({\n\n}));\nRoot.defaultProps = {\n \"data-id\": \"Root\"\n };\n// ----------------------------------------------------------\nconst HomeContainer = styled('div')(({ theme }) => ({\n height: 'calc(100vh - 1px)',\n display: 'flex',\n flexDirection: 'column',\n alignContent: 'flex-start',\n justifyContent: 'flex-start',\n margin: '0 8px',\n}));\nHomeContainer.defaultProps = {\n \"data-id\": \"HomeContainer\"\n };\n// ----------------------------------------------------------\nconst BackgroundImage = styled(BgImage)(({ theme }) => ({\n flexGrow: 2,\n backgroundSize: \"cover\",\n flexBasis:\"40%\",\n backgroundPosition:\"left top!important\"\n}));\nBackgroundImage.defaultProps = {\n \"data-id\": \"Header\"\n };\n// ----------------------------------------------------------\nconst Title1 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 0,\n right: 15,\n transform: 'translateY(-104%)',\n background: 'transparent',\n WebkitBackgroundSize: 'contain',\n backgroundSize: 'contain',\n height: 145,\n width: 110,\n color: 'transparent',\n\n}));\n// ----------------------------------------------------------\nconst Title2 = styled('div')(({ theme }) => ({\n position: 'absolute',\n top: 38,\n left: 14,\n height: 60,\n color: '#fff',\n fontFamily: 'frequenz',\n fontSize: 68,\n lineHeight: 1,\n}));\n// ----------------------------------------------------------\nconst ChildrenUl = styled('ul')(({ theme }) => ({\n margin: 0,\n padding: 0,\n listStyleType: 'none',\n display: 'block',\n position:\"relative\"\n}));\n// ----------------------------------------------------------\nChildrenUl.defaultProps = {\n \"data-id\": \"ChildrenUl\"\n };\n// ----------------------------------------------------------\nconst ChildLi = styled('li')(({ theme }) => ({\n margin:\"0\",\n padding:\"0\",\n position: 'relative',\n borderBottom: '1px solid',\n borderColor: theme.palette.mode === \"light\" ? \"#333\" : \"#DDD\",\n}));\nChildLi.defaultProps = {\"data-id\": \"ChildLi\"};\n\n// ----------------------------------------------------------\nconst ChildLiIcon = styled('div')(({ theme }) => ({\n position: 'absolute',\n right: 0,\n top: '50%',\n transform: 'translateY(-50%)',\n}));\nChildLiIcon.defaultProps = {\n \"data-id\": \"ChildLiIcon\"\n };\n\nconst ChildLink = styled(Link)(({ theme }) => ({\n display: 'block',\n textDecoration: 'none',\n padding: '15px 10px',\n paddingLeft: '4px',\n backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n backgroundPosition: '97% center',\n color: theme.palette.mode === \"light\" ? \"#222\" : \"#FFF\",\n fontSize: '1.3rem',\n}));\n\nconst ChildDiv = styled('div')(({ theme }) => ({\n}));\n\nconst EntityPage = (props) => {\n\n const { entity, pageContext, selectedModule, files } = props;\n const { strapiChildren: children } = entity;\n\n const image = getImage(entity.largeImage?.localFile);\n const { defaultLocale } = pageContext;\n\n return \n \n \n \n\n {entity.shortDesc}\n \n \n {entity.title}\n {children.map((child, n) => {\n const url = getEntityUrl({ entity: child, defaultLocale });\n\n return (\n \n\n {child.title}\n \n \n \n \n );\n })}\n \n\n\n \n \n \n}\n\nexport default EntityPage;"}]},{"name":"webflow","configJSON":"{\"name\":\"List\",\"description\":\"Simple List with Keypad\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"List\",\n \"description\": \"Simple List with Keypad\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}"},{"name":"index.js","content":"import React, { useState } from 'react';\n\nimport Wrapper from \"../../components/Wrapper\";\n\nimport { IndexView as ListView } from './views';\n\nimport EntityKeypad from \"../../components/Keypad\";\n\nconst Default = (props) => {\n const { entity, config, selectedModule } = props;\n\n const [keypadShown, setKeypadShown] = useState(false);//TODO - survive reload, check cookbook ch3 - redux-reducer, gatsby redux example, gatsby-redux-plugin\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n\n return selectedModule !== 'webflow' ? \n <>\n :\n \n {keypadShown ? \n :\n \n } \n \n \n};\n\nexport default Default;\n"}]},{"name":"wma-list","configJSON":"{\"name\":\"WMA Standard List\",\"description\":\"Adopted UI for STDL-Renoir; provides list and all components\",\"icon\":\"align-justify\",\"category\":\"module-config\",\"attributes\":{\"showKeypad\":{\"required\":false,\"type\":\"boolean\"}}}","srcs":[{"name":"config.json","content":"{\n \"name\": \"WMA Standard List\",\n \"description\": \"Adopted UI for STDL-Renoir; provides list and all components\",\n \"icon\": \"align-justify\",\n \"category\": \"module-config\",\n \"attributes\": {\n \"showKeypad\": {\n \"required\": false,\n \"type\": \"boolean\"\n }\n }\n}\n"},{"name":"index.js","content":"\nimport React, { useState } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getImage } from \"gatsby-plugin-image\";\nimport { BgImage } from \"gbimage-bridge\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl } from \"../../util\";\n\nimport \"./richtext.css\";\n\nimport Menu from \"./menu\";\nimport EntityKeypad from \"../../components/Keypad\";\n\nimport Wrapper from \"../../components/Wrapper\";\nimport ComponentsWrapper from \"../../components/ComponentsWrapper\";\n\nimport List from \"./list\";\n\nconst PREFIX = 'EntityPage';\n\nconst classes = {\n root: `${PREFIX}-root`,\n};\n\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n padding: '0',\n textDecoration: 'none',\n fontFamily: 'scto, opensans, Verdana, Helvetica, Arial, sans-serif;',\n },\n\n}));\n\nconst HeadlineDiv = styled('div')(({ theme }) => ({\n padding: \"25px 10px\",\n fontSize: \"30px\",\n lineHeight: \"1\",\n textTransform: \"none\",\n fontWeight: \"bold\",\n background: \"#000\",\n color: \"#FFF!important\",\n fontFamily:\"frequenz\"\n}));\n\nconst BildbuttonLink = styled(Link)(() => ({\n display: 'block',\n position: 'absolute',\n fontFamily: 'opensans, Verdana, Helvetica, Arial, sans-serif',\n fontStretch: 'normal',\n font: '15px opensans, Verdana, Helvetica, Arial, sans-serif',\n /* font-family: 'openlight', */\n bottom: '12px',\n left: '10px',\n whiteSpace: 'nowrap',\n padding: '8px 15px',\n background: 'hsla(0, 0%, 0%, 0.27)',\n fontSize: '16px',\n color: '#ffffff!important',\n border: '1px solid #FFF',\n letterSpacing: '0.06em',\n textDecoration: 'none!important',\n}));\n\nconst EntityPage = (props) => {\n const { entity, config, selectedModule, pageContext } = props;\n\n const { defaultLocale } = pageContext;\n\n const image = entity.largeImage ? getImage(entity.largeImage.localFile) : null;\n const headline = (entity.shortDesc || '').replace(/(?:\\r\\n|\\r|\\n)/g, '
    ');\n\n const [keypadShown, setKeypadShown] = useState(config?.showKeypadFirst || false);\n const keypadToggle = () => {\n setKeypadShown(!keypadShown);\n };\n\n return \n \n {keypadShown ?\n :\n\n
    \n {image !== null &&\n
    \n \n {config.headerLink !== undefined && config.headerLink !== null &&\n {config.headerLink.title}\n }\n \n
    \n }\n {headline?.length > 0 && {headline}}\n\n \n\n \n
    \n }\n     \n     ;\n};\n\nexport default EntityPage;\n"},{"name":"list.js","content":"import React, { Fragment, useState } from \"react\"\nimport { styled } from \"@mui/material/styles\"\nimport _ from \"lodash\"\n\nimport { getImage, GatsbyImage } from \"gatsby-plugin-image\"\nimport { Link } from \"gatsby\"\nimport { getEntityUrl, getAccessoryIcon } from \"../../util\"\n\nimport Menu from \"../imagelist/menu\"\nimport EntityKeypad from \"../../components/Keypad\"\n\nimport Wrapper from \"../../components/Wrapper\"\n\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\n\nconst PREFIX = \"List\"\n\nconst classes = {\n listItem: `${PREFIX}-listItem`,\n listLink: `${PREFIX}-listLink`,\n listImg: `${PREFIX}-listImg`,\n titleDiv: `${PREFIX}-titleDiv`,\n titleFlex: `${PREFIX}-titleFlex`,\n title1: `${PREFIX}-title1`,\n title2: `${PREFIX}-title2`,\n title3: `${PREFIX}-title3`,\n numCode: `${PREFIX}-numCode`,\n playButton: `${PREFIX}-playButton`\n}\n\nconst Root = styled(\"ul\")(({ theme }) => ({\n listStyleType: \"none\",\n margin: \"0\",\n marginTop:\"10px\",\n padding: 0,\n\n\n [`& .${classes.listItem}`]: {\n textDecoration: \"none\",\n display: \"block\",\n cursor: \"pointer\",\n padding: \"8px 0 8px 8px\",\n color: theme.palette.primary.main,\n background: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n borderBottom: '1px solid',\n borderColor: theme.palette.mode === \"light\" ? \"#ddd\" : \"#737373\",\n listStyle: \"none\",\n display: \"flex\",\n flexDirection:\"row\",\n justifyContent: \"flex-start\",\n minHeight: \"48px\",\n margin: \"0\",\n overflow: \"hidden\",\n alignItems: \"center\",\n },\n\n [`& .${classes.listLink}`]: {\n textDecoration: \"none\"\n // color: '#000',\n },\n\n [`& .${classes.listImg}`]: {\n width: \"100px\",\n height: \"100px\",\n border: \"1px solid #ddd\"\n },\n\n\n [`& .${classes.titleDiv}`]: {\n width: \"100%\",\n overflow: \"hidden\",\n padding: \"0px 28px 0px 11px\"\n },\n\n [`& .${classes.titleFlex}`]: {\n display: \"flex\",\n flexGrow: \"1\",\n alignItems: \"center\",\n position: \"relative\",\n minHeight: \"60px\",\n },\n\n [`& .${classes.title1}`]: {\n fontSize: '1rem',\n textTransform: 'none',\n marginBottom: 0,\n lineHeight: 1.15,\n fontWeight: 700,\n },\n\n [`& .${classes.title2}`]: {\n fontSize: 17,\n lineHeight: 1.2,\n marginTop: 4,\n paddingRight: 20,\n },\n\n [`& .${classes.title3}`]: {\n fontSize: \"14px\",\n marginBottom: \"0px\",\n marginTop: \"2px\",\n fontWeight: \"normal\"\n },\n\n [`& .${classes.numCode}`]: {\n position: \"absolute\",\n right: \"10px\",\n bottom: \"7px\",\n fontSize: \"13px\",\n fontWeight: \"bold\",\n display:\"none\"\n },\n\n [`& .${classes.playButton}`]: {\n position: \"absolute\",\n right: \"6px\",\n top: \"50%\",\n transform: \"translateY(-50%)\"\n }\n}))\n\nconst List = ({ entity, pageContext }) => {\n const { strapiChildren: entities } = entity\n\n const { defaultLocale } = pageContext\n\n return (\n \n {entities.map((entity, n) => {\n const listRole = _.find(entity.Roles, {\n strapi_component: \"role.list-child\"\n })\n\n const title1 = listRole?.line1 || entity.title || \"\"\n const title2 = listRole?.line2 || false\n const title3 = listRole?.line3 || false\n\n const numCode = parseInt(listRole?.numCode || 0) || \"\"\n\n const AccessoryIcon = getAccessoryIcon({ defaultIcon: ArrowForwardIosIcon, role: listRole});\n\n const image = entity.smallImage\n ? getImage(entity.smallImage.localFile)\n : null\n return (\n \n \n
  • \n {image !== null ? (\n \n ) : (\n <>\n )}\n
    \n
    \n
    {title1}
    \n
    {title2}
    \n
    {title3}
    \n
    {numCode}
    \n
    \n \n
    \n
    \n
    \n
    • \n \n     \n )\n })}\n     \n )\n}\n\nexport default List\n"},{"name":"menu.js","content":"import React, { useState, useCallback, useContext } from \"react\";\nimport { styled } from '@mui/material/styles';\nimport _ from \"lodash\";\n\nimport { getEntityUrl, getTranslatedTopbarEntities, getTranslatedEntityLink } from \"../../util\";\n\nimport { GatsbyImage, getImage, getSrc } from \"gatsby-plugin-image\"\n\nimport { Link, useStaticQuery, graphql } from \"gatsby\";\nimport { IconButton, Slide } from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Switch from '@mui/material/Switch';\n\nimport { useTheme } from \"@mui/material/styles\";\n\nimport { ColorModeContext } from '../../components/Layout';\n\n\n\nconst MainMenu = (props) => {\n /* TODO - util this */\n const { allStrapiAppSettings: settings, allStrapiEntities: entities } = useStaticQuery(staticQuery);\n const { pageContext, entity, locales } = props;\n const { locale: curLocale, defaultLocale } = pageContext || {};\n const translatedTopbarEntites = getTranslatedTopbarEntities(settings, entities, curLocale);\n\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n\n const handleMenu = (event) => {\n setAnchorEl(event.currentTarget);\n event.stopPropagation();\n };\n\n const handleClose = useCallback((e) => {\n if (e.target.nodeName !== 'INPUT')//dont hide on darkmode-switch - TODO - y?\n setAnchorEl(null);\n e.stopPropagation();\n }, [setAnchorEl]);\n\n const image = settings?.nodes[0]?.logo ? getImage(settings.nodes[0].logo.localFile) : null;\n\n const theme = useTheme();\n const colorMode = useContext(ColorModeContext);\n return (\n {translatedTopbarEntites.length > 0 && <>\n \n \n \n \n\n
    \n
    \n \n \n \n
    \n\n
    \n\n {image !== null ?\n
    : <>}\n\n {translatedTopbarEntites?.map(e =>\n \n {e.title}\n \n )}\n {locales?.length > 1 &&\n
    \n
     
    \n {\n locales.map((locale) => {\n if (locale.code === curLocale) return \n const link = getTranslatedEntityLink({ locale: locale, defaultLocale, entity });\n return \n {locale.name}\n \n })}\n
    \n }\n
    \n
    \n \n
    \n\n
    \n
    \n     \n }    \n );\n}\n\nexport default MainMenu;\n\nconst staticQuery = graphql`\n query {\n allStrapiAppSettings {\n nodes {\n Topbar {\n languageSwitch\n entities {\n identifier\n title\n locale\n }\n }\n logo {\n localFile {\n childImageSharp {\n gatsbyImageData(width: 30)\n }\n }\n }\n }\n }\n allStrapiEntities {\n nodes {\n identifier\n title\n locale\n }\n }\n }\n `;\n\n\nconst PREFIX = 'MainMenu';\n\nconst classes = {\n root: `${PREFIX}-root`,\n menu: `${PREFIX}-menu`,\n item: `${PREFIX}-item`,\n logo: `${PREFIX}-logo`,\n closeButton: `${PREFIX}-closeButton`\n};\n\n// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.\nconst Root = styled('div')((\n {\n theme\n }\n) => ({\n [`& .${classes.root}`]: {\n backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n position: 'fixed',\n zIndex: 100,\n height: '100%',\n width: '100%',\n color: '#000',\n top: '0px',\n left: '0px'\n },\n\n [`& .${classes.menu}`]: {\n width: '94%',\n backgroundColor: theme.palette.mode === \"light\" ? \"#ffffff\" : \"#333\",\n height: 'auto',\n position: 'fixed',\n right: '0',\n top: '49px',\n zIndex: '8000',\n margin: '0px 10px',\n overflow: 'auto',\n maxHeight: '90vh',\n },\n\n [`& .${classes.item}`]: {\n fontSize: '1.2rem',\n borderBottom: '1px solid',\n borderColor: theme.palette.mode === \"light\" ? \"#DDD\" : \"#FFF\",\n paddingTop: 11,\n paddingBottom: 11,\n display: 'block',\n paddingLeft: 0,\n color: theme.palette.mode === \"light\" ? \"#222\" : \"#FFF\",\n textDecoration: 'none',\n fontWeight: 'normal',\n zIndex: 65535,\n },\n\n [`& .${classes.logo}`]: {\n\n },\n\n [`& .${classes.closeButton}`]: {\n flex: '0 1 auto',\n marginLeft: 'auto',\n marginRight: '4px',\n\n }\n}));\n\nconst DarkmodeSwitch = styled(Switch)(({ theme }) => ({\n display: 'none',\n width: 70,\n height: 34,\n padding: 7,\n paddingLeft: 1,\n '& .MuiSwitch-switchBase': {\n margin: 1,\n padding: 0,\n transform: 'translateX(0px)',\n '&.Mui-checked': {\n color: '#fff',\n transform: 'translateX(30px)',\n '& .MuiSwitch-thumb:before': {\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n '& + .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n },\n },\n },\n '& .MuiSwitch-thumb': {\n backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',\n width: 32,\n height: 32,\n '&:before': {\n content: \"''\",\n position: 'absolute',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center',\n backgroundImage: `url('data:image/svg+xml;utf8,')`,\n },\n },\n '& .MuiSwitch-track': {\n opacity: 1,\n backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',\n borderRadius: 20 / 2,\n },\n}));"},{"name":"richtext.css","content":".wma .richtext {\n font: 16px opensans, Verdana, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n line-height: 1.5;\n}\n\n.wma .richtext img {\n width: 100%;\n height: auto;\n}\n\n.wma .richtext h2 {\n margin-top: 10px;\n margin-bottom: 10px;\n text-transform: none;\n font-size: 26px;\n line-height: 1.2;\n font-weight: bold;\n}\n\n.wma .richtext h3 {\n margin-bottom: 20px;\n margin-top: 10px;\n line-height: 1.2;\n font-weight: 500;\n font-size: 26px;\n}\n\n.wma .richtext h4 {\n font-weight: normal;\n font-size: 18px;\n margin-top: 10px;\n margin-bottom: 6px;\n line-height: 1.5;\n}\n\n.wma .richtext p,\n.wma .richtext div.raw-html-embed {\n line-height: 1.5;\n margin-top: 0px;\n margin-bottom: 8px;\n}\n\n\n.wma .richtext a {\n color: var(--font-color);\n text-transform: none;\n font-weight: 400;\n text-decoration: underline;\n}\n\n.wma .richtext hr {\n border: 0px;\n box-shadow: none;\n height: 1px;\n background: var(--font-color);\n margin: 28px 0;\n}\n\n.wma .richtext figure.image {\n margin: 20px 0;\n}\n\n\n.dark .wma .richtext {\n --font-color: #fff;\n}\n\n.wma .richtext {\n --font-color: #000;\n}"}]},{"name":"base","configJSON":"{}","srcs":[{"name":"file","content":null}]},{"name":"base-thumbnails","configJSON":"{}","srcs":[{"name":"file","content":null}]},{"name":"language-selection","configJSON":"{}","srcs":[{"name":"file","content":null}]}]}}}