\n 
\n {e.label}\n
\n )}\n placeholder={Placeholder.value}\n styles={customDropDownStyles}\n onChange={(e) => {\n //console.log(e)\n validateField(null, items.fields, Name.value, e);\n }}\n />\n \n validateField(e, items.fields)}\n onBlur={(e) => validateField(e, items.fields)}\n className={\n (formData.submitted || Touched) &&\n Valid !== true &&\n IsRequired.value\n ? \"form-control-error\"\n : \"form-control\"\n }\n autoComplete=\"off\"\n />\n {(formData.submitted || Touched) &&\n Valid !== true &&\n IsRequired.value ? (\n \n !\n \n \n ) : null}\n
\n );\n break;\n case \"Checkbox Field\":\n fieldLayout = (\n \n {message ? (\n UseAsModule && UseAsModule.value ?\n
\n )}\n \n )\n};\n\nexport default FeatureDevMicrositeEnquireForm;\n","import React from 'react';\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\n\nconst FeatureDevMicrositeFactsAndFigures = (props) => {\n const {\n Title,\n TitleFontName,\n TitleFontSize = {value: 'default'},\n Description,\n DescriptionFontName,\n DescriptionFontSize = {value: 'default'},\n SelectedItems,\n BackgroundColour,\n FontColour,\n Footnote,\n FootnoteFontName,\n FootnoteFontSize = {value: 'default'},\n } = props.fields;\n\n const componentStyle = {\n color: FontColour && FontColour.value ? FontColour.value : \"#ffffff\",\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#3d4a39\"\n }\n\n const renderList = () => {\n if (SelectedItems && SelectedItems.length > 0) {\n let hasIcons = false;\n let figuresLayout = SelectedItems.map((item, index) => {\n const {\n Title = null,\n Description = null,\n IconName = null,\n TitleFontName = null,\n DescriptionFontName = null,\n TitleFontSize = {value: 'default'},\n DescriptionFontSize = { value: 'default'}\n } = item.fields || {};\n\n const selectedItemStyle = {\n titleFontName: TitleFontName && TitleFontName.value,\n descriptionFontName: DescriptionFontName && DescriptionFontName.value\n }\n\n let figuresListLayout = \"\";\n\n if ((Title && Title.value) || (Description && Description.value)) {\n {Title && Title.value && Description && Description.value === \"\" ?\n figuresListLayout = (\n \n {message}\n
\n : message\n ) : (\n \n
\n \n \n
\n \n
\n )\n :\n figuresListLayout = (\n \n \n
\n \n
\n \n
\n \n
\n )\n }\n }\n \n if (IconName && IconName.value) {\n hasIcons = true\n }\n\n return figuresListLayout;\n })\n\n return (\n \n \n
\n \n {Title && Title.value &&\n
\n \n
\n }\n {Description && Description.value &&\n \n
\n }\n \n {figuresLayout}\n
)\n } else return null;\n }\n\n const renderFootnotes = () => {\n const footnoteStyle = {\n fontFamily: FootnoteFontName && FootnoteFontName.value ? FootnoteFontName.value : \"markpro\"\n }\n return (\n \n
)\n }\n\n return (\n SelectedItems && SelectedItems.length > 0 &&\n \n
\n \n
\n )\n}\n\nexport default FeatureDevMicrositeFactsAndFigures;\n","import React from 'react';\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\nimport Flickity from \"react-flickity-component\";\n\nconst FeatureDevMicrositeFactsAndFiguresWithImage = (props) => {\n const {\n Heading,\n HeadingFontName,\n HeadingFontSize = {value: 'default'},\n Subheading,\n SubheadingFontName,\n SubheadingFontSize = {value: 'default'},\n HeaderBackgroundColour,\n HeaderFontColour,\n SelectedItems,\n BackgroundColour,\n FontColour,\n ImagePosition,\n SlideshowImages,\n SlideshowDelay,\n Footnote,\n FootnoteFontName,\n FootnoteFontSize = {value: 'default'},\n } = props.fields;\n\n const {\n RemoveDefaultMargin = \"\"\n } = props.params || {};\n\n const componentStyle = {\n color: FontColour && FontColour.value ? FontColour.value : \"#ffffff\",\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#3d4a39\"\n }\n\n const headerStyle = {\n color: HeaderFontColour && HeaderFontColour.value ? HeaderFontColour.value : \"#ffffff\",\n backgroundColor: HeaderBackgroundColour && HeaderBackgroundColour.value ? HeaderBackgroundColour.value : \"#3d4a39\",\n marginTop: RemoveDefaultMargin && RemoveDefaultMargin === \"1\" ? \"0px\" : \"\"\n }\n\n const renderImage = () => {\n const flickityOptions = {\n autoPlay: SlideshowDelay && SlideshowDelay.value ? (SlideshowDelay.value * 1000) : 5000,\n imagesLoaded: true,\n pageDots: false,\n prevNextButtons: false,\n wrapAround: true,\n draggable: false,\n selectedAttraction: 0.01,\n setGallerySize: false,\n fullscreen: true\n }\n\n return (\n \n {Title && Title.value &&\n
\n \n
\n }\n {Description && Description.value &&\n \n
\n }\n {renderList()}\n {Footnote && Footnote.value && renderFootnotes()}\n \n
\n \n {SlideshowImages && SlideshowImages.length > 0 && (\n \n {SlideshowImages.map((item, index) => {\n const { ImageUrl: url, ImageAltText: alt } = item.fields;\n if (url && url.value) {\n return (\n \n )}\n\n
)\n }\n\n\n const renderFootnote = (itemsHasIcons = false) => {\n\n const footnoteStyle = {\n fontFamily: FootnoteFontName && FootnoteFontName.value ? FootnoteFontName.value : \"markpro\"\n }\n\n return (\n
)\n }\n\n const renderList = () => {\n if (SelectedItems && SelectedItems.length > 0) {\n let hasIcons = false;\n let figuresLayout = SelectedItems.map((item, index) => {\n const {\n Title = null,\n Description = null,\n IconName = null,\n TitleFontName = null,\n DescriptionFontName = null,\n DescriptionFontSize = {value: 'default'},\n TitleFontSize = {value: 'default'},\n } = item.fields || {};\n\n const selectedItemStyle = {\n titleFontName: TitleFontName && TitleFontName.value,\n descriptionFontName: DescriptionFontName && DescriptionFontName.value\n }\n\n let figuresListLayout = \"\";\n\n if ((Title && Title.value) || (Description && Description.value)) {\n figuresListLayout = (\n \n
\n \n
\n \n
\n )\n }\n if (IconName && IconName.value) {\n hasIcons = true\n }\n\n return figuresListLayout;\n })\n\n return (\n \n \n
\n\n \n {Title && Title.value &&\n
\n \n
\n }\n {Description && Description.value &&\n \n
\n }\n \n {figuresLayout}\n {Footnote && Footnote.value && renderFootnote(hasIcons)}\n
)\n } else return null;\n }\n\n\n return (\n SelectedItems && SelectedItems.length > 0 &&\n \n {Heading && Heading.value || Subheading && Subheading.value ? (\n
\n )\n}\n\nexport default FeatureDevMicrositeFactsAndFiguresWithImage;\n","import React, { useEffect, useState } from \"react\";\n\nconst Accordion = (props) => {\n const {\n id,\n items = [],\n selectedId,\n setSelectedId,\n selectedItemImage,\n collapseItemImage,\n styles,\n } = props\n\n const accordionClickHandler = (e, index) => {\n e.preventDefault()\n let accordion = document.getElementById(id)\n if (accordion) {\n let accordionItems = accordion.querySelectorAll('.accordion-item')\n accordionItems.forEach(item => item.classList.remove('active'))\n e.target.parentElement.classList.toggle('active')\n setSelectedId(index)\n }\n }\n\n // const [currentPage, setCurrentPage] = useState(1)\n // const [floorsPerPage] = useState(4)\n // const indexOfLastFloor = currentPage * floorsPerPage\n // const indexOfFirstFloor = indexOfLastFloor - floorsPerPage\n // const currentFloors = items.length > 4 ? items.slice(indexOfFirstFloor, indexOfLastFloor) : items\n const [scrollPosition, setScrollPosition] = useState(0);\n const [scrollMaxHeight, setScrollMaxHeight] = useState();\n const [arrowBtnEnabled, setArrowBtnEnabled] = useState(false)\n const [upBtnEnabled, setUpBtnEnabled] = useState(false)\n const [downBtnEnabled, setDownBtnEnabled] = useState(false)\n const [currentSection, setCurrentSection] = useState(1)\n const [totalSection, setTotalSection] = useState(0)\n const [sectionFixedHeight, setSectionFixedHeight] = useState(0)\n const [scrollTop, setScrollTop] = useState(0);\n\n const handleScroll = event => {\n setScrollTop(event.currentTarget.scrollTop);\n };\n\n useEffect(() => {\n const accordionContainer = document.querySelector('.accordion')\n const ulContainer = document.querySelector('.accordion-controls') //content height\n setScrollMaxHeight(ulContainer.scrollHeight)\n setSectionFixedHeight(accordionContainer.offsetHeight)\n\n let totalSection = Math.ceil(ulContainer.scrollHeight / accordionContainer.offsetHeight)\n\n switch (totalSection) {\n case totalSection > 1: {\n setArrowBtnEnabled(true)\n\n }\n }\n if (totalSection > 1) {\n setArrowBtnEnabled(true)\n setDownBtnEnabled(true)\n setTotalSection(totalSection)\n }\n\n // console.log('scrollTop', scrollTop)\n // console.log('total section', totalSection)\n // setTotalSection()\n // divide max height / accordion height\n // qoutient will be the basis of total page\n }, []) //initial\n useEffect(() => {\n //enable/disable buttons\n // console.log('initalmaxHeight', scrollMaxHeight)\n // console.log('currentSection', currentSection)\n if (currentSection > 1) setUpBtnEnabled(true)\n else setUpBtnEnabled(false)\n\n if (currentSection === totalSection) setDownBtnEnabled(false)\n else setDownBtnEnabled(true)\n\n //update scroll position\n // console.log('scrollTop', scrollTop)\n if (currentSection) {\n // console.log('scrollPos', scrollPosition)\n const accordion = document.querySelector('.accordion')\n\n accordion.scrollTop = scrollPosition;\n }\n }, [currentSection]); //current section\n\n useEffect(() => {\n // if (scrollMaxHeight > )\n }, [scrollMaxHeight])\n\n const nextPage = (e) => {\n e.preventDefault()\n setCurrentSection(prev => prev + 1)\n setScrollPosition(scrollPosition + sectionFixedHeight)\n\n const accList = document.querySelector('.accordion')\n const animationReset = setTimeout(() => accList.classList.remove('acc-animate'), 500)\n\n if(accList) {\n accList.classList.add('acc-animate')\n }\n\n return () => clearTimeout(animationReset)\n\n };\n\n const prevPage = (e) => {\n e.preventDefault()\n setCurrentSection(prev => prev - 1)\n setScrollPosition(scrollPosition - sectionFixedHeight)\n\n const accList = document.querySelector('.accordion')\n const animationReset = setTimeout(() => accList.classList.remove('acc-animate'), 500)\n\n if(accList) {\n accList.classList.add('acc-animate')\n }\n\n return () => clearTimeout(animationReset)\n\n };\n\n\n const linkLabelStyle = {\n backgroundImage: `linear-gradient(transparent calc(100% - 1px), ${styles.color} 1px)`,\n }\n\n const svgFillColor = styles && styles.color ? styles.color : '#fff'\n\n return (\n \n
\n ) : \"\"\n }\n \n {Heading && Heading.value &&\n
\n \n
\n }\n {Subheading && Subheading.value &&\n \n
\n }\n \n
\n \n
\n \n
\n \n {renderImage()}\n
\n \n {renderList()}\n
\n \n {arrowBtnEnabled &&\n \n }\n
\n {arrowBtnEnabled &&\n \n }\n {/* {{scrollTop}} */}\n \n )\n}\n\nexport default Accordion;","import React, { useState, useCallback, useRef, useEffect } from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\nimport QuickPinchZoom, { make3dTransformValue } from \"react-quick-pinch-zoom\";\nimport accordionSelected from '../../../../assets/accordion-selected.svg'\nimport accordionCollapse from '../../../../assets/accordion-collapse.svg'\nimport closeBtn from '../../../../assets/close-btn.svg'\nimport Accordion from '../../../Common/Accordion';\n\nconst FeatureDevmicrositeFloorPlans = (props) => {\n\n const {\n Header = null,\n HeaderFontName = null,\n HeaderFontSize = {value: 'default'},\n BackgroundColour = null,\n ImageBackgroundColour = null,\n FontColour = null,\n FloorPlanID = null,\n FloorPlans = [],\n ImagePosition = null,\n } = props.fields\n\n const {\n RemoveDefaultMargin = \"\"\n } = props.params || {};\n\n const [selectedFloorId, setSelectedFloorId] = useState(0)\n const [isModalOpen, setIsModalOpen] = useState(false)\n const [accordionHeight, setAccordionHeight] = useState(null)\n const [hasArrows, setHasArrows] = useState()\n\n const componentStyle = {\n marginTop: RemoveDefaultMargin && RemoveDefaultMargin === \"1\" ? \"0px\" : \"\"\n }\n\n const styling = {\n color: FontColour && FontColour.value ? FontColour.value : \"#ffffff\",\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#3d4a39\",\n }\n\n // pinch-zoom parameters\n const flrPlanImgRef = useRef()\n const imgRef = useRef()\n const quickPinchZoomRef = useRef()\n const onUpdate = useCallback(({ x, y, scale }) => {\n // console.log('params', x, y, scale)\n const { current: img } = imgRef;\n\n if (img) {\n const value = make3dTransformValue({ x, y, scale });\n img.style.setProperty(\"transform\", value);\n\n }\n }, []);\n\n useEffect(() => {\n if (!isModalOpen && quickPinchZoomRef && quickPinchZoomRef.current) quickPinchZoomRef.current.scaleTo({ x: 0, y: 0, scale: 1 })\n }, [isModalOpen])\n\n // animate immage trigger\n const updateSelectedImage = (id) => {\n const { current: img } = flrPlanImgRef;\n //const img = document.getElementById(\"flr-plan-img\")\n if (img) {\n img.classList.remove('img-animate')\n img.setAttribute('src', FloorPlans[id].fields.ImageUrl.value)\n img.setAttribute('alt', FloorPlans[id].fields.ImageAltText.value)\n void img.offsetWidth //trigger reflow\n img.classList.add('img-animate');\n }\n\n }\n useEffect(() => {\n updateSelectedImage(selectedFloorId)\n }, [selectedFloorId])\n\n useEffect(() => {\n const accordionArrows = document.querySelector('.accordion.arrows-active')\n setHasArrows(accordionArrows)\n }, [hasArrows])\n\n // full image modal handler\n const modalHandler = () => {\n const body = document.body\n if (body.classList.contains('modal-open')) body.classList.remove('modal-open')\n else body.classList.add('modal-open')\n setIsModalOpen(!isModalOpen)\n }\n\n const measuredRef = useCallback(node => {\n if (node !== null) {\n setAccordionHeight(node.getBoundingClientRect().height);\n }\n }, []);\n\n return (\n FloorPlans && FloorPlans.length > 0 &&\n \n
\n \n )}\n \n - \n {items.map((floorPlan, index) =>\n
- \n \n {/* header */}\n\n\n\n {selectedId === index ?\n \n\n\n : }\n\n\n {/* {selectedItemImage && collapseItemImage &&\n \n {/* content */}\n
} */}\n {floorPlan.fields.FloorName.value}\n
- \n {floorPlan.fields.Precincts.map((precinct, ind) =>\n
- {precinct.fields.PrecinctName.value} \n )}\n
\n
\n \n
\n \n \n )\n};\n\nexport default FeatureDevmicrositeFloorPlans;\n","import React from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\nimport defaultImg from \"../../../../assets/image/gray.png\";\n\nconst FeatureDevMicrositeFooter = (props) => {\n const {\n LogoUrl,\n LogoAltText,\n LogoLink,\n CopyrightText,\n FooterLinks,\n FooterFontName,\n FooterFontSize = {value: 'default'},\n } = props.fields;\n\n const renderLogo = () => {\n let logoLayout = \"\";\n\n if (LogoUrl && LogoUrl.value) {\n if (LogoLink && LogoLink.value && LogoLink.value.href) {\n logoLayout =\n \n {/* floor plan */}\n \n
\n {/* image */}\n \n
\n\n \n
\n {/* accordion */}\n \n ![]()
\n
\n \n \n
\n \n \n ![{FloorPlans[selectedFloorId].fields.ImageAltText.value}]({FloorPlans[selectedFloorId].fields.ImageUrl.value})
\n \n
\n \n \n
\n } else {\n logoLayout =\n \n
\n }\n }\n\n return logoLayout;\n }\n\n const renderFooterLinks = () => {\n let footerLinksLayout = \"\";\n\n if (FooterLinks && FooterLinks.length > 0) {\n let hasMoreLinksClass = FooterLinks.length > 5 ? \"more-links\" : \"\";\n footerLinksLayout =\n \n {FooterLinks.map((item, index) => {\n const {\n LinkTitle,\n LinkUrl\n } = item.fields;\n\n let linkLayout = \"\";\n if (LinkTitle && LinkTitle.value &&\n LinkUrl && LinkUrl.value && LinkUrl.value.href) {\n linkLayout =\n \n
\n }\n\n return footerLinksLayout;\n }\n\n return (\n \n
\n )\n};\n\nexport default FeatureDevMicrositeFooter;\n","import React from 'react';\r\n\r\nconst FeatureDevMicrositeFullWidthImage = (props) => {\r\n const {\r\n ImageUrl,\r\n ImageAltText,\r\n } = props.fields;\r\n\r\n\r\n if (ImageAltText && ImageAltText.value && ImageUrl && ImageUrl.value) {\r\n return (\r\n \n {renderLogo()}\n
\n \n
\n \n {CopyrightText &&\n CopyrightText.value &&\n
\n \n
\n }\n \n {renderFooterLinks()}\n
\n \r\n
\r\n )\r\n }else return null;\r\n}\r\n\r\nexport default FeatureDevMicrositeFullWidthImage;\r\n","import React from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\n\nconst FeatureDevMicrositeHeaderAndText = (props) => {\n const {\n Title,\n TitleFontName,\n TitleFontSize = {value: 'default'},\n Description,\n DescriptionFontName,\n DescriptionFontSize = {value: 'default'},\n BackgroundColour,\n FontColour\n } = props.fields;\n\n const componentStyle = {\n color: FontColour && FontColour.value ? FontColour.value : \"#000000\",\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#ffffff\"\n }\n\n\n return (\n Title && Description &&\n \n
\n )\n};\n\nexport default FeatureDevMicrositeHeaderAndText;\n","import React, {useEffect, useState} from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\nimport { getAncestorElement } from '../../../../helper/GetAncestorElement';\nimport chevronDown from '../../../../assets/image/chevron-down-circle.svg';\nimport defaultImg from '../../../../assets/image/grey.svg';\n\nconst FeatureDevMicrositeHero = (props) => {\n const {\n HeroUrl,\n HeroAlt,\n HeroType,\n HeroTitle,\n TitleColour,\n TitleFontName,\n HeroTitleFontSize = {value: 'default'},\n HeroTagline,\n TaglineFontName,\n HeroTaglineFontSize = {value: 'default'}\n } = props.fields;\n\n const titleStyle = {\n color: TitleColour && TitleColour.value ? TitleColour.value : \"#ffffff\",\n fontFamily: TitleFontName && TitleFontName.value\n }\n\n const taglineStyle = {\n color: TitleColour && TitleColour.value ? TitleColour.value : \"#ffffff\",\n fontFamily: TaglineFontName && TaglineFontName.value\n }\n\n const [chevronStyle, setChevronStyle] = useState()\n\n useEffect(() => {\n const getHeader = document.querySelector(\".main-navigation__nav-menu\");\n if (getHeader) {\n const headerStyle = window.getComputedStyle(getHeader);\n const headerColor = headerStyle.getPropertyValue('color');\n \n if (headerColor) {\n setChevronStyle(headerColor);\n } else {\n return \"#ffffff\";\n }\n }\n }, [chevronStyle]);\n\n const renderHeroBanner = () => {\n let heroBannerLayout = \"\";\n\n if (HeroUrl && HeroUrl.value) {\n if (HeroType && HeroType.value && HeroType.value.toLowerCase() === \"video\") {\n heroBannerLayout =\n \n {Title && Title.value &&\n
\n \n
\n }\n {Description && Description.value &&\n \n
\n }\n \n
\n \n
\n )\n } else return null;\n\n};\n\nexport default FeatureDevMicrositeHero;","export const getAncestorElement = (element, ancestorClass) => {\n if (element) {\n while ((element = element.parentElement) && !element.classList.contains(ancestorClass));\n }\n return element;\n};\n","import React, { useState, useEffect } from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\nimport RiseAndFade from '../../../Common/Animations/RiseAndFade';\nimport defaultImg from \"../../../../assets/image/gray.png\";\n\nconst FeatureDevMicrositeHeroGrid = (props) => {\n const {\n Heading,\n HeadingFontName,\n HeadingFontSize = {value: 'default'},\n Subheading,\n SubheadingFontName,\n SubheadingFontSize = {value: 'default'},\n GridImages,\n BackgroundColour,\n FontColour\n } = props.fields;\n\n const {\n RemoveDefaultMargin = \"\"\n } = props.params || {};\n\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n if (window) {\n if (window.outerWidth < 768) {\n setIsMobile(true)\n }\n }\n }, [])\n\n let fontColor = FontColour && FontColour.value ? FontColour.value : \"#000000\";\n const heroGridStyle = {\n color: fontColor,\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#ffffff\",\n paddingTop: RemoveDefaultMargin && RemoveDefaultMargin === \"1\" ? \"0px\" : \"\"\n }\n\n const linkLabelStyle = {\n backgroundImage: `linear-gradient(transparent calc(100% - 1px), ${fontColor} 1px)`\n }\n\n const renderGallery = () => {\n let galleryLayout = \"\";\n\n if (GridImages && GridImages.length > 0) {\n galleryLayout =\n \n {renderHeroBanner()}\n
\n \n
\n \n {HeroTagline &&\n HeroTagline.value &&\n
\n\n \n \n
\n }\n {HeroTitle &&\n HeroTitle.value &&\n \n
\n }\n \n
\n }\n\n return galleryLayout;\n }\n\n if (GridImages && GridImages.length > 0) {\n return (\n \n {GridImages.map((item, index) => {\n const {\n Link,\n ImageUrl,\n ImageAltText,\n Title,\n TitleFontName = null,\n ImageTitleFontSize = {value: 'default'},\n } = item.fields;\n\n let imageLayout = \"\";\n let posVal = 0;\n let isEven = false;\n const newIndex = index + 1;\n\n if (newIndex % 2 === 0) {\n posVal = 6;\n isEven = true;\n }\n\n if (isMobile && index > 0) {\n posVal = 6;\n }\n\n let colVal = \"7\";\n if (newIndex % 3 === 0) {\n colVal = \"5\";\n }\n else if (newIndex % 4 === 0) {\n colVal = \"7\";\n } else if (isEven) {\n colVal = \"5\";\n }\n\n if (Link && Link.value && Link.value.href && ImageUrl && ImageUrl.value) {\n imageLayout =\n \n }\n\n return imageLayout;\n })}\n
\n \n
\n )\n } else return null;\n}\n\nexport default FeatureDevMicrositeHeroGrid;\n","import React, { useEffect, useState } from 'react';\nimport Flickity from \"react-flickity-component\"\nimport chevronRight from '../../../../assets/image/chevron-right.png';\n\nconst FeatureDevMicrositeImageCarousel = (props) => {\n\n const {\n ImageGallery: images = [],\n Colour = null,\n CaptionFontName = null,\n CaptionFontSize = {value: 'default'}\n } = props.fields;\n\n const [flkty, setFlkty] = useState(null)\n\n const flktyOptions = {\n pageDots: false\n }\n\n useEffect(() => {\n // after initialize\n if (flkty) {\n\n flkty.on('change', (index) => {\n let selectedCarousel = document.getElementsByClassName(`crsl-${flkty.guid}`)\n let selectedHTMLBtns = selectedCarousel[0].nextSibling.querySelectorAll('.custom-navigation-bar-buttons-button')\n let selectedPage = selectedCarousel[0].nextSibling.querySelector('#selected-page')\n // update current page\n selectedPage.textContent = `${index + 1}`\n\n // apply selected style to index\n Array.from(selectedHTMLBtns).forEach((button, i) => {\n if (button.classList.contains('is-active')) {\n button.classList.remove('is-active')\n button.style.backgroundColor = \"\"\n }\n if (i === index) {\n button.classList.add('is-active')\n if (Colour && Colour.value) button.style.backgroundColor = Colour.value\n }\n })\n })\n }\n }, [flkty])\n\n const renderCarouselNavigation = () => {\n\n return (\n \n {(Heading && Heading.value || Subheading && Subheading.value) &&\n
\n \n {Heading && Heading.value &&\n
\n }\n {renderGallery()}\n \n
\n }\n {Subheading && Subheading.value &&\n \n
\n }\n \n
\n )\n }\n\n return (\n \n
\n \n {flkty.slides.map((slide, index) => {\n return (\n \n )\n\n })}\n
\n \n \n {/* pagination */}\n
\n \n
\n\n \n {flkty.selectedIndex + 1}
/ {flkty.slides.length}\n\n \n\n {images && images.length > 0 && (\n setFlkty(ref)}\n reloadOnUpdate={true}\n static={true}\n >\n {images.map((item, index) => {\n const { ImageUrl: url, ImageAltText: alt, Caption: caption, ImageOrientation } = item.fields;\n if (url && url.value) {\n return (\n
\n\n )\n}\n\nexport default FeatureDevMicrositeImageCarousel;\n","import React, { useState, Fragment } from \"react\";\r\n\r\nconst Tooltip = (props) => {\r\n let timeout;\r\n const [active, setActive] = useState(false);\r\n\r\n const showTip = () => {\r\n timeout = setTimeout(() => {\r\n setActive(true);\r\n }, props.delay || 400);\r\n };\r\n\r\n const hideTip = () => {\r\n clearInterval(timeout);\r\n setActive(false);\r\n };\r\n\r\n return (\r\n \n
\n\n );\n } else return null;\n })}\n \n )}\n {/* custom nav */}\n {flkty && images.length && renderCarouselNavigation()}\n {caption.value}
}\n\r\n {props.content.split(/\\n/).map((line, i, arr) => i === arr.length - 1 ? line : {line}
)}\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Tooltip;\r\n","import React from 'react';\nimport Tooltip from '../../../Common/Tooltip';\nimport defaultImg from '../../../../assets/image/gray.png';\n\nconst FeatureDevMicrositeInteractiveAerialView = (props) => {\n const {\n ImageUrl,\n Hotspots,\n IsFullwidth\n } = props.fields;\n\n const {\n RemoveDefaultMargin = \"\"\n } = props.params || {};\n\n const componentStyle = {\n margin: RemoveDefaultMargin && RemoveDefaultMargin === \"1\" ? \"0px\" : \"\",\n }\n\n const renderTooltips = () => {\n if (Hotspots && Hotspots.length > 0) {\n\n let tooltipsLayout = Hotspots.map((item, index) => {\n const {\n TooltipLabel = null,\n TooltipLabelFontName = null,\n TooltipLabelFontSize = {value: 'default'},\n TooltipPosition = null,\n TooltipBgColour = null,\n TooltipFontColour = null,\n LeftPosition = null,\n TopPosition = null,\n Colour = null,\n HasBorder = null,\n BorderColour = null\n } = item.fields || {};\n\n let top = IsFullwidth.value ? parseFloat(TopPosition.value) + 1 : parseFloat(TopPosition.value);\n let left = IsFullwidth.value ? parseFloat(LeftPosition.value) + 0.5 : parseFloat(LeftPosition.value);\n\n const tooltipStyle = {\n top: TopPosition && TopPosition.value ? `${top}%` : \"0\",\n left: LeftPosition && LeftPosition.value ? `${left}%` : \"0\",\n position: \"absolute\"\n }\n\n const labelStyle = {\n backgroundColor: TooltipBgColour && TooltipBgColour.value ? TooltipBgColour.value : \"#ffffff\",\n color: TooltipFontColour && TooltipFontColour.value ? TooltipFontColour.value : \"#000\",\n fontFamily: TooltipLabelFontName && TooltipLabelFontName.value\n }\n\n const hotspotStyle = {\n backgroundColor: Colour && Colour.value ? Colour.value : \"\",\n borderColor: HasBorder.value && BorderColour.value ? BorderColour.value : \"\"\n }\n\n let tooltipLayout = (\n \n \n \n \n
\n )\n\n return tooltipLayout;\n })\n\n return (\n \n {tooltipsLayout}\n
)\n\n } else return null;\n }\n\n return (\n ImageUrl && Hotspots &&\n \n
\n );\n\n};\n\nexport default FeatureDevMicrositeInteractiveAerialView;\n","import React, { useState, useEffect } from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\n\nconst defaultColor = \"#3d4a39\";\nconst whiteColor = \"#ffffff\";\n\nconst FeatureDevMicrositeMainNavigation = (props) => {\n const {\n SiteLogoUrl,\n SiteLogoAltText,\n SiteUrl,\n EnquireLink,\n EnquireIconUrl,\n NavigationLinks,\n NavigationFontName,\n NavigationFontSize = {value: 'default'},\n NavigationBackgroundColour,\n NavigationFontColour,\n FontColour\n } = props.fields;\n\n const [showMenu, setShowMenu] = useState(false);\n const [isTablet, setIsTablet] = useState(false);\n\n\n useEffect(() => {\n function handleResize() {\n setIsTablet(window.matchMedia('(min-width: 768px)').matches);\n }\n window.addEventListener(\"resize\", handleResize);\n handleResize();\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n const textColor = {\n color: FontColour && FontColour.value ? FontColour.value : whiteColor,\n borderColor: FontColour && FontColour.value ? FontColour.value : whiteColor,\n }\n\n const navColor = {\n color: NavigationFontColour && NavigationFontColour.value ? NavigationFontColour.value : whiteColor\n }\n const NavWrapperBgColor = NavigationBackgroundColour && NavigationBackgroundColour.value ? NavigationBackgroundColour.value : defaultColor;\n const navWrapperStyle = {\n background: isTablet ? `linear-gradient(to right,${NavWrapperBgColor} 50%,rgba(0, 0, 0, 0.5) 50%)` : NavWrapperBgColor,\n };\n\n const setBodyScroll = (isNavShown) => {\n document.body.style.overflow = isNavShown ? 'hidden' : 'overlay'\n }\n\n\n const setMenuStats = (status) => {\n setBodyScroll(status)\n setShowMenu(status)\n }\n const renderLogo = () => {\n let renderLogoLayout = \"\";\n\n if (SiteLogoUrl && SiteLogoUrl.value) {\n if (SiteUrl && SiteUrl.value) {\n renderLogoLayout =\n \n \n
\n \n {ImageUrl && ImageUrl.value &&\n {\n e.target.src = defaultImg\n e.target.style.aspectRatio = '16/9'\n }}\n\n />\n }\n {renderTooltips()}\n
\n \n 
\n
\n }\n }\n\n return renderLogoLayout;\n }\n\n return (\n \n
\n )\n\n};\n\nexport default FeatureDevMicrositeMainNavigation;\n","\nimport React from 'react';\nimport { RichText } from '@sitecore-jss/sitecore-jss-react';\n/**\n * @method PartnersComponent\n * @param { BackgroundColour, FontColour, Heading, Subheading, Partners } props.fields\n * @returns The main Partners Component\n */\nconst FeatureDevMicrositePartners = (props) => {\n let { BackgroundColour,\n FontColour,\n Heading,\n HeadingFontName,\n HeadingFontSize = {value: 'default'},\n Subheading,\n SubheadingFontName,\n SubheadingFontSize = {value: 'default'},\n Partners } = props.fields;\n\n // Checking of default colors. If there's none set, default colors were assigned\n // Defaults: BackgroundColor = 'white', Color = 'black'\n const componentStyle = {\n color: FontColour && FontColour.value ? FontColour.value : \"#000000\",\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#ffffff\",\n }\n\n return (\n Partners && Heading && Subheading &&\n \n
\n \n
\n \n
\n \n \n {showMenu &&\n
\n \n
\n }\n \n \n
\n \n {NavigationLinks.map((item, index) => {\n const {\n Link,\n LinkName,\n // IsActive\n } = item.fields\n\n let navLinkLayout = \"\";\n if (Link && Link.value && Link.value.href && LinkName && LinkName.value) {\n navLinkLayout = (\n \n
\n setMenuStats(false)}\n >\n
\n \n {renderLogo()}\n
\n \n
\n \n {EnquireLink &&\n EnquireLink.value &&\n EnquireLink.value.href &&\n \n {(EnquireIconUrl && EnquireIconUrl.value) ?\n 
\n : \n }\n {EnquireLink && EnquireLink.value && EnquireLink.value.text ? EnquireLink.value.text : \"Enquire\"}\n \n }\n
\n \n
)\n};\n\n/**\n * @method PartnersHeading\n * @param { items } props \n * @returns Partners Heading and Subheading\n */\nconst PartnersHeading = (props) => {\n const { HeadingFontName = null, SubheadingFontName = null } = props\n return (\n \n
\n \n
\n }\n \n {\n // Iteration of items array\n Object.keys(props.items).map((item, index) => {\n // Condition whether to display a heading/subheading if set or not.\n let itemType = item.toString();\n if(itemType === 'Heading') {\n return (props.items[item].value || props.items[item].value !== \"\") &&
\n )\n}\n\n/**\n * @method PartnersGridItems\n * @param { Partners } props \n * @returns Set of liked logos\n */\nconst PartnersGridItems = (props) => {\n return (\n // Iteration of Partners array and props spreading\n props.Partners.map((item, index) => {\n const imageElement = {imageElement}
\n })\n )\n}\n\nexport default FeatureDevMicrositePartners;\n","import React, { useEffect, useState } from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\nimport RetailRiseFade from '../../../Common/Animations/RetailRiseFade';\n\nconst FeatureDevMicrositePressListing = (props) => {\n const { PressListingItems } = props.fields\n\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n if (window) {\n if (window.outerWidth <= 1180) {\n setIsMobile(true)\n }\n }\n }, [])\n\n return (\n PressListingItems && PressListingItems.length > 0 &&\n \n {\n PressListingItems.map((item, index) => {\n return (\n !((!isMobile && index > 5) || (isMobile && index > 1)) ?
\n )};\n\nconst PressItemCard = (props) => {\n const { Title, ImageUrl, ImageAlt, PublicationName, PublicationDate, CtaLink, CtaLabel } = props.fields\n const $ = (fieldName) => {\n return fieldName.value\n }\n return (\n \n \n })
\n
\n { (($(PublicationDate) || $(PublicationDate) !== '') || $(PublicationName) || $(PublicationName) !== '') && \n \n {$(PublicationName) || ''}\n { ($(PublicationDate) !== '') && {$(PublicationDate)}}\n
\n }\n {\n ($(Title) || $(Title) !== '') &&\n \n \n {$(Title)}\n \n
\n }\n \n {$(CtaLabel)}\n \n \n \n )\n}\n\nexport default FeatureDevMicrositePressListing;\n","import React from 'react';\r\n\r\nconst BaseComponent = (props) => {\r\n const {\r\n margin,\r\n sectionId,\r\n setVisible\r\n } = props\r\n\r\n const setMargin = () => {\r\n let marginClass = \"\";\r\n if (margin === \"standard\") {\r\n marginClass = \"standard\";\r\n }\r\n return marginClass;\r\n };\r\n\r\n const showBase = () => {\r\n let visible = true;\r\n if (setVisible && setVisible === \"hide\") {\r\n visible = false;\r\n }\r\n return visible;\r\n };\r\n\r\n if (showBase()) {\r\n return (\r\n \r\n {((props.fields && props.fields.Content) ||\r\n (!props.fields && props.sitecoreContext.pageEditing)) &&\r\n \r\n {props.fields && props.fields.Content && (\r\n \r\n }\r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default withSitecoreContext()(FeatureDevMicrositeRichText);\r\n","import React from 'react';\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\n\nconst FeatureDevMicrositeSolidColour = (props) => {\n const {\n Title,\n TitleColour,\n TitleFontName,\n TitleFontSize = {value: 'default'},\n BackgroundColour\n } = props.fields;\n\n const solidColourStyle = {\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#3d4a39\"\n }\n\n const titleColourStyle = {\n color: TitleColour && TitleColour.value ? TitleColour.value : \"#ffffff\",\n fontFamily: TitleFontName && TitleFontName.value\n }\n\n return (\n \r\n
\r\n )}\r\n\r\n {!props.fields && props.sitecoreContext.pageEditing && (\r\n \r\n
\r\n \r\n
\r\n )}\r\n Rich Text component is not displayed due to following reasons:
\r\n - Datasource is not set.\r\n
\n
\n )\n};\n\nexport default FeatureDevMicrositeSolidColour;\n","import React from 'react';\nimport { Text, RichText } from '@sitecore-jss/sitecore-jss-react';\nimport defaultImg from \"../../../../assets/image/gray.png\";\nimport ScrollAnimation from \"react-animate-on-scroll\";\n\nconst FeatureDevMicrositeTextImage = (props) => {\n const {\n BackgroundColour,\n FontColour,\n Title,\n TitleFontName,\n TitleFontSize = {value: 'default'},\n Description,\n DescriptionFontName,\n DescriptionFontSize = {value: 'default'},\n CtaLink,\n CtaTheme,\n ImagePosition,\n ImageGallery\n } = props.fields;\n\n const textImageStyle = {\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#ffffff\",\n color: FontColour && FontColour.value ? FontColour.value : \"#000000\"\n }\n\n const fontFamilyName = {\n titleFontName: TitleFontName && TitleFontName.value,\n descriptionFontName: DescriptionFontName && DescriptionFontName.value\n }\n\n const renderGallery = () => {\n let galleryLayout = \"\";\n\n if (ImageGallery && ImageGallery.length > 0) {\n let galleryClass = \"\";\n if (ImageGallery.length === 2) {\n galleryClass = \"is-2\";\n } else if (ImageGallery.length > 2) {\n galleryClass = \"is-3\";\n }\n\n galleryLayout =\n \n
\n \n
\n \n
\n }\n return galleryLayout;\n }\n\n if (ImageGallery && ImageGallery.length > 0 && Description && Description.value) {\n return (\n \n {ImageGallery.map((item, index) => {\n const {\n ImageUrl,\n ImageAlt,\n ImageAspectRatio\n } = item.fields;\n\n if (index > 2) {\n return;\n }\n\n let imageLayout = \"\";\n let colVal = \"12\";\n\n if (ImageGallery.length === 2) {\n colVal = \"12\";\n if (index === 1) {\n colVal = \"6\"\n }\n } else if (ImageGallery.length > 2) {\n colVal = \"10\";\n if (index === 1) {\n colVal = \"4\";\n } else if (index === 2) {\n colVal = \"8\";\n }\n }\n\n let ratioClass = \"\";\n if (ImageAspectRatio && ImageAspectRatio.value) {\n if (ImageAspectRatio.value === \"4:3\") {\n ratioClass = \"is-ratio-4-3\";\n } else if (ImageAspectRatio.value === \"16:9\") {\n ratioClass = \"is-ratio-16-9\";\n } else if (ImageAspectRatio.value === \"3:4\") {\n ratioClass = \"is-ratio-3-4\";\n }\n }\n\n if (ImageUrl && ImageUrl.value) {\n imageLayout =\n
\n \n
\n }\n return imageLayout;\n })}\n \n
\n \n
\n \n
\n \n \n )\n } else return null;\n};\n\nexport default FeatureDevMicrositeTextImage;\n","import React, { Component } from \"react\";\r\nimport { RichText } from \"@sitecore-jss/sitecore-jss-react\";\r\n\r\nclass FeatureDevMicrositeVideoModule extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {};\r\n }\r\n\r\n componentDidMount() {\r\n this.appendScript();\r\n\r\n // var iframe = document.getElementsByTagName(\"iframe\");\r\n // var iframeList = Array.prototype.slice.call(iframe);\r\n // iframeList.forEach(this.iframeEvent);\r\n // // iframe.onload = function(){\r\n // // console.log(iframe.contentWindow.document.body.scrollHeight);\r\n // // iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';\r\n // // }\r\n }\r\n\r\n iframeEvent(value, index, ar) {\r\n ar[index].onload = function(){\r\n ar[index].style.height = ar[index].contentWindow.document.body.scrollHeight + 'px';\r\n }\r\n }\r\n \r\n appendScript() {\r\n const { Object: object } = this.props.fields;\r\n if (object && object.value) {\r\n let parser = new DOMParser();\r\n let scripts = parser\r\n .parseFromString(object.value, \"text/html\")\r\n .body.querySelectorAll(\"script\");\r\n if (scripts && scripts.length) {\r\n for (let i = 0; i < scripts.length; i++) {\r\n let scriptElement = document.createElement('script');\r\n scriptElement.textContent = scripts[i].textContent;\r\n document.head.appendChild(scriptElement); }\r\n }\r\n }\r\n }\r\n\r\n\r\n \r\n render(){\r\n const {\r\n BackgroundColour,\r\n EmbedCode: object\r\n } = this.props.fields;\r\n \r\n const componentStyle = {\r\n backgroundColor: BackgroundColour && BackgroundColour.value ? BackgroundColour.value : \"#f5f5f6\"\r\n }\r\n \r\n if (object && object.value) {\r\n return (\r\n \n
\n \n
\n \n {renderGallery()}\n
\n\n {/* Divider */}\n \n\n \n
\n \n {Title && Title.value &&\n
\n }\n \n
\n }\n {Description && Description.value &&\n \n
\n }\n {CtaLink && CtaLink.value && CtaLink.value.href && CtaLink.value.text &&\n < div className='text-image__cta' >\n \n {CtaLink.value.text}\n \n \r\n
\r\n );\r\n }\r\n else return null;\r\n }\r\n}\r\n\r\nexport default FeatureDevMicrositeVideoModule;\r\n","import React from \"react\";\nimport { Placeholder } from \"@sitecore-jss/sitecore-jss-react\";\n\nclass FoundationLayoutMain extends React.Component {\n render() {\n return (\n \r\n
\r\n \r\n
\r\n ') ? \"hasVideo\" : object.value.includes('blingby.com') ? \"hasBlingby\" : \"\" }`}>\r\n
\r\n \n
\n );\n }\n}\n\nexport default FoundationLayoutMain;\n","/* eslint-disable */\n// Do not edit this file, it is auto-generated at build time!\n// See scripts/generate-component-factory.js to modify the generation of this file.\nimport CommonAnimationsRetailRiseFade from '../components/Common/Animations/RetailRiseFade';\nimport CommonAnimationsRiseAndFade from '../components/Common/Animations/RiseAndFade';\nimport FeatureDevMicrositeCorpoLeasing from '../components/Feature/DevMicrosite/CorpoLeasing';\nimport FeatureDevMicrositeEnquireBanner from '../components/Feature/DevMicrosite/EnquireBanner';\nimport FeatureDevMicrositeEnquireForm from '../components/Feature/DevMicrosite/EnquireForm';\nimport FeatureDevMicrositeFactsAndFigures from '../components/Feature/DevMicrosite/FactsAndFigures';\nimport FeatureDevMicrositeFactsAndFiguresWithImage from '../components/Feature/DevMicrosite/FactsAndFiguresWithImage';\nimport FeatureDevMicrositeFloorPlans from '../components/Feature/DevMicrosite/FloorPlans';\nimport FeatureDevMicrositeFooter from '../components/Feature/DevMicrosite/Footer';\nimport FeatureDevMicrositeFullWidthImage from '../components/Feature/DevMicrosite/FullWidthImage';\nimport FeatureDevMicrositeHeaderAndText from '../components/Feature/DevMicrosite/HeaderAndText';\nimport FeatureDevMicrositeHero from '../components/Feature/DevMicrosite/Hero';\nimport FeatureDevMicrositeHeroGrid from '../components/Feature/DevMicrosite/HeroGrid';\nimport FeatureDevMicrositeImageCarousel from '../components/Feature/DevMicrosite/ImageCarousel';\nimport FeatureDevMicrositeInteractiveAerialView from '../components/Feature/DevMicrosite/InteractiveAerialView';\nimport FeatureDevMicrositeMainNavigation from '../components/Feature/DevMicrosite/MainNavigation';\nimport FeatureDevMicrositePartners from '../components/Feature/DevMicrosite/Partners';\nimport FeatureDevMicrositePressListing from '../components/Feature/DevMicrosite/PressListing';\nimport FeatureDevMicrositeRichText from '../components/Feature/DevMicrosite/RichText';\nimport FeatureDevMicrositeSolidColour from '../components/Feature/DevMicrosite/SolidColour';\nimport FeatureDevMicrositeTextImage from '../components/Feature/DevMicrosite/TextImage';\nimport FeatureDevMicrositeVideoModule from '../components/Feature/DevMicrosite/VideoModule';\nimport FoundationLayoutMain from '../components/Foundation/Layout/Main';\n\nconst components = new Map();\ncomponents.set('Common-Animations-RetailRiseFade', CommonAnimationsRetailRiseFade);\ncomponents.set('Common-Animations-RiseAndFade', CommonAnimationsRiseAndFade);\ncomponents.set('Feature-DevMicrosite-CorpoLeasing', FeatureDevMicrositeCorpoLeasing);\ncomponents.set('Feature-DevMicrosite-EnquireBanner', FeatureDevMicrositeEnquireBanner);\ncomponents.set('Feature-DevMicrosite-EnquireForm', FeatureDevMicrositeEnquireForm);\ncomponents.set('Feature-DevMicrosite-FactsAndFigures', FeatureDevMicrositeFactsAndFigures);\ncomponents.set('Feature-DevMicrosite-FactsAndFiguresWithImage', FeatureDevMicrositeFactsAndFiguresWithImage);\ncomponents.set('Feature-DevMicrosite-FloorPlans', FeatureDevMicrositeFloorPlans);\ncomponents.set('Feature-DevMicrosite-Footer', FeatureDevMicrositeFooter);\ncomponents.set('Feature-DevMicrosite-FullWidthImage', FeatureDevMicrositeFullWidthImage);\ncomponents.set('Feature-DevMicrosite-HeaderAndText', FeatureDevMicrositeHeaderAndText);\ncomponents.set('Feature-DevMicrosite-Hero', FeatureDevMicrositeHero);\ncomponents.set('Feature-DevMicrosite-HeroGrid', FeatureDevMicrositeHeroGrid);\ncomponents.set('Feature-DevMicrosite-ImageCarousel', FeatureDevMicrositeImageCarousel);\ncomponents.set('Feature-DevMicrosite-InteractiveAerialView', FeatureDevMicrositeInteractiveAerialView);\ncomponents.set('Feature-DevMicrosite-MainNavigation', FeatureDevMicrositeMainNavigation);\ncomponents.set('Feature-DevMicrosite-Partners', FeatureDevMicrositePartners);\ncomponents.set('Feature-DevMicrosite-PressListing', FeatureDevMicrositePressListing);\ncomponents.set('Feature-DevMicrosite-RichText', FeatureDevMicrositeRichText);\ncomponents.set('Feature-DevMicrosite-SolidColour', FeatureDevMicrositeSolidColour);\ncomponents.set('Feature-DevMicrosite-TextImage', FeatureDevMicrositeTextImage);\ncomponents.set('Feature-DevMicrosite-VideoModule', FeatureDevMicrositeVideoModule);\ncomponents.set('Foundation-Layout-Main', FoundationLayoutMain);\n\nexport default function componentFactory(componentName) {\n return components.get(componentName);\n};\n","import axios from 'axios';\n\n/**\n * Implements a data fetcher using Axios - replace with your favorite\n * SSR-capable HTTP or fetch library if you like. See HttpJsonFetcherPage not found
\nThis page does not exist.
\n\n Site: {context.site && context.site.name}\n
\n Language: {context.language}\n
\n \n {'Page not found'} \n \n
\n );\n }\n // Don't render anything if the route data or dictionary data is not fully loaded yet.\n // This is a good place for a \"Loading\" component, if one is needed.\n if (!routeData || this.languageIsChanging) {\n return null;\n }\n // Render the app's root structural layout\n return