{"version":3,"file":"static/js/8110.23d4c5a9.chunk.js","mappings":"wJAAO,IAAMA,EAAuB,WAIlC,IAHA,IAAMC,EAAa,iEACfC,EAAe,GAEVC,EAAI,EAAGA,EAAI,EAAGA,IAAK,CAE1BD,GAAgBD,EADIG,KAAKC,MAAsBJ,GAAhBG,KAAKE,UAEtC,CAEA,OAAOJ,CACT,C,sJCNqBK,EAA4B,WAO9C,OAAAC,EAAAA,EAAAA,IAND,SAAAD,EAAYE,IAAMC,EAAAA,EAAAA,GAAA,KAAAH,GAChB,IAAMI,EAAOC,KAIb,OAHAD,EAAKF,KAAOA,EACZE,EAAKE,UAAYJ,EAAKK,QAAQD,WAAaE,KAAKC,MAAMP,EAAKK,QAAQD,WACnEF,EAAKM,OACEN,CACT,GAAC,EAAAO,IAAA,OAAAC,MAED,WACE,IAAMR,EAAOC,KACbQ,EAAAA,uBAAgCT,EAAKF,MACrCW,EAAAA,QAAgBC,EAAAA,EAAAA,KAACC,EAAAA,SAAsBC,EAAAA,EAAAA,GAAA,GAAKZ,EAAKE,YAAeF,EAAKF,KACvE,IAAC,CAb8C,E,qJC4MjD,MA1MA,SAA0Be,GA0BtB,IAzBFC,EAAaD,EAAbC,cACAC,EAAcF,EAAdE,eACAC,EAAWH,EAAXG,YACAC,EAAKJ,EAALI,MACAC,EAAQL,EAARK,SACAC,EAAQN,EAARM,SACAC,EAAMP,EAANO,OACAC,EAASR,EAATQ,UACAC,EAAUT,EAAVS,WACAC,EAAaV,EAAbU,cACAC,EAAaX,EAAbW,cACAC,EAAkBZ,EAAlBY,mBACAC,EAASb,EAATa,UACAC,EAAuBd,EAAvBc,wBACAC,EAAUf,EAAVe,WACAC,EAAahB,EAAbgB,cACAC,EAAiBjB,EAAjBiB,kBACAC,EAASlB,EAATkB,UACAC,EAA2BnB,EAA3BmB,4BACAC,EAA8BpB,EAA9BoB,+BACAC,EAAWrB,EAAXqB,YACAC,EAAUtB,EAAVsB,WACAC,EAASvB,EAATuB,UACAC,EAAcxB,EAAdwB,eACAC,EAAezB,EAAfyB,gBAEIC,GAAYC,EAAAA,EAAAA,UACZC,GAAiBD,EAAAA,EAAAA,UAEfE,EAAe,WACnB,GAAID,EAAeE,QAAS,CAC1B,IAAMC,EAAUH,EAAeE,QACzBE,EAASD,EAAQE,aAEvB,GAAIZ,EAAc,IAEhB,YADAO,EAAeE,QAAQI,MAAMF,OAAS,IAIpCb,GAA+Ba,GACjCZ,EAA+BY,GAI7BA,EAASb,IACXY,EAAQG,MAAMF,OAAM,GAAAG,OAAMhB,EAA8B,IAAM,IAAMA,EAA2B,MAEnG,CAEF,GAEAiB,EAAAA,EAAAA,YAAU,WACR,GAAIR,EAAeE,QAAS,CAC1B,IAAMC,EAAUH,EAAeE,QACzBE,EAASD,EAAQE,aAEvB,GAAIZ,EAAc,IAEhB,YADAO,EAAeE,QAAQI,MAAMF,OAAS,IAIpCb,EAA8Ba,GAChCZ,EAA+BY,GAG7BA,EAASb,IACXY,EAAQG,MAAMF,OAAM,GAAAG,OAAMhB,EAA8B,IAAM,IAAMA,EAA2B,MAEnG,CACF,KAEAiB,EAAAA,EAAAA,YAAU,WAER,OADAC,OAAOC,iBAAiB,SAAUT,GAC3B,WACLQ,OAAOE,oBAAoB,SAAUV,EACvC,CACF,GAAG,CAACR,IAGJ,IAAImB,GAAqBC,EAAAA,EAAAA,IAAgBjC,GACrCkC,GAAqBD,EAAAA,EAAAA,IAAgB5B,GASnC8B,EAAa,WACb5B,IAAeG,GACjBF,EAAc,MACdC,GAAkB,GAClB2B,MAEA5B,EAAcE,GACdD,GAAkB,GAEtB,EAEM2B,EAAiB,WACrB,IAAIb,EAAUL,EAAUI,QAGlBe,EADaC,SAASC,uBAAuB,eAAe,GAClCC,aAAe,GAEzCC,EADkBlB,EAAQmB,wBAAwBC,IACfd,OAAOe,YAAcP,EAE9DR,OAAOgB,SAAS,CAAEF,IAAKF,EAAgBK,SAAU,UACnD,EAEMC,EAA8BzC,EAChCA,EAAwB0C,KAAI,SAACzB,GAC3B,OACE0B,EAAAA,EAAAA,MAAA,OAAKC,UAAU,iBAAgBC,SAAA,CAC5B5B,EAAQR,WACP1B,EAAAA,EAAAA,KAAC+D,EAAAA,EAAY,CACXC,QAAS9B,EAAQR,UACjBuC,iBAAiB,yBACjBC,gBAAkBhC,EAAQP,eAA6BO,EAAQP,oBAApBwC,EAC3CC,qBAAsBlC,EAAQN,kBAE9BM,EAAQT,YACVzB,EAAAA,EAAAA,KAAA,SACEqE,IAAKnC,EAAQT,WACb6C,UAAU,EACVC,aAAW,EACXC,OAAQ7C,EACR8C,QAAS,OACTC,QAAQ,QACRC,cAAc,SAEdzC,EAAQ0C,sBACV5E,EAAAA,EAAAA,KAAA,OAAKqE,IAAKnC,EAAQ0C,uBAChB,MAEJhB,EAAAA,EAAAA,MAAA,OAAKC,UAAU,UAASC,SAAA,CACrB5B,EAAQ2C,mCAAoC7E,EAAAA,EAAAA,KAAA,KAAA8D,SAAI5B,EAAQ2C,oCAAyC,KAC/F3C,EAAQ4C,yBAA6B5C,EAAQ4C,yBAC9ClB,EAAAA,EAAAA,MAAA,KAAGmB,KAAM7C,EAAQ4C,wBAAwBhB,SAAA,EACvC9D,EAAAA,EAAAA,KAACgF,EAAAA,EAAG,CAACC,SAAS,oBACb/C,EAAQgD,gCAET,WA7B6BvG,EAAAA,EAAAA,KAiCzC,SACAwF,EAEJ,OACEP,EAAAA,EAAAA,MAAA,OAAKC,UAAU,gBAAgBsB,GAAI9D,EAAW+D,IAAKvD,EAAUiC,SAAA,EAC3DF,EAAAA,EAAAA,MAAA,OAAKC,UAAS,QAAAvB,OAAUpB,IAAeG,EAAY,SAAW,YAAcgE,QAASvC,EAAWgB,SAAA,CAC7FzD,GAAiBL,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,SAAQC,SAAExD,IAAqB,MAChEN,EAAAA,EAAAA,KAAA,OAAKqE,IAAKjE,KACVwD,EAAAA,EAAAA,MAAA,OAAKC,UAAU,cAAaC,SAAA,EAC1B9D,EAAAA,EAAAA,KAAA,MAAIoF,IAAKrD,EAAe+B,SAAEvD,KAC1BP,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,WAAUC,SAAE5C,IAAeG,EAAYZ,GAAY,gBAAeD,GAAY,uBAGjGoD,EAAAA,EAAAA,MAAA,OAAKC,UAAU,WAAUC,SAAA,EACvB9D,EAAAA,EAAAA,KAAA,MAAI6D,UAAW,eAAeC,SAAEpD,KAChCV,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,YAAWC,SAAEnB,IAE3B/B,GAAca,GAAcC,GAC3BkC,EAAAA,EAAAA,MAAA,OAAKC,UAAU,iBAAgBC,SAAA,CAC5BpC,GACC1B,EAAAA,EAAAA,KAAC+D,EAAAA,EAAY,CACXC,QAAStC,EACTuC,iBAAiB,yBACjBC,gBAAkBvC,QAAiBwC,EACnCC,qBAAsBxC,IAEtBH,GACFzB,EAAAA,EAAAA,KAAA,SAAOqE,IAAK5C,EAAY6C,UAAU,EAAMC,aAAW,EAACC,OAAQ7C,EAAgB8C,QAAS,OAAQC,QAAQ,QAAQC,cAAc,SACzH/D,GACFZ,EAAAA,EAAAA,KAAA,OAAKqE,IAAKzD,IACR,MACJgD,EAAAA,EAAAA,MAAA,OAAKC,UAAU,UAASC,SAAA,CACrBjD,GAAgBb,EAAAA,EAAAA,KAAA,KAAA8D,SAAIjD,IAAqB,KACvCC,GAAmBC,GACpB6C,EAAAA,EAAAA,MAAA,KAAGmB,KAAMjE,EAAcgD,SAAA,EACrB9D,EAAAA,EAAAA,KAACgF,EAAAA,EAAG,CAACC,SAAS,oBACblE,KAED,WAGN,KAEH2C,EAEAb,GAAqB7C,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,YAAWC,SAAEjB,IAA4B,MAC9E7C,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,WAAWwB,QAASvC,EAAWgB,SAC3CrD,GAAY,uBAKvB,E,sBC7IA,MA3DA,SAA+BN,GAA4F,IAAzFO,EAAMP,EAANO,OAAQ4E,EAAanF,EAAbmF,cAAeC,EAASpF,EAAToF,UAAWC,EAAuBrF,EAAvBqF,wBAAyBC,EAAUtF,EAAVsF,WAAYC,EAAavF,EAAbuF,cAEvGC,GAA4CC,EAAAA,EAAAA,WAAS,GAAKC,GAAAC,EAAAA,EAAAA,GAAAH,EAAA,GAAnDI,EAAcF,EAAA,GAAEzE,EAAiByE,EAAA,GACxCG,GAAoCJ,EAAAA,EAAAA,UAAS,MAAKK,GAAAH,EAAAA,EAAAA,GAAAE,EAAA,GAA3C9E,EAAU+E,EAAA,GAAE9E,EAAa8E,EAAA,GAChCC,GAAsEN,EAAAA,EAAAA,UAAS,GAAEO,GAAAL,EAAAA,EAAAA,GAAAI,EAAA,GAA1E5E,EAA2B6E,EAAA,GAAE5E,EAA8B4E,EAAA,GAC5D3E,GAAc4E,EAAAA,EAAAA,KACdC,EAAWC,EAAAA,EAA+CZ,GAAe,SAAUvB,EACnFoC,EAAWD,EAAAA,EAA+Cb,GAAY,SAAUtB,EAEhFqC,EAAmBhB,EAAwB7B,KAAI,SAAC8C,EAAMC,GAC1D,OACE1G,EAAAA,EAAAA,KAAC2G,EAAiB,CAEhBtF,UAAWoF,EAAKG,UAChBxF,kBAAmBA,EACnB2E,eAAgBA,EAChB5E,cAAeA,EACfD,WAAYA,EACZb,eAAgBoG,EAAKpG,eACrBD,cAAeqG,EAAKI,kBACpBvG,YAAamG,EAAKK,gBAClBvG,MAAOkG,EAAKG,UACZpG,SAAUiG,EAAKM,aACftG,SAAUgG,EAAKO,aACftG,OAAQ+F,EAAKQ,gBACbtG,UAAW8F,EAAKS,mBAChBtG,WAAY6F,EAAKU,gBACjB1F,WAAYgF,EAAKhF,WACjBC,UAAW+E,EAAK/E,UAChBC,eAAgB8E,EAAK9E,eACrBC,gBAAiB6E,EAAK7E,gBACtBf,cAAe4F,EAAKW,6BACpBtG,cAAe2F,EAAKY,mBACpBtG,mBAAoB0F,EAAKa,wBACzBrG,wBAAyBwF,EAAKxF,wBAC9BD,UAAWyF,EAAKc,mBAChB/F,YAAaA,EACbF,4BAA6BA,EAC7BC,+BAAgCA,GA1B3BkF,EAAKG,UA6BhB,IAEMY,GAAmB5E,EAAAA,EAAAA,IAAgB,OAADN,OAASgD,EAAyB5E,EAAS,QAAU4E,EAA5B5E,EAAyC,UACpG+G,GAAoB7E,EAAAA,EAAAA,IAAgB,OAADN,OAASgD,EAAyB5E,EAAS,IAAM4E,EAAxB5E,EAAqC,UAEvG,OACEV,EAAAA,EAAAA,KAAA,OAAK6D,UAAS,wBAAAvB,OAA0B+D,EAAQ,KAAA/D,OAAIiE,GAAWzC,UAC7DF,EAAAA,EAAAA,MAAA,OAAKC,UAAU,YAAWC,SAAA,CACvBtC,EAAc,IAAMiG,EAAoBD,GACzCxH,EAAAA,EAAAA,KAAA,MAAA8D,SAAKyB,KACLvF,EAAAA,EAAAA,KAAA,OAAK6D,UAAS,SAAAvB,OAAWyD,EAAiB,aAAe,GAAE,KAAAzD,OAAuC,IAAnCkD,EAAwBkC,OAAe,YAAc,IAAK5D,SACtH0C,QAKX,C,iHCvDA,EANgB,SAACmB,GAAK,OACpB3H,EAAAA,EAAAA,KAAA,OAAAE,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,CAAK0H,QAAQ,aAAgBD,GAAK,IAAA7D,UAChC9D,EAAAA,EAAAA,KAAA,QAAM6H,EAAE,kBAAkBC,SAAS,cAC/B,ECEO,SAAS/D,EAAY5D,GAAwE,IAArE6D,EAAO7D,EAAP6D,QAASC,EAAgB9D,EAAhB8D,iBAAkBC,EAAe/D,EAAf+D,gBAAiBE,EAAoBjE,EAApBiE,qBACjFuB,GAA0CC,EAAAA,EAAAA,UAAS,UAASC,GAAAC,EAAAA,EAAAA,GAAAH,EAAA,GAAtCoC,GAAFlC,EAAA,GAAkBA,EAAA,IACtCG,GAA0CJ,EAAAA,EAAAA,WAAS,GAAMK,GAAAH,EAAAA,EAAAA,GAAAE,EAAA,GAAlDgC,EAAa/B,EAAA,GAAEgC,EAAgBhC,EAAA,GAEtCC,GAA4CN,EAAAA,EAAAA,WAAS,GAAMO,GAAAL,EAAAA,EAAAA,GAAAI,EAAA,GAApDgC,EAAc/B,EAAA,GAAEgC,EAAiBhC,EAAA,GAClCiC,EAAQnF,SAASoF,eAAerE,SAAYG,GAElD5B,EAAAA,EAAAA,YAAU,WACR,GAAM6F,IAAUF,EAAgB,CAC9B,IAAMI,EAAa,WACjBH,GAAkB,EACpB,EAIA,OAFAC,EAAM3F,iBAAiB,OAAQ6F,GAExB,WACLF,EAAM1F,oBAAoB,OAAQ4F,EACpC,CACF,CACF,IA0BA,IAKIC,EAAe,CACjBrE,gBAAgB,kCAAD5B,OAAoC0B,EAAO,aAO5D,OAJIE,IACFqE,EAAarE,gBAAe,QAAA5B,OAAW4B,EAAe,QAItDlE,EAAAA,EAAAA,KAAA,OAAK6D,UAAWI,EAAiBH,SAU9BkE,GACChI,EAAAA,EAAAA,KAACwI,EAAAA,EAAO,CAACC,QAASzE,EAASmB,GAAInB,EAASH,UAAW,gBAAiBtD,MAAO,mBAAoBmI,KAjDrF,CACdC,WAAY,CACVC,UAAU,EACVC,gBAAgB,EAChBC,gBAAiB,EACjBvI,MAAO,mBACPwI,SAAU,EACVzE,SAAU,EACV0E,KAAM,EACNC,eAAgB,IAChBC,eAAgB,IAChBC,SAAU,IAsCsGC,QAlCpH,SAAuBC,GACrB,IAAIC,EAAYD,EAAME,OAAOC,oBAC7BH,EAAME,OAAOE,YACTxG,SAASoF,eAAe,gBAC1BpF,SAASoF,eAAe,cAAcqB,UAAYJ,EAClDrG,SAASoF,eAAe,cAAcsB,QAE1C,KA6BM3J,EAAAA,EAAAA,KAAA,UAAQ,aAAYoE,GAAwB,cAAeP,UAAU,kBAAkBwB,QA3BzE,WAClB4C,GAAiB,GACjBF,EAAiB,UACnB,EAwBmH1F,MAAOkG,EAAazE,UAC/H9D,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,gBAAeC,UAC5B9D,EAAAA,EAAAA,KAAA,OAAK6D,UAAU,mBAAkBC,UAC/B9D,EAAAA,EAAAA,KAAC4J,EAAO,WAOtB,C","sources":["helpers/keys.js","shared/practical-card-container/practical-card-container-module.jsx","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 from \"react\"\nimport ReactDOM from \"react-dom\"\nimport PracticalCardContainer from \"./practical-card-container\"\n\nexport default class PracticalCardContainerModule {\n  constructor(elem) {\n    const self = this\n    self.elem = elem\n    self.modelJson = elem.dataset.modelJson && JSON.parse(elem.dataset.modelJson)\n    self.init()\n    return self\n  }\n\n  init() {\n    const self = this\n    ReactDOM.unmountComponentAtNode(self.elem)\n    ReactDOM.render(<PracticalCardContainer {...self.modelJson} />, self.elem)\n  }\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","PracticalCardContainerModule","_createClass","elem","_classCallCheck","self","this","modelJson","dataset","JSON","parse","init","key","value","ReactDOM","_jsx","PracticalCardContainer","_objectSpread","_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","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","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":""}