{"version":3,"file":"2709.be342d535bda92e4de58.js","mappings":"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","sources":["webpack://gyldendal-uddannelse/./src/Foundation/Frontend/ReactComponents/Shared/ResponsiveImage/responsive-image.tsx","webpack://gyldendal-uddannelse/./src/Foundation/Frontend/ReactComponents/ImageSpotList/image-spot-list.tsx","webpack://gyldendal-uddannelse/./src/Foundation/Frontend/ReactViews/ImageSpotList/image-spot-list-view.js"],"sourcesContent":["import React from \"react\";\r\n\r\nconst hasExistingQueryParam = (url: string) => url.indexOf(\"?\") > -1;\r\n\r\nconst getQueryParamDelimiter = (url: string) => (hasExistingQueryParam(url) ? \"&\" : \"?\");\r\n\r\nconst generateSrcSet = (srcSetSizes: number[], srcUrl: string) => {\r\n    const generateSrcSetString = (srcSetSize: number) => {\r\n        const parameterDelimiter = getQueryParamDelimiter(srcUrl);\r\n        const srcSetSizeHighDensity = Math.round(srcSetSize * 1.5);\r\n\r\n        return `\r\n            ${srcUrl}${parameterDelimiter}w=${srcSetSize} ${srcSetSize}w,\r\n            ${srcUrl}${parameterDelimiter}w=${srcSetSizeHighDensity} ${srcSetSizeHighDensity}w\r\n        `;\r\n    };\r\n\r\n    return srcSetSizes.map(generateSrcSetString).join(\", \");\r\n};\r\n\r\ninterface ResponsiveImageProps\r\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\r\n    srcUrl: string;\r\n    defaultSize: number;\r\n    srcSetSizes: number[];\r\n}\r\n\r\nconst ResponsiveImage = (props: ResponsiveImageProps) => {\r\n    const { srcUrl, defaultSize, srcSetSizes, ...rest } = props;\r\n    const src = `${srcUrl}${getQueryParamDelimiter(srcUrl)}w=${defaultSize}`;\r\n    const srcSet = srcSetSizes ? generateSrcSet(srcSetSizes, srcUrl) : \"\";\r\n\r\n    return <img src={src} srcSet={srcSet} loading=\"lazy\" alt={props.alt} {...rest} />;\r\n};\r\n\r\nexport default ResponsiveImage;\r\n","import classNames from \"classnames\";\r\nimport React, { useMemo } from \"react\";\r\nimport ResponsiveImage from \"ReactComponents/Shared/ResponsiveImage/responsive-image\";\r\nimport * as tracking from \"ReactComponents/Shared/Utils/tracking\";\r\n\r\nexport interface IImageSpotListItem {\r\n    SpotText: string;\r\n    ImageUrl: string;\r\n    SpotTextColor: string;\r\n    Url?: string;\r\n    ButtonText?: string;\r\n    HeaderText?: string;\r\n    HeaderTextColor?: string;\r\n    HeaderBackgroundColor?: string;\r\n    ButtonTextColor?: string;\r\n    ButtonAlignment?: string;\r\n    SpotTextAlignment?: string;\r\n}\r\n\r\nexport interface IImageSpotListProps {\r\n    Title: string;\r\n    ImageSpots: IImageSpotListItem[];\r\n}\r\n\r\nconst sizes = [\r\n    \"(min-width: 1750px) 1390px, (min-width: 1240px) calc(100vw - 350px), (min-width: 640px) calc(100vw - 50px), calc(100vw - 20px)\",\r\n    \"(min-width: 1750px) 687px, (min-width: 1240px) calc((100vw - 366px) / 2), (min-width: 640px) calc((100vw - 66px) / 2), calc(100vw - 20px)\",\r\n    \"(min-width: 1750px) 452px, (min-width: 1240px) calc((100vw - 372px) / 3), (min-width: 640px) calc((100vw - 72px) / 3), calc(100vw - 20px)\"\r\n] as const;\r\n\r\nfunction ImageSpotList(props: IImageSpotListProps) {\r\n    const baseClass = \"image-spot-list\";\r\n\r\n    return (\r\n        <div className=\"content-module\">\r\n            <div className={baseClass}>\r\n                <div className={`${baseClass}__spots `}>\r\n                    {props.ImageSpots.map((imageSpot, index) => (\r\n                        <ImageSpotListItem\r\n                            key={index}\r\n                            sizes={sizes[props.ImageSpots.length - 1]}\r\n                            {...imageSpot}\r\n                        />\r\n                    ))}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n\r\nfunction ImageSpotListItem({\r\n    Url,\r\n    ImageUrl,\r\n    sizes,\r\n    SpotText,\r\n    SpotTextColor,\r\n    SpotTextAlignment,\r\n    HeaderText,\r\n    HeaderTextColor,\r\n    HeaderBackgroundColor,\r\n    ButtonText,\r\n    ButtonTextColor,\r\n    ButtonAlignment\r\n}: IImageSpotListItem & { sizes: string }) {\r\n    const baseClass = \"image-spot-list\";\r\n\r\n    const topBannerClickHandler = () => {\r\n        tracking.heroClick({ text: HeaderText, componentName: \"topBanner\" });\r\n    };\r\n    const spotTextClickHandler = () => {\r\n        tracking.heroClick({ text: SpotText, componentName: \"spotText\" });\r\n    };\r\n    const ctaClickHandler = () => {\r\n        tracking.heroClick({ text: ButtonText, componentName: \"CTA\" });\r\n    };\r\n\r\n    const Wrapper = Url\r\n        ? (\r\n              props: JSX.IntrinsicAttributes &\r\n                  React.ClassAttributes<HTMLAnchorElement> &\r\n                  React.AnchorHTMLAttributes<HTMLAnchorElement>\r\n          ) => (\r\n              <a href={Url} className={`${baseClass}__image-spot`} {...props}>\r\n                  {props.children}\r\n              </a>\r\n          )\r\n        : (\r\n              props: JSX.IntrinsicAttributes &\r\n                  React.ClassAttributes<HTMLDivElement> &\r\n                  React.HTMLAttributes<HTMLDivElement>\r\n          ) => (\r\n              <div className={`${baseClass}__image-spot`} {...props}>\r\n                  {props.children}\r\n              </div>\r\n          );\r\n\r\n    const headerClasses = useMemo(() => {\r\n        return classNames(`${baseClass}__image-spot-header-container`, {\r\n            [`${HeaderTextColor}--text`]: HeaderTextColor,\r\n            [`${HeaderBackgroundColor}--bg`]: HeaderBackgroundColor\r\n        });\r\n    }, [HeaderTextColor, HeaderBackgroundColor]);\r\n\r\n    const spotClasses = useMemo(() => {\r\n        return classNames(`${baseClass}__image-spot-text-container`, SpotTextAlignment, {\r\n            [`${SpotTextColor}--text`]: SpotTextColor\r\n        });\r\n    }, [SpotTextAlignment, SpotTextColor]);\r\n\r\n    const buttonClasses = useMemo(() => {\r\n        return classNames(`${baseClass}__image-spot-button-container`, ButtonAlignment, {\r\n            [`${ButtonTextColor}--text`]: ButtonTextColor\r\n        });\r\n    }, [ButtonAlignment, ButtonTextColor]);\r\n\r\n    return (\r\n        <Wrapper>\r\n            <span className={`${baseClass}__image-spot-aspect-ratio`}>\r\n                {ImageUrl && (\r\n                    <span\r\n                        className={classNames(`${baseClass}__image-spot-image`, {\r\n                            [`${baseClass}__image-spot-image--hasText`]: SpotText\r\n                        })}\r\n                    >\r\n                        <ResponsiveImage\r\n                            defaultSize={450}\r\n                            srcUrl={ImageUrl}\r\n                            srcSetSizes={[230, 355, 450, 560, 680]}\r\n                            sizes={sizes}\r\n                            loading=\"eager\"\r\n                        />\r\n                    </span>\r\n                )}\r\n                {HeaderText && (\r\n                    <span className={headerClasses}>\r\n                        <button\r\n                            className={`${baseClass}__image-spot-header-container-button`}\r\n                            type=\"button\"\r\n                            onClick={topBannerClickHandler}\r\n                        >\r\n                            {HeaderText}\r\n                        </button>\r\n                    </span>\r\n                )}\r\n                {SpotText && (\r\n                    <span className={spotClasses}>\r\n                        <button\r\n                            className={`${baseClass}__image-spot-text-container-button`}\r\n                            type=\"button\"\r\n                            onClick={spotTextClickHandler}\r\n                        >\r\n                            {SpotText}\r\n                        </button>\r\n                    </span>\r\n                )}\r\n                {ButtonText && (\r\n                    <span className={buttonClasses}>\r\n                        <button\r\n                            className={`${baseClass}__image-spot-button-container-button button button--slim`}\r\n                            type=\"button\"\r\n                            onClick={ctaClickHandler}\r\n                        >\r\n                            {ButtonText}\r\n                        </button>\r\n                    </span>\r\n                )}\r\n            </span>\r\n        </Wrapper>\r\n    );\r\n}\r\n\r\nexport default ImageSpotList;\r\n","import * as React from \"react\";\r\nimport ImageSpotList from \"../../ReactComponents/ImageSpotList/image-spot-list\";\r\n\r\nconst ImageSpotListView = props => <ImageSpotList {...props} />;\r\n\r\nexport default ImageSpotListView;\r\n"],"names":["getQueryParamDelimiter","url","indexOf","hasExistingQueryParam","props","srcUrl","defaultSize","srcSetSizes","rest","src","srcSet","map","srcSetSize","parameterDelimiter","srcSetSizeHighDensity","Math","round","join","generateSrcSet","img","loading","alt","sizes","ImageSpotListItem","Url","ImageUrl","SpotText","SpotTextColor","SpotTextAlignment","HeaderText","HeaderTextColor","HeaderBackgroundColor","ButtonText","ButtonTextColor","ButtonAlignment","baseClass","Wrapper","a","href","className","children","div","headerClasses","useMemo","classNames","spotClasses","buttonClasses","span","ResponsiveImage","button","type","onClick","tracking","text","componentName","ImageSpots","imageSpot","index","key","length","ImageSpotList"],"sourceRoot":""}