{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Image/ImageTextBlock.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/Image/ImageBlock.tsx"],"names":["sizes","largest","mid","smallest","sizeStyling","header","fontSize","content","marginTop","marginBottom","spacing","padding","y","x","TextWrapper","div","textAlign","position","left","right","margin","bottom","TextInnerWrapper","maxWidth","display","width","TextHeader","h2","color","lineHeight","textTransform","TextContent","p","ActionButton","Button","border","xy","style","font","family","size","weight","letterSpacing","props","title","text","linkUrl","buttonText","currentBreakpoint","currentBreakPoint","isMobile","Medium","estimatedWidth","getEstimatedSizes","buttonStyling","backgroundColor","buttonBackgroundColor","theme","buttonSecondaryBackgroundColor","buttonTextColor","buttonSecondaryTextColor","buttonBackgroundHoverColor","buttonSecondaryHoverBackgroundColor","css","wrapper","Large","to","appearance","Secondary","Wrapper","connect","state","block","titleContent","textContent","button","backgroundColorTransparent","imageBackgroundColorTransparent","textComponent","ImageTextBlock","url","promotionImpression","imageComponent","Image","onClick","objectFit","src","imageUrl","alt","altText","lazy","Div","compose","className","RedirectWrapper","Link","cursor"],"mappings":"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","file":"assets/60.chunk.562ac6ca136396dec176.js","sourcesContent":["import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { Breakpoint } from '@avensia/scope';\r\nimport { epsilon, beta, alpha, tiny, large, huge, gamma, kappa, pixelsToUnit, white } from 'Shared/Style';\r\nimport Button, { Appearance as ButtonAppearance } from 'Shared/Button';\r\nimport { Style } from '@glitz/type';\r\n\r\ntype PropType = {\r\n  title: string;\r\n  text: string;\r\n  buttonText: string;\r\n  linkUrl: string;\r\n  width: string;\r\n  currentBreakpoint: number;\r\n  buttonBackgroundColor: string;\r\n  buttonBackgroundHoverColor: string;\r\n  buttonTextColor: string;\r\n};\r\n\r\nconst sizes = {\r\n  largest: 5,\r\n  mid: 4,\r\n  smallest: 3,\r\n};\r\n\r\nconst sizeStyling = {\r\n  header: {\r\n    [sizes.smallest]: { fontSize: epsilon },\r\n    [sizes.mid]: { fontSize: beta },\r\n    [sizes.largest]: { fontSize: alpha },\r\n  },\r\n  content: {\r\n    [sizes.smallest]: { fontSize: kappa, marginTop: tiny, marginBottom: tiny },\r\n    [sizes.mid]: { fontSize: epsilon, marginTop: large, marginBottom: large },\r\n    [sizes.largest]: { fontSize: gamma, marginTop: huge, marginBottom: huge },\r\n  },\r\n  spacing: {\r\n    [sizes.smallest]: { padding: { y: large, x: large } },\r\n    [sizes.mid]: { padding: { y: large, x: large } },\r\n    [sizes.largest]: { padding: { y: huge, x: huge } },\r\n  },\r\n};\r\n\r\nconst TextWrapper = styled.div({\r\n  textAlign: 'center',\r\n  position: 'absolute',\r\n  left: '0',\r\n  right: '0',\r\n  margin: {\r\n    y: 0,\r\n    x: 'auto',\r\n  },\r\n  bottom: '0',\r\n});\r\n\r\nconst TextInnerWrapper = styled.div({\r\n  maxWidth: pixelsToUnit(780),\r\n  display: 'inline-block',\r\n  width: '100%',\r\n});\r\n\r\nconst TextHeader = styled.h2({\r\n  color: white,\r\n  lineHeight: 'normal',\r\n  textTransform: 'uppercase',\r\n});\r\n\r\nconst TextContent = styled.p({\r\n  color: white,\r\n});\r\n\r\nconst ActionButton = styled(Button, {\r\n  border: {\r\n    xy: {\r\n      style: 'none',\r\n    },\r\n  },\r\n  font: {\r\n    family: '\"Nunito\", \"PT Sans\", \"sans-serif\"',\r\n    size: epsilon,\r\n    weight: 600,\r\n  },\r\n  letterSpacing: pixelsToUnit(0.8),\r\n  padding: {\r\n    x: huge,\r\n  },\r\n});\r\n\r\nfunction getEstimatedSizes(currentBreakPoint: number, width: string) {\r\n  const isMobile = currentBreakPoint < Breakpoint.Medium;\r\n  let estimatedWidth = isMobile ? sizes.mid : sizes.largest;\r\n  switch (width) {\r\n    case '1:2':\r\n      estimatedWidth = isMobile ? sizes.mid : sizes.mid;\r\n      break;\r\n    case '1:3':\r\n      estimatedWidth = isMobile ? sizes.smallest : sizes.mid;\r\n      break;\r\n    case '2:3':\r\n      estimatedWidth = isMobile ? sizes.mid : sizes.largest;\r\n      break;\r\n    case '1:4':\r\n      estimatedWidth = isMobile ? sizes.mid : sizes.smallest;\r\n      break;\r\n    case '3:4':\r\n      estimatedWidth = isMobile ? sizes.mid : sizes.largest;\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n  return estimatedWidth;\r\n}\r\n\r\nexport default (props: PropType) => {\r\n  const { title, text, linkUrl, buttonText, currentBreakpoint, width } = props;\r\n  const size = title || text || buttonText ? getEstimatedSizes(currentBreakpoint, width) : 0;\r\n  const buttonStyling: Style = {\r\n    backgroundColor: !!props.buttonBackgroundColor\r\n      ? props.buttonBackgroundColor\r\n      : (theme) => theme.buttonSecondaryBackgroundColor,\r\n    color: !!props.buttonTextColor ? props.buttonTextColor : (theme) => theme.buttonSecondaryTextColor,\r\n    ':hover': {\r\n      backgroundColor: !!props.buttonBackgroundHoverColor\r\n        ? props.buttonBackgroundHoverColor\r\n        : (theme) => theme.buttonSecondaryHoverBackgroundColor,\r\n    },\r\n  };\r\n  const css = {\r\n    wrapper: {\r\n      width: size ? '100%' : '0',\r\n      ...sizeStyling.spacing[size],\r\n    },\r\n    header: {\r\n      letterSpacing: size < Breakpoint.Large ? pixelsToUnit(0.9) : pixelsToUnit(1.2),\r\n      ...sizeStyling.header[size],\r\n    },\r\n    content: {\r\n      lineHeight: size < Breakpoint.Large ? '1.44' : '1.45',\r\n      letterSpacing: size < Breakpoint.Large ? pixelsToUnit(0.6) : pixelsToUnit(0.7),\r\n      ...sizeStyling.content[size],\r\n    },\r\n  };\r\n  return (\r\n    <TextWrapper css={css.wrapper}>\r\n      <TextInnerWrapper>\r\n        <TextHeader css={css.header}>{title}</TextHeader>\r\n        <TextContent css={css.content}>{text}</TextContent>\r\n        {linkUrl && buttonText && (\r\n          <ActionButton to={linkUrl} css={buttonStyling} appearance={ButtonAppearance.Secondary}>\r\n            {buttonText}\r\n          </ActionButton>\r\n        )}\r\n      </TextInnerWrapper>\r\n    </TextWrapper>\r\n  );\r\n};\r\n","/**\r\n * @ComponentFor ImageBlockViewModel\r\n */\r\nimport React, { useEffect } from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { epiPropertyValue } from '@avensia/scope-episerver';\r\nimport connect from 'Shared/connect';\r\nimport { BOX_ITEM_CLASSNAME } from 'Shared/BoxLayout';\r\nimport Image from '../../Image';\r\nimport ImageBlockPropType from './ImageBlockViewModel.type';\r\nimport ImageTextBlock from './ImageTextBlock';\r\nimport padStyled from 'Shared/Blocks/PaddedBlock';\r\nimport Link from 'Shared/Link';\r\nimport { trackPromotionImpression, trackPromotionClick } from 'TrackingInformation';\r\n\r\ntype RequieredProps = ImageBlockPropType;\r\n\r\ntype ConnectedProps = {\r\n  currentBreakpoint: number;\r\n};\r\n\r\ntype Props = RequieredProps & ConnectedProps & StyledProps;\r\n\r\nconst ImageBlock = (props: Props) => {\r\n  const { currentBreakpoint } = props;\r\n  const linkUrl = epiPropertyValue(props.block.linkUrl);\r\n  const titleContent = epiPropertyValue(props.block.title);\r\n  const textContent = epiPropertyValue(props.block.text);\r\n  const buttonText = epiPropertyValue(props.block.button);\r\n  const buttonTextColor = epiPropertyValue(props.block.buttonTextColor);\r\n  const buttonBackgroundColor = epiPropertyValue(props.block.buttonBackgroundColor);\r\n  const buttonBackgroundHoverColor = epiPropertyValue(props.block.buttonBackgroundHoverColor);\r\n  const backgroundColorTransparent = epiPropertyValue(props.block.imageBackgroundColorTransparent);\r\n  const textComponent = (\r\n    <ImageTextBlock\r\n      title={titleContent}\r\n      text={textContent}\r\n      buttonText={buttonText}\r\n      linkUrl={linkUrl && linkUrl.url}\r\n      width={props.width}\r\n      currentBreakpoint={currentBreakpoint}\r\n      buttonTextColor={buttonTextColor}\r\n      buttonBackgroundColor={buttonBackgroundColor}\r\n      buttonBackgroundHoverColor={buttonBackgroundHoverColor}\r\n    />\r\n  );\r\n\r\n  useEffect(() => {\r\n    trackPromotionImpression(props.block.promotionImpression);\r\n  }, []);\r\n\r\n  const trackPromoClick = () => trackPromotionClick(props.block.promotionImpression);\r\n\r\n  const imageComponent = (\r\n    <Image\r\n      onClick={trackPromoClick}\r\n      css={{\r\n        display: 'block',\r\n        objectFit: 'cover',\r\n        width: '100%',\r\n        backgroundColor: backgroundColorTransparent ? 'transparent' : 'white',\r\n      }}\r\n      src={epiPropertyValue(props.block.imageUrl).url}\r\n      alt={epiPropertyValue(props.block.altText)}\r\n      lazy\r\n    />\r\n  );\r\n\r\n  return (\r\n    <styled.Div css={props.compose()} className={BOX_ITEM_CLASSNAME}>\r\n      {linkUrl ? (\r\n        <Wrapper>\r\n          <RedirectWrapper to={linkUrl.url}>\r\n            {imageComponent}\r\n            {textComponent}\r\n          </RedirectWrapper>\r\n        </Wrapper>\r\n      ) : (\r\n        <Wrapper>\r\n          {imageComponent}\r\n          {textComponent}\r\n        </Wrapper>\r\n      )}\r\n    </styled.Div>\r\n  );\r\n};\r\n\r\nexport default connect((state) => ({\r\n  currentBreakpoint: state.currentBreakpoint,\r\n}))(padStyled(ImageBlock));\r\n\r\nconst Wrapper = styled.div({\r\n  position: 'relative',\r\n  display: 'block',\r\n  textAlign: 'center',\r\n});\r\n\r\nconst RedirectWrapper = styled(Link, {\r\n  cursor: 'pointer',\r\n});\r\n"],"sourceRoot":""}