{"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\nimport { mergeRefs } from \"../../utilities/index.js\";\nimport type { ImageProps } from \"./types.js\";\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n    ({ className, placeholder, alt, ...imageProperties }, ref) => {\n        const [imageRef, imageLoaded] = useImageLoadingStatus();\n        const [containerRef, dimensions] =\n            useElementDimensions<HTMLDivElement>(400);\n\n        const mergedImageRef = mergeRefs(ref, imageRef);\n\n        return (\n            <div\n                ref={containerRef}\n                className={clsx(\"jkl-image\", className, {\n                    \"jkl-image--loading\": !imageLoaded,\n                })}\n            >\n                {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart */}\n                <img\n                    className=\"jkl-image__placeholder\"\n                    alt={imageLoaded ? \"\" : alt}\n                    src={placeholder || imageProperties.src}\n                />\n                {/* biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n                <img\n                    alt={alt}\n                    className=\"jkl-image__image\"\n                    data-testid=\"jkl-image__image\"\n                    ref={mergedImageRef}\n                    sizes={`${dimensions.width}px`}\n                    decoding=\"async\"\n                    loading=\"lazy\"\n                    {...imageProperties}\n                />\n            </div>\n        );\n    },\n);\n\nImage.displayName = \"Image\";\n"],"names":["Image","forwardRef","className","placeholder","alt","imageProperties","ref","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","mergedImageRef","mergeRefs","jsxs","clsx","children","jsx","src","sizes","width","decoding","loading","displayName"],"mappings":"qYAOO,MAAMA,EAAQC,EAAAA,WACjB,EAAGC,UAAAA,EAAWC,YAAAA,EAAaC,IAAAA,KAAQC,GAAmBC,KAClD,MAAOC,EAAUC,GAAeC,2BACzBC,EAAcC,GACjBC,EAAAA,qBAAqC,KAEnCC,EAAiBC,EAAAA,UAAUR,EAAKC,GAEtC,OACIQ,EAAAA,KAAC,MAAA,CACGT,IAAKI,EACLR,UAAWc,EAAAA,KAAK,YAAad,EAAW,CACpC,sBAAuBM,IAI3BS,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACGhB,UAAU,yBACVE,IAAKI,EAAc,GAAKJ,EACxBe,IAAKhB,GAAeE,EAAgBc,MAGxCD,EAAAA,IAAC,MAAA,CACGd,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZI,IAAKO,EACLO,MAAO,GAAGT,EAAWU,UACrBC,SAAS,QACTC,QAAQ,UACJlB,SAOxBL,EAAMwB,YAAc"}