{"version":3,"file":"Picture.cjs","sources":["../../../../src/lib/Picture/Picture.tsx"],"sourcesContent":["import type {DetailedHTMLProps, ImgHTMLAttributes} from 'react';\nimport {useCallback, forwardRef, useState} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {SkeletonShape} from '@/lib/Skeleton';\n\nimport classes from './Picture.module.css';\n\ntype IntrinsicWidth = `${number}w`;\ntype DensityDescriptor = `${number}x`;\n\ntype Source = {\n    /**\n     * Provide the source image url\n     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src\n     * @see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types\n     */\n    src: string;\n    /**\n     * Provide the source image MIME type\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#type\n     */\n    type?: string;\n    /**\n     * Provide media condition for the source image\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#media\n     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries\n     */\n    mediaCondition?: string;\n    /**\n     * Provide width of the slot the image will fill when the media condition is true\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#sizes\n     */\n    slotWidth?: string;\n    /**\n     * Provide the source image display height in pixels\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#height\n     */\n    width?: number;\n    /**\n     * Provide the source image display width in pixels\n     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#width\n     */\n    height?: number;\n} & (\n    | {\n          /**\n           * Provide the source image width descriptor. Has to be a positive integer directly followed by w. E.g. 480w\n           * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#srcset\n           * @see https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size\n           */\n          intrinsicWidth?: IntrinsicWidth;\n          density?: never;\n      }\n    | {\n          intrinsicWidth?: never;\n          /**\n           * Provide the source image pixel density descriptor. Has to be a positive floating point number directly followed by x. E.g. 2x\n           * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#srcset\n           * @see https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size\n           */\n          density?: DensityDescriptor;\n      }\n);\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        /**\n         * Provide default image url\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src\n         */\n        src: string;\n        /**\n         * Set default image width\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width\n         */\n        width?: number;\n        /**\n         * Set default image height\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/height\n         */\n        height?: number;\n        /**\n         * Provide alternate text to display when the image is not loaded or for use by assistive devices\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt\n         */\n        alt?: string;\n        /**\n         * Provide alternative sources configs array\n         * @see SourceDensity\n         * @see SourceWidth\n         */\n        sources?: Source[];\n        /**\n         * Set image loading behavior\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading\n         */\n        loading?: DetailedHTMLProps<\n            ImgHTMLAttributes<HTMLImageElement>,\n            HTMLImageElement\n        >['loading'];\n    };\n\nexport const Picture = forwardRef<HTMLDivElement, Props>(\n    ({className, alt, src, sources, width, height, loading = 'lazy', ...nativeProps}, ref) => {\n        const [isLoaded, setLoaded] = useState(false);\n        const handleLoad = useCallback(() => {\n            setLoaded(true);\n        }, []);\n        return (\n            <div className={classes.wrapper}>\n                <picture\n                    {...nativeProps}\n                    className={classNames(\n                        classes.picture,\n                        {[classes.loading]: !isLoaded},\n                        className\n                    )}\n                    ref={ref}\n                    onLoad={handleLoad}>\n                    {sources?.map(\n                        ({\n                            src,\n                            mediaCondition,\n                            density = '1x',\n                            intrinsicWidth,\n                            slotWidth = '',\n                            type,\n                            width: srcWidth,\n                            height: srcHeight,\n                        }) => {\n                            const srcParam = intrinsicWidth ?? density;\n                            return (\n                                <source\n                                    type={type}\n                                    srcSet={`${src} ${srcParam}`}\n                                    media={`${mediaCondition} ${slotWidth}`}\n                                    width={srcWidth}\n                                    height={srcHeight}\n                                    key={src}\n                                />\n                            );\n                        }\n                    )}\n                    <img width={width} height={height} loading={loading} src={src} alt={alt} />\n                </picture>\n                {!isLoaded && (\n                    <SkeletonShape width={width} height={height} className={classes.skeleton} />\n                )}\n            </div>\n        );\n    }\n);\n\nPicture.displayName = 'Picture';\n"],"names":["Picture","forwardRef","className","alt","src","sources","width","height","loading","nativeProps","ref","isLoaded","setLoaded","useState","handleLoad","useCallback","jsxs","classes","classNames","mediaCondition","density","intrinsicWidth","slotWidth","type","srcWidth","srcHeight","srcParam","jsx","SkeletonShape"],"mappings":"8PAwGaA,EAAUC,EAAAA,WACnB,CAAC,CAAC,UAAAC,EAAW,IAAAC,EAAK,IAAAC,EAAK,QAAAC,EAAS,MAAAC,EAAO,OAAAC,EAAQ,QAAAC,EAAU,OAAQ,GAAGC,CAAA,EAAcC,IAAQ,CACtF,KAAM,CAACC,EAAUC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAaC,EAAAA,YAAY,IAAM,CACjCH,EAAU,EAAI,CAClB,EAAG,CAAA,CAAE,EACL,OACII,EAAAA,KAAC,MAAA,CAAI,UAAWC,EAAAA,QAAQ,QACpB,SAAA,CAAAD,EAAAA,KAAC,UAAA,CACI,GAAGP,EACJ,UAAWS,EACPD,EAAAA,QAAQ,QACR,CAAC,CAACA,EAAAA,QAAQ,OAAO,EAAG,CAACN,CAAA,EACrBT,CAAA,EAEJ,IAAAQ,EACA,OAAQI,EACP,SAAA,CAAAT,GAAS,IACN,CAAC,CACG,IAAAD,EACA,eAAAe,EACA,QAAAC,EAAU,KACV,eAAAC,EACA,UAAAC,EAAY,GACZ,KAAAC,EACA,MAAOC,EACP,OAAQC,CAAA,IACN,CACF,MAAMC,EAAWL,GAAkBD,EACnC,OACIO,EAAAA,IAAC,SAAA,CACG,KAAAJ,EACA,OAAQ,GAAGnB,CAAG,IAAIsB,CAAQ,GAC1B,MAAO,GAAGP,CAAc,IAAIG,CAAS,GACrC,MAAOE,EACP,OAAQC,CAAA,EACHrB,CAAA,CAGjB,CAAA,QAEH,MAAA,CAAI,MAAAE,EAAc,OAAAC,EAAgB,QAAAC,EAAkB,IAAAJ,EAAU,IAAAD,CAAA,CAAU,CAAA,CAAA,CAAA,EAE5E,CAACQ,GACEgB,EAAAA,IAACC,gBAAA,CAAc,MAAAtB,EAAc,OAAAC,EAAgB,UAAWU,EAAAA,QAAQ,QAAA,CAAU,CAAA,EAElF,CAER,CACJ,EAEAjB,EAAQ,YAAc"}