\r\n
\r\n );\r\n })\r\n );\r\n};\r\n\r\nconst RoleItem = (props) => {\r\n const items =\r\n props.Persons &&\r\n props.Persons.map((person, index) => {\r\n return \r\n \r\n {item.Label}: \r\n \r\n\r\n {props.FooterHasCollapsibleRoleGroups ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n {Label}:\r\n \r\n \r\n {LastReview}\r\n \r\n
\r\n );\r\n};\r\n\r\nconst ArticleFooterPublishDate = ({ Label, PublishDate, contentDirection }) => {\r\n if (!PublishDate) return null;\r\n\r\n return (\r\n \r\n \r\n {Label}:\r\n \r\n \r\n {PublishDate}\r\n \r\n
\r\n );\r\n};\r\n\r\nconst ArticleFooterApprovedDate = ({ Label, ApprovedDate }) => {\r\n if (!ApprovedDate) return null;\r\n\r\n return (\r\n \r\n \r\n {Label}:\r\n \r\n \r\n {ApprovedDate}\r\n \r\n
\r\n );\r\n};\r\n\r\nconst ArticleFooterApprovedBy = ({ Label, ApprovedBy, isRegional }) => {\r\n if (!ApprovedBy) return null;\r\n return (\r\n \r\n \r\n {Label}:\r\n \r\n \r\n {isRegional ? (\r\n {ApprovedBy}\r\n ) : (\r\n ApprovedBy.map(\r\n (item, i) =>\r\n item.name && (\r\n \r\n {item.url ? {item.name} : item.name}\r\n \r\n )\r\n )\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nArticleFooter.propTypes = {\r\n ArticleFooter: shape({\r\n Region: node,\r\n PublishDate: node,\r\n LastReview: node,\r\n ApprovedDate: node,\r\n ApprovedBy: node,\r\n Rolegroups: arrayOf(\r\n shape({\r\n Label: node,\r\n Persons: arrayOf(\r\n shape({\r\n ...personPropTypes,\r\n })\r\n ),\r\n })\r\n ),\r\n }),\r\n Translations: shape({\r\n revisiondate: string,\r\n publishdate: string,\r\n approveddate: string,\r\n approvedby: string,\r\n }),\r\n isRegional: bool,\r\n RegionalName: string,\r\n HasFooterHeading: bool,\r\n NationalHeading: string,\r\n FooterHasCollapsibleRoleGroups: bool,\r\n contentDirection: string,\r\n};\r\n\r\nexport default ArticleFooter;\r\n","import { bool, node, shape, string } from 'prop-types';\r\nimport React from 'react';\r\nimport Badge from '../IDSBadge';\r\n\r\nconst RegionLabel = ({ useIdsBadge, ...props }) => {\r\n return useIdsBadge ? (\r\n \r\n {tags.map((item, key) => {\r\n return (\r\n
\r\n );\r\n};\r\n\r\nconst ArticleVideoWrapper = ({ TopMediaVideo, isAboveTitle }) => {\r\n return (\r\n \r\n {item}\r\n
\r\n );\r\n })}\r\n \r\n {showSubject && props.SubjectAboveHeading && (\r\n \r\n {props.Content.SubjectHeading}\r\n \r\n )}\r\n\r\n {props.Content?.VideoAboveTitle && props.Content?.TopMediaVideo && (\r\n \r\n {props.Heading}\r\n \r\n )}\r\n\r\n {props.HeadingTranslation && (\r\n \r\n {props.HeadingTranslation}\r\n \r\n )}\r\n\r\n {props.Content && props.Content.CurrentRegionName && (\r\n \r\n {props.Content.SubjectHeading}\r\n \r\n )}\r\n\r\n {!props.Content?.VideoAboveTitle && props.Content?.TopMediaVideo && (\r\n \r\n {props.Preamble}\r\n \r\n )}\r\n\r\n {props.children}\r\n
\r\n \r\n
\r\n );\r\n };\r\n};\r\n\r\nexport default Container;\r\n","import React, { useRef, useState, useEffect } from 'react';\r\n\r\nconst isInRange = (WrappedComponent, offset = 1) => {\r\n const handles = [];\r\n\r\n const IsInRangeContainer = (props) => {\r\n const viewport = useRef();\r\n const [isInRange, setIsInrange] = useState(false);\r\n\r\n const getBoundingClientRect = () => {\r\n return viewport.current.getBoundingClientRect();\r\n };\r\n\r\n const isComponentWithinRange = () => {\r\n if (!viewport.current) return;\r\n\r\n const rect = getBoundingClientRect();\r\n if (rect.top < offset && rect.bottom > 0) {\r\n !isInRange && setIsInrange(true);\r\n } else {\r\n isInRange && setIsInrange(false);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n handles.push(isComponentWithinRange);\r\n }, [isInRange]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n };\r\n\r\n let ticking = false;\r\n const throttleScroll = () => {\r\n ticking =\r\n ticking ||\r\n requestAnimationFrame(() => {\r\n ticking = false;\r\n handles.map((handle) => handle());\r\n });\r\n };\r\n\r\n if (typeof window !== 'undefined') {\r\n window.addEventListener('scroll', throttleScroll, false);\r\n window.addEventListener('resize', throttleScroll, false);\r\n }\r\n\r\n return IsInRangeContainer;\r\n};\r\n\r\nexport default isInRange;","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport useWindowLocationHref from '../../Hooks/useWindowLocation';\r\nconst LinkButton = ({ link, linkText, buttonClass, altLinkText }) => {\r\n const href = useWindowLocationHref();\r\n return link ? (\r\n {props.children}
;\r\n\r\n return (\r\n \r\n {props.heading && (\r\n handleClick()}\r\n type=\"button\"\r\n >\r\n {props.buttonChildren && props.buttonChildren}\r\n\r\n {buttonText}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CollapsibleText;\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\n\r\nconst Listitem = (props) => {\r\n return (\r\n {props.heading}
\r\n )}\r\n\r\n
\r\n\r\n {props.children}
\r\n - \r\n {props.items.map((item, key) => (\r\n
- \r\n \r\n \r\n )}\r\n
{item}
);\r\n return (\r\n\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return null;\r\n};\r\n\r\nContactAlert.propTypes = {\r\n TemporaryInformation: shape({\r\n Comment: arrayOf(string),\r\n FromDate: any,\r\n ToDate: any,\r\n }),\r\n};\r\n\r\nexport default ContactAlert;\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport ToggleContainer from '../../Containers/toggleContainer';\r\nimport ExpandableButton from '../../Buttons';\r\nimport SemanticHeader from '../../Chapter/semantic-header';\r\n\r\nconst ContactCardPanel = (props) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {comments}\r\n
\r\n \r\n
\r\n \r\n \r\n )}\r\n \r\n \r\n {props.children}\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n 
\r\n
\r\n )}\r\n {Card.Address && (\r\n {Card.Address}
\r\n )}\r\n\r\n {Card.Location && (\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default SubHeading;\r\n","import React from 'react';\r\nimport { shape, string, arrayOf } from 'prop-types';\r\n\r\nimport ContactCardPanel from '../contact-card-panel';\r\n\r\nconst CurrentInfo = (props) => {\r\n const matomoTrackingClass = 'aktuellt';\r\n return props.Items.map((item, index) => (\r\n {props.Heading}
\r\n\r\n \r\n {item.PublishFrom && (\r\n \r\n {props.Translations.published}\r\n {item.PublishFrom}\r\n \r\n )}\r\n\r\n {item.Text && (\r\n
\r\n ));\r\n};\r\n\r\nCurrentInfo.propTypes = {\r\n /** (BE) */\r\n Translations: shape({\r\n showmoretext: string,\r\n showlesstext: string,\r\n }),\r\n /** (BE) */\r\n Items: arrayOf(\r\n shape({\r\n PublishFrom: string,\r\n Text: string,\r\n Link: shape({\r\n Text: string,\r\n Url: string,\r\n })\r\n })\r\n ),\r\n};\r\n\r\nexport default CurrentInfo;\r\n","import React, { useRef, Fragment } from 'react';\r\nimport classNames from 'classnames';\r\nimport Modal from '../../Modal';\r\nimport { OpenModalButton, ModalPanel, CloseModalButton } from '../../Modal';\r\nimport ToggleMore from '../toggle-more';\r\nimport List from '../components/list';\r\n\r\nconst EServices = (props) => {\r\n const expandableList = useRef();\r\n const matomoTrackingClass = 'e-tjänster';\r\n\r\n const { EServices, Translations } = props;\r\n if (!EServices) return null;\r\n\r\n const setFocus = (id) => {\r\n const activeBtn = document.querySelector(`[data-buttonid='open${id}']`);\r\n if (activeBtn) {\r\n const content = activeBtn?.nextSibling?.getElementsByClassName(\r\n 'e-services__modal-panel__content'\r\n );\r\n if (content) {\r\n content[0].focus();\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n {item.Link.Text}\r\n
\r\n )}\r\n \r\n \r\n \r\n {({ visible, toggleMore }) => (\r\n
\r\n \r\n \r\n );\r\n\r\n return [\r\n modal,\r\n ,\r\n ];\r\n }}\r\n />\r\n \r\n\r\n \r\n \r\n {\r\n const modal = child.Description && (\r\n \r\n {\r\n setTimeout(() => {\r\n setFocus(child.ExternalId);\r\n }, 0);\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n {Translations.close}\r\n \r\n \r\n \r\n \r\n \r\n {child.Heading}\r\n \r\n \r\n
\r\n {child.Text}
\r\n\r\n
\r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nFindUs.defaultProps = {\r\n wrapperClasses: 'row',\r\n mapGrid: 'columns large-6 large-push-6',\r\n addressGrid: 'columns large-6',\r\n};\r\n\r\nexport default FindUs;\r\n","import React from 'react';\r\nimport ContactCardPanel from '../contact-card-panel';\r\n\r\nimport Linklist from '../../Linklist';\r\n\r\nconst Offering = (props) => (\r\n \r\n
\r\n \r\n {Card.Location && Card.Location.latitude && Card.Location.longitude && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n {Card.Translations.biggermaptravelplanner}\r\n \r\n
\r\n\r\n {Card.StaticMapUrl && (\r\n \r\n
\r\n - \r\n {Card.Address && Card.Translations.visitoraddress && (\r\n
\r\n \r\n {({ open, toggle }) => (\r\n \r\n {!isSmall &&\r\n (Card.IndoorRouteDescription || Card.RoadDescription) && (\r\n \r\n
\r\n )}\r\n \r\n {(Card.IndoorRouteDescription || Card.RoadDescription) && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n {Card.Translations.roaddescription}\r\n
\r\n {Card.RoadDescription && (\r\n\r\n
\r\n )}\r\n {Card.IndoorRouteDescription && (\r\n {Card.Translations.outdoorroutedescription}
\r\n {Card.RoadDescription.map((description, index) => (\r\n{description}
\r\n ))}\r\n\r\n
\r\n )}\r\n {Card.Translations.indoorroutedescription}
\r\n {Card.IndoorRouteDescription.map(\r\n (description, index) => (\r\n{description}
\r\n )\r\n )}\r\n\r\n
\r\n);\r\n\r\nexport default Offering;\r\n","import { useState } from 'react';\r\n\r\nexport default function ToggleMore(props) {\r\n const [visible, setVisible] = useState(false);\r\n\r\n const toggleMore = (list) => {\r\n //Handle focus on toggle\r\n if (!visible) {\r\n // IE11 is not supporting spreaded arrays [...list] and Array.from(), instead of polyfill\r\n // create a NodeList\r\n const visElements = list.querySelectorAll('li');\r\n // create array from NodeList\r\n const visElementsArray = Array.prototype.slice.call(visElements);\r\n // filter array\r\n visElementsArray.filter(\r\n (el) => window.getComputedStyle(el).display !== 'none'\r\n );\r\n const lastItem = visElementsArray && visElementsArray.pop();\r\n const span = lastItem && lastItem.querySelector('span[tabindex]');\r\n span.focus();\r\n }\r\n\r\n setVisible(!visible);\r\n };\r\n\r\n const { children } = props;\r\n\r\n return children({\r\n visible: visible,\r\n toggleMore: toggleMore,\r\n });\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst OwnerAndFinancing = (props) => { \r\n return \r\n {props.GeneralText && (\r\n \r\n )}\r\n {props.GeneralFiles &&
\r\n - \r\n {props.Offers &&\r\n props.Offers?.map((offer, index) => (\r\n
- \r\n
}\r\n \r\n \r\n ))}\r\n
\r\n {props.OwnerAndFinancing.OwnerType &&
;\r\n}\r\n\r\nconst {string, shape, arrayOf } = PropTypes;\r\n\r\nOwnerAndFinancing.propTypes = {\r\n OwnerAndFinancing: shape({\r\n FinancingText: string,\r\n OwnerType: string,\r\n PriceLinks: arrayOf(shape({\r\n Text: string,\r\n Url: string\r\n }))\r\n }),\r\n Translations: shape({\r\n ownertype: string,\r\n })\r\n};\r\n\r\nexport default OwnerAndFinancing;","import React from 'react';\r\nimport AboutUsSection from './unit-section';\r\nimport OwnerAndFinancing from './ownerAndFinancing';\r\nimport ContactCardPanel from '../contact-card-panel';\r\nimport Linklist from '../../Linklist';\r\n\r\nconst Unit = (props) => {\r\n const matomoTrackingClass = 'om-oss';\r\n return (\r\n \r\n
}\r\n {props.OwnerAndFinancing.FinancingText && \r\n {props.Translations.ownertype}: {props.OwnerAndFinancing.OwnerType}\r\n
\r\n\r\n
}\r\n {props.OwnerAndFinancing.PriceLinks && (\r\n \r\n {props.OwnerAndFinancing.FinancingText}\r\n
\r\n\r\n
\r\n )}\r\n \r\n {props.OwnerAndFinancing.PriceLinks.map((link, index) =>\r\n {link.Text}\r\n )} \r\n
\r\n \r\n {props.Description && (\r\n \r\n }\r\n {(props.Offers || props.GeneralText || props.GeneralFiles) && (\r\n \r\n {props.GeneralText && (\r\n
\r\n );\r\n};\r\nexport default Unit;\r\n","import React from 'react';\r\nimport SubHeading from '../contact-subheading';\r\nimport classNames from 'classnames';\r\nimport Image from '../../Image';\r\n\r\nconst AboutUsSection = (props) => {\r\n const heading =\r\n props.Heading && props.SubSection ? (\r\n - \r\n {props.Offers?.map((offer, index) => (\r\n
- \r\n
}\r\n \r\n \r\n ))}\r\n
{props.Heading}
\r\n ) : props.Heading ? (\r\n\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default AboutUsSection;\r\n","import { useState } from 'react';\r\n\r\nconst ToggleContainer = (props) => {\r\n const [open, setOpen] = useState(props.open);\r\n const [animation, setAnimation] = useState(props.open);\r\n\r\n const toggleHandler = () => {\r\n setOpen(!open);\r\n\r\n animation\r\n ? setAnimation(!animation)\r\n : setTimeout(() => setAnimation(!animation), 100);\r\n };\r\n\r\n const { children } = props;\r\n\r\n return children({\r\n open: open,\r\n toggle: toggleHandler,\r\n animation: animation,\r\n });\r\n};\r\n\r\nexport default ToggleContainer;\r\n","import React, { useState } from 'react';\r\n\r\nexport default (WrappedComponent) => {\r\n return (props) => {\r\n const [itemId, setItemId] = useState(null);\r\n\r\n const currentActiveMenuItem = (id) => {\r\n setItemId(id);\r\n };\r\n\r\n return (\r\n \r\n {props.PhotoUrl && (\r\n
\r\n ) : (\r\n \r\n )\r\n )}\r\n {props.children}\r\n
\r\n \r\n
\r\n )}\r\n {props.Content &&\r\n props.Content.map((item, index) =>\r\n item.match(/^\\s*$/) !== null ? (\r\n \r\n ) : (\r\n \r\n )\r\n )}\r\n {props.children}\r\n
\r\n {item.Heading &&
\r\n );\r\n });\r\n\r\n return (\r\n {item.Heading}
}\r\n\r\n
\r\n );\r\n};\r\n\r\nFacets.propTypes = {\r\n /** React router history object **/\r\n history: PropTypes.object,\r\n /** (BE) */\r\n Facets: PropTypes.shape({\r\n Items: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n /** We also recieve a \"Checked=false\" property that is not used on Facets object. */\r\n Facets: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Id: PropTypes.string,\r\n Text: PropTypes.string,\r\n })\r\n ),\r\n Heading: PropTypes.string,\r\n })\r\n ),\r\n ErrorMessage: PropTypes.string,\r\n }),\r\n queryString: PropTypes.object,\r\n pathname: PropTypes.string /** is this used? */,\r\n /** (BE) */\r\n FacetsRadioButton: PropTypes.bool,\r\n};\r\n\r\nexport default Facets;\r\n","import React from 'react';\r\n\r\nconst formatDate = (date, year, month, day) => {\r\n if (!date) return null;\r\n\r\n let options = {\r\n year: year,\r\n month: month,\r\n day: day,\r\n };\r\n let fmDate = new Date(date.toString()).toLocaleDateString('sv-SE', options);\r\n\r\n return fmDate.toUpperCase();\r\n};\r\n\r\nconst FormatDateTime = ({ date, year, month, day }) => {\r\n return (\r\n \r\n );\r\n};\r\nFormatDateTime.defaultProps = {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric',\r\n};\r\n\r\nexport default FormatDateTime;\r\n","import React from 'react';\r\nimport { bool, shape, string, node } from 'prop-types';\r\n\r\n/**\r\n * Error message component\r\n * \r\n```\r\n{items}
\r\n \r\n {props.errorMessages && props.errorMessages['prefix'] && (\r\n {props.errorMessages['prefix']} \r\n )}\r\n {props.label && (\r\n {props.label}.\r\n )}\r\n {props.errorMessages &&\r\n props.errorMessages[props.errorType] &&\r\n props.errorMessages[props.errorType]}\r\n
\r\n );\r\n};\r\n\r\nexport const propTypes = {\r\n /** If `true` display error message */\r\n isError: bool,\r\n /** Label is displayed before the error message */\r\n label: node,\r\n /** errorType must be a string with the name of a key that exists in `errorMessages` */\r\n errorType: string,\r\n /** errorMessages must contain a key with the the errorType */\r\n errorMessages: shape({\r\n prefix: node,\r\n }),\r\n};\r\n\r\nError.propTypes = propTypes;\r\n\r\nexport default Error;\r\n","import React, { useState } from 'react';\r\nimport classNames from 'classnames';\r\nimport { bool, oneOf, string, object, number, oneOfType } from 'prop-types';\r\nimport Error, { propTypes as errorPropTypes } from './error';\r\n\r\nimport Select from './select';\r\nimport Input from './input';\r\nimport Textarea from './textarea';\r\n\r\n/**\r\n * Will spread all non-specified props (...rest) to the `input` element.\r\n *\r\n * Includes the `\r\n {\r\n removeFocus();\r\n onBlur(e);\r\n }}\r\n defaultValue={value}\r\n {...getAriaDescribedBy(error, name)}\r\n name={name}\r\n id={name}\r\n />\r\n {error}\r\n
\r\n );\r\n};\r\n\r\nInput.propTypes = {\r\n /** Used for name and id property. */\r\n name: T.string.isRequired,\r\n /** Used for wrapping classnamae. */\r\n classes: T.string,\r\n /** Error message. */\r\n error: T.node,\r\n /** Used for defaultValue prop (react) */\r\n value: T.oneOfType([T.string, T.number]),\r\n};\r\n\r\nexport default Input;\r\n","import React from 'react';\r\nimport { string, node, bool } from 'prop-types';\r\n\r\nconst Label = (props) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport const propTypes = {\r\n label: node,\r\n children: node,\r\n required: bool,\r\n className: string,\r\n htmlFor: string,\r\n};\r\n\r\nLabel.propTypes = propTypes;\r\n\r\nexport default Label;\r\n","import React from 'react';\r\nimport { callIfFunction } from '../Helpers/helpers';\r\nimport { getAriaDescribedBy } from './helpers';\r\n\r\nconst Select = (props) => {\r\n const { classes, error, removeFocus, onBlur, children, name, ...rest } =\r\n props;\r\n\r\n return (\r\n {rowItem?.Term} \r\n \r\n {rowItem?.DescriptionItems.map((descItem, index) => (\r\n \r\n {descItem}\r\n \r\n ))}\r\n \r\n \r\n );\r\n};\r\n\r\nIDSDescriptionList.propTypes = {\r\n list: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Term: PropTypes.string,\r\n DescriptionItems: PropTypes.arrayOf(PropTypes.string),\r\n })\r\n ),\r\n useColumnView: PropTypes.bool,\r\n};\r\n\r\nexport default IDSDescriptionList;\r\n","//TODO: använd plattformens Image komponent!\r\nimport React from 'react';\r\nimport classNames from 'classnames';\r\nimport Image from '../Image';\r\nimport ImageZoom from '../ImageZoom';\r\nimport { withRouter } from 'react-router';\r\n\r\nconst ImageBlock = ({\r\n ImageUrl,\r\n ImageDescription,\r\n ImageText,\r\n UniqueBlockId,\r\n Modifiers = null,\r\n ShowCaption = true,\r\n ShowPhotoCred = false,\r\n UseZoom,\r\n Translations = {},\r\n Sizes = {\r\n sizes: '(min-width: 1025px) 900px, 100vw',\r\n },\r\n ...props\r\n}) => {\r\n const classes = classNames({\r\n 'c-imageblock': true,\r\n 'c-imageblock--is-sensitive': props.hideSensitiveImage,\r\n ...Modifiers,\r\n });\r\n\r\n const btnClasses = classNames({\r\n 'c-imageblock__sensitive__button': true,\r\n 'c-imageblock__sensitive__button--is-loading':\r\n props.showSensitiveImageIsLoading,\r\n });\r\n\r\n if (props.location.search.includes('ThrowTestError=true')) {\r\n throw new Error('This is a test');\r\n }\r\n\r\n const dataPrintSidebarTitle = props.CurrentPageProps?.Content?.Translations?.imageblock || '';\r\n\r\n return (\r\n \r\n {props.hideSensitiveImage && (\r\n \r\n \r\n {ImageText}\r\n {ShowPhotoCred && (\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default withRouter(ImageBlock);\r\n","import React, { useEffect, useState, createRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport Image from '../Image';\r\n\r\nconst TABBABLE_ELEMENTS = 'a[href], button';\r\nconst KEYCODE_ESC = 27;\r\nconst KEYCODE_TAB = 9;\r\n\r\nconst ImageZoom = (props) => {\r\n const zoomImage = createRef();\r\n const zoomTrigger = createRef();\r\n\r\n const [isZoomed, setIsZoomed] = useState(false);\r\n\r\n useEffect(() => {\r\n //Listen for esc key\r\n const keyListener = (event) => {\r\n const keyCode = event.which || event.keyCode; // Get the current keycode\r\n\r\n if (keyCode === KEYCODE_ESC) {\r\n removeZoomClassName();\r\n setIsZoomed(false);\r\n }\r\n };\r\n\r\n document.addEventListener('keydown', keyListener, false);\r\n });\r\n\r\n function keepFocus() {\r\n const context = zoomImage.current;\r\n const allTabbableElements = context.querySelectorAll(TABBABLE_ELEMENTS);\r\n const firstTabbableElement = allTabbableElements[0];\r\n const lastTabbableElement =\r\n allTabbableElements[allTabbableElements.length - 1];\r\n\r\n const keyListener = (event) => {\r\n var keyCode = event.which || event.keyCode; // Get the current keycode\r\n // Polyfill to prevent the default behavior of events\r\n event.preventDefault =\r\n event.preventDefault ||\r\n function () {\r\n event.returnValue = false;\r\n };\r\n\r\n // If it is TAB\r\n if (keyCode === KEYCODE_TAB) {\r\n // Move focus to first element that can be tabbed if Shift isn't used\r\n if (event.target === lastTabbableElement && !event.shiftKey) {\r\n event.preventDefault();\r\n firstTabbableElement.focus();\r\n\r\n // Move focus to last element that can be tabbed if Shift is used\r\n } else if (event.target === firstTabbableElement && event.shiftKey) {\r\n event.preventDefault();\r\n lastTabbableElement.focus();\r\n }\r\n }\r\n };\r\n\r\n context.addEventListener('keydown', keyListener, false);\r\n }\r\n\r\n function removeZoomClassName() {\r\n document.getElementsByTagName('html')[0].classList.remove('is-img-zoom');\r\n }\r\n\r\n function addZoomClassName() {\r\n document.getElementsByTagName('html')[0].classList.add('is-img-zoom');\r\n }\r\n\r\n function handleClick(e) {\r\n e.preventDefault();\r\n //Keep focus within zoom modal\r\n keepFocus();\r\n //Reset focus state\r\n if (isZoomed) {\r\n removeZoomClassName();\r\n zoomTrigger.current.focus();\r\n } else {\r\n addZoomClassName();\r\n zoomImage.current.focus();\r\n }\r\n\r\n setIsZoomed(!isZoomed);\r\n }\r\n\r\n const {\r\n ImageUrl,\r\n Description,\r\n ImageText,\r\n UniqueBlockId,\r\n UseZoom,\r\n ShowCaption,\r\n ShowPhotoCred,\r\n } = props;\r\n\r\n if (!UseZoom) return props.children;\r\n\r\n const zoomClass = classNames({\r\n 'c-imageblock__zoom__overlay': true,\r\n 'c-imageblock__zoom__overlay--zoomed': isZoomed,\r\n });\r\n\r\n return (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ImageZoom;\r\n","import classNames from 'classnames';\r\nimport T from 'prop-types';\r\nimport React from 'react';\r\nimport withLazyLoad from '../Containers/withLazyLoad';\r\nimport withSrcSets from '../Containers/withSrcSets';\r\n\r\nconst Image = (props) => {\r\n const classes = classNames({\r\n 'c-image': true,\r\n 'c-image--is-lazyloaded': props.isLazyLoaded || !props.isLazyLoad,\r\n 'c-image--is-background-image': props.isBackgroundImage,\r\n [props.className]: true && props.className,\r\n });\r\n\r\n const src = props.isLazyLoad ? props.LazyLoadImageUrl : props.ImageUrl;\r\n\r\n let alt = props.Description ?? props.ImageDescription;\r\n if (props.Alt !== undefined) alt = props.Alt;\r\n //If IMG is decorative alt text should be empty.\r\n if (props.isBackgroundImage || props.ariaHidden) alt = '';\r\n\r\n const style =\r\n props.isBackgroundImage && props.currentSrc\r\n ? {\r\n style: {\r\n backgroundImage: `url(\"${props.currentSrc}\")`,\r\n },\r\n }\r\n : null;\r\n\r\n const sizes = props.SrcSets && props.SrcSets.srcSet ? props.Sizes : null;\r\n\r\n const attributes = props.isBackgroundImage ? { role: 'presentation' } : {};\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Select;\r\n","import React, { useRef, useState, useEffect } from 'react';\r\nimport classNames from 'classnames';\r\nimport { getAriaDescribedBy } from './helpers';\r\n\r\nconst Textarea = (props) => {\r\n const [charsLeft, setCharsLeft] = useState(\r\n props.maxLength && props.value\r\n ? props.maxLength - props.value.length\r\n : props.maxLength\r\n );\r\n\r\n const textarea = useRef();\r\n\r\n function getValue() {\r\n return textarea.current.value;\r\n }\r\n\r\n function getCharsLeft() {\r\n return props.maxLength ? props.maxLength - getLength() : null;\r\n }\r\n\r\n function getLength() {\r\n return getValue().length;\r\n }\r\n\r\n useEffect(() => {\r\n setCharsLeft(getCharsLeft());\r\n }, []);\r\n\r\n function handleKeyUp() {\r\n setCharsLeft(getCharsLeft());\r\n }\r\n\r\n const {\r\n value,\r\n className,\r\n classes,\r\n removeFocus,\r\n disabled,\r\n children,\r\n onBlur,\r\n maxLength,\r\n error,\r\n maxLengthTranslation,\r\n name,\r\n ...rest\r\n } = props;\r\n\r\n const charsClasses = classNames({\r\n [`${className}__chars`]: true,\r\n [`${className}__chars--disabled`]: disabled,\r\n });\r\n\r\n return (\r\n \r\n {\r\n callIfFunction(removeFocus);\r\n callIfFunction(onBlur, e);\r\n }}\r\n {...getAriaDescribedBy(error, name)}\r\n {...rest}\r\n >\r\n {children}\r\n \r\n
\r\n {error}\r\n \r\n {children}\r\n {maxLength && (\r\n \r\n {charsLeft} {maxLengthTranslation}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default Textarea;\r\n","import { useState } from 'react';\r\n\r\n/**\r\n * Custom hook to manage arrow key navigation in a list.\r\n * @param {number} maxIndex - The maximum index in the list.\r\n * @param {object} options - Additional options for navigation.\r\n * @returns {object} An object containing the highlighted index and navigation functions.\r\n */\r\nconst useArrowNavigation = (maxIndex, options = {}) => {\r\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\r\n\r\n const {\r\n isOpen = true,\r\n onItemSelect = () => {},\r\n onClose = () => {},\r\n getItemByIndex = () => {},\r\n selectionKeys = ['Enter'],\r\n } = options;\r\n\r\n const incrementIndex = () => {\r\n setHighlightedIndex((prevIndex) =>\r\n prevIndex < maxIndex ? prevIndex + 1 : 0\r\n );\r\n };\r\n\r\n const decrementIndex = () => {\r\n setHighlightedIndex((prevIndex) =>\r\n prevIndex > 0 ? prevIndex - 1 : maxIndex\r\n );\r\n };\r\n\r\n const resetIndex = () => {\r\n setHighlightedIndex(-1);\r\n };\r\n\r\n const handleKeyDown = (e) => {\r\n if (!isOpen) return;\r\n\r\n if (e.key === 'ArrowDown') {\r\n e.preventDefault();\r\n incrementIndex();\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault();\r\n decrementIndex();\r\n } else if (selectionKeys.includes(e.key)) {\r\n e.preventDefault();\r\n if (highlightedIndex >= 0) {\r\n const item = getItemByIndex(highlightedIndex);\r\n onItemSelect(item);\r\n }\r\n } else if (e.key === 'Escape') {\r\n onClose();\r\n resetIndex();\r\n }\r\n };\r\n\r\n return {\r\n highlightedIndex,\r\n setHighlightedIndex,\r\n resetIndex,\r\n handleKeyDown,\r\n };\r\n};\r\n\r\nexport default useArrowNavigation;\r\n","import { useEffect, useState } from 'react';\r\nconst useWindowLocationHref = () => {\r\n const [href, setHref] = useState(null);\r\n useEffect(() => {\r\n if (typeof window !== 'undefined') {\r\n setHref(window.location.href);\r\n }\r\n }, []);\r\n return href;\r\n};\r\nexport default useWindowLocationHref;\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst IDSDescriptionList = ({ list, useColumnView }) => {\r\n if (!list || list.length <= 0) {\r\n return null;\r\n }\r\n\r\n const useClasses = classNames({\r\n 'ids-description-list': true,\r\n ['ids-description-list--column']: useColumnView,\r\n });\r\n\r\n return (\r\n \r\n {\r\n removeFocus();\r\n onBlur(e);\r\n }}\r\n onKeyUp={() => {\r\n handleKeyUp();\r\n }}\r\n {...rest}\r\n />\r\n
\r\n {error}\r\n - \r\n {list.map((item, index) => {\r\n return
\r\n
\r\n )}\r\n\r\n {!props.hideSensitiveImage && (\r\n \r\n \r\n {Translations.sensetiveheading}\r\n \r\n \r\n {ImageDescription}\r\n \r\n \r\n {props.showSensitiveImageIsLoading &&\r\n props.SensitiveImageLoadingIcon}\r\n \r\n {\r\n props.CurrentPageProps.Content.Translations\r\n .showsensetiveimages\r\n }\r\n \r\n \r\n
\r\n \r\n {props.Photographer && (\r\n
\r\n )}\r\n \r\n {Translations.photographer + props.Photographer}\r\n
\r\n )}\r\n {props.Illustrator && (\r\n \r\n {Translations.illustrator + props.Illustrator}\r\n
\r\n )}\r\n \r\n handleClick(e)}\r\n aria-controls={UniqueBlockId}\r\n aria-expanded={isZoomed}\r\n href={ImageUrl}\r\n >\r\n {props.children}\r\n Förstora bilden\r\n \r\n\r\n handleClick(e)}\r\n >\r\n e.stopPropagation()}\r\n tabIndex=\"-1\"\r\n className=\"c-imageblock__zoom__image\"\r\n >\r\n {isZoomed && (\r\n
\r\n \r\n \r\n \r\n {ImageText}\r\n \r\n )}\r\n \r\n handleClick(e)}\r\n aria-controls={UniqueBlockId}\r\n aria-expanded={isZoomed}\r\n >\r\n Stäng\r\n \r\n
\r\n )}\r\n \r\n {(!props.isBackgroundImage || props.isViewed || !props.isLazyLoad) && (\r\n
\r\n );\r\n};\r\n\r\nImage.propTypes = {\r\n className: T.string,\r\n currentSrc: T.string,\r\n Alt: T.string,\r\n isViewed: T.bool,\r\n isBackgroundImage: T.bool,\r\n isLazyLoad: T.bool,\r\n ariaHidden: T.bool,\r\n LazyLoadImageUrl: T.string,\r\n ImageUrl: T.string,\r\n SrcSets: T.shape({ srcSet: T.any }),\r\n Sizes: T.object,\r\n};\r\n\r\nexport const LazyLoadImage = withSrcSets(withLazyLoad(Image));\r\n\r\nexport default Image;\r\n","import classNames from 'classnames';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport useArrowNavigation from '../Hooks/useArrowNavigation';\r\n\r\nconst CustomSelect = ({\r\n label,\r\n srLabel,\r\n options,\r\n selectedItem,\r\n onChange,\r\n id,\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const dropdownRef = useRef(null);\r\n\r\n const maxIndex = options.length - 1;\r\n\r\n const { highlightedIndex, setHighlightedIndex, resetIndex, handleKeyDown } =\r\n useArrowNavigation(maxIndex, {\r\n isOpen,\r\n selectionKeys: ['Enter', ' '],\r\n onItemSelect: (item) => {\r\n onChange(item);\r\n setIsOpen(false);\r\n resetIndex();\r\n },\r\n onClose: () => {\r\n setIsOpen(false);\r\n resetIndex();\r\n },\r\n getItemByIndex: (index) => options[index] || 0,\r\n });\r\n\r\n const toggleDropdown = () => setIsOpen(!isOpen);\r\n\r\n useEffect(() => {\r\n isOpen && dropdownRef.current?.focus();\r\n }, [isOpen]);\r\n\r\n const defaultOption = options.find(\r\n (option) => option.key === selectedItem.key\r\n );\r\n\r\n if (!options) return null;\r\n\r\n return (\r\n \r\n {label && (\r\n \r\n )}\r\n {\r\n e.preventDefault();\r\n toggleDropdown();\r\n }}\r\n onKeyDown={(e) => {\r\n if (isOpen) {\r\n handleKeyDown(e);\r\n } else if (\r\n e.key === 'ArrowDown' ||\r\n e.key === 'Enter' ||\r\n e.key === ' '\r\n ) {\r\n e.preventDefault();\r\n setIsOpen(true);\r\n setHighlightedIndex(0);\r\n }\r\n }}\r\n >\r\n {selectedItem.value || defaultOption.value}\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default CustomSelect;\r\n","import React from 'react';\r\n\r\nconst KeywordHints = ({ KeywordMessage }) => {\r\n if (!KeywordMessage) return null;\r\n return (\r\n \r\n {\r\n setIsOpen(false);\r\n }}\r\n >\r\n {options.map((option, index) => (\r\n [\r\n onChange(option),\r\n toggleDropdown(),\r\n resetIndex(),\r\n ]}\r\n >\r\n {option.value}\r\n \r\n ))}\r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default KeywordHints;\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\n\r\nconst Item = (item) => {\r\n const classes = classNames({\r\n 'c-localnav__list__item': true,\r\n 'c-localnav__list__item--has-children': !!item.Children,\r\n 'c-localnav__list__item--is-selected': item.IsCurrentPage,\r\n 'c-localnav__list__item--is-open': item.ActivePath,\r\n });\r\n\r\n const secondLevel =\r\n item.Children &&\r\n item.Children.map((child, index) => (\r\n \r\n \r\n
\r\n \r\n - {secondLevel}
\r\n \r\n {Translations.printsidebarclose}\r\n \r\n \r\n
\r\n \r\n {Translations.printsidebartitle}\r\n
\r\n\r\n handleRadioChange(1)}\r\n >\r\n
\r\n )}\r\n \r\n \r\n {selectedRadio !== 1 && (\r\n \r\n {Translations.printsidebarselectiontitle}\r\n
\r\n\r\n {Translations.printsidebarselectionparts && (\r\n handleRadioChange(0)}\r\n >\r\n
\r\n )}\r\n {Translations.printsidebarselectionwholepage && (\r\n \r\n
\r\n \r\n )}\r\n {Translations.printsidebarselectionwhatparts}
\r\n\r\n {printableItems &&\r\n printableItems.map((item, index) => {\r\n if (!item?.innerText) return;\r\n let content = (\r\n handlePrintSelection(item)}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n {selectedRadio === 1 ? (\r\n setPrintClicked(true)}\r\n >\r\n \r\n {Translations.printbuttonwholepage}\r\n \r\n ) : (\r\n setPrintClicked(true)}\r\n >\r\n \r\n {Translations.printbuttonparts}\r\n \r\n )}\r\n
\r\n \r\n {printClicked && (\r\n 12 sökträffar på feber
\r\n ```\r\n *\r\n */\r\nconst SearchHeading = ({\r\n hideSearchHeading,\r\n TotalHits,\r\n ResultText,\r\n SuggestionText,\r\n ContentAfter = '',\r\n query,\r\n Modifiers,\r\n activeFilterFacet,\r\n showFilterResultText,\r\n translations,\r\n isVardpersonal1177,\r\n siteAdress,\r\n}) => {\r\n if (hideSearchHeading) return null;\r\n if (!query && TotalHits === 0) return null;\r\n\r\n SuggestionText\r\n ? (SuggestionText.Query = decodeURIComponent(SuggestionText.Query))\r\n : null;\r\n\r\n const componentClass = classNames({\r\n 'c-searchlist__heading': true,\r\n ...Modifiers,\r\n });\r\n\r\n const resultQueryText = query ? {query} : null;\r\n\r\n const filterResultText =\r\n showFilterResultText && activeFilterFacet ? (\r\n <>\r\n {isVardpersonal1177 ? translations.withfilter : translations.within}{' '}\r\n {activeFilterFacet}{' '}\r\n \r\n ) : null;\r\n\r\n const resultSiteText = siteAdress ? (\r\n <>\r\n {translations.on} {translations.site} {siteAdress}\r\n \r\n ) : null;\r\n\r\n return (\r\n\r\n \r\n {TotalHits}\r\n {' '}\r\n {ResultText} {resultQueryText} {filterResultText} {resultSiteText}\r\n {SuggestionText && SuggestionText?.Query && (\r\n \r\n . {SuggestionText.Text}{' '}\r\n {SuggestionText.Query}?\r\n \r\n )}{' '}\r\n {ContentAfter}\r\n
\r\n );\r\n};\r\n\r\nSearchHeading.propTypes = {\r\n /** If `true` component will not render */\r\n hideSearchHeading: PropTypes.bool,\r\n TotalHits: PropTypes.number,\r\n ResultText: PropTypes.string,\r\n showFilterResultText: PropTypes.bool,\r\n translations: PropTypes.objectOf(PropTypes.string),\r\n activeFilterFacet: PropTypes.string,\r\n SuggestionText: PropTypes.shape({\r\n Text: PropTypes.string,\r\n Url: PropTypes.string,\r\n Query: PropTypes.string,\r\n }),\r\n ContentAfter: PropTypes.node,\r\n query: PropTypes.string,\r\n Modifiers: PropTypes.object,\r\n isVardpersonal1177: PropTypes.bool,\r\n};\r\n\r\nexport default SearchHeading;\r\n","/**\r\n * Repo: PWT.PlattformUI\r\n * Component:\r\n {\r\n props.onSubmit(e, {\r\n q: document.getElementById('section-search').value,\r\n t: qs.t,\r\n ...(props.useExternalSearch && { site: qs.site }),\r\n });\r\n }}\r\n >\r\n \r\n {props.SearchResult.ResultDisclaimer}\r\n \r\n )}\r\n\r\n {props.searchTabs && props.ExternalSearchContent && (\r\n ({\r\n key: tab.SearchApiIndex,\r\n label: tab.TabHeader,\r\n count: tab.SearchResult?.TotalHits || 0,\r\n isActive: tab.SearchApiIndex === props.searchApiIndex,\r\n screenReaderText: `${tab.SearchResult?.TotalHits} ${\r\n tab.SearchResult?.ResultText\r\n } ${getExternalSiteAdress(tab.SearchApiIndex)}`,\r\n }))}\r\n handleTabChange={props.handleTabChange}\r\n showCount\r\n showResponsiveDropdown\r\n srLabel={props?.Translations?.selectsearchsource}\r\n />\r\n )}\r\n\r\n {props.Facets &&\r\n props.CurrentPageProps.hasFilterBar &&\r\n !props.showFilterBarWithFacets && (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n \r\n {props.Placeholder ? (\r\n {props.Placeholder}\r\n ) : null}\r\n \r\n\r\n \r\n {props.Translations.searchbutton}\r\n \r\n
\r\n {props.SearchResult.KeywordMessage && (\r\n \r\n \r\n
\r\n\r\n {qs.q.length > 0 &&\r\n props.SearchResult.TotalHits === 0 &&\r\n props.SearchResult.EmptySearchResultText && (\r\n \r\n
\r\n \r\n
\r\n {props.children}
\r\n \r\n
\r\n );\r\n};\r\n\r\nShare.propTypes = {\r\n ShareChannels: PropTypes.array,\r\n Translations: PropTypes.object,\r\n PrintsideBarEnabled: PropTypes.bool,\r\n};\r\n\r\nexport default Share;\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\nimport SemanticHeader from '../Chapter/semantic-header';\r\n\r\nconst Shortcuts = (props) => {\r\n if (!props.LinkContent || props.LinkContent.length === 0) return null;\r\n\r\n return (\r\n {Translations && Translations.share}
\r\n- \r\n {ShareChannels.map((item, key) => {\r\n const shareChannelClass = classNames({\r\n 'c-share__icon': true,\r\n [`c-share__icon--${item.Channel}`]: true,\r\n });\r\n\r\n return (\r\n
- \r\n {item.Channel !== 'mailto' ? (\r\n
- \r\n {PrintsideBarEnabled ? (\r\n
\r\n {props.Heading && (\r\n \r\n {props.Heading}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default Shortcuts;\r\n","import classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { isMediumViewport } from '../Hooks/useMedia';\r\nimport useWindowLocationHref from '../Hooks/useWindowLocation';\r\nimport CustomSelect from '../Inputs/custom-select';\r\n\r\nconst TabMenu = ({\r\n tabs,\r\n handleTabChange,\r\n showCount,\r\n showResponsiveDropdown,\r\n srLabel,\r\n}) => {\r\n const handleClick = (key) => {\r\n handleTabChange(key);\r\n };\r\n\r\n const href = useWindowLocationHref();\r\n const isMedium = isMediumViewport();\r\n\r\n if (showResponsiveDropdown && isMedium) {\r\n return (\r\n - \r\n {props.LinkContent.map((item, index) => {\r\n return (\r\n
- \r\n \r\n \r\n {item.ImageUrl && (\r\n
{children}
;\r\n};\r\n\r\nconst ArticleList = (props) => {\r\n const getColumnClasses = (numOfItems, blockName) => {\r\n if (blockName === 'DoubleColumnBlock') {\r\n return 'column';\r\n }\r\n\r\n return classNames({\r\n columns: true,\r\n 'medium-8': numOfItems === 1,\r\n 'medium-4': numOfItems === 3 || numOfItems === 2,\r\n 'medium-6 large-3': numOfItems > 3,\r\n });\r\n };\r\n\r\n const columnClasses = getColumnClasses(\r\n props.numOfItems,\r\n props.blockName ? props.blockName : props.pageName\r\n );\r\n\r\n const teaserTheme = classNames({\r\n 'c-article-list__theme--default': !props.Theme,\r\n [`c-article-list__theme--${props.Theme}`]: props.Theme,\r\n });\r\n\r\n const headerClasses = classNames({\r\n 'c-article-list__heading': true,\r\n [teaserTheme]: props.Theme,\r\n });\r\n\r\n const infoType = `c-article-list__type--${props.InformationType}`;\r\n const teaserClasses = classNames({\r\n 'c-article-list': true,\r\n 'c-article-list--related': true,\r\n 'c-article-list--no-text': !props.Preamble,\r\n 'c-article-list--full-layout': props.numOfItems === 1,\r\n 'c-article-list--nth1': props.numOfItems === 1,\r\n 'c-article-list--nth2': props.numOfItems === 2,\r\n 'c-article-list--nth3': props.numOfItems === 3,\r\n 'c-article-list--gt1': props.numOfItems > 1,\r\n 'c-article-list--gt2': props.numOfItems > 2,\r\n 'c-article-list--gt3': props.numOfItems > 3,\r\n 'c-article-list--double-column': props.blockName === 'DoubleColumnBlock',\r\n [`c-article-list--${props.Theme}`]: props.Theme,\r\n [teaserTheme]: props.Theme,\r\n [infoType]: props.InformationType,\r\n });\r\n\r\n const setPreset = () => {\r\n switch (props.numOfItems) {\r\n case 1:\r\n case 2:\r\n return '1200px';\r\n default:\r\n return '407px';\r\n }\r\n };\r\n\r\n //If only one then split into two columnClasses\r\n const rowSplit = classNames({\r\n row: props.numOfItems === 1,\r\n 'u-flexwrap': props.numOfItems === 1,\r\n 'c-article-list--center': props.numOfItems <= 2,\r\n });\r\n\r\n const splitColumns = classNames({\r\n 'medium-6 columns': props.Media && props.numOfItems === 1,\r\n 'medium-12 columns': !props.Media && props.numOfItems === 1,\r\n });\r\n\r\n const teaserContainsImage =\r\n props.Media &&\r\n props.Media[0] &&\r\n props.Media[0].ImageUrl &&\r\n props.Media[0].ImageUrl.length > 0;\r\n\r\n return (\r\n \r\n {props.Title && (\r\n
\r\n );\r\n};\r\n\r\nArticleList.propTypes = {\r\n Preamble: node,\r\n numOfItems: number,\r\n Vignette: node,\r\n Theme: string,\r\n Title: string,\r\n Url: string,\r\n Media: any,\r\n};\r\n\r\nexport default ArticleList;\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport { useSweLang } from '../Helpers/helpers';\r\n\r\nconst ListViewToggler = (props) => {\r\n return (\r\n \r\n \r\n {props.Media && (\r\n \r\n \r\n
\r\n )}\r\n \r\n {props.ShowVideoPlayIcon && teaserContainsImage && (\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n {props.Vignette && (\r\n \r\n {props.Vignette}\r\n \r\n )}\r\n {props.Date && \r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n {typeof props.Preamble === 'string' && (\r\n
\r\n \r\n \r\n \r\n {props.Title}\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {props.Title}\r\n \r\n
\r\n )}\r\n {typeof props.Preamble === 'string' && (\r\n \r\n
\r\n )}\r\n {props.Preamble}
\r\n\r\n \r\n {props.translations.showcontentas}\r\n \r\n props.onClick(true)}\r\n >\r\n \r\n {props.translations.showasbricks}\r\n \r\n \r\n props.onClick(false)}\r\n >\r\n \r\n {props.translations.showaslist}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ListViewToggler;\r\n","import React, { useState } from 'react';\r\nimport classNames from 'classnames';\r\nimport ArticleList from '../ArticleList'; //TODO fixa mer generiskt\r\nimport * as Render from '../Base/Render';\r\nimport { useSweLang } from '../Helpers/helpers';\r\nimport { LazyLoadImage } from '../Image';\r\nimport Linklist from '../Linklist';\r\nimport Section from '../Section';\r\nimport ListViewToggler from './list-view-toggler';\r\nimport useWindowLocationHref from '../Hooks/useWindowLocation';\r\n\r\nconst TeaserItemLinkList = (props) => {\r\n const href = useWindowLocationHref();\r\n const contentClassNames = classNames({\r\n 'c-teaser__content': true,\r\n 'c-teaser__content--with-img': props.Media,\r\n });\r\n\r\n const teaserContainsImage =\r\n props.Media &&\r\n props.Media[0] &&\r\n props.Media[0].ImageUrl &&\r\n props.Media[0].ImageUrl.length > 0;\r\n\r\n return (\r\n \r\n {props.ShowVideoPlayIcon && teaserContainsImage && (\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {props.Title}\r\n \r\n \r\n {props.TitleTranslation && (\r\n \r\n {props.TitleTranslation}\r\n \r\n )}\r\n
\r\n \r\n \r\n {props.Preamble &&
\r\n {props.Preamble}
}\r\n\r\n \r\n {props.Media && (\r\n
\r\n \r\n \r\n {props.ShowVideoPlayIcon && teaserContainsImage && (\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n {props.Title}\r\n \r\n \r\n \r\n {props.TitleTranslation && (\r\n \r\n {props.TitleTranslation}\r\n \r\n )}\r\n {props.Preamble && (\r\n
\r\n \r\n
\r\n )}\r\n {props.Preamble}
\r\n- \r\n {props.BlockTypeName === 'PageListBlock'\r\n ? Render.Property(Items, 'ListRoot')\r\n : Render.Property(Items, 'MainContent')}\r\n
\r\n {props.BlockTypeName === 'PageListBlock'\r\n ? Render.Property(Items, 'ListRoot')\r\n : Render.Property(Items, 'MainContent')}\r\n
\r\n );\r\n};\r\n\r\nconst Teaser = (props) => {\r\n const modifiers = {\r\n ...props.SectionModifiers,\r\n 'c-section--navigation': props.BlockTypeName === 'PageListBlock',\r\n };\r\n\r\n const [toggleBrickView, setToggleBrickView] = useState(!props.ShowListView);\r\n\r\n const showListViewToggler =\r\n props.BlockTypeName === 'PageListBlock' && props.UseListToggler;\r\n\r\n const sectionHeader = classNames({\r\n 'c-section__header': true,\r\n 'c-section__header--listview-shown': showListViewToggler,\r\n 'c-section__header--heading-shown': props.Heading,\r\n 'c-section__header--double-column':\r\n props.CurrentPageProps.BlockTypeName == 'DoubleColumnBlock',\r\n });\r\n\r\n return (\r\n \r\n
\r\n {props.Items && (\r\n \r\n \r\n {props.Heading ? (\r\n {\r\n setToggleBrickView(value);\r\n }}\r\n toggleBrickView={toggleBrickView}\r\n />\r\n )}\r\n \r\n
\r\n \r\n {props.Heading}\r\n
\r\n ) : (\r\n\r\n {props.Translations?.currentarticles}\r\n
\r\n )}\r\n {showListViewToggler && (\r\n\r\n \r\n {props.children}\r\n
\r\n ) : (\r\n props.children\r\n );\r\n};\r\n\r\nexport default Theme;\r\n","import React, { useState, useEffect } from 'react';\r\nimport classNames from 'classnames';\r\nimport { equalSectionIdsOnPageLoad } from '../Containers/withAnchorNav';\r\nimport { isMediumViewport } from '../Hooks/useMedia';\r\n\r\nconst ToggleChapter = (props) => {\r\n const [isOpen, setIsOpen] = useState(\r\n !isMediumViewport()\r\n ? true\r\n : equalSectionIdsOnPageLoad(props.AnchorSectionId)\r\n );\r\n\r\n useEffect(() => {\r\n if (!equalSectionIdsOnPageLoad(props.AnchorSectionId)) return;\r\n const element = document.getElementById(props.AnchorSectionId);\r\n if (!element) return;\r\n const elementTop = element.getBoundingClientRect().top + window.scrollY;\r\n window.scrollTo({ top: elementTop, behavior: 'smooth' });\r\n }, [props.AnchorSectionId]);\r\n\r\n return (\r\n {props.Heading}
\r\n\r\n \r\n
\r\n \r\n {heading && !hideTitle && isGallery && (\r\n \r\n {heading}\r\n \r\n )}\r\n {caption && !hideCaption && (\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Iframe;\r\n","import T from 'prop-types';\r\nimport React, { Fragment } from 'react';\r\nimport Iframe from '../Iframe';\r\n\r\nconst DREAMBROKER_URL = (videoId) => `https://dreambroker.com/${videoId}`;\r\n\r\nconst Video = ({\r\n Heading,\r\n VideoTitle,\r\n VideoId,\r\n VideoText,\r\n IsMediaFlowPro,\r\n IsDreamBroker,\r\n IsQbrick,\r\n isH3,\r\n IsStandingVideo,\r\n hideTitle,\r\n hideCaption,\r\n isGallery,\r\n Link,\r\n InternalLinkName,\r\n LinkText,\r\n CurrentPageProps,\r\n}) => {\r\n if (!VideoId) return null;\r\n\r\n let videoUrl = null;\r\n videoUrl =\r\n (IsDreamBroker && DREAMBROKER_URL(VideoId)) ||\r\n (IsQbrick && VideoId) ||\r\n (IsMediaFlowPro && VideoId);\r\n\r\n const addTimeUpdateParam = (videourl) => {\r\n if (\r\n (/play\\.mediaflowpro\\.com/.test(videourl) ||\r\n /play\\.mediaflow\\.com/.test(videourl)) &&\r\n !/(\\?|&)timeupdate\\b/.test(videourl)\r\n ) {\r\n const separator = videourl.includes('?') ? '&' : '?';\r\n videourl += `${separator}timeupdate`;\r\n }\r\n return videourl;\r\n };\r\n\r\n const dataPrintSidebarTitle =\r\n Heading || CurrentPageProps?.Content?.Translations?.videoblock || 'Film';\r\n\r\n return (\r\n \r\n
\r\n )}\r\n {galleryLink.Link && galleryLink.LinkText && (\r\n {caption}
\r\n\r\n \r\n {galleryLink.LinkText}\r\n \r\n
\r\n )}\r\n \r\n Video: {videoUrl}\r\n
\r\n \r\n {VideoText}
\r\n\r\n \r\n Tillbaka till navigering\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default IsInRange(List);\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport Track from '../Base/Sensors/track';\r\nimport scrollIt from '../Base/Scroll';\r\n\r\nconst AOListNavigation = ({\r\n alphabet,\r\n compare,\r\n activeLetter,\r\n handleLetterChange,\r\n ...props\r\n}) => {\r\n const Anchors = alphabet.map((Key) => {\r\n return { Key };\r\n });\r\n\r\n const classes = classNames({\r\n 'c-anchorlinks': true,\r\n 'c-anchorlinks--is-fixed': props.isWithinTrac,\r\n 'c-anchorlinks--is-bottom': props.isTrackBottom,\r\n });\r\n\r\n return (\r\n {props.letter}
\r\n- \r\n {props.list.map((item, key) => (\r\n
- \r\n {item.Name}\r\n \r\n ))}\r\n
- \r\n {Anchors.map((item, index) => {\r\n const matched = typeof compare !== 'undefined' ? compare(item) : true;\r\n\r\n const classes = classNames({\r\n 'c-anchorlinks__item': true,\r\n 'c-anchorlinks__item--selected':\r\n activeLetter.toLowerCase() === item.Key.toLowerCase(),\r\n 'c-anchorlinks__item--matched': matched,\r\n });\r\n\r\n const attributes = {\r\n 'data-cy': matched ? 'ui-anchor-item' : 'ui-empty-item',\r\n };\r\n\r\n return (\r\n
- \r\n {matched ? (\r\n
\r\n
\r\n );\r\n };\r\n\r\n let ticking = false;\r\n const throttleScroll = () => {\r\n ticking =\r\n ticking ||\r\n requestAnimationFrame(() => {\r\n ticking = false;\r\n handles.map((handle) => handle());\r\n });\r\n };\r\n\r\n if (typeof window !== 'undefined') {\r\n window.addEventListener('scroll', throttleScroll, false);\r\n window.addEventListener('resize', throttleScroll, false);\r\n }\r\n\r\n return Track;\r\n};\r\n","import React, { useState } from 'react';\r\nimport { withRouter } from 'react-router';\r\nimport List from './list';\r\nimport Navigation from './navigation';\r\n\r\nconst AOListWithTrack = (props) => {\r\n const [activeLetter, setActiveLetter] = useState(\r\n props.location.hash\r\n ? props.location.hash.substring(1)\r\n : props.list[0]?.Key.toLowerCase()\r\n );\r\n\r\n const handleLetterChange = (activeLetter) => {\r\n setActiveLetter(activeLetter);\r\n };\r\n\r\n if (props.list.length === 0) return null;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withRouter(AOListWithTrack);\r\n","const ResponsiveImages = (props) => {\r\n return (\r\n (props.ImageProperties === 'small-bleed' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 403px, 100vw',\r\n }) ||\r\n (props.ImageProperties === 'mini-bleed' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 193px, 100vw',\r\n }) ||\r\n (props.ImageProperties === 'mini' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 193px, 100vw',\r\n }) ||\r\n (props.ImageProperties === 'mini-reverse' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 193px, 100vw',\r\n }) ||\r\n (props.ImageProperties === 'xsmall-bleed' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 300px, 100vw',\r\n }) ||\r\n (props.ImageProperties === 'xsmall' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 300px, 100vw',\r\n }) ||\r\n (props.ImageProperties === 'xsmall-reverse' && {\r\n sizes: '(min-width: 640px) 315px, (min-width: 1024px) 300px, 100vw',\r\n }) ||\r\n (props.ImageProperties && { sizes: '(min-width: 640px) 652px, 100vw' })\r\n );\r\n};\r\n\r\nexport default ResponsiveImages;\r\n","import React, { Fragment } from 'react';\r\nimport classNames from 'classnames';\r\nimport * as Render from '../Base/Render';\r\nimport ImageBlock from '../ImageBlock';\r\nimport withLazyLoad from '../Containers/withLazyLoad';\r\nimport withSrcSets from '../Containers/withSrcSets';\r\nimport withSensitiveImage from '../Containers/withSensitiveImage';\r\nimport SemanticHeader from './semantic-header';\r\nimport ResponsiveImages from './responsive-images';\r\n\r\nconst ImageBlockLazyLoad = withLazyLoad(\r\n withSrcSets(withSensitiveImage(ImageBlock))\r\n);\r\n\r\nconst View = (props) => (\r\n \r\n \r\n handleLetterChange(activeLetter)\r\n }\r\n list={props.list}\r\n />\r\n
\r\n\r\n \r\n {props.list.map((letter, key) => (\r\n \r\n handleLetterChange(activeLetter)\r\n }\r\n key={key}\r\n letter={letter.Key}\r\n list={letter.Items}\r\n />\r\n ))}\r\n
\r\n {props.Preamble}
}\r\n {props.Image && (\r\n\r\n \r\n
\r\n )}\r\n {props.ContentString}\r\n {props.RegionAddition?.ContentBelow && (\r\n \r\n
\r\n ) : (\r\n ''\r\n );\r\n};\r\n\r\nRegionalHighlightTextBlock.propTypes = {\r\n regionalContent: PropTypes.array,\r\n};\r\n\r\nexport default RegionalHighlightTextBlock;\r\n","import classNames from 'classnames';\r\nimport { object, string, array } from 'prop-types';\r\nimport React from 'react';\r\nimport LinkButton from '../Buttons/LinkButton';\r\nimport SemanticHeader from '../Chapter/semantic-header';\r\nimport RegionalHighlightTextBlock from '../TextBlock/RegionalHighlightTextBlock';\r\n\r\nconst HighLight = (props) => {\r\n const {\r\n SelectedType,\r\n SelectedIcon,\r\n SelectedBackgroundColor,\r\n Buttons,\r\n Heading,\r\n ContentString,\r\n isMemberOfChapterContainer,\r\n isH3,\r\n RegionalContent,\r\n } = props;\r\n const classes = classNames({\r\n 'c-highlight': true,\r\n [`c-highlight--${SelectedType}`]: SelectedType,\r\n [`c-highlight--${SelectedIcon}`]: SelectedIcon,\r\n [`c-highlight--${SelectedBackgroundColor}`]: SelectedBackgroundColor,\r\n });\r\n\r\n const dataPrintSidebarTitle =\r\n Heading ||\r\n props.CurrentPageProps?.Content?.Translations?.highlightblock ||\r\n '';\r\n return (\r\n {block.Content}
;\r\n })}\r\n{ContentString}
\r\n\r\n {RegionalContent && (\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nHighLight.propTypes = {\r\n SelectedType: string,\r\n SelectedIcon: string,\r\n SelectedBackgroundColor: string,\r\n Buttons: array,\r\n Heading: string,\r\n ContentString: object,\r\n};\r\n\r\nexport default HighLight;\r\n","import { useEffect, useRef } from 'react';\r\n\r\n/**\r\n * Custom hook for creating Matomo track-events. The event-parameters corresponds to their Matomo equivalents. (e.g., eventCategory = Event Category)\r\n * @param {string} eventCategory - The category of the tracked event.\r\n * @param {string} eventAction - The action associated with the event.\r\n * @param {string} eventName - The name of the event.\r\n * @param {number} eventValue - The value to track (e.g., an index).\r\n * @param {number} debounceTime - Debounce time in milliseconds.\r\n */\r\nconst useMatomoTrackEventOnChange = (\r\n eventCategory,\r\n eventAction,\r\n eventName,\r\n eventValue,\r\n debounceTime = 300\r\n) => {\r\n if (\r\n typeof window === undefined ||\r\n !eventCategory ||\r\n !eventAction ||\r\n !eventName ||\r\n eventValue == null\r\n ) {\r\n return;\r\n }\r\n\r\n const timeoutRef = useRef(null);\r\n const eventValueUnchanged = useRef(true);\r\n\r\n useEffect(() => {\r\n if (eventValueUnchanged.current) {\r\n eventValueUnchanged.current = false;\r\n return;\r\n }\r\n\r\n clearTimeout(timeoutRef.current);\r\n\r\n timeoutRef.current = setTimeout(() => {\r\n window?._paq?.push([\r\n 'trackEvent',\r\n eventCategory,\r\n eventAction,\r\n eventName,\r\n eventValue,\r\n ]);\r\n }, debounceTime);\r\n\r\n return () => {\r\n clearTimeout(timeoutRef.current);\r\n };\r\n }, [eventCategory, eventAction, eventValue]);\r\n};\r\n\r\nexport default useMatomoTrackEventOnChange;\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport ArticleHeader from '../ArticleHeader';\r\nimport * as Render from '../Base/Render';\r\nimport ImageBlock from '../ImageBlock';\r\nimport Section from '../Section';\r\nimport withSrcSets from '../Containers/withSrcSets';\r\nimport withLazyLoad from '../Containers/withLazyLoad';\r\nimport withSensitiveImage from '../Containers/withSensitiveImage';\r\n\r\nconst Intro = (props) => {\r\n const ImageBlockWithSrcSet = withLazyLoad(\r\n withSrcSets(withSensitiveImage(ImageBlock))\r\n );\r\n\r\n const introClasses = classNames({\r\n 'medium-8': true,\r\n 'medium-centered': true,\r\n 'large-uncentered': true,\r\n 'large-7': props.Media,\r\n 'large-8': !props.Media,\r\n columns: true,\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {(props.Media || props.CurrentPageProps.IsEditMode) && (\r\n \r\n \r\n
\r\n )}\r\n {heading}
}\r\n {text && (\r\n\r\n {photographer && (\r\n
\r\n )}\r\n {links && (\r\n {`${translations.photographer}: ${photographer}`}
\r\n )}\r\n {illustrator && (\r\n{`${translations.illustrator}: ${illustrator}`}
\r\n )}\r\n\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default MediaGalleryContent;\r\n","import React from 'react';\r\nimport withSensitiveImage from '../../Containers/withSensitiveImage';\r\nimport withSrcSets from '../../Containers/withSrcSets';\r\nimport ImageBlock from '../../ImageBlock';\r\nimport MediaGalleryContent from './content';\r\n\r\nconst MediaGalleryImage = (props) => {\r\n const {\r\n activeIndex,\r\n index,\r\n pageProps,\r\n counter,\r\n numberOfItems,\r\n ImageHeading,\r\n ImageText,\r\n ImageLinks,\r\n isStanding,\r\n slideWidth,\r\n showAuthor,\r\n translations,\r\n isArticlePage,\r\n isMobile,\r\n alwaysShowCurrentImage,\r\n } = props;\r\n const ImageBlockWithSrcSets = withSrcSets(withSensitiveImage(ImageBlock));\r\n\r\n const forciblyShowCurrentCount =\r\n (alwaysShowCurrentImage && !isMobile) ||\r\n (activeIndex === index && isMobile);\r\n\r\n return (\r\n \r\n
\r\n - \r\n {links.map((link, index) => (\r\n
- \r\n \r\n {link.Text}\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n {alwaysShowCurrentImage ? index + 1 : activeIndex + 1}/\r\n {numberOfItems}\r\n \r\n
\r\n \r\n {(ImageHeading || ImageText || ImageLinks) && (\r\n \r\n {Array.from(\r\n { length: hasGroupedDots ? totalSlides - 2 : totalSlides },\r\n (_, index) =>\r\n index >= visibleRange[0] &&\r\n index <= visibleRange[1] && (\r\n handleClick(index)}\r\n >\r\n )\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default MediaGalleryPagination;\r\n","import React from 'react';\r\nimport Video from '../../Video';\r\n\r\nconst MediaGalleryVideo = (props) => {\r\n const {\r\n activeIndex,\r\n index,\r\n numberOfItems,\r\n counter,\r\n VideoText,\r\n slideWidth,\r\n isMobile,\r\n alwaysShowCurrentImage,\r\n } = props;\r\n\r\n const forciblyShowCurrentCount =\r\n (alwaysShowCurrentImage && !isMobile) ||\r\n (activeIndex === index && isMobile);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {alwaysShowCurrentImage ? index + 1 : activeIndex + 1}/\r\n {numberOfItems}\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default MediaGalleryVideo;\r\n","import classNames from 'classnames';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport SemanticHeader from '../Chapter/semantic-header';\r\nimport { useMatomoTrackEventOnChange } from '../Hooks/index';\r\nimport { isMediumViewport } from '../Hooks/useMedia';\r\nimport MediaGalleryImage from './components/image';\r\nimport MediaGalleryPagination from './components/pagination';\r\nimport MediaGalleryVideo from './components/video';\r\nimport useWindowLocationHref from '../Hooks/useWindowLocation';\r\n\r\nconst MediaGallery = (props) => {\r\n const href = useWindowLocationHref();\r\n const {\r\n Heading,\r\n Media,\r\n Translations,\r\n CurrentPageProps,\r\n Dir,\r\n ShowPagination,\r\n } = props;\r\n\r\n const containsMedia = (media) => {\r\n let hasMedia = false;\r\n try {\r\n media?.length > 0 ? (hasMedia = true) : (hasMedia = false);\r\n } catch (error) {\r\n throw new Error('Du måste ha minst en bild i bildspelet');\r\n }\r\n\r\n return hasMedia;\r\n };\r\n\r\n const totalItems = Media?.length;\r\n\r\n const hasMedia = containsMedia(Media);\r\n const isMobile = isMediumViewport();\r\n const isArticlePage = CurrentPageProps.PageTypeName === 'ArticlePage';\r\n const isThreeSlidesLayout = !isArticlePage && !isMobile;\r\n const isFullWidthLayout = totalItems === 4;\r\n const galleryIsScrollable = totalItems > 4 || isArticlePage;\r\n const alwaysShowCurrentImageIndicator =\r\n !ShowPagination && galleryIsScrollable;\r\n\r\n const getSlideWidth = () => {\r\n if (isArticlePage && !isMobile) {\r\n return '100%';\r\n }\r\n if ((galleryIsScrollable && !isMobile) || (totalItems < 4 && !isMobile)) {\r\n return '33%';\r\n }\r\n if (isFullWidthLayout && !isMobile) {\r\n return '25%';\r\n }\r\n return '83%';\r\n };\r\n\r\n const slideWidth = getSlideWidth();\r\n\r\n const scrollContainerRef = useRef(null);\r\n const [activeIndex, setActiveIndex] = useState(0);\r\n\r\n const maxVisiblePaginationDots = 10;\r\n const [visiblePaginationRange, setVisiblePaginationRange] = useState([0, 9]);\r\n\r\n const updatePaginationRange = (newSlide) => {\r\n let newStart = Math.max(\r\n newSlide - Math.floor(maxVisiblePaginationDots / 2),\r\n 0\r\n );\r\n let newEnd = Math.min(\r\n newStart + maxVisiblePaginationDots - 1,\r\n totalItems - 1\r\n );\r\n\r\n if (newEnd - newStart < maxVisiblePaginationDots - 1) {\r\n newStart = Math.max(newEnd - maxVisiblePaginationDots + 1, 0);\r\n }\r\n\r\n setVisiblePaginationRange([newStart, newEnd]);\r\n };\r\n\r\n const handlePaginationClick = (index) => {\r\n scrollToIndex(index);\r\n updatePaginationRange(index);\r\n };\r\n\r\n useEffect(() => {\r\n if (isMobile) {\r\n const scrollContainer = scrollContainerRef.current;\r\n\r\n const handleScroll = () => {\r\n let scrollLeft = scrollContainer.scrollLeft;\r\n const containerWidth = scrollContainer.clientWidth;\r\n const itemWidth = containerWidth * 0.83; // width: 83% in mobile always\r\n\r\n let newIndex;\r\n\r\n if (Dir === 'rtl') {\r\n const maxScrollLeft = scrollContainer.scrollWidth - containerWidth;\r\n if (scrollLeft < 0) {\r\n scrollLeft = Math.abs(scrollLeft);\r\n } else if (scrollLeft == -maxScrollLeft) {\r\n scrollLeft = maxScrollLeft;\r\n } else {\r\n scrollLeft = 0;\r\n }\r\n }\r\n\r\n newIndex = Math.round(scrollLeft / itemWidth);\r\n\r\n setActiveIndex(newIndex);\r\n updatePaginationRange(newIndex);\r\n };\r\n\r\n scrollContainer.addEventListener('scroll', handleScroll);\r\n\r\n return () => {\r\n scrollContainer.removeEventListener('scroll', handleScroll);\r\n };\r\n }\r\n }, []);\r\n\r\n const scrollToIndex = (index) => {\r\n const scrollContainer = scrollContainerRef.current;\r\n const containerWidth = scrollContainer.clientWidth;\r\n const itemWidth = containerWidth * (isMobile ? 0.83 : 0.33); // width: 83%\r\n const scrollLeft = index * itemWidth;\r\n\r\n // Temporarily disable 'scroll-snap-type', because it interferes with the 'scrollTo' in Chrome\r\n scrollContainer.style.scrollSnapType = 'none';\r\n\r\n if (Dir === 'ltr') {\r\n scrollContainer.scrollTo({\r\n left: isMobile ? scrollLeft - 15 : scrollLeft,\r\n behavior: 'smooth',\r\n });\r\n } else {\r\n scrollContainer.scrollTo({\r\n left: isMobile ? -scrollLeft + 15 : -scrollLeft,\r\n behavior: 'smooth',\r\n });\r\n }\r\n\r\n setTimeout(() => {\r\n // Re-enable 'scroll-snap-type' after the scrolling is done\r\n scrollContainer.style.scrollSnapType = 'x mandatory';\r\n }, 300);\r\n\r\n if (!isMobile) setActiveIndex(index);\r\n updatePaginationRange(index);\r\n };\r\n\r\n const nextSlide = () => {\r\n let newIndex;\r\n\r\n if (isArticlePage && !isMobile && activeIndex + 1 >= totalItems) {\r\n newIndex = 0;\r\n } else {\r\n newIndex =\r\n activeIndex < (isThreeSlidesLayout ? totalItems - 3 : totalItems - 1)\r\n ? activeIndex + 1\r\n : activeIndex;\r\n }\r\n\r\n scrollToIndex(newIndex);\r\n };\r\n\r\n const prevSlide = () => {\r\n let newIndex;\r\n\r\n if (isArticlePage && !isMobile && activeIndex === 0) {\r\n newIndex = totalItems - 1;\r\n } else {\r\n newIndex = activeIndex !== 0 ? activeIndex - 1 : 0;\r\n }\r\n\r\n scrollToIndex(newIndex);\r\n };\r\n\r\n useMatomoTrackEventOnChange(\r\n 'Bildspel',\r\n 'Bläddrar',\r\n href || 'novalue',\r\n activeIndex + 1\r\n );\r\n\r\n const dataPrintSidebarTitle = Heading || 'Mediakarusell';\r\n\r\n if (!Translations)\r\n throw new Error(`There is no Translation object for MediaGallery`);\r\n return (\r\n \r\n {!!ShowPagination && (galleryIsScrollable || isMobile) && (\r\n
\r\n\r\n {props.Link && (props.LinkText || props.InternalLinkName) && (\r\n \r\n
\r\n {(galleryIsScrollable || isMobile) && (\r\n \r\n \r\n {hasMedia &&\r\n Media.map((media, index) =>\r\n media.BlockTypeName === 'SlideshowImageBlock' ? (\r\n
\r\n \r\n (Dir === 'ltr' ? nextSlide() : prevSlide())}\r\n >\r\n \r\n {Dir === 'ltr' ? Translations.next : Translations.previous}\r\n \r\n \r\n (Dir === 'ltr' ? prevSlide() : nextSlide())}\r\n >\r\n \r\n {Dir === 'ltr' ? Translations.previous : Translations.next}\r\n \r\n \r\n
\r\n )}\r\n \r\n {quizInProgress ? (\r\n
\r\n );\r\n};\r\n\r\nexport default InfoBox;\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\n\r\n/**\r\n * @typedef RadioButtonProps\r\n * @property {string | undefined} id\r\n * @property {string | undefined} name\r\n * @property {string} text\r\n * @property {boolean} checked\r\n * @property {React.ChangeEventHandler\r\n
\r\n ) : (\r\n <>\r\n \r\n Fråga {currentQuestionNr} av {nrOfQuestions}\r\n
\r\n\r\n
\r\n \r\n Du fick {correctNrOfQuestions}/{nrOfQuestions} rätt!\r\n
\r\n{finishedQuizText}
\r\n {link && (linkText || friendlyLinkName) && (\r\n \r\n {linkText || friendlyLinkName}\r\n \r\n )}\r\n \r\n )}\r\n\r\n \r\n {`${\r\n currentAnswerIndex && !quizInProgress ? currentAnswerIndex + '.' : ''\r\n } ${questionText}`}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default QuizQuestion;\r\n","import classNames from 'classnames';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport ShareButton from '../Buttons/ShareButton';\r\nimport SemanticHeader from '../Chapter/semantic-header';\r\nimport InfoBox from './infoBox';\r\nimport QuizQuestion from './quizQuestion';\r\nimport useWindowLocationHref from '../Hooks/useWindowLocation';\r\n\r\nconst QuizContainerBlock = ({\r\n heading,\r\n introText,\r\n link,\r\n linkText,\r\n internalLinkName,\r\n questions,\r\n answerSpans,\r\n blockId,\r\n chapterContainerHasHeading,\r\n isCollectionPage,\r\n shareButton,\r\n}) => {\r\n const href = useWindowLocationHref();\r\n const [answeredQuestions, setAnsweredQuestions] = useState({});\r\n const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);\r\n const [quizInProgress, setQuizInProgress] = useState(true);\r\n const [correctNumberOfQuestions, setCorrectNumberOfQuestions] = useState(0);\r\n const [finishedQuizText, setFinishedQuizText] = useState('');\r\n const [hideQuizBlock, setHideQuizBlock] = useState(false);\r\n const quizResultsRef = useRef(null);\r\n\r\n const currentQuestion = questions?.[currentQuestionIndex];\r\n\r\n const nextPaginationButtonActive =\r\n currentQuestionIndex === 0\r\n ? Object.keys(answeredQuestions).length > 0\r\n : currentQuestionIndex <= Object.keys(answeredQuestions).length - 1;\r\n\r\n const handleQuestionAnswer = (questionId, answer) => {\r\n setAnsweredQuestions({\r\n ...answeredQuestions,\r\n [questionId]: answer,\r\n });\r\n };\r\n\r\n const handleNext = () => {\r\n if (currentQuestionIndex < questions?.length - 1) {\r\n setCurrentQuestionIndex(currentQuestionIndex + 1);\r\n scrollToTop();\r\n } else {\r\n setQuizInProgress(false);\r\n }\r\n };\r\n\r\n const handlePrev = () => {\r\n if (currentQuestionIndex > 0) {\r\n setCurrentQuestionIndex(currentQuestionIndex - 1);\r\n scrollToTop();\r\n }\r\n };\r\n\r\n const scrollToTop = () => {\r\n requestAnimationFrame(() => {\r\n const heading = document.getElementById(`quiz-heading-${blockId}`);\r\n if (heading) {\r\n const headingTop = heading.getBoundingClientRect().top + window.scrollY;\r\n window.scrollTo({ top: headingTop + -150 });\r\n heading.focus();\r\n }\r\n });\r\n };\r\n\r\n const handleHideQuiz = () => {\r\n setHideQuizBlock(!hideQuizBlock);\r\n scrollToTop();\r\n };\r\n\r\n useEffect(() => {\r\n const correctAnswersCount = Object.values(answeredQuestions).filter(\r\n (question) => question.IsCorrect\r\n ).length;\r\n setCorrectNumberOfQuestions(correctAnswersCount);\r\n const answerSpan = answerSpans\r\n ?.sort((a, b) => a.Max - b.Max)\r\n ?.find((answer) => correctAnswersCount < answer.Max);\r\n setFinishedQuizText(answerSpan?.Text);\r\n }, [answeredQuestions]);\r\n\r\n const updateQuizResultHeight = () => {\r\n if (quizResultsRef.current) {\r\n const currentContentHeight = hideQuizBlock\r\n ? 0\r\n : quizResultsRef.current.scrollHeight;\r\n quizResultsRef.current.style.maxHeight = `${currentContentHeight}px`;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n updateQuizResultHeight();\r\n }, [hideQuizBlock, quizInProgress]);\r\n\r\n if (!questions || questions.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n {image &&
\r\n - \r\n {answerAlternatives?.map((answer, i) => (\r\n
\r\n
\r\n )}\r\n \r\n \r\n {heading}\r\n \r\n \r\n handleQuestionAnswer(currentQuestion.BlockId, answer)\r\n }\r\n selectedAnswer={answeredQuestions[currentQuestion.BlockId]}\r\n blockId={currentQuestion.BlockId}\r\n correctFeedbackText={currentQuestion.CorrectFeedbackText}\r\n incorrectFeedbackText={currentQuestion.IncorrectFeedbackText}\r\n correctAnswerLink={currentQuestion.CorrectAnswerLink}\r\n correctAnswerLinkText={currentQuestion.CorrectAnswerLinkText}\r\n friendlyCorrectLinkName={currentQuestion.FriendlyCorrectLinkName}\r\n incorrectAnswerLink={currentQuestion.IncorrectAnswerLink}\r\n incorrectAnswerLinkText={currentQuestion.IncorrectAnswerLinkText}\r\n friendlyIncorrectLinkName={\r\n currentQuestion.FriendlyIncorrectLinkName\r\n }\r\n quizInProgress={quizInProgress}\r\n chapterContainerHasHeading={chapterContainerHasHeading}\r\n />\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {quizInProgress && (\r\n {introText}
\r\n\r\n \r\n {questions.map((question, i) =>\r\n question ? (\r\n
\r\n\r\n \r\n \r\n handleQuestionAnswer(question.BlockId, answer)\r\n }\r\n selectedAnswer={answeredQuestions[question.BlockId]}\r\n blockId={question.BlockId}\r\n correctFeedbackText={question.CorrectFeedbackText}\r\n incorrectFeedbackText={question.IncorrectFeedbackText}\r\n correctAnswerLink={question.CorrectAnswerLink}\r\n correctAnswerLinkText={question.CorrectAnswerLinkText}\r\n friendlyCorrectLinkName={question.FriendlyCorrectLinkName}\r\n incorrectAnswerLink={question.IncorrectAnswerLink}\r\n incorrectAnswerLinkText={question.IncorrectAnswerLinkText}\r\n friendlyIncorrectLinkName={\r\n question.FriendlyIncorrectLinkName\r\n }\r\n quizInProgress={quizInProgress}\r\n currentAnswerIndex={i + 1}\r\n />\r\n
\r\n ) : null\r\n )}\r\n {shareButton && (\r\n \r\n
\r\n )}\r\n \r\n handleHideQuiz()}\r\n className={`c-quiz-result__show-toggle-btn ${\r\n hideQuizBlock ? 'closed' : 'open'\r\n }`}\r\n aria-expanded={\r\n currentQuestionIndex === questions.length - 1\r\n ? quizInProgress\r\n ? 'true'\r\n : 'false'\r\n : undefined\r\n }\r\n aria-controls={`quiz-result-${blockId}`}\r\n >\r\n {hideQuizBlock ? 'Visa mitt resultat' : 'Dölj mitt resultat'}\r\n \r\n
\r\n \r\n \r\n Föregående fråga\r\n \r\n \r\n {currentQuestionIndex === questions.length - 1\r\n ? 'Se ditt resultat'\r\n : 'Nästa fråga'}\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default QuizContainerBlock;\r\n","import React, { useState } from 'react';\r\n\r\n/**\r\n * Repo: PWT-PlatformUI\r\n *\r\n * Sites: RGS\r\n *\r\n * @description Limited search field with no autocomplete or suggestions.\r\n * Uses local state and initialValue props.\r\n *\r\n */\r\nconst EntryFormSearchField = ({\r\n handleKeyDown,\r\n handleChange,\r\n handleBlur,\r\n initialValue,\r\n id,\r\n className,\r\n placeholder,\r\n}) => {\r\n const [value, setValue] = useState(initialValue);\r\n\r\n return (\r\n \r\n handleKeyDown(e)}\r\n onChange={(e) => {\r\n setValue(e.target.value);\r\n if (typeof handleChange === 'function') {\r\n handleChange(e);\r\n }\r\n }}\r\n onBlur={(e) => handleBlur(e)}\r\n type=\"text\"\r\n id={id}\r\n name=\"q\"\r\n placeholder={placeholder}\r\n className={`${className}__field__query`}\r\n />\r\n
\r\n );\r\n};\r\n\r\nEntryFormSearchField.defaultProps = {\r\n handleKeyDown: () => {},\r\n handleChange: () => {},\r\n handleBlur: () => {},\r\n initialValue: '',\r\n id: '',\r\n className: '',\r\n placeholder: '',\r\n};\r\n\r\nexport default EntryFormSearchField;\r\n","import queryString from 'qs';\r\nimport React from 'react';\r\nimport { withRouter } from 'react-router';\r\nimport SearchField from '../Search/searchfield';\r\nimport EntryFormSearchField from './entryform-searchfield';\r\nimport './styles.scss';\r\n\r\n/**\r\n * Repo: PWT-PlatformUI\r\n *\r\n * Sites: RGS\r\n *\r\n * @description\r\n * Entry form block to a searchpage.\r\n * No autocomplete/suggestions.\r\n *\r\n */\r\nconst SearchEntryForm = (props) => {\r\n const qs = queryString.parse(props.location.search, {\r\n ignoreQueryPrefix: true,\r\n });\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\n/**\r\n * Repo: PWT-PlatformUI\r\n *\r\n * Sites: NKK\r\n * @description\r\n * Entry form block to a searchpage.\r\n * With autocomplete, suggestions and quicksearch\r\n */\r\n\r\nconst SearchEntryFormWithAutocomplete = (props) => {\r\n const hasQuickSearch =\r\n typeof props.QuickSearchUrl !== 'undefined' &&\r\n props.QuickSearchUrl !== null;\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default withRouter(SearchEntryForm);\r\n\r\nexport { SearchEntryFormWithAutocomplete };\r\n","import React from 'react';\r\nimport { withRouter } from 'react-router';\r\nimport queryString from 'qs';\r\n\r\nconst TabPanel = (props) => {\r\n const options = {\r\n ignoreQueryPrefix: true,\r\n };\r\n const qs = props.TypeExists\r\n ? queryString.parse(props.location.search, options)\r\n : '';\r\n\r\n if ((props.default && !qs.t) || qs.t === props.id)\r\n return \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {props.SearchPlaceholder}\r\n \r\n\r\n
\r\n \r\n {props.children}
;\r\n\r\n return null;\r\n};\r\n\r\nexport default withRouter(TabPanel);\r\n","import React, { useState } from 'react';\r\nimport { withRouter } from 'react-router';\r\nimport classNames from 'classnames';\r\nimport queryString from 'qs';\r\n\r\nconst Tabs = (props) => {\r\n const [isOpen, setIsOpen] = useState(\r\n typeof window !== 'undefined' &&\r\n window.matchMedia('(min-width: 1025px)').matches\r\n );\r\n\r\n function handleToggle() {\r\n setIsOpen(!isOpen);\r\n }\r\n\r\n const { Tabs, location, Id } = props;\r\n\r\n if (!Tabs) return null;\r\n const options = {\r\n ignoreQueryPrefix: true,\r\n };\r\n const q = props.TypeExists ? queryString.parse(location.search, options) : '';\r\n\r\n let currentTab = null;\r\n\r\n const tabs = Tabs.map((tab, index) => {\r\n const tabQ = queryString.parse(tab.Url);\r\n const current = !q.t ? index === 0 : q.t === tabQ.t;\r\n const classes = classNames({\r\n 'c-tabs__nav__item': true,\r\n 'c-tabs__nav__item--selected': current,\r\n });\r\n\r\n if (current) currentTab = tab;\r\n\r\n return (\r\n \r\n {props.Heading && (\r\n {props.Heading} \r\n )}\r\n
\r\n );\r\n};\r\nconst DescriptionListItem = (props) => {\r\n return (\r\n {props.Preamble}
\r\n- \r\n {props.List?.map((item, key) => {\r\n props.ShowNumber && count++;\r\n return (\r\n
\r\n
\r\n \r\n {props.number && (\r\n \r\n \r\n {props.Heading}\r\n \r\n )}\r\n
\r\n \r\n {props.number}
\r\n \r\n )}\r\n {props.Heading && (\r\n\r\n \r\n {props.percent} % \r\n
\r\n );\r\n};\r\n\r\nProgressbar.propTypes = {\r\n /** How much progress */\r\n percent: T.number,\r\n /** Width and Height of {props.percent}%
\r\n