{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/CTABlock/index.tsx"],"names":["Wrap","marginBottom","WrapInner","background","size","position","Label","letterSpacing","textAlign","color","monochrome","white","Heading","alignItems","SmallSizeHeading","padding","x","SmallSizeOverlay","display","justifyContent","flexDirection","ButtonOverlay","top","bottom","gap","FullWidthGridWrap","height","FullWidthLabelWrap","div","alignSelf","FullWidthHeadingWrap","FullWidthSecondaryHeading","span","SmallSizeSecondaryHeading","CallToActionBlock","state","currentBreakpoint","props","isMobile","hasVideo","videoSources","length","fullWidth","width","layout","headingSize","D96_M40","D48_M32","D64_M32","backgroundImage","backgroundListImage","backgroundImageSmallScreen","firstBtnUrl","buttons","url","css","paddingTop","TwelveToTwentyThree","ThreeToFour","SixteenToNine","ThreeToTwo","cursor","onClick","e","targetElement","target","nodeName","parentElement","image","undefined","FullWidth","HalfWidth","borderRadius","autoPlay","loop","playsInline","coverContent","muted","sources","className","upperCase","label","fontSize","heading","headingSecondary","map","button","index","key","to","text","title","theme","TransparentWhite","WhiteToTransparent"],"mappings":"8OAoBMA,EAAO,YAAO,MAAgB,MACjC,UAAY,KAAuB,CAClCC,aAAc,O,IAIZC,EAAY,YAAO,IAAkB,CACzCC,WAAY,CACVC,KAAM,QACNC,SAAU,mBAIRC,EAAQ,YAAO,IAAgB,CACnCL,aAAc,OACdM,cAAe,SACfC,UAAW,SACXC,MAAO,IAAaC,WAAWC,QAG3BC,EAAU,YAAO,IAAI,CACzBJ,UAAW,SACXC,MAAO,IAAaC,WAAWC,MAC/BE,WAAY,WAGRC,EAAmB,YAAOF,EAAS,CACvCG,QAAS,CAAEC,EAAG,UAGVC,EAAmB,YAAO,IAAqB,CACnDC,QAAS,OACTC,eAAgB,SAChBN,WAAY,SACZO,cAAe,WAGXC,EAAgB,YAAO,MAAmB,GAC9CH,QAAS,OACTC,eAAgB,SAChBN,WAAY,WACZS,IAAK,OACLC,OAAQ,OACRC,IAAK,SACJ,UAAY,KAAsB,CACjCA,IAAK,Q,IAIHC,EAAoB,YAAO,IAAU,CACzCC,OAAQ,SAGJC,EAAqB,IAAOC,IAAI,CACpCC,UAAW,QAGPC,EAAuB,IAAOF,IAAI,CACtCC,UAAW,UAGPE,EAA4B,IAAOC,KAAK,CAC5Cd,QAAS,iBAGLe,EAA4B,IAAOD,KAAK,CAC5Cd,QAAS,UAGLgB,EAAoB,aAAQ,SAACC,GACjC,MAAO,CACLC,kBAAmBD,EAAMC,qBAFH,EAIvB,SAACC,G,UACIC,EAAW,YAAUD,EAAMD,mBAC3BG,GAA6B,QAAlB,EAAAF,EAAMG,oBAAY,eAAEC,QAAS,EACxCC,GAAaL,EAAMM,OAA0B,YAAjBN,EAAMO,OAElCC,EAAcH,EAAY,IAAeI,QAA4B,YAAjBT,EAAMO,OAAuB,IAAeG,QAAU,IAAeC,QACzHC,EAAkB,YAAmC,SAAjBZ,EAAMO,OAAoBP,EAAMa,oBAAsBb,EAAMY,gBAAiBZ,EAAMc,2BAA4Bb,GACnJc,EAAcf,EAAMgB,SAAWhB,EAAMgB,QAAQ,GAAGC,IAsBtD,OACE,kBAACtD,EAAI,CACHuD,IAAG,aACDC,WAAY,YAtBZlB,EACEI,EACK,IAAMe,oBAGR,IAAMC,YAGXhB,EACK,IAAMiB,cAGM,SAAjBtB,EAAMO,OACD,IAAMgB,WAGR,IAAMF,cAOLN,GAAe,CACjBS,OAAQ,YAGZC,QAAS,SAACC,GACR,GAAKX,EAAL,CAIA,IAAMY,EAAgBD,EAAEE,OACxB,GAA+B,MAA3BD,EAAcE,SAAlB,CAIA,GAA+B,SAA3BF,EAAcE,SAEhB,GAA8B,MADTF,EAAcG,cAClBD,SACf,OAIJ,YAAUd,OAGZ,kBAAClD,EAAS,CACRqD,IAAG,aACDpD,WAAY,CACViE,MAAQ7B,OAEJ8B,EADA,YAAkC,QAAhB,EAACpB,SAAe,eAAEK,IAAMZ,EAAY,IAAO4B,UAAY,IAAOC,cAGjF7B,GAAa,CAChB8B,aAAc,SAIjBjC,GACC,kBAAC,IAAmB,KAClB,kBAAC,IAAW,CACVkC,UAAQ,EACRC,MAAI,EACJC,aAAW,EACXC,cAAY,EACZC,OAAK,EACLvC,SAAUA,EACVwC,QAASzC,EAAMG,gBAIpBE,EACC,kBAAC,IAAmB,KAClB,kBAACjB,EAAiB,CAACsD,UAAU,QAC3B,kBAACpD,EAAkB,CAACoD,UAAW,YAAkB,GAAI,EAAG,YAA2B,KACjF,kBAACzE,EAAK,CAAC0E,WAAS,GACb3C,EAAM4C,QAGX,kBAACnD,EAAoB,CAACiD,UAAW,YAAkB,GAAI,EAAG,YAA2B,KACnF,kBAACnE,EAAO,CAACsE,SAAUrC,GAChBR,EAAM8C,QACN9C,EAAM+C,kBACL,kBAACrD,EAAyB,KAAEM,EAAM+C,sBAO5C,kBAACnE,EAAgB,KACf,kBAACX,EAAK,CAAC0E,WAAS,GACb3C,EAAM4C,OAET,kBAACnE,EAAgB,CAACoE,SAAUrC,GACzBR,EAAM8C,QACN9C,EAAM+C,kBACL,kBAACnD,EAAyB,KAAEI,EAAM+C,oBAK1C,kBAAC/D,EAAa,KACE,QADF,EACXgB,EAAMgB,eAAO,eAAEgC,KAAI,SAACC,EAAQC,G,QAAU,OACrC,kBAAC,IAAU,CACTC,IAAKD,EACLE,GAAIH,EAAOhC,IACXoC,MAAI,EAAEJ,EAAOI,KAAI,UAAI,IACrBC,OAAK,EAAEL,EAAOK,MAAK,UAAI,IACvBC,MACwB,gBAAtBN,EAAOnF,WAA+B,IAAY0F,iBAAmB,IAAYC,mBAEnF5E,QAAS,kBASR","file":"assets/53.chunk.dc6e8c2dc69f9b45e274.js","sourcesContent":["/**\r\n * @ComponentFor CTABlockViewModel\r\n */\r\nimport React from 'react';\r\nimport CTABlockViewModel from 'Shared/Blocks/CTABlock/CTABlockViewModel.type';\r\nimport { isCompact } from 'Shared/Viewport';\r\nimport connect from 'Shared/connect';\r\nimport { styled } from '@glitz/react';\r\nimport { LinkButton, ButtonTheme } from 'Shared/TextButtons';\r\nimport { AspectRatioInner, AspectRatioOuter, OverlayNotABackdrop } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport { H2, ResponsiveSize, TextBlockSmall } from 'Shared/SharedComponents/atoms/Typography';\r\nimport { createGridClasses, createOffsetGridClassLarge } from 'Shared/grid';\r\nimport { setImageBackground, Preset } from 'Shared/image-background';\r\nimport { GridWrap } from 'Shared/PageLayout';\r\nimport { selectDeviceImage } from 'Shared/utils';\r\nimport { calculateTopPadding, Ratio } from 'Shared/AspectRatio';\r\nimport VideoPlayer from 'Shared/Video/VideoPlayer'\r\nimport * as style from 'Shared/Style';\r\nimport { pushState } from '@polarnopyret/scope/index';\r\n\r\nconst Wrap = styled(AspectRatioOuter, {\r\n  ['@media ' + style.mediaUpToLarge]: {\r\n    marginBottom: '8px',\r\n  },\r\n})\r\n\r\nconst WrapInner = styled(AspectRatioInner, {\r\n  background: {\r\n    size: 'cover',\r\n    position: 'center center',\r\n  },\r\n})\r\n\r\nconst Label = styled(TextBlockSmall, {\r\n  marginBottom: '16px',\r\n  letterSpacing: '0.01em',\r\n  textAlign: 'center',\r\n  color: style.colors.monochrome.white,\r\n})\r\n\r\nconst Heading = styled(H2, {\r\n  textAlign: 'center',\r\n  color: style.colors.monochrome.white,\r\n  alignItems: 'center',\r\n})\r\n\r\nconst SmallSizeHeading = styled(Heading, {\r\n  padding: { x: '40px' }\r\n})\r\n\r\nconst SmallSizeOverlay = styled(OverlayNotABackdrop, {\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  alignItems: 'center',\r\n  flexDirection: 'column'\r\n})\r\n\r\nconst ButtonOverlay = styled(OverlayNotABackdrop, {\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  alignItems: 'flex-end',\r\n  top: 'auto',\r\n  bottom: '24px',\r\n  gap: '12px',\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    gap: '16px',\r\n  },\r\n})\r\n\r\nconst FullWidthGridWrap = styled(GridWrap, {\r\n  height: '100%'\r\n})\r\n\r\nconst FullWidthLabelWrap = styled.div({\r\n  alignSelf: 'end'\r\n})\r\n\r\nconst FullWidthHeadingWrap = styled.div({\r\n  alignSelf: 'start'\r\n})\r\n\r\nconst FullWidthSecondaryHeading = styled.span({\r\n  display: 'inline-block'\r\n})\r\n\r\nconst SmallSizeSecondaryHeading = styled.span({\r\n  display: 'block'\r\n})\r\n\r\nconst CallToActionBlock = connect((state) => {\r\n  return {\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  };\r\n})((props: CTABlockViewModel & { currentBreakpoint: number }) => {\r\n  const isMobile = isCompact(props.currentBreakpoint);\r\n  const hasVideo = props.videoSources?.length > 0;\r\n  const fullWidth = !props.width && props.layout === 'default';\r\n\r\n  const headingSize = fullWidth ? ResponsiveSize.D96_M40 : (props.layout !== 'default' ? ResponsiveSize.D48_M32 : ResponsiveSize.D64_M32);\r\n  const backgroundImage = selectDeviceImage(props.layout === 'list' ? props.backgroundListImage : props.backgroundImage, props.backgroundImageSmallScreen, isMobile);\r\n  const firstBtnUrl = props.buttons && props.buttons[0].url;\r\n\r\n  const imageRatio = () => {\r\n    if (isMobile) {\r\n      if (fullWidth) {\r\n        return Ratio.TwelveToTwentyThree;\r\n      }\r\n\r\n      return Ratio.ThreeToFour;\r\n    }\r\n\r\n    if (fullWidth) {\r\n      return Ratio.SixteenToNine;\r\n    }\r\n\r\n    if (props.layout === 'list') {\r\n      return Ratio.ThreeToTwo;\r\n    }\r\n\r\n    return Ratio.ThreeToFour;\r\n  }\r\n\r\n  return (\r\n    <Wrap\r\n      css={{\r\n        paddingTop: calculateTopPadding(imageRatio()),\r\n        ...(firstBtnUrl && {\r\n          cursor: 'pointer'\r\n        })\r\n      }}\r\n      onClick={(e) => {\r\n        if (!firstBtnUrl) {\r\n          return;\r\n        }\r\n\r\n        const targetElement = e.target as HTMLElement;\r\n        if (targetElement.nodeName === 'A') {\r\n          return;\r\n        }\r\n\r\n        if (targetElement.nodeName === 'SPAN') {\r\n          const targetParent = targetElement.parentElement as HTMLElement;\r\n          if (targetParent.nodeName === 'A') {\r\n            return;\r\n          }\r\n        }\r\n\r\n        pushState(firstBtnUrl);\r\n      }}\r\n    >\r\n      <WrapInner\r\n        css={{\r\n          background: {\r\n            image: !hasVideo\r\n              ? setImageBackground(backgroundImage?.url, (fullWidth ? Preset.FullWidth : Preset.HalfWidth))\r\n              : undefined,\r\n          },\r\n          ...(!fullWidth && {\r\n            borderRadius: '8px'\r\n          })\r\n        }}\r\n      >\r\n        {hasVideo && (\r\n          <OverlayNotABackdrop>\r\n            <VideoPlayer\r\n              autoPlay\r\n              loop\r\n              playsInline\r\n              coverContent\r\n              muted\r\n              isMobile={isMobile}\r\n              sources={props.videoSources}\r\n            />\r\n          </OverlayNotABackdrop>\r\n        )}\r\n        {fullWidth ? (\r\n          <OverlayNotABackdrop>\r\n            <FullWidthGridWrap className=\"grid\">\r\n              <FullWidthLabelWrap className={createGridClasses(12, 4, createOffsetGridClassLarge(5))}>\r\n                <Label upperCase>\r\n                  {props.label}\r\n                </Label>\r\n              </FullWidthLabelWrap>\r\n              <FullWidthHeadingWrap className={createGridClasses(12, 8, createOffsetGridClassLarge(3))}>\r\n                <Heading fontSize={headingSize} >\r\n                  {props.heading}\r\n                  {props.headingSecondary && (\r\n                    <FullWidthSecondaryHeading>{props.headingSecondary}</FullWidthSecondaryHeading>\r\n                  )}\r\n                </Heading>\r\n              </FullWidthHeadingWrap>\r\n            </FullWidthGridWrap>\r\n          </OverlayNotABackdrop>\r\n        ) : (\r\n          <SmallSizeOverlay>\r\n            <Label upperCase>\r\n              {props.label}\r\n            </Label>\r\n            <SmallSizeHeading fontSize={headingSize}>\r\n              {props.heading}\r\n              {props.headingSecondary && (\r\n                <SmallSizeSecondaryHeading>{props.headingSecondary}</SmallSizeSecondaryHeading>\r\n              )}\r\n            </SmallSizeHeading>\r\n          </SmallSizeOverlay>\r\n        )}\r\n        <ButtonOverlay>\r\n          {props.buttons?.map((button, index) => (\r\n            <LinkButton\r\n              key={index}\r\n              to={button.url}\r\n              text={button.text ?? ''}\r\n              title={button.title ?? ''}\r\n              theme={\r\n                button.background === 'Transparent' ? ButtonTheme.TransparentWhite : ButtonTheme.WhiteToTransparent\r\n              }\r\n              display={'flex'}\r\n            />\r\n          ))}\r\n        </ButtonOverlay>\r\n      </WrapInner>\r\n    </Wrap>\r\n  );\r\n});\r\n\r\nexport default CallToActionBlock;\r\n"],"sourceRoot":""}