{"version":3,"file":"static/js/6479.6881010d.chunk.js","mappings":"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","sources":["helpers/keys.js","shared/practical-card-container/practical-card-item.jsx","shared/practical-card-container/practical-card-container.jsx","shared/_svgs/small/Play.js","shared/youtube-embed/YouTubeEmbed.jsx"],"sourcesContent":["export const generateRandomString = () => {\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\"\n  let randomString = \"\"\n\n  for (let i = 0; i < 5; i++) {\n    const randomIndex = Math.floor(Math.random() * characters.length)\n    randomString += characters[randomIndex]\n  }\n\n  return randomString\n}\n","import React, { useRef, useEffect } from \"react\"\nimport ReactHtmlParser from \"react-html-parser\"\nimport Svg from \"../_svgs/svg\"\nimport YoutubeEmbed from \"../youtube-embed/YouTubeEmbed\"\nimport { generateRandomString } from \"../../helpers/keys\"\n\nfunction PracticalCardItem({\n  portraitPhoto,\n  activateSplash,\n  splashLabel,\n  title,\n  readMore,\n  readLess, // Outer Card\n  header,\n  introText,\n  introImage,\n  explainerText,\n  introImageUrl,\n  introImageUrlLabel,\n  outroText,\n  additionalImageSections, //Inner Card Content\n  activeCard,\n  setActiveCard,\n  setAreCardsClosed,\n  elementId,\n  maximumCardTitleHeightValue,\n  setMaximumCardTitleHeightValue, //Functional Card Variables\n  windowWidth,\n  innerVideo,\n  youtubeID,\n  thumbnailImage,\n  ariaDescription,\n}) {\n  var scrollRef = useRef()\n  var titleHeightRef = useRef()\n\n  const handleResize = () => {\n    if (titleHeightRef.current) {\n      const element = titleHeightRef.current\n      const height = element.offsetHeight\n\n      if (windowWidth < 750) {\n        titleHeightRef.current.style.height = \"\"\n        return\n      }\n\n      if (maximumCardTitleHeightValue <= height) {\n        setMaximumCardTitleHeightValue(height)\n      }\n\n      //hard capping the height on the card at 180px.\n      if (height < maximumCardTitleHeightValue) {\n        element.style.height = `${maximumCardTitleHeightValue > 180 ? 180 : maximumCardTitleHeightValue}px`\n      }\n    }\n    return\n  }\n\n  useEffect(() => {\n    if (titleHeightRef.current) {\n      const element = titleHeightRef.current\n      const height = element.offsetHeight\n\n      if (windowWidth < 768) {\n        titleHeightRef.current.style.height = \"\"\n        return\n      }\n\n      if (maximumCardTitleHeightValue < height) {\n        setMaximumCardTitleHeightValue(height)\n      }\n\n      if (height < maximumCardTitleHeightValue) {\n        element.style.height = `${maximumCardTitleHeightValue > 180 ? 180 : maximumCardTitleHeightValue}px`\n      }\n    }\n  })\n\n  useEffect(() => {\n    window.addEventListener(\"resize\", handleResize)\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [windowWidth])\n\n  //Rich Text Formatting\n  let formattedIntroText = ReactHtmlParser(introText)\n  let formattedOutroText = ReactHtmlParser(outroText)\n\n  /**\n   * Toggles state switches in the parent component that controls what\n   * styles are put on the card elements\n   * @setActiveCard Null by default, when a card is toggled, the activeCard variable that setActiveCard sets, is then set to the elementId of the card.\n   * @setAreCardsClosed true by default. When a card is toggled on, this is set to false, meaning every other card that is not active, is set to inactive in the styling.\n   * @scrollToTopOfElement is a method run when a card is closed and no new card is opened. it scrolls to the top of the closed element.\n   */\n  const ToggleCard = () => {\n    if (activeCard === elementId) {\n      setActiveCard(null)\n      setAreCardsClosed(true)\n      scrollIntoView()\n    } else {\n      setActiveCard(elementId)\n      setAreCardsClosed(false)\n    }\n  }\n\n  const scrollIntoView = () => {\n    let element = scrollRef.current\n\n    const siteHeader = document.getElementsByClassName(\"site-header\")[0]\n    const headerOffset = siteHeader.clientHeight + 20\n    const elementPosition = element.getBoundingClientRect().top\n    const offsetPosition = elementPosition + window.pageYOffset - headerOffset\n\n    window.scrollTo({ top: offsetPosition, behavior: \"smooth\" })\n  }\n\n  const htmlAdditionalImageSections = additionalImageSections\n    ? additionalImageSections.map((element) => {\n        return (\n          <div className=\"imagecontainer\" key={generateRandomString()}>\n            {element.youtubeID ? (\n              <YoutubeEmbed\n                embedId={element.youtubeID}\n                classDecleration=\"practical-card-youtube\"\n                backgroundImage={!element.thumbnailImage ? undefined : element.thumbnailImage}\n                ariaVideoDescription={element.ariaDescription}\n              />\n            ) : element.innerVideo ? (\n              <video\n                src={element.innerVideo}\n                controls={true}\n                playsInline\n                poster={thumbnailImage}\n                preload={\"auto\"}\n                loading=\"eager\"\n                fetchPriority=\"high\"\n              />\n            ) : element.additionalIntroImage ? (\n              <img src={element.additionalIntroImage} />\n            ) : null}\n\n            <div className=\"imgtext\">\n              {element.additionalIntroImageExplainerText ? <p>{element.additionalIntroImageExplainerText}</p> : null}\n              {!!element.additionalIntroImageUrl || !!element.additionalIntroImageUrl ? (\n                <a href={element.additionalIntroImageUrl}>\n                  <Svg iconName=\"arrowright-slim\" />\n                  {element.additionalIntroImageUrlLabel}\n                </a>\n              ) : null}\n            </div>\n          </div>\n        )\n      })\n    : undefined\n\n  return (\n    <div className=\"cardcontainer\" id={elementId} ref={scrollRef}>\n      <div className={`card ${activeCard === elementId ? \"active\" : \"inactive\"}`} onClick={ToggleCard}>\n        {activateSplash ? <div className=\"splash\">{splashLabel}</div> : null}\n        <img src={portraitPhoto} />\n        <div className=\"contentarea\">\n          <h3 ref={titleHeightRef}>{title}</h3>\n          <div className=\"readmore\">{activeCard === elementId ? readLess || \"Læs Mindre\" : readMore || \"Læs Mere\"}</div>\n        </div>\n      </div>\n      <div className=\"cardinfo\">\n        <h3 className={\"desktop-only\"}>{header}</h3>\n        <div className=\"rich-text\">{formattedIntroText}</div>\n\n        {introImage || innerVideo || youtubeID ? (\n          <div className=\"imagecontainer\">\n            {youtubeID ? (\n              <YoutubeEmbed\n                embedId={youtubeID}\n                classDecleration=\"practical-card-youtube\"\n                backgroundImage={!thumbnailImage ? undefined : thumbnailImage}\n                ariaVideoDescription={ariaDescription}\n              />\n            ) : innerVideo ? (\n              <video src={innerVideo} controls={true} playsInline poster={thumbnailImage} preload={\"auto\"} loading=\"eager\" fetchPriority=\"high\" />\n            ) : introImage ? (\n              <img src={introImage} />\n            ) : null}\n            <div className=\"imgtext\">\n              {explainerText ? <p>{explainerText}</p> : null}\n              {!!introImageUrl || !!introImageUrlLabel ? (\n                <a href={introImageUrl}>\n                  <Svg iconName=\"arrowright-slim\" />\n                  {introImageUrlLabel}\n                </a>\n              ) : null}\n            </div>\n          </div>\n        ) : null}\n\n        {htmlAdditionalImageSections}\n\n        {formattedOutroText ? <div className=\"rich-text\">{formattedOutroText}</div> : null}\n        <div className=\"readless\" onClick={ToggleCard}>\n          {readLess || \"Læs Mindre\"}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default PracticalCardItem\n","import React, { useState } from \"react\"\nimport PracticalCardItem from \"./practical-card-item\"\nimport ReactHtmlParser from \"react-html-parser\"\nimport * as SelectionFactoryHelper from \"../helpers/SelectionFactoryHelper\"\nimport useWindowWidth from \"../../hooks/useWindowWidth\"\n\nfunction PracticalCardContainer({ header, lineTwoHeader, subHeader, practicalCardBlockItems, topPadding, bottomPadding }) {\n  //state\n  const [areCardsClosed, setAreCardsClosed] = useState(true) //trigger for\n  const [activeCard, setActiveCard] = useState(null) //index value\n  const [maximumCardTitleHeightValue, setMaximumCardTitleHeightValue] = useState(0)\n  const windowWidth = useWindowWidth()\n  const tPadding = SelectionFactoryHelper.getFromSelectionFactory(bottomPadding, false) || undefined\n  const bPadding = SelectionFactoryHelper.getFromSelectionFactory(topPadding, false) || undefined\n\n  const htmlCardElements = practicalCardBlockItems.map((card, index) => {\n    return (\n      <PracticalCardItem\n        key={card.cardTitle}\n        elementId={card.cardTitle}\n        setAreCardsClosed={setAreCardsClosed}\n        areCardsClosed={areCardsClosed}\n        setActiveCard={setActiveCard}\n        activeCard={activeCard}\n        activateSplash={card.activateSplash}\n        portraitPhoto={card.cardPortraitPhoto}\n        splashLabel={card.cardSplashLabel}\n        title={card.cardTitle}\n        readMore={card.cardReadMore}\n        readLess={card.cardReadLess}\n        header={card.innerCardHeader}\n        introText={card.innerIntroCardText}\n        introImage={card.innerIntroImage}\n        innerVideo={card.innerVideo}\n        youtubeID={card.youtubeID}\n        thumbnailImage={card.thumbnailImage}\n        ariaDescription={card.ariaDescription}\n        explainerText={card.innerIntroImageExplainerText}\n        introImageUrl={card.innerIntroImageUrl} //An anchor link pointing elsewhere on the site.\n        introImageUrlLabel={card.innerIntroImageUrlLabel}\n        additionalImageSections={card.additionalImageSections}\n        outroText={card.innerOutroCardText}\n        windowWidth={windowWidth}\n        maximumCardTitleHeightValue={maximumCardTitleHeightValue}\n        setMaximumCardTitleHeightValue={setMaximumCardTitleHeightValue}\n      />\n    )\n  })\n\n  const mobileHeaderhtml = ReactHtmlParser(`<h2>${!lineTwoHeader ? header : header + \"<br/>\" + lineTwoHeader}</h2>`)\n  const desktopHeaderhtml = ReactHtmlParser(`<h2>${!lineTwoHeader ? header : header + \" \" + lineTwoHeader}</h2>`)\n\n  return (\n    <div className={`practical-card-block ${tPadding} ${bPadding}`}>\n      <div className=\"w--normal\">\n        {windowWidth > 750 ? desktopHeaderhtml : mobileHeaderhtml}\n        <h3>{subHeader}</h3>\n        <div className={`cards ${areCardsClosed ? \"no-actives\" : \"\"} ${practicalCardBlockItems.length === 2 ? \"two-cards\" : \"\"}`}>\n          {htmlCardElements}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default PracticalCardContainer\n","import React from \"react\"\n\nconst SvgPlay = (props) => (\n  <svg viewBox=\"0 0 18 18\" {...props}>\n    <path d=\"M0 0l18 9-18 9z\" fillRule=\"evenodd\" />\n  </svg>\n)\n\nexport default SvgPlay\n","import React, { useState, useEffect } from \"react\"\nimport PropTypes from \"prop-types\"\n// import YoutubePlayer from 'react-youtube-player';\nimport YouTube from \"react-youtube\"\nimport SvgPlay from \"../_svgs/small/Play\"\nimport \"./YouTubeEmbed.scss\"\n\nexport default function YoutubeEmbed({ embedId, classDecleration, backgroundImage, ariaVideoDescription }) {\n  const [playbackState, setPlaybackState] = useState(\"paused\")\n  const [showVideoHtml, setShowVideoHtml] = useState(false)\n\n  const [hasVideoLoaded, setHasVideoLoaded] = useState(false)\n  const video = document.getElementById(embedId) || undefined\n\n  useEffect(() => {\n    if (!!video && !hasVideoLoaded) {\n      const handleLoad = () => {\n        setHasVideoLoaded(false)\n      }\n\n      video.addEventListener(\"load\", handleLoad)\n\n      return () => {\n        video.removeEventListener(\"load\", handleLoad)\n      }\n    }\n  })\n\n  const options = {\n    playerVars: {\n      showinfo: false,\n      modestbranding: true,\n      allowFullScreen: 1,\n      title: \"Embedded Youtube\",\n      autoPlay: 1,\n      controls: 1,\n      loop: 0,\n      cc_load_policy: \"0\",\n      iv_load_policy: \"3\",\n      autohide: 0,\n    },\n  }\n\n  function onPlayerReady(event) {\n    var embedCode = event.target.getVideoEmbedCode()\n    event.target.playVideo()\n    if (document.getElementById(\"embed-code\")) {\n      document.getElementById(\"embed-code\").innerHTML = embedCode\n      document.getElementById(\"embed-code\").focus()\n    }\n  }\n\n  const playHandler = () => {\n    setShowVideoHtml(true)\n    setPlaybackState(\"playing\")\n  }\n\n  let overlayStyle = {\n    backgroundImage: `url('http://img.youtube.com/vi/${embedId}/0.jpg')`,\n  }\n\n  if (backgroundImage) {\n    overlayStyle.backgroundImage = `url('${backgroundImage}')`\n  }\n\n  return (\n    <div className={classDecleration}>\n      {/* {playbackState !== 'playing' && !!backgroundImage ?\n                <button className=\"youtube-overlay\" onClick={playHandler} style={overlayStyle}>\n                    <div className=\"svg-container\">\n                        <div className=\"youtube-play-svg\">\n                            <SvgPlay />\n                        </div>\n                    </div>\n                </button> : undefined\n            } */}\n      {showVideoHtml ? (\n        <YouTube videoId={embedId} id={embedId} className={\"youtube-video\"} title={\"Embedded Youtube\"} opts={options} onReady={onPlayerReady} />\n      ) : (\n        <button aria-label={ariaVideoDescription || \"Start Video\"} className=\"youtube-overlay\" onClick={playHandler} style={overlayStyle}>\n          <div className=\"svg-container\">\n            <div className=\"youtube-play-svg\">\n              <SvgPlay />\n            </div>\n          </div>\n        </button>\n      )}\n    </div>\n  )\n}\n\nYoutubeEmbed.propTypes = {\n  embedId: PropTypes.string.isRequired,\n  classDecleration: PropTypes.string,\n  backgroundImage: PropTypes.string,\n}\n"],"names":["generateRandomString","characters","randomString","i","Math","floor","random","_ref","portraitPhoto","activateSplash","splashLabel","title","readMore","readLess","header","introText","introImage","explainerText","introImageUrl","introImageUrlLabel","outroText","additionalImageSections","activeCard","setActiveCard","setAreCardsClosed","elementId","maximumCardTitleHeightValue","setMaximumCardTitleHeightValue","windowWidth","innerVideo","youtubeID","thumbnailImage","ariaDescription","scrollRef","useRef","titleHeightRef","handleResize","current","element","height","offsetHeight","style","concat","useEffect","window","addEventListener","removeEventListener","formattedIntroText","ReactHtmlParser","formattedOutroText","ToggleCard","scrollIntoView","headerOffset","document","getElementsByClassName","clientHeight","offsetPosition","getBoundingClientRect","top","pageYOffset","scrollTo","behavior","htmlAdditionalImageSections","map","_jsxs","className","children","_jsx","YoutubeEmbed","embedId","classDecleration","backgroundImage","undefined","ariaVideoDescription","src","controls","playsInline","poster","preload","loading","fetchPriority","additionalIntroImage","additionalIntroImageExplainerText","additionalIntroImageUrl","href","Svg","iconName","additionalIntroImageUrlLabel","id","ref","onClick","lineTwoHeader","subHeader","practicalCardBlockItems","topPadding","bottomPadding","_useState","useState","_useState2","_slicedToArray","areCardsClosed","_useState3","_useState4","_useState5","_useState6","useWindowWidth","tPadding","SelectionFactoryHelper","bPadding","htmlCardElements","card","index","PracticalCardItem","cardTitle","cardPortraitPhoto","cardSplashLabel","cardReadMore","cardReadLess","innerCardHeader","innerIntroCardText","innerIntroImage","innerIntroImageExplainerText","innerIntroImageUrl","innerIntroImageUrlLabel","innerOutroCardText","mobileHeaderhtml","desktopHeaderhtml","length","props","_objectSpread","viewBox","d","fillRule","setPlaybackState","showVideoHtml","setShowVideoHtml","hasVideoLoaded","setHasVideoLoaded","video","getElementById","handleLoad","overlayStyle","YouTube","videoId","opts","playerVars","showinfo","modestbranding","allowFullScreen","autoPlay","loop","cc_load_policy","iv_load_policy","autohide","onReady","event","embedCode","target","getVideoEmbedCode","playVideo","innerHTML","focus","SvgPlay"],"sourceRoot":""}