{"version":3,"sources":["components/SingleImage/validation.ts","components/SingleImage/StyledSingleImage.ts","components/SingleImage/index.tsx"],"names":["imageValidators","field","errorMessage","required","validators","isValidImage","Container","styled","div","Figure","figure","Image","SCImage","Figcaption","figcaption","theme","singleImage","color","spacing","m","IconWrapper","mq","IconContainer","svg","iconContainer","pathFillColor","TextWrapper","textBody2","textWrapper","textBody1","Title","span","Caption","Credit","credit","compose","withEditMode","withDataSourceValidation","rendering","editMode","showEmdash","fields","image","imageAlt","value","alt","imageSrc","src","imageCaption","caption","imageCaptionWithoutHtml","stripHTML","trim","imageCredit","imageTitle","title","imageClass","class","showIcon","Boolean","uid","defaultImageSize","getImageAttrsByRatio","ImageSize","MW_384","ImageRatio","Ratio_16By9","description","heading","headingLevel","params","className","id","HeadingWithDescription","descriptionField","headingField","imagePlaceholderSrc","convertSrcJss","MW_768","createSrcSet","MW_640","MW_1024","Icon","name","ariaHidden","Text"],"mappings":"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","file":"static/js/SingleImage.1701c013.chunk.js","sourcesContent":["import { SitecoreFieldValidator } from '_utils/validationChecks/definitions';\r\nimport { isValidImage } from '_utils/validationChecks';\r\n\r\nexport const imageValidators: SitecoreFieldValidator[] = [\r\n  {\r\n    field: 'rendering.fields.image',\r\n    errorMessage: 'An image is required and alt text must be provided',\r\n    required: true,\r\n    validators: [\r\n      isValidImage\r\n    ]\r\n  }\r\n];\r\n","import styled from 'styled-components';\r\nimport { spacing } from '_utils/props';\r\nimport { mq, svg, textBody1, textBody2 } from '_utils/styles';\r\nimport { Image as SCImage } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nexport const Container = styled.div`\r\n  position: relative;\r\n  width: 100%;\r\n`;\r\n\r\nexport const Figure = styled.figure`\r\n  width: 100%;\r\n  margin: 0;\r\n`;\r\nexport const Image = styled(SCImage)`\r\n  width: 100%;\r\n  height: auto;\r\n\r\n  // limit width of placeholder\r\n  &[data-empty='true'] {\r\n    max-width: 450px;\r\n  }\r\n`;\r\n\r\nexport const Figcaption = styled.figcaption`\r\n  display:flex;\r\n  color: ${({ theme }) => theme.singleImage.figcaption.color};\r\n  ${({ theme }) => spacing({ theme, m: '8px 0' })};\r\n`;\r\n\r\nexport const IconWrapper = styled.div`\r\n  display: none;\r\n  flex: 0 0 auto;\r\n  padding: 0 10px 0 0;\r\n\r\n  ${mq('md')} {\r\n    display: flex;\r\n  }\r\n`;\r\nexport const IconContainer = styled.div`\r\n  ${svg(20, 20)};\r\n  width: 20px;\r\n  path {\r\n    fill: ${({ theme }) => theme.singleImage.iconContainer.pathFillColor};\r\n  }\r\n`;\r\n\r\nexport const TextWrapper = styled.div`\r\n  ${textBody2}\r\n  ${({ theme }) => theme.singleImage.textWrapper};\r\n  flex: 1 1 0px;\r\n\r\n  ${mq('md')} {\r\n    ${textBody1}\r\n  }\r\n`;\r\nexport const Title = styled.span`\r\n  font-weight: bold;\r\n`;\r\n\r\nexport const Caption = styled.span``;\r\n\r\nexport const Credit = styled.span`\r\n  color: ${({ theme }) => theme.singleImage.credit.color};\r\n  padding: 0 0 0 6px;\r\n`;\r\n","import { compose } from 'ramda';\r\nimport React from 'react';\r\nimport { Text } from '@sitecore-jss/sitecore-jss-react';\r\n\r\nimport { withDataSourceValidation, withEditMode } from '_containers/BaseComponent';\r\nimport Icon from '_components/Icon';\r\nimport HeadingWithDescription from '_utils/components/HeadingWithDescription';\r\nimport { stripHTML } from '_utils/helpers/html';\r\nimport { convertSrcJss, createSrcSet } from '_utils/media';\r\nimport { getImageAttrsByRatio } from '_utils/helpers/image';\r\nimport { imagePlaceholderSrc } from '_utils/styles';\r\nimport { ImageSize, ImageRatio } from '_utils/types/enums';\r\n\r\nimport {\r\n  SingleImageProps\r\n}\r\n  from './definitions';\r\nimport { imageValidators } from './validation';\r\n\r\nimport {\r\n  Caption,\r\n  Container,\r\n  Credit,\r\n  Figcaption,\r\n  Figure,\r\n  IconContainer,\r\n  IconWrapper,\r\n  Image,\r\n  TextWrapper,\r\n  Title\r\n} from './StyledSingleImage';\r\n\r\nconst SingleImage: React.FC<SingleImageProps> = ({ rendering, editMode }) => {\r\n  let showEmdash = null;\r\n  const fields = rendering?.fields;\r\n  const image = fields?.image;\r\n  const imageAlt = image?.value?.alt ?? '';\r\n  const imageSrc = image?.value?.src;\r\n  const imageCaption = fields?.caption;\r\n  const imageCaptionWithoutHtml = stripHTML(imageCaption?.value)?.trim();\r\n  const imageCredit = fields?.credit;\r\n  const imageTitle = fields?.title;\r\n  const imageClass = image?.value?.class || null;\r\n  const showIcon = Boolean(imageCaptionWithoutHtml || imageCredit?.value || imageTitle?.value);\r\n  const uid = rendering?.uid;\r\n  const defaultImageSize = getImageAttrsByRatio(ImageSize.MW_384, ImageRatio.Ratio_16By9);\r\n\r\n  // HeadingWithDescription fields\r\n  const description = fields?.description\r\n  const heading = fields?.heading;\r\n  const headingLevel = rendering?.params?.headingLevel || 'h3';\r\n\r\n  if (editMode || (imageTitle?.value?.trim() && (imageCaptionWithoutHtml || imageCredit?.value?.trim()))) {\r\n    showEmdash = ' - ';\r\n  }\r\n\r\n  return (\r\n    <Container\r\n      className=\"single-image\"\r\n      data-component\r\n      id={uid}\r\n    >\r\n\r\n      {(heading || description) && (\r\n        <HeadingWithDescription\r\n          descriptionField={description}\r\n          headingField={heading}\r\n          headingLevel={headingLevel}\r\n        />\r\n      )}\r\n\r\n      <Figure>\r\n        <Image\r\n          data-empty={imageClass === 'scEmptyImage'}\r\n          className=\"lazyload\"\r\n          field={editMode ? image : {\r\n            value: {\r\n              src: imagePlaceholderSrc,\r\n              alt: imageAlt === ' ' ? '' : imageAlt,\r\n              'data-src': `${convertSrcJss(imageSrc, ImageSize.MW_768)}`,\r\n              'data-srcset': createSrcSet(imageSrc, [ImageSize.MW_384, ImageSize.MW_640, ImageSize.MW_768, ImageSize.MW_1024])\r\n            }\r\n          }}\r\n          {...defaultImageSize}\r\n        />\r\n        <Figcaption>\r\n          {showIcon && (\r\n            <IconWrapper>\r\n              <IconContainer>\r\n                <Icon name=\"photo_camera\" ariaHidden={true} />\r\n              </IconContainer>\r\n            </IconWrapper>\r\n          )}\r\n          <TextWrapper>\r\n            {(editMode || imageTitle?.value) && <Title><Text field={imageTitle} /></Title>}\r\n            {showEmdash}\r\n            {(editMode || imageCaption?.value) && <Caption><Text field={editMode ? imageCaption : { value: imageCaptionWithoutHtml }} /></Caption>}\r\n            {(editMode || imageCredit?.value) && <Credit><Text field={imageCredit} /></Credit>}\r\n          </TextWrapper>\r\n        </Figcaption>\r\n      </Figure>\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default compose(withEditMode, withDataSourceValidation(imageValidators))(SingleImage);\r\n"],"sourceRoot":""}