{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/MobileRowLayout/index.tsx"],"names":["state","currentBreakpoint","props","promotionImpression","isMobile","spacingBetween","spacingBetweenBlocks","imageStyle","objectFit","noPlacementSelected1","textPlacementBottom","textPlacementTop","bothPlacementSelected1","centeredText1","noPlacementSelected2","textPlacementBottom2","textPlacementTop2","bothPlacementSelected2","centeredText2","noPlacementSelected3","textPlacementBottom3","textPlacementTop3","bothPlacementSelected3","centeredText3","textStyle1","position","top","bottom","left","transform","fontWeight","textAlign","color","textColorHexcode1","fontSize","fontSize1","textStyle2","textColorHexcode2","fontSize2","textStyle3","textColorHexcode3","fontSize3","Container","imageUrl1","LinkStyled","css","padding","x","y","to","linkUrl1","ImageStyled","src","url","alt","altText1","ratio","OneToOne","onClick","lazy","ImageText","textInImage1","imageUrl2","linkUrl2","altText2","textInImage2","imageUrl3","linkUrl3","altText3","textInImage3","flexGrow","height","paddingLeft","div","display","width"],"mappings":"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","file":"assets/64.chunk.4488cf98f055583c7448.js","sourcesContent":["/**\r\n * @ComponentFor MobileRowLayout\r\n */\r\n\r\nimport React, { useEffect } from 'react';\r\nimport { epiPropertyValue } from '@avensia/scope-episerver';\r\nimport { styled } from '@glitz/react';\r\nimport connect from 'Shared/connect';\r\nimport MobileRowLayout from './MobileRowLayout.type';\r\nimport Image, { Ratio } from 'Shared/Image/Ratio';\r\nimport { pixelsToUnit, white } from 'Shared/Style';\r\nimport Link from 'Shared/Link';\r\nimport { Style } from '@glitz/type';\r\nimport { trackPromotionImpression, trackPromotionClick } from 'TrackingInformation';\r\n\r\ntype ConnectStateType = {\r\n  currentBreakpoint: number;\r\n};\r\n\r\ntype PropType = MobileRowLayout & ConnectStateType;\r\n\r\nconst MobileRowLayout = (props: PropType) => {\r\n  useEffect(() => {\r\n    trackPromotionImpression(props.promotionImpression);\r\n  }, []);\r\n\r\n  const trackPromoClick = () => trackPromotionClick(props.promotionImpression);\r\n\r\n  const isMobile = props.currentBreakpoint < 4;\r\n  const spacingBetween = epiPropertyValue(props.spacingBetweenBlocks);\r\n  const imageStyle: Style = { objectFit: 'cover' };\r\n\r\n  const noPlacementSelected1 =\r\n    !epiPropertyValue(props.textPlacementBottom) && !epiPropertyValue(props.textPlacementTop);\r\n  const bothPlacementSelected1 =\r\n    epiPropertyValue(props.textPlacementBottom) && epiPropertyValue(props.textPlacementTop);\r\n  const centeredText1 = noPlacementSelected1 || bothPlacementSelected1;\r\n\r\n  const noPlacementSelected2 =\r\n    !epiPropertyValue(props.textPlacementBottom2) && !epiPropertyValue(props.textPlacementTop2);\r\n  const bothPlacementSelected2 =\r\n    epiPropertyValue(props.textPlacementBottom2) && epiPropertyValue(props.textPlacementTop2);\r\n  const centeredText2 = noPlacementSelected2 || bothPlacementSelected2;\r\n\r\n  const noPlacementSelected3 =\r\n    !epiPropertyValue(props.textPlacementBottom3) && !epiPropertyValue(props.textPlacementTop3);\r\n  const bothPlacementSelected3 =\r\n    epiPropertyValue(props.textPlacementBottom3) && epiPropertyValue(props.textPlacementTop3);\r\n  const centeredText3 = noPlacementSelected3 || bothPlacementSelected3;\r\n\r\n  const textStyle1: Style = {\r\n    position: 'absolute',\r\n    top: centeredText1 ? '50%' : epiPropertyValue(props.textPlacementTop) ? pixelsToUnit(20) : 'unset',\r\n    bottom: centeredText1 ? 'unset' : epiPropertyValue(props.textPlacementBottom) ? 0 : 'unset',\r\n    left: '50%',\r\n    transform: 'translate(-50%, -50%)',\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n    color: !!epiPropertyValue(props.textColorHexcode1) ? epiPropertyValue(props.textColorHexcode1) : white,\r\n    fontSize: epiPropertyValue(props.fontSize1) + 'vw',\r\n  };\r\n\r\n  const textStyle2: Style = {\r\n    position: 'absolute',\r\n    top: centeredText2 ? '50%' : epiPropertyValue(props.textPlacementTop2) ? pixelsToUnit(20) : 'unset',\r\n    bottom: centeredText2 ? 'unset' : epiPropertyValue(props.textPlacementBottom2) ? 0 : 'unset',\r\n    left: '50%',\r\n    transform: 'translate(-50%, -50%)',\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n    color: !!epiPropertyValue(props.textColorHexcode2) ? epiPropertyValue(props.textColorHexcode2) : white,\r\n    fontSize: epiPropertyValue(props.fontSize2) + 'vw',\r\n  };\r\n\r\n  const textStyle3: Style = {\r\n    position: 'absolute',\r\n    top: centeredText3 ? '50%' : epiPropertyValue(props.textPlacementTop3) ? pixelsToUnit(20) : 'unset',\r\n    bottom: centeredText3 ? 'unset' : epiPropertyValue(props.textPlacementBottom3) ? 0 : 'unset',\r\n    left: '50%',\r\n    transform: 'translate(-50%, -50%)',\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n    color: !!epiPropertyValue(props.textColorHexcode3) ? epiPropertyValue(props.textColorHexcode3) : white,\r\n    fontSize: epiPropertyValue(props.fontSize3) + 'vw',\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {isMobile && (\r\n        <Container>\r\n          {!!epiPropertyValue(props.imageUrl1) && (\r\n            <LinkStyled\r\n              css={spacingBetween && { padding: { x: pixelsToUnit(5), y: 0 } }}\r\n              to={epiPropertyValue(props.linkUrl1)}\r\n            >\r\n              <ImageStyled\r\n                src={epiPropertyValue(props.imageUrl1).url}\r\n                alt={epiPropertyValue(props.altText1)}\r\n                ratio={Ratio.OneToOne}\r\n                imageStyle={imageStyle}\r\n                onClick={trackPromoClick}\r\n                lazy\r\n              />\r\n              <ImageText css={textStyle1}>\r\n                {!!epiPropertyValue(props.textInImage1) && epiPropertyValue(props.textInImage1)}\r\n              </ImageText>\r\n            </LinkStyled>\r\n          )}\r\n          {!!epiPropertyValue(props.imageUrl2) && (\r\n            <LinkStyled\r\n              to={epiPropertyValue(props.linkUrl2)}\r\n              css={spacingBetween && { padding: { x: pixelsToUnit(5), y: 0 } }}\r\n            >\r\n              <ImageStyled\r\n                src={epiPropertyValue(props.imageUrl2).url}\r\n                alt={epiPropertyValue(props.altText2)}\r\n                ratio={Ratio.OneToOne}\r\n                imageStyle={imageStyle}\r\n              />\r\n\r\n              <ImageText css={textStyle2}>\r\n                {!!epiPropertyValue(props.textInImage2) && epiPropertyValue(props.textInImage2)}\r\n              </ImageText>\r\n              <ImageText css={textStyle2}>\r\n                {!!epiPropertyValue(props.textInImage2) && epiPropertyValue(props.textInImage2)}\r\n              </ImageText>\r\n            </LinkStyled>\r\n          )}\r\n          {!!epiPropertyValue(props.imageUrl3) && (\r\n            <LinkStyled\r\n              to={epiPropertyValue(props.linkUrl3)}\r\n              css={spacingBetween && { padding: { x: pixelsToUnit(5), y: 0 } }}\r\n            >\r\n              <ImageStyled\r\n                src={epiPropertyValue(props.imageUrl3).url}\r\n                alt={epiPropertyValue(props.altText3)}\r\n                ratio={Ratio.OneToOne}\r\n                imageStyle={imageStyle}\r\n              />\r\n              <ImageText css={textStyle3}>\r\n                {!!epiPropertyValue(props.textInImage3) && epiPropertyValue(props.textInImage3)}\r\n              </ImageText>\r\n            </LinkStyled>\r\n          )}\r\n        </Container>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default connect(\r\n  (state): ConnectStateType => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  }),\r\n)(MobileRowLayout);\r\n\r\nconst ImageStyled = styled(Image, {\r\n  flexGrow: 1,\r\n  height: 'auto',\r\n  paddingLeft: pixelsToUnit(10),\r\n});\r\n\r\nconst LinkStyled = styled(Link, {\r\n  flexGrow: 1,\r\n  position: 'relative',\r\n});\r\n\r\nconst ImageText = styled.div({\r\n  position: 'absolute',\r\n  top: '50%',\r\n  left: '50%',\r\n  transform: 'translate(-50%, -50%)',\r\n  fontWeight: 'bold',\r\n  textAlign: 'center',\r\n});\r\n\r\nconst Container = styled.div({\r\n  display: 'flex',\r\n  width: '100%',\r\n});\r\n"],"sourceRoot":""}