{"version":3,"file":"5378.chunk.f92f47783aaf6505dce2.js","mappings":"qMAAO,MAAMA,EAAyBA,CAACC,EAAiBC,IAAkB,GAALC,OAAQF,EAAO,WAAAE,OAAUD,GCuCjFE,EAA2DC,IACpE,MAAM,IAAEC,EAAG,IAAEC,EAAG,WAAEC,EAAU,QAAEC,EAAO,UAAEC,EAAS,MAAEC,EAAQC,EAAAA,GAAkB,YAAEC,GAAc,GAASR,GAE/F,mBAAES,GAAuBH,EA6B/B,OACII,EAAAA,cAAA,OAAKL,UAAWM,ICvEE,uBDuEyBF,GCvEiB,uBDuEiCJ,IA5B3EO,EAACC,EAAoBC,EAAoBC,KAC3D,MAAOC,GAAcD,EAAeE,QAC9BC,EAAcF,EAAWG,MAAMC,KAAK,MACpCC,EAAgBL,EAAWM,cAC5BC,KAAI1B,GAAS,GAAJC,OAAOH,EAAuBkB,EAAYhB,GAAM,KAAAC,OAAID,EAAK,OAClEuB,KAAK,MASV,OACIV,EAAAA,cAAA,eACIA,EAAAA,cAAA,UAAQS,MAAOD,EAAaM,OAAQH,IACpCX,EAAAA,cAAA,OACIe,IAAK9B,EAAuBkB,EAAYE,EAAeW,cACvDxB,IAAKY,EACLa,MAAOxB,GAAc,CAAEyB,eAbdC,KACjB,MAAMC,EAAYC,IAAMF,EAAMG,EAAG,EAAG,GAC9BC,EAAYF,IAAMF,EAAMK,EAAG,EAAG,GAEpC,MAAO,GAAPpC,OAAsB,IAAZgC,EAAe,MAAAhC,OAAiB,IAAZmC,EAAe,MASEE,CAAYhC,IACnDiC,QAAS5B,EAAc,OAAS,UAE9B,EAMTI,CAAcX,EAAKC,EAAKE,GACvB,C","sources":["webpack://Kristiania.Web/./Features/Partials/Picture/Utils/constructImageSharpUrl.tsx","webpack://Kristiania.Web/./Features/Partials/Picture/Picture.tsx","webpack://Kristiania.Web/./Features/Partials/Picture/Picture.module.css?5ded"],"sourcesContent":["export const constructImageSharpUrl = (baseUrl: string, width: number) => `${baseUrl}?width=${width}`;\n","import classNames from 'classnames';\nimport clamp from 'lodash/clamp';\nimport * as React from 'react';\nimport type { Theme } from '~/Utils/Theme';\nimport { themeDefaultValues } from '~/Utils/Theme';\nimport styles from './Picture.module.css';\nimport { constructImageSharpUrl } from './Utils/constructImageSharpUrl';\n\nexport interface PictureSource {\n    allowedWidths: number[];\n    sizes: string[];\n}\n\nexport interface PictureProfile {\n    sources: PictureSource[];\n    defaultWidth: number;\n}\n\nexport interface FocalPoint {\n    x: number;\n    y: number;\n}\n\nexport interface BaseImage {\n    url: string;\n    alt: string;\n    focalPoint?: FocalPoint;\n    lazyLoading?: boolean;\n}\n\nexport interface PictureDefinition extends BaseImage {\n    profile: PictureProfile;\n}\n\nexport interface PictureProps extends PictureDefinition {\n    theme?: Pick<Theme, 'withRoundedCorners'>;\n    className?: string;\n}\n\nexport const Picture: React.FC<React.PropsWithChildren<PictureProps>> = props => {\n    const { url, alt, focalPoint, profile, className, theme = themeDefaultValues, lazyLoading = true } = props;\n\n    const { withRoundedCorners } = theme;\n\n    const createPicture = (pictureUrl: string, pictureAlt: string, pictureProfile: PictureProfile) => {\n        const [mainSource] = pictureProfile.sources;\n        const sourceSizes = mainSource.sizes.join(', ');\n        const sourceSrcSets = mainSource.allowedWidths\n            .map(width => `${constructImageSharpUrl(pictureUrl, width)} ${width}w`)\n            .join(', ');\n\n        const getPosition = (point: FocalPoint) => {\n            const xPosition = clamp(point.x, 0, 1);\n            const yPosition = clamp(point.y, 0, 1);\n\n            return `${xPosition * 100}% ${yPosition * 100}%`;\n        };\n\n        return (\n            <picture>\n                <source sizes={sourceSizes} srcSet={sourceSrcSets} />\n                <img\n                    src={constructImageSharpUrl(pictureUrl, pictureProfile.defaultWidth)}\n                    alt={pictureAlt}\n                    style={focalPoint && { objectPosition: getPosition(focalPoint) }}\n                    loading={lazyLoading ? 'lazy' : 'eager'}\n                />\n            </picture>\n        );\n    };\n\n    return (\n        <div className={classNames(styles.Picture, withRoundedCorners && styles['Variant--rounded'], className)}>\n            {createPicture(url, alt, profile)}\n        </div>\n    );\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"Picture\":\"slJnKPGAAIKofsQwQBjL\",\"Variant--rounded\":\"vPKYJ9xnnqorRitmkm3i\"};"],"names":["constructImageSharpUrl","baseUrl","width","concat","Picture","props","url","alt","focalPoint","profile","className","theme","themeDefaultValues","lazyLoading","withRoundedCorners","React","classNames","createPicture","pictureUrl","pictureAlt","pictureProfile","mainSource","sources","sourceSizes","sizes","join","sourceSrcSets","allowedWidths","map","srcSet","src","defaultWidth","style","objectPosition","point","xPosition","clamp","x","yPosition","y","getPosition","loading"],"sourceRoot":""}