{"version":3,"sources":["../assets/images/brand-identity/icons/video-play-white.svg","components/Embeds/Youtube/Preview/styles.js","components/Embeds/Youtube/Preview/index.tsx","components/Area/AreaHero/styles.js","components/Area/AreaHero/index.tsx","components/Area/AreaDescription/styles.js","components/Area/AreaDescription/index.tsx","components/Area/AreaTabButtons/styles.js","components/Area/AreaTabButtons/index.tsx","components/Area/AreaBlocks/AreaMap/styles.js","components/Area/AreaBlocks/AreaMap/index.tsx","components/Area/AreaBlocks/AreaApartmentList/styles.js","components/Area/AreaBlocks/AreaApartmentList/index.tsx","components/Area/AreaBlocks/PaavoData/styles.js","components/PaavoGraph/styles.js","components/PaavoGraph/index.tsx","components/Area/AreaBlocks/PaavoData/index.tsx","components/Area/AreaBlocks/EditableTwoColumnsForm/styles.js","components/Area/AreaBlocks/EditableTwoColumnsForm/index.tsx","pages/AreaPage/styles.js","pages/AreaPage/index.tsx"],"names":["module","exports","ImageContainer","styled","div","attrs","className","withConfig","componentId","props","bgColor","css","rgba","color","isStill","YoutubePreview","_a","id","onClick","still","rest","__rest","icon","useRef","container","timeout","x","y","anim","iconX","iconY","loop","current","width","height","getBoundingClientRect","tx","ty","style","setProperty","toFixed","requestAnimationFrame","onMouseMove","e","containerElem","clientY","clientX","left","top","console","log","onMouseLeave","hasWindow","classList","remove","window","setTimeout","cancelAnimationFrame","onMouseEnter","clearTimeout","add","useEffect","document","documentElement","addEventListener","removeEventListener","React","createElement","ref","Image","Object","assign","src","concat","fallbackSrc","thumb","lazy","playIcon","alt","Hero","hasColumns","HeroColumns","media","lg","_templateObject","_taggedTemplateLiteral","_templateObject2","HeroColumn","_templateObject3","grid","gutter","_templateObject4","lgx","_templateObject5","HeroImage","_templateObject6","_templateObject7","AreaPostcodes","textStyles","H3","AreaHero","_ref","doc","modalOpen","setModalOpen","useState","areaVideo","imageArea","hasImage","isEmpty","hasVideo","hasVideoOrImage","isAdmin","Fragment","Container","Text","name","placeholder","multiline","Background","sizeInfo","tagName","Modal","content","YoutubeEmbed","videoID","autoplay","onClose","ShortDescription","h2","DescriptionContent","md","PLarge","AreaDescription","Editor","AreaTabs","MediumText","TabsContainer","TabIndicator","span","AreaTabButtons","tabs","containerRef","indicatorRef","useTabIndicator","map","_ref2","i","tabUrl","tabName","Tab","key","url","dangerouslySetInnerHTML","__html","filterXSS","AreaMapContainer","pulsate","keyframes","MapPlaceholder","LeafletMap","Placeholder","AreaMap","item","customMapHeading","addressString","Suspense","fallback","address","AreaApartmentListContainer","AreaApartmentsInfo","PMedium","AInline","isValidPostcode","pcode","test","AreaApartmentList","properties","setProperties","pageH1","pageSearchInfo","areaPostcodes","postcodes","split","removeNonNumeric","filter","isRendering","initialized","__awaiter","params","limit","query","postcode","sort","sortOrder","type","data","searchService","fetchProperties","results","ApartmentGrid","connect","state","PaavoTitle","PaavoTabButtons","PaavoColumns","PaavoColumn","PaavoItems","PaavoItem","gutterSmall","PaavoLabel","MicroTextCaps","PaavoValue","FormPlaceholderText","PaavoSources","MicroText","PaavoGraphContainer","PaavoGraphTitle","h4","Graph","GraphSection","GraphLabels","GraphLabel","PaavoGraph","values","index","label","value","flexBasis","data-label","_ref3","formattedValues","obj","noPairs","arguments","length","undefined","keys","toPairs","PaavoData","paavoData","buttonContainerRef","NarrowContainer","withoutPadding","TabSwitcher","asuminen","vaesto","Asuntoja","asuminenValues","vaestoData","asuminenData","TabPanel","whenActive","d","_ref4","idx","NumberFormat","thousandSeparator","displayType","memo","FormWrapper","EditableTwoColumnsForm","ContactFormSelectable","AdminTabHeader","AreaBlocks","DeveloperAgencies","DeveloperBodyText","withRouter","location","canonicalPath","Repeater","Blocklist","blocks","baseUrl","currentUrl","decodeURIComponent","pathname","emitChanges","renderHidden","$$index"],"mappings":"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","file":"assets/js/pages-AreaPage.chunk.js?cb=c1b4f1c472398ce419a9","sourcesContent":["module.exports = \"data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjYyIiB2aWV3Qm94PSIwIDAgNjIgNjIiIHdpZHRoPSI2MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0ibTMxIDYxYzE2LjU2ODUgMCAzMC0xMy40MzE1IDMwLTMwcy0xMy40MzE1LTMwLTMwLTMwLTMwIDEzLjQzMTUtMzAgMzAgMTMuNDMxNSAzMCAzMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiIHN0cm9rZT0iI2ZmZiIvPjxwYXRoIGQ9Im0yNy40MTA4IDIwLjE0ODljLTEuMzI3Ni0uOTA1Ni0zLjEyNzEuMDQ1MS0zLjEyNzEgMS42NTIydjE5LjMwOTdjMCAxLjYwNyAxLjc5OTUgMi41NTc4IDMuMTI3MSAxLjY1MjFsMTQuMTUyNi05LjY1NDhjMS4xNjM4LS43OTQgMS4xNjM4LTIuNTEwNCAwLTMuMzA0M3oiLz48L2c+PC9zdmc+\"","import styled, { css } from \"styled-components\";\nimport { color } from \"@utils/style-utils\";\nimport { rgba } from \"polished\";\n\nexport const ImageContainer = styled.div.attrs(() => ({\n\tclassName: \"youtube-preview\",\n}))`\n\tcursor: pointer;\n\theight: 0;\n\toverflow: hidden;\n\tpadding-bottom: calc(56.25% - 2px);\n\tposition: relative;\n\twidth: 100%;\n\n\t${props =>\n\t\tprops.bgColor &&\n\t\tcss`\n\t\t\tbackground-color: ${props.bgColor};\n\t\t`}\n\n\t&::before {\n\t\tbackground: ${rgba(color(\"grey\", 1), 0.3)};\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 100%;\n\t\tleft: 0;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\ttransition: opacity 150ms;\n\t\twidth: 100%;\n\t\tz-index: 2;\n\t}\n\n\timg {\n\t\tdisplay: block;\n\t\tleft: 50%;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\n\t> img {\n\t\twidth: 100%;\n\t}\n\n\t.icon {\n\t\tpointer-events: none;\n\t\ttransform: translate(-50%, -50%) scale(1);\n\t\ttransition: transform 400ms;\n\t\twidth: 60px;\n\t\tz-index: 5;\n\t}\n\n\t&.mouse-over {\n\t\t&::before {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.icon {\n\t\t\t@supports (display: grid) {\n\t\t\t\ttransition: transform 0ms;\n\t\t\t\ttransform: translate(var(--mX, 0px), var(--mY, 0px));\n\t\t\t}\n\t\t}\n\t}\n\n\t${props =>\n\t\tprops.isStill &&\n\t\tcss`\n\t\t\t.is-pointer & {\n\t\t\t\t&:hover {\n\t\t\t\t\t.icon {\n\t\t\t\t\t\ttransform: translate(-50%, -50%) scale(1.2);\n\t\t\t\t\t}\n\t\t\t\t\t&::before {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t`}\n`;\n","import React, { useEffect, useRef } from \"react\";\nimport Image from \"@components/Image\";\nimport { ImageContainer } from \"./styles\";\nimport playIcon from \"@images/brand-identity/icons/video-play-white.svg\";\nimport { hasWindow } from \"@utils\";\n\nconst lerpAmount: number = 0.1;\n\ninterface IPreviewProps {\n\tbgColor?: string;\n\tid: string;\n\tonClick: (e: any) => void;\n\tstill?: boolean;\n\t[key: string]: any;\n}\n\nconst YoutubePreview = ({ id, onClick, bgColor = null, still = false, ...rest }: IPreviewProps) => {\n\tconst icon = useRef(null);\n\tconst container = useRef(null);\n\tlet timeout: number = null;\n\tlet x: number = null;\n\tlet y: number = null;\n\tlet anim = null;\n\tlet iconX = x;\n\tlet iconY = y;\n\n\tconst loop = () => {\n\t\t/* \"lerp\" */\n\t\ticonX += (x - iconX) * lerpAmount;\n\t\ticonY += (y - iconY) * lerpAmount;\n\n\t\tif (icon.current) {\n\t\t\tconst { width, height } = icon.current.getBoundingClientRect();\n\t\t\tconst tx = iconX - width / 2;\n\t\t\tconst ty = iconY - height / 2;\n\n\t\t\ticon.current.style.setProperty(\"--mX\", tx.toFixed(2) + \"px\");\n\t\t\ticon.current.style.setProperty(\"--mY\", ty.toFixed(2) + \"px\");\n\n\t\t\tanim = requestAnimationFrame(loop);\n\t\t}\n\t};\n\n\tconst onMouseMove = (e: MouseEvent) => {\n\t\ttry {\n\t\t\tconst { current: containerElem } = container;\n\t\t\tconst { height, width } = containerElem.getBoundingClientRect();\n\t\t\tconst { clientY, clientX } = e;\n\t\t\tconst { left, top } = containerElem.getBoundingClientRect();\n\n\t\t\tconst objCenterX = left + width / 2;\n\t\t\tconst objCenterY = top + height / 2;\n\n\t\t\tx = -(objCenterX - clientX);\n\t\t\ty = -(objCenterY - clientY);\n\t\t} catch (e) {\n\t\t\tconsole.log(e);\n\t\t}\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tif (hasWindow) {\n\t\t\tcontainer.current.classList.remove(\"mouse-over\");\n\t\t\tx = 0;\n\t\t\ty = 0;\n\n\t\t\ttimeout = window.setTimeout(() => {\n\t\t\t\tcancelAnimationFrame(anim);\n\t\t\t\ticon.current.style.setProperty(\"--mX\", 0);\n\t\t\t\ticon.current.style.setProperty(\"--mY\", 0);\n\t\t\t}, 300);\n\t\t}\n\t};\n\n\tconst onMouseEnter = () => {\n\t\tcancelAnimationFrame(anim);\n\t\tanim = requestAnimationFrame(loop);\n\t\tclearTimeout(timeout);\n\t\tcontainer.current.classList.add(\"mouse-over\");\n\t};\n\n\tuseEffect(() => {\n\t\tif (hasWindow && container.current) {\n\t\t\tconst isTouch = \"ontouchstart\" in document.documentElement;\n\n\t\t\tif (!isTouch && !still) {\n\t\t\t\tcontainer.current.addEventListener(\"mousemove\", onMouseMove);\n\t\t\t\tcontainer.current.addEventListener(\"mouseenter\", onMouseEnter);\n\t\t\t\tcontainer.current.addEventListener(\"mouseleave\", onMouseLeave);\n\t\t\t}\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (hasWindow && container.current) {\n\t\t\t\tcontainer.current.removeEventListener(\"mousemove\", onMouseMove);\n\t\t\t\tcontainer.current.removeEventListener(\"mouseenter\", onMouseEnter);\n\t\t\t\tcontainer.current.removeEventListener(\"mouseleave\", onMouseLeave);\n\t\t\t}\n\t\t};\n\t}, [container.current]);\n\n\treturn (\n\t\t<ImageContainer ref={container} onClick={onClick} bgColor={bgColor} isStill={still}>\n\t\t\t<Image\n\t\t\t\tsrc={`https://img.youtube.com/vi/${id}/sddefault.jpg`}\n\t\t\t\tfallbackSrc={`https://img.youtube.com/vi/${id}/mddefault.jpg`}\n\t\t\t\tthumb={`https://img.youtube.com/vi/${id}/default.jpg`}\n\t\t\t\tlazy={true}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t\t<img src={playIcon} alt=\"Toista video\" className=\"icon\" ref={icon} />\n\t\t</ImageContainer>\n\t);\n};\n\nexport default YoutubePreview;\n","import styled, { css } from \"styled-components\";\nimport { textStyles, color, media, grid } from \"@utils/style-utils\";\nimport { rgba } from \"polished\";\n\nexport const Hero = styled.div`\n\tbackground: ${rgba(color(\"blue\", 4), 0.5)};\n\tmargin-bottom: ${props => (props.hasColumns ? \"182px\" : \"120px\")};\n\tpadding-top: 144px;\n`;\n\nexport const HeroColumns = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\n\t${media.lg`\n\t\tflex-direction: row-reverse;\n\t`}\n\n\t${props =>\n\t\tprops.hasColumns &&\n\t\tcss`\n\t\t\t${media.lg`\n\t\t\t\talign-items: flex-end;\n\t\t\t\tjustify-content: space-between;\n\t\t\t`}\n\t\t`}\n\n\t${props =>\n\t\t!props.hasColumns &&\n\t\tcss`\n\t\t\tpadding-bottom: 65px;\n\t\t\ttext-align: center;\n\t\t`}\n`;\n\nexport const HeroColumn = styled.div`\n\tflex-basis: 100%;\n\n\t${media.lg`\n\t\tflex-basis: calc((100% - ${grid.gutter}px) / 2);\n\t`}\n\n\t.youtube-preview {\n\t\tposition: relative;\n\n\t\t${media.lg`\n\t\t\ttop: 46px;\n\t\t`}\n\n\t\t${media.lgx`\n\t\t\ttop: 64px;\n\t\t`}\n\t}\n`;\n\nexport const HeroImage = styled.div`\n\tpadding-bottom: 56.19%;\n\tposition: relative;\n\twidth: 100%;\n\n\t${media.lg`\n\t\ttop: 46px;\n\t`}\n\n\t${media.lgx`\n\t\ttop: 64px;\n\t`}\n\n\tspan {\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: cover;\n\t\tdisplay: block;\n\t\theight: 100%;\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: 100%;\n\t}\n\n\t.admin-text {\n\t\tbackground: ${color(\"grey\", 6)};\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tfont-size: 15px;\n\t\tmargin: 0;\n\t\tpadding: 5px 15px;\n\t\tposition: absolute;\n\t\tz-index: 9;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const AreaPostcodes = styled.div`\n\t${textStyles.H3}\n\tcolor: ${color(\"grey\", 3)};\n\tmargin-bottom: 65px;\n`;\n","import React, { useState, Fragment } from \"react\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { isAdmin } from \"wake-react-components/utils\";\nimport { Container } from \"@components/Grid\";\nimport { Hero, HeroColumns, HeroColumn, HeroImage, AreaPostcodes } from \"./styles\";\nimport Background from \"wake-react-components/background\";\nimport Text from \"wake-react-components/text\";\nimport YoutubeEmbed from \"../../Embeds/Youtube/index\";\nimport YoutubePreview from \"@components/Embeds/Youtube/Preview\";\nimport Modal from \"@components/Modal\";\nimport { color } from \"@utils/style-utils\";\n\nconst AreaHero = ({ doc }) => {\n\tif (!doc) {\n\t\treturn null;\n\t}\n\n\tconst [modalOpen, setModalOpen] = useState(false);\n\n\tconst { areaVideo, imageArea } = doc;\n\n\tconst hasImage: boolean = !isEmpty(imageArea) && !isEmpty(imageArea.src);\n\tconst hasVideo: boolean = !isEmpty(areaVideo);\n\tconst hasVideoOrImage: boolean = !isAdmin && (hasImage || hasVideo);\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Hero hasColumns={isAdmin || hasVideoOrImage}>\n\t\t\t\t<Container>\n\t\t\t\t\t<HeroColumns hasColumns={isAdmin || hasVideoOrImage}>\n\t\t\t\t\t\t<HeroColumn>\n\t\t\t\t\t\t\t{isAdmin && (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<span>Youtube videon ID&nbsp;</span>\n\t\t\t\t\t\t\t\t\t<Text name=\"areaVideo\" placeholder=\"Videon ID\" multiline={true} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t\t<Text name=\"areaTitle\" placeholder=\"Otsikko\" multiline={true} />\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<AreaPostcodes>\n\t\t\t\t\t\t\t\tPostinumerot: <Text name=\"areaPostcodes\" placeholder=\"Postinumerot\" multiline={true} />\n\t\t\t\t\t\t\t</AreaPostcodes>\n\t\t\t\t\t\t</HeroColumn>\n\t\t\t\t\t\t{(isAdmin || hasVideoOrImage) && (\n\t\t\t\t\t\t\t<HeroColumn>\n\t\t\t\t\t\t\t\t{!isAdmin && hasVideo && (\n\t\t\t\t\t\t\t\t\t<YoutubePreview\n\t\t\t\t\t\t\t\t\t\tid={areaVideo}\n\t\t\t\t\t\t\t\t\t\tonClick={() => setModalOpen(true)}\n\t\t\t\t\t\t\t\t\t\tbgColor={color(\"blue\", 4)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{(isAdmin || !hasVideo) && (\n\t\t\t\t\t\t\t\t\t<HeroImage>\n\t\t\t\t\t\t\t\t\t\t<Background name=\"imageArea\" sizeInfo={[662, 372]} tagName=\"span\" />\n\t\t\t\t\t\t\t\t\t\t{isAdmin && <p className=\"admin-text\">Kuva jos videota ei ole</p>}\n\t\t\t\t\t\t\t\t\t</HeroImage>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</HeroColumn>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</HeroColumns>\n\t\t\t\t</Container>\n\t\t\t</Hero>\n\t\t\t{modalOpen && hasVideo && (\n\t\t\t\t<Modal\n\t\t\t\t\tcontent={<YoutubeEmbed videoID={areaVideo} autoplay={true} />}\n\t\t\t\t\tonClose={() => setModalOpen(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n\nexport default AreaHero;\n","import styled from \"styled-components\";\nimport { textStyles, media } from \"@utils/style-utils\";\n\nexport const ShortDescription = styled.h2`\n\tmargin-bottom: 40px;\n\tmargin-top: 0;\n\ttext-align: center;\n`;\n\nexport const DescriptionContent = styled.div`\n\tmargin: 0 auto 60px;\n\tmax-width: 896px;\n\ttext-align: center;\n\n\t${media.md`\n\t\tmargin-bottom: 85px;\n\t`}\n\n\t${media.lg`\n\t\tmargin-bottom: 120px;\n\t`}\n\n\tp {\n\t\t${textStyles.PLarge}\n\t}\n`;\n","import React from \"react\";\nimport Editor from \"wake-react-components/editor\";\nimport { DescriptionContent, ShortDescription } from \"./styles\";\nimport { Container } from \"@components/Grid\";\nimport Text from \"wake-react-components/text\";\n\nconst AreaDescription = () => {\n\treturn (\n\t\t<Container>\n\t\t\t<DescriptionContent>\n\t\t\t\t<ShortDescription>\n\t\t\t\t\t<Text name=\"areaShortDesc\" placeholder=\"Lyhyt kuvaus tai otsikko\" multiline={true} />\n\t\t\t\t</ShortDescription>\n\t\t\t\t<Editor name=\"areaDesc\" placeholder=\"Alueen kuvaus\" />\n\t\t\t</DescriptionContent>\n\t\t</Container>\n\t);\n};\n\nexport default AreaDescription;\n","import styled from \"styled-components\";\nimport { textStyles, color, media } from \"@utils/style-utils\";\n\nexport const AreaTabs = styled.div`\n\tborder-bottom: 1px solid ${color(\"grey\", 5)};\n\tmargin: 0 auto;\n\tmargin-bottom: 50px;\n\tmax-width: 896px;\n\toverflow-x: auto;\n\t-webkit-overflow-scrolling: touch;\n\tposition: relative;\n\ttext-align: center;\n\twhite-space: nowrap;\n\n\t${media.md`\n\t\tmargin-bottom: 65px;\n\t`}\n\n\t${media.lg`\n\t\tmargin-bottom: 80px;\n\t`}\n\n\t.tab-button {\n\t\t${textStyles.MediumText}\n\t\tcolor: ${color(\"grey\", 2)};\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tmargin: 0 12px;\n\t\tpadding: 18px 0;\n\t\ttransition: color 150ms;\n\n\t\t&:hover {\n\t\t\tcolor: ${color(\"grey\", 1)};\n\t\t}\n\n\t\t&:first-of-type {\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t&--active {\n\t\t\tcolor: ${color(\"grey\", 1)};\n\t\t}\n\t}\n`;\n\nexport const TabsContainer = styled.div`\n\tdisplay: inline-block;\n\tposition: relative;\n`;\n\nexport const TabIndicator = styled.span`\n\tbackground: ${color(\"grey\", 1)};\n\tbottom: 0;\n\theight: 2px;\n\tleft: 0;\n\topacity: 0;\n\tposition: absolute;\n\ttransition: opacity 150ms 150ms, transform 150ms;\n\ttransform-origin: 0% 0%;\n\twidth: 100px;\n`;\n","import React, { useRef } from \"react\";\nimport { AreaTabs, TabIndicator, TabsContainer } from \"./styles\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { Tab } from \"@components/TabSwitcher\";\nimport useTabIndicator from \"@hooks/use-tab-indicator\";\nimport { filterXSS } from \"xss\";\n\nconst AreaTabButtons = ({ tabs }) => {\n\tif (isEmpty(tabs)) {\n\t\treturn null;\n\t}\n\tconst containerRef = useRef(null);\n\tconst indicatorRef = useRef(null);\n\n\tuseTabIndicator(containerRef, indicatorRef);\n\n\treturn (\n\t\t<AreaTabs>\n\t\t\t<TabsContainer ref={containerRef}>\n\t\t\t\t{tabs.map(({ tabUrl, tabName }, i: number) => (\n\t\t\t\t\t<Tab id={i + 1} key={`tab${i}`} url={tabUrl}>\n\t\t\t\t\t\t<span className=\"tab-button-text\" dangerouslySetInnerHTML={{ __html: filterXSS(tabName) }} />\n\t\t\t\t\t</Tab>\n\t\t\t\t))}\n\n\t\t\t\t<TabIndicator ref={indicatorRef} />\n\t\t\t</TabsContainer>\n\t\t</AreaTabs>\n\t);\n};\n\nexport default AreaTabButtons;\n","import styled, { keyframes } from \"styled-components\";\nimport { color, media } from \"@utils/style-utils\";\n\nexport const AreaMapContainer = styled.div`\n\tmax-width: 896px;\n\tmargin: 40px auto;\n\tposition: relative;\n\tz-index: 1;\n\n\t${media.md`\n\t\tmargin: 65px auto;\n\t`}\n\n\t${media.lg`\n\t\tmargin: 80px auto;\n\t`}\n\n\t.leaflet-container {\n\t\theight: 400px;\n\t\twidth: 100%;\n\t}\n`;\n\nconst pulsate = keyframes`\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\n\t50% {\n\t\topacity: 0.8;\n\t}\n`;\n\nexport const MapPlaceholder = styled.div`\n\tanimation: ${pulsate} 1.5s linear infinite;\n\tbackground: ${color(\"blue\", 4)};\n\theight: 400px;\n\tposition: relative;\n\twidth: 100%;\n\n\tspan {\n\t\tcolor: ${color(\"grey\", 3)};\n\t\tdisplay: inline-block;\n\t\tleft: 50%;\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n`;\n","import React, { Suspense, lazy } from \"react\";\nimport { AreaMapContainer, MapPlaceholder } from \"./styles\";\nimport Text from \"wake-react-components/text\";\nimport { isAdmin } from \"wake-react-components/utils\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { hasWindow } from \"@utils\";\nimport { filterXSS } from \"xss\";\nconst LeafletMap = lazy(() => import(/* webpackPrefetch:true */ \"@components/LeafletMap\"));\n\nconst Placeholder = () => (\n\t<MapPlaceholder>\n\t\t<span>Ladataan karttaa...</span>\n\t</MapPlaceholder>\n);\n\nconst AreaMap = ({ item }) => {\n\tif (!isAdmin && isEmpty(item)) {\n\t\treturn null;\n\t}\n\n\tconst { customMapHeading, addressString } = item;\n\n\tif (!isAdmin && isEmpty(addressString)) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<AreaMapContainer>\n\t\t\t{isAdmin && (\n\t\t\t\t<div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\tKartan osoitetieto: <Text name=\"addressString\" placeholder=\"Osoitetieto\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\tKartan otsikko: <Text name=\"customMapHeading\" placeholder=\"Otsikko\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!isEmpty(customMapHeading) && <h2 dangerouslySetInnerHTML={{ __html: filterXSS(customMapHeading) }} />}\n\n\t\t\t{!hasWindow && <Placeholder />}\n\t\t\t{hasWindow && (\n\t\t\t\t<Suspense fallback={<Placeholder />}>\n\t\t\t\t\t<LeafletMap address={addressString} />\n\t\t\t\t</Suspense>\n\t\t\t)}\n\t\t</AreaMapContainer>\n\t);\n};\n\nAreaMap.thumb = () => <p>Kartta (alue)</p>;\n\nexport default AreaMap;\n","import styled from \"styled-components\";\nimport { textStyles } from \"@utils/style-utils\";\n\nexport const AreaApartmentListContainer = styled.div``;\n\nexport const AreaApartmentsInfo = styled.div`\n\tp {\n\t\t${textStyles.PMedium}\n\t}\n\n\ta {\n\t\t${textStyles.AInline}\n\t}\n`;\n","import React, { useState, useEffect } from \"react\";\nimport { connect } from \"react-redux\";\nimport searchService from \"@services/search.service\";\nimport { IApplicationState } from \"@redux\";\nimport ApartmentGrid from \"@components/ApartmentGrid\";\nimport Text from \"wake-react-components/text\";\nimport { isAdmin } from \"wake-react-components/utils\";\nimport Editor from \"wake-react-components/editor\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { AreaApartmentsInfo, AreaApartmentListContainer } from \"./styles\";\nimport { filterXSS } from \"xss\";\nimport { removeNonNumeric } from \"@utils\";\n\nconst isValidPostcode = (pcode: string) => /^[0-9]{5}$/.test(pcode);\n\nconst AreaApartmentList = ({ doc, item }) => {\n\tconst [properties, setProperties] = useState([]);\n\tconst { pageH1, pageSearchInfo } = item;\n\tconst { areaPostcodes } = doc;\n\tconst postcodes = !isEmpty(areaPostcodes)\n\t\t? areaPostcodes\n\t\t\t\t.split(\",\")\n\t\t\t\t.map(removeNonNumeric)\n\t\t\t\t.filter(isValidPostcode)\n\t\t: [];\n\n\tif (!isAdmin && isEmpty(postcodes)) {\n\t\treturn null;\n\t}\n\n\tlet isRendering: boolean = true;\n\tlet initialized: boolean = false;\n\n\tconst fetchProperties = async () => {\n\t\tconst query = [...postcodes.map((postcode: string) => ({ postcode }))];\n\t\tconst params = {\n\t\t\tlimit: 8,\n\t\t\tquery,\n\t\t\tsort: \"latestPublishTimestamp\",\n\t\t\tsortOrder: \"desc\",\n\t\t\ttype: \"property\",\n\t\t};\n\n\t\ttry {\n\t\t\tconst { data } = await searchService.fetchProperties(params);\n\n\t\t\tif (isRendering && !isEmpty(data)) {\n\t\t\t\tsetProperties(data.results);\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tconsole.log(e);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isRendering && !initialized) {\n\t\t\tfetchProperties();\n\t\t\tinitialized = true;\n\t\t}\n\n\t\treturn () => {\n\t\t\tisRendering = false;\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<AreaApartmentListContainer>\n\t\t\t{isAdmin && (\n\t\t\t\t<div>\n\t\t\t\t\t<h3>Kohdelistaus (postinumeroiden alue)</h3>\n\t\t\t\t\t<div>\n\t\t\t\t\t\tOtsikko: <Text name=\"pageH1\" placeholder=\"Kohdelistauksen otsikko\" multiline={true} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\tKuvausteksti: <Editor name=\"pageSearchInfo\" placeholder=\"Kohdelistauksen kuvausteksti\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!isAdmin && !isEmpty(pageH1) && <h2>{pageH1}</h2>}\n\t\t\t{!isAdmin && !isEmpty(pageSearchInfo) && (\n\t\t\t\t<AreaApartmentsInfo dangerouslySetInnerHTML={{ __html: filterXSS(pageSearchInfo) }} />\n\t\t\t)}\n\n\t\t\t{!isEmpty(properties) && <ApartmentGrid properties={properties} lazy={true} />}\n\t\t</AreaApartmentListContainer>\n\t);\n};\n\nAreaApartmentList.thumb = () => <p>Kohdelistaus (alue)</p>;\n\nconst mapStateToProps = (state: IApplicationState) => ({\n\tdoc: state.document,\n});\n\nexport default connect(mapStateToProps)(AreaApartmentList);\n","import styled from \"styled-components\";\nimport { color, media, textStyles, grid } from \"@utils/style-utils\";\n\nexport const PaavoTitle = styled.h2`\n\tmargin-top: 0;\n`;\n\nexport const PaavoTabButtons = styled.div`\n\tborder-bottom: 1px solid ${color(\"grey\", 5)};\n\tmargin-bottom: 50px;\n\tposition: relative;\n\twidth: 100%;\n\n\t${media.md`\n\t\tmargin-bottom: 60px;\n\t`}\n\n\t${media.lg`\n\t\tmargin-bottom: 79px;\n\t`}\n\n\t.tab-button {\n\t\t${textStyles.MediumText}\n\t\tcolor: ${color(\"grey\", 2)};\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tmargin: 0 12px;\n\t\tpadding: 18px 0;\n\t\ttransition: color 150ms;\n\n\t\t&:hover {\n\t\t\tcolor: ${color(\"grey\", 1)};\n\t\t}\n\n\t\t&:first-of-type {\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t&--active {\n\t\t\tcolor: ${color(\"grey\", 1)};\n\t\t}\n\t}\n`;\n\nexport const TabIndicator = styled.span`\n\tbackground: ${color(\"grey\", 1)};\n\tbottom: 0;\n\theight: 2px;\n\tleft: 0;\n\topacity: 0;\n\tposition: absolute;\n\ttransition: opacity 150ms 150ms, transform 150ms;\n\ttransform-origin: 0% 0%;\n\twidth: 100px;\n`;\n\nexport const PaavoColumns = styled.div`\n\t${media.lg`\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t`}\n`;\n\nexport const PaavoColumn = styled.div`\n\tdisplay: flex;\n\tflex-basis: 100%;\n\tflex-direction: column;\n\n\t${media.lg`\n\t\tflex-basis: calc((100% - ${grid.gutter}px) / 2);\n\t`}\n\n\t> h3 {\n\t\tmargin-top: 0;\n\t}\n`;\n\nexport const PaavoItems = styled.div`\n\tmargin-bottom: 32px;\n`;\n\nexport const PaavoItem = styled.div`\n\talign-items: center;\n\tborder-bottom: 1px solid ${color(\"grey\", 5)};\n\tdisplay: flex;\n\tjustify-content: space-between;\n\theight: 64px;\n\n\t> span {\n\t\tflex-basis: calc((100% - ${grid.gutterSmall}px) / 2);\n\t}\n\n\t&:first-of-type {\n\t\tborder-top: 1px solid ${color(\"grey\", 5)};\n\t}\n`;\n\nexport const PaavoLabel = styled.span`\n\t${textStyles.MicroTextCaps}\n`;\n\nexport const PaavoValue = styled.span`\n\t${textStyles.FormPlaceholderText}\n`;\n\nexport const PaavoSources = styled.div`\n\tp {\n\t\t${textStyles.MicroText}\n\t\tcolor: ${color(\"grey\", 2)};\n\t\tmargin: 0 0 16px;\n\t}\n`;\n","import styled from \"styled-components\";\nimport { color, textStyles } from \"@utils/style-utils\";\n\nexport const PaavoGraphContainer = styled.div`\n\tborder-top: 1px solid ${color(\"grey\", 5)};\n\tpadding-top: 24px;\n`;\n\nexport const PaavoGraphTitle = styled.h4`\n\t${textStyles.MicroTextCaps}\n\tmargin: 0 0 39px;\n`;\n\nexport const Graph = styled.div`\n\tdisplay: flex;\n\tmargin-bottom: 16px;\n\twidth: 100%;\n`;\n\nexport const GraphSection = styled.span`\n\tflex-grow: 1;\n\theight: 34px;\n\n\t&:nth-of-type(1) {\n\t\tbackground-color: ${color(\"greenBright\", 1)};\n\t}\n\t&:nth-of-type(2) {\n\t\tbackground-color: ${color(\"greenBright\", 3)};\n\t}\n\t&:nth-of-type(3) {\n\t\tbackground-color: ${color(\"coral\", 2)};\n\t}\n\t&:nth-of-type(4) {\n\t\tbackground-color: ${color(\"coral\", 1)};\n\t}\n\t&:nth-of-type(5) {\n\t\tbackground-color: ${color(\"greenDark\", 1)};\n\t}\n`;\n\nexport const GraphLabels = styled.div`\n\tmargin-bottom: 16px;\n`;\n\nexport const GraphLabel = styled.span`\n\t${textStyles.MicroText}\n\talign-items: center;\n\tcolor: ${color(\"grey\", 2)};\n\tdisplay: inline-flex;\n\tmargin-right: 16px;\n\tmargin-bottom: 8px;\n\n\t&::before {\n\t\tcontent: \"\";\n\t\tdisplay: inline-block;\n\t\theight: 12px;\n\t\tmargin-right: 8px;\n\t\twidth: 12px;\n\t}\n\n\t&:nth-of-type(1) {\n\t\t&::before {\n\t\t\tbackground-color: ${color(\"greenBright\", 1)};\n\t\t}\n\t}\n\t&:nth-of-type(2) {\n\t\t&::before {\n\t\t\tbackground-color: ${color(\"greenBright\", 3)};\n\t\t}\n\t}\n\t&:nth-of-type(3) {\n\t\t&::before {\n\t\t\tbackground-color: ${color(\"coral\", 2)};\n\t\t}\n\t}\n\t&:nth-of-type(4) {\n\t\t&::before {\n\t\t\tbackground-color: ${color(\"coral\", 1)};\n\t\t}\n\t}\n\t&:nth-of-type(5) {\n\t\t&::before {\n\t\t\tbackground-color: ${color(\"greenDark\", 1)};\n\t\t}\n\t}\n`;\n","import React from \"react\";\nimport { PaavoGraphContainer, PaavoGraphTitle, Graph, GraphSection, GraphLabels, GraphLabel } from \"./styles\";\nimport isEmpty from \"lodash-es/isEmpty\";\n\nconst PaavoGraph = ({ data }) => {\n\tif (isEmpty(data) || isEmpty(data.values)) {\n\t\treturn null;\n\t}\n\n\tconst { key, values } = data;\n\n\treturn (\n\t\t<PaavoGraphContainer>\n\t\t\t<PaavoGraphTitle>{key}</PaavoGraphTitle>\n\t\t\t<Graph>\n\t\t\t\t{values.map(([label, value], index) => (\n\t\t\t\t\t<GraphSection\n\t\t\t\t\t\tkey={\"graphsection_\" + label + \"_\" + index}\n\t\t\t\t\t\tstyle={{ width: `${value}%`, flexBasis: `${value}%` }}\n\t\t\t\t\t\tdata-label={label}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Graph>\n\t\t\t<GraphLabels>\n\t\t\t\t{values.map(([label, value], index) => (\n\t\t\t\t\t<GraphLabel key={\"graphlabel_\" + label + \"_\" + index}>\n\t\t\t\t\t\t{label} ({value}%)\n\t\t\t\t\t</GraphLabel>\n\t\t\t\t))}\n\t\t\t</GraphLabels>\n\t\t</PaavoGraphContainer>\n\t);\n};\n\nexport default PaavoGraph;\n","import React, { memo, useRef, useEffect } from \"react\";\nimport TabSwitcher, { Tab, TabPanel } from \"@components/TabSwitcher\";\nimport isEmpty from \"lodash-es/isEmpty\";\nimport toPairs from \"lodash-es/toPairs\";\nimport Text from \"wake-react-components/text\";\nimport { NarrowContainer } from \"@components/Grid\";\nimport {\n\tPaavoTitle,\n\tPaavoTabButtons,\n\tTabIndicator,\n\tPaavoColumns,\n\tPaavoColumn,\n\tPaavoSources,\n\tPaavoItems,\n\tPaavoItem,\n\tPaavoLabel,\n\tPaavoValue,\n} from \"./styles\";\nimport useTabIndicator from \"@hooks/use-tab-indicator\";\nimport PaavoGraph from \"@components/PaavoGraph\";\nimport { filterXSS } from \"xss\";\nimport NumberFormat from \"react-number-format\";\n\nconst formattedValues = (obj, noPairs = false) =>\n\tObject.keys(obj).map(key => ({ key, values: noPairs ? obj[key] : toPairs(obj[key]) }));\n\nconst PaavoData = ({ item }) => {\n\tif (isEmpty(item) || isEmpty(item.paavoData)) {\n\t\treturn null;\n\t}\n\tconst paavoData = [...toPairs(item.paavoData)];\n\tconst buttonContainerRef = useRef(null);\n\tconst indicatorRef = useRef(null);\n\n\tuseTabIndicator(buttonContainerRef, indicatorRef, true);\n\n\treturn (\n\t\t<NarrowContainer withoutPadding={true}>\n\t\t\t<PaavoTitle>\n\t\t\t\t<Text name=\"paavoDataOtsikko\" placeholder=\"Otsikko\" multiline={true} />\n\t\t\t</PaavoTitle>\n\t\t\t<TabSwitcher>\n\t\t\t\t{!isEmpty(paavoData) && (\n\t\t\t\t\t<PaavoTabButtons ref={buttonContainerRef}>\n\t\t\t\t\t\t{paavoData.map(([postcode], index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Tab id={index + 1} key={\"paavotab\" + index}>\n\t\t\t\t\t\t\t\t\t{postcode}\n\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t<TabIndicator ref={indicatorRef} />\n\t\t\t\t\t</PaavoTabButtons>\n\t\t\t\t)}\n\n\t\t\t\t{!isEmpty(paavoData) &&\n\t\t\t\t\tpaavoData.map(([, data], index: number) => {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tconst { asuminen, vaesto } = data as any;\n\t\t\t\t\t\t\tconst { Asuntoja, ...asuminenValues } = asuminen;\n\t\t\t\t\t\t\tconst vaestoData = formattedValues(vaesto, true);\n\t\t\t\t\t\t\tconst asuminenData = formattedValues(asuminenValues);\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TabPanel whenActive={index + 1} key={\"paavotabpanel\" + index}>\n\t\t\t\t\t\t\t\t\t<PaavoColumns>\n\t\t\t\t\t\t\t\t\t\t{!isEmpty(asuminenData) && (\n\t\t\t\t\t\t\t\t\t\t\t<PaavoColumn>\n\t\t\t\t\t\t\t\t\t\t\t\t<h3>Asuminen</h3>\n\t\t\t\t\t\t\t\t\t\t\t\t{asuminenData.map((d, i) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<PaavoGraph key={\"paavograph\" + i} data={d} />\n\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t</PaavoColumn>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{!isEmpty(vaestoData) && (\n\t\t\t\t\t\t\t\t\t\t\t<PaavoColumn>\n\t\t\t\t\t\t\t\t\t\t\t\t<h3>Väestö</h3>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<PaavoItems>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{vaestoData.map(({ key, values }, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<PaavoItem key={\"paavoitem\" + key + idx}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<PaavoLabel>{key}</PaavoLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<PaavoValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: filterXSS(values) }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</PaavoItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t\t</PaavoItems>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<PaavoSources>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{!isEmpty(Asuntoja) && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAsuntoja:{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NumberFormat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={Asuntoja}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthousandSeparator=\" \"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisplayType=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkappaletta\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLähteet: &copy; Tilastokeskus, Paavo - Postinumeroalueittainen\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tavoin tieto, 2015\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tAsuntojen hinnat: Hintaseurantapalvelu - Kiinteistönvälitysalan\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkeskusliitto, 2018\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Tekstin lähde: Wikipedia</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</PaavoSources>\n\t\t\t\t\t\t\t\t\t\t\t</PaavoColumn>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</PaavoColumns>\n\t\t\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\tconsole.log(e);\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t})}\n\t\t\t</TabSwitcher>\n\t\t</NarrowContainer>\n\t);\n};\n\nPaavoData.thumb = () => <p>Paavodata (statistiikka)</p>;\n\nexport default memo(PaavoData);\n","import styled from \"styled-components\";\nimport { media, grid, textStyles } from \"@utils/style-utils\";\n\nexport const FormWrapper = styled.div`\n\tmargin-top: 30px;\n\n\t.form-container {\n\t\t${media.md`\n\t\t\tmax-width: 665px;\n\t\t`}\n\t}\n`;\n\nexport const Columns = styled.div`\n\t${media.md`\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t`}\n`;\n\nexport const Column = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t${media.md`\n\t\tflex-basis: calc((100% - ${grid.gutterSmall}px) / 2);\n\t`}\n\n\t${media.lg`\n\t\tflex-basis: calc((100% - ${grid.gutter}px) / 2);\n\t`}\n\n\t&:first-of-type {\n\t\tmargin-bottom: 40px;\n\n\t\t${media.md`\n\t\t\tmargin-bottom: 0;\n\t\t`}\n\t}\n\n\t.content {\n\t\t> :first-child {\n\t\t\tmargin-top: -5px;\n\t\t}\n\n\t\tp {\n\t\t\t${textStyles.PMedium}\n\t\t}\n\n\t\ta {\n\t\t\t${textStyles.AInline}\n\t\t}\n\t}\n`;\n","import React from \"react\";\nimport ContactFormSelectable from \"@components/Form/ContactFormSelectable\";\nimport Editor from \"wake-react-components/editor\";\nimport { FormWrapper } from \"./styles\";\nimport { NarrowContainer } from \"@components/Grid\";\n\nconst EditableTwoColumnsForm = ({ item }) => {\n\treturn (\n\t\t<NarrowContainer>\n\t\t\t<Editor name=\"editableTwoColumnsColumn1\" className=\"content\" />\n\t\t\t<FormWrapper>\n\t\t\t\t<ContactFormSelectable split={true} />\n\t\t\t</FormWrapper>\n\t\t</NarrowContainer>\n\t);\n};\n\nEditableTwoColumnsForm.thumb = () => <p>Yhteydenottolomake</p>;\n\nexport default EditableTwoColumnsForm;\n","import styled from \"styled-components\";\nimport { color } from \"@utils/style-utils\";\n\nexport const AdminTabHeader = styled.div`\n\tbackground: ${color(\"blue\", 4)};\n\tpadding: 20px 30px;\n\twidth: 100%;\n`;\n","import React, { Fragment } from \"react\";\nimport { withRouter, RouteComponentProps } from \"react-router-dom\";\nimport { IDocument } from \"@redux/document\";\nimport { IApplicationState } from \"@redux\";\nimport { connect } from \"react-redux\";\nimport { isAdmin } from \"wake-react-components/utils\";\nimport TabSwitcher, { TabPanel } from \"@components/TabSwitcher\";\nimport Repeater from \"wake-react-components/repeater\";\nimport Text from \"wake-react-components/text\";\nimport Blocklist from \"wake-react-components/blocklist\";\n\nimport isEmpty from \"lodash-es/isEmpty\";\nimport { Container } from \"@components/Grid\";\nimport AreaHero from \"@components/Area/AreaHero\";\nimport AreaDescription from \"@components/Area/AreaDescription\";\nimport AreaTabButtons from \"@components/Area/AreaTabButtons\";\nimport AreaMap from \"@components/Area/AreaBlocks/AreaMap\";\nimport DeveloperBodyText from \"@components/Developer/DeveloperBlocks/DeveloperBodyText\";\nimport AreaApartmentList from \"@components/Area/AreaBlocks/AreaApartmentList\";\nimport DeveloperAgencies from \"@components/Area/AreaBlocks/DeveloperAgencies\";\nimport PaavoData from \"@components/Area/AreaBlocks/PaavoData\";\nimport EditableTwoColumnsForm from \"@components/Area/AreaBlocks/EditableTwoColumnsForm\";\n\nimport { AdminTabHeader } from \"./styles\";\n\nconst AreaBlocks = {\n\tAreaApartmentList,\n\tAreaMap,\n\tDeveloperAgencies,\n\tDeveloperBodyText,\n\tEditableTwoColumnsForm,\n\tPaavoData,\n};\n\ninterface IProps {\n\tdoc: IDocument;\n}\n\nconst AreaPage = ({ doc, location }: IProps & RouteComponentProps) => {\n\tconst { tabs, canonicalPath } = doc;\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<AreaHero doc={doc} />\n\n\t\t\t<AreaDescription />\n\n\t\t\t<Container>\n\t\t\t\t{isAdmin && (\n\t\t\t\t\t<Repeater name=\"tabs\">\n\t\t\t\t\t\t<AdminTabHeader>\n\t\t\t\t\t\t\t<h2>\n\t\t\t\t\t\t\t\tTabin nimi:&nbsp;&nbsp;\n\t\t\t\t\t\t\t\t<Text name=\"tabName\" placeholder=\"Tabin nimi\" />\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t<h2>\n\t\t\t\t\t\t\t\tTabin urlPart:&nbsp;&nbsp;\n\t\t\t\t\t\t\t\t<Text name=\"tabUrl\" placeholder=\"Tabin urlPart\" />\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</AdminTabHeader>\n\t\t\t\t\t\t<h2>Tabin sisältö</h2>\n\t\t\t\t\t\t<Blocklist name=\"tabBlocks\" blocks={AreaBlocks} />\n\t\t\t\t\t</Repeater>\n\t\t\t\t)}\n\t\t\t\t{!isAdmin && !isEmpty(tabs) && (\n\t\t\t\t\t<TabSwitcher\n\t\t\t\t\t\tbaseUrl={canonicalPath}\n\t\t\t\t\t\tcurrentUrl={decodeURIComponent(location.pathname)}\n\t\t\t\t\t\temitChanges={true}\n\t\t\t\t\t\tid=\"area-tabs\"\n\t\t\t\t\t\trenderHidden={true}\n\t\t\t\t\t\ttabs={tabs}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AreaTabButtons tabs={tabs} />\n\t\t\t\t\t\t<Repeater name=\"tabs\">\n\t\t\t\t\t\t\t{({ item }) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TabPanel whenActive={item.$$index + 1} key={`tabContent${item.$$index}`}>\n\t\t\t\t\t\t\t\t\t\t<Blocklist name=\"tabBlocks\" blocks={AreaBlocks} />\n\t\t\t\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</Repeater>\n\t\t\t\t\t</TabSwitcher>\n\t\t\t\t)}\n\t\t\t</Container>\n\t\t</Fragment>\n\t);\n};\n\nconst mapStateToProps = (state: IApplicationState) => ({\n\tdoc: state.document,\n});\n\nexport default withRouter(connect(mapStateToProps)(AreaPage));\n"],"sourceRoot":""}