{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Image/ImageTextBlock.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/Image/ImageBlock.tsx","webpack:///./Avensia.Common/Features/Shared/BoxLayout/index.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/PaddedBlock.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","SPACING_DEFAULT","SPACING_MOBILE","BOX_ITEM_CLASSNAME","fractions","spacingDefaulter","value","Tiny","isThin","fraction","Column","flexDirection","flexGrow","minWidth","Block","sort","entities","a","b","render","children","Children","toArray","this","row","allowSorting","Small","map","entry","element","shift","columns","Micro","reduce","current","item","convert","layout","spacingBetweenBlocks","flexWrap","wrap","entity","index","isColumn","key","flexBasis","Component","BoxLayout"],"mappings":"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","file":"assets/27.chunk.1d69c4ed552875b151db.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","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport connect from '../connect';\r\nimport { Breakpoint } from '@avensia/scope';\r\nimport * as style from '../Style';\r\n\r\nexport const SPACING_DEFAULT = style.pixelsToUnit(25);\r\nexport const SPACING_MOBILE = style.pixelsToUnit(15);\r\nexport const BOX_CLASSNAME = 'purefun-box';\r\nexport const BOX_ITEM_CLASSNAME = 'purefun-box-item';\r\n\r\nconst fractions = {\r\n  '1:2': 1 / 2,\r\n  '1:3': 1 / 3,\r\n  '1:4': 1 / 4,\r\n  '2:3': 2 / 3,\r\n  '3:4': 3 / 4,\r\n};\r\n\r\nexport type LayoutAliasType = keyof typeof fractions;\r\n\r\ntype LayoutColumnType = LayoutAliasType[] & {\r\n  0: LayoutAliasType;\r\n  1: LayoutAliasType[] & {\r\n    0: LayoutAliasType;\r\n    1: LayoutAliasType;\r\n  };\r\n};\r\n\r\nexport type LayoutType = LayoutAliasType | LayoutColumnType;\r\n\r\nfunction spacingDefaulter(value: boolean | string, currentBreakpoint: number) {\r\n  return value === true ? (currentBreakpoint > Breakpoint.Tiny ? SPACING_DEFAULT : SPACING_MOBILE) : value;\r\n}\r\n\r\nfunction isThin(fraction: number) {\r\n  return fraction <= 1 / 3;\r\n}\r\n\r\nconst Column = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  flexGrow: 1,\r\n  minWidth: 0,\r\n});\r\n\r\nconst Block = styled.div({\r\n  flexGrow: 1,\r\n  minWidth: 0,\r\n});\r\n\r\ntype BlockEntityType = {\r\n  fraction: number;\r\n  element: React.ReactNode;\r\n};\r\n\r\ntype ColumnEntityType = {\r\n  fraction: number;\r\n  columns: BlockEntityType[];\r\n};\r\n\r\nfunction sort(entities: BlockEntityType[]) {\r\n  return entities.sort((a, b) => b.fraction - a.fraction);\r\n}\r\n\r\nfunction convert(\r\n  row: LayoutType[],\r\n  children: React.ReactNode[],\r\n  currentBreakpoint: number,\r\n  allowSorting?: boolean,\r\n  ): (BlockEntityType | ColumnEntityType)[] {\r\n  if (currentBreakpoint > Breakpoint.Small) {\r\n    return row.map(entry => {\r\n      if (typeof entry === 'string') {\r\n        return {\r\n          fraction: fractions[entry],\r\n          element: children.shift(),\r\n        };\r\n      }\r\n\r\n      return {\r\n        fraction: fractions[entry[0]],\r\n        columns: entry[1].map(entry => ({\r\n          fraction: fractions[entry],\r\n          element: children.shift(),\r\n        })),\r\n      };\r\n    });\r\n  }\r\n\r\n  // Flatten all blocks to full or half width\r\n  if (currentBreakpoint > Breakpoint.Micro) {\r\n    const entities = row.reduce<BlockEntityType[]>((current, item) => {\r\n      if (typeof item === 'string') {\r\n        return [\r\n          ...current,\r\n          {\r\n            fraction: isThin(fractions[item]) ? 0.5 : 1,\r\n            element: children.shift(),\r\n          },\r\n        ];\r\n      }\r\n\r\n      const value = isThin(fractions[item[0]]) ? 0.5 : 1;\r\n      return [\r\n        ...current,\r\n        ...item[1].map(() => ({\r\n          fraction: value,\r\n          element: children.shift(),\r\n        })),\r\n      ];\r\n    }, []);\r\n\r\n    return allowSorting ? sort(entities) : entities;\r\n  }\r\n\r\n  // Flatten all blocks to full width\r\n  const entities = row.reduce<BlockEntityType[]>(\r\n    (current, entry) =>\r\n      typeof entry === 'string'\r\n        ? [\r\n          ...current,\r\n          {\r\n            fraction: 1,\r\n            element: children.shift(),\r\n          },\r\n        ]\r\n        : [\r\n          ...current,\r\n          ...entry[1].map(() => ({\r\n            fraction: 1,\r\n            element: children.shift(),\r\n          })),\r\n        ],\r\n    [],\r\n  );\r\n\r\n  return allowSorting ? sort(entities) : entities;\r\n}\r\n\r\nfunction isColumn(entity: BlockEntityType | ColumnEntityType): entity is ColumnEntityType {\r\n  return 'columns' in entity;\r\n}\r\n\r\nfunction wrap(spacingBetweenBlocks: boolean | string, currentBreakpoint: number) {\r\n  const spacing = spacingDefaulter(spacingBetweenBlocks, currentBreakpoint);\r\n  return (entity: BlockEntityType | ColumnEntityType, index: number): React.ReactNode => {\r\n    return isColumn(entity) ? (\r\n      <Column\r\n        key={index}\r\n        css={{\r\n          flexBasis: `${entity.fraction * 100}%`,\r\n        }}\r\n      >\r\n        {entity.columns.map(wrap(spacingBetweenBlocks, currentBreakpoint))}\r\n      </Column>\r\n    ) : (\r\n        <Block\r\n          key={index}\r\n          css={{\r\n            ...(spacing && {\r\n              padding: {\r\n                xy: `calc(${spacing} / 2)`,\r\n              },\r\n            }),\r\n            flexBasis: spacing ? `calc(${entity.fraction * 100}% - ${spacing})` : `${entity.fraction * 100}%`,\r\n          }}\r\n        >\r\n          {entity.element}\r\n        </Block>\r\n      );\r\n  };\r\n}\r\n\r\ntype RequiredPropType = {\r\n  layout: LayoutType[];\r\n  spacingBetweenBlocks?: boolean | string;\r\n  allowSorting?: boolean;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n};\r\n\r\ntype ConnectStateType = {\r\n  currentBreakpoint: number;\r\n};\r\n\r\ntype PropType = StyledProps & RequiredPropType & ConnectStateType;\r\n\r\nclass BoxLayout extends React.Component<PropType> {\r\n  render() {\r\n    const children = React.Children.toArray(this.props.children);\r\n    const entities = convert(this.props.layout, children, this.props.currentBreakpoint, this.props.allowSorting);\r\n    const spacing = spacingDefaulter(this.props.spacingBetweenBlocks, this.props.currentBreakpoint);\r\n    return (\r\n      <styled.Div\r\n        css={{\r\n          display: 'flex',\r\n          flexWrap: 'wrap',\r\n          ...(spacing && {\r\n            margin: {\r\n              xy: `calc(-${spacing} / 2)`,\r\n            },\r\n          }),\r\n          ...(this.props.currentBreakpoint > Breakpoint.Small && {\r\n            flexWrap: 'nowrap',\r\n          }),\r\n        }}\r\n        className={BOX_CLASSNAME}\r\n      >\r\n        {entities.map(wrap(this.props.spacingBetweenBlocks, this.props.currentBreakpoint))}\r\n      </styled.Div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n\r\nexport default styled(\r\n  connect(\r\n    (state): ConnectStateType => ({\r\n      currentBreakpoint: state.currentBreakpoint,\r\n    }),\r\n  )(BoxLayout),\r\n);\r\n","import { styled } from '@glitz/react';\r\nimport { minTinyMediaQuery, minLargeMediaQuery, pixelsToUnit } from 'Shared/Style';\r\nimport { SPACING_DEFAULT, SPACING_MOBILE } from 'Shared/BoxLayout';\r\n\r\nexport default styled({\r\n  marginTop: SPACING_MOBILE,\r\n  [minLargeMediaQuery]: {\r\n    marginTop: pixelsToUnit(40),\r\n  },\r\n  [minTinyMediaQuery]: {\r\n    marginTop: SPACING_DEFAULT,\r\n  },\r\n});\r\n"],"sourceRoot":""}