{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/SharedComponents/molecules/ImageVideoBackground.tsx","webpack:///./Avensia.Common/Features/Product/ProductFeature/index.tsx","webpack:///./Avensia.Common/Features/Product/ProductFeatureList/index.tsx","webpack:///./Avensia.Common/Features/Shared/Blocks/ProductFeature/ProductFeatureListBlock.tsx"],"names":["AspectImageVideoBackground","props","children","image","paddingTop","videoSources","borderRadius","breakPoint","className","preset","isMobile","gotVideo","length","css","background","url","size","position","autoPlay","loop","muted","playsInline","coverContent","sources","ViewportSizeVideoBackground","fixedVideo","height","compose","hasVideo","Div","width","clipPath","overflow","AutoSizeVideoBackground","Wrap","div","color","monochrome","black","Overlay","display","flexDirection","justifyContent","alignItems","Image","img","ContentWrap","gap","marginTop","Heading","span","fontStyle","fontWeight","fontSize","lineHeight","textTransform","FeatureImage","objectFit","objectPosition","ProductFeature","state","currentBreakpoint","feature","deviceImage","backgroundImage","backgroundImageSmallScreen","backgroundVideoSources","src","imageFilter","backgroundColor","rgbaFilters","blue","icon","heading","D16_M16","D130_M130","text","BigContentWrap","justifyItems","alignContent","BigIconWrap","textAlign","BigParagraphWrap","bottom","BigParagraph","CenterContent","SwiperWrap","white","features","smallLayout","isCompact","label","totalCount","skipGridOffSet","slidesPerView","slidesPerGroup","spaceBetween","showNav","freeMode","cssMode","parallax","alternativeNav","listHeading","showSwirl","map","index","key","pagination","paginationContainerCss","left","zIndex","pagingItemCount","pagingIconColor","TwelveToTwentyThree","SixteenToNine","FullWidth","BaseWrapDiv","padding","BaseWrapGridWrap","ProductFeatureListBlock","RootElement","noStandardMargins","items"],"mappings":"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","file":"assets/28.chunk.072b67fb502e6e182963.js","sourcesContent":["import React from 'react';\r\nimport { AspectRatioInner, AspectRatioOuter, OverlayNotABackdrop } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { setImageBackground, Preset } from 'Shared/image-background';\r\nimport VideoSourceType from 'Shared/ViewModels/VideoSourceViewModel.type';\r\nimport VideoPlayer from 'Shared/Video/VideoPlayer'\r\nimport { isCompact } from 'Shared/Viewport';\r\n\r\ntype BasePropTypes = {\r\n  children?: React.ReactNode;\r\n  image?: { url?: string };\r\n  videoSources?: VideoSourceType[];\r\n  breakPoint: number;\r\n  preset?: Preset;\r\n};\r\n\r\ntype ImageVideoBackgroundPropTypes = BasePropTypes & {\r\n  borderRadius?: number;\r\n  paddingTop: string;\r\n  className?: string;\r\n};\r\n\r\ntype ViewportSizeVideoBackgroundPropTypes = BasePropTypes & {\r\n  fixedVideo?: boolean;\r\n  borderRadius?: number;\r\n  height?: string;\r\n  gradientBg?: boolean;\r\n};\r\n\r\nexport const AspectImageVideoBackground = (\r\n  (\r\n    props: ImageVideoBackgroundPropTypes & {},\r\n  ) => {\r\n    const { children,\r\n      image,\r\n      paddingTop,\r\n      videoSources,\r\n      borderRadius,\r\n      breakPoint,\r\n      className,\r\n      preset } = props;\r\n\r\n    const isMobile = isCompact(breakPoint);\r\n    const gotVideo = (videoSources?.length ?? 0) > 0;\r\n    return (\r\n      <AspectRatioOuter\r\n        className={className}\r\n        css={{\r\n          paddingTop: paddingTop,\r\n        }}\r\n      >\r\n        <AspectRatioInner\r\n          css={{\r\n            background: {\r\n              ...(!gotVideo && image && {\r\n                image: setImageBackground(image?.url, preset),\r\n                size: 'cover',\r\n                position: 'center center',\r\n              }),\r\n            },\r\n            borderRadius: borderRadius && borderRadius > 0 ? `${borderRadius}px` : '0px'\r\n          }}\r\n        >\r\n          {gotVideo && (\r\n            <OverlayNotABackdrop>\r\n              <VideoPlayer\r\n                autoPlay\r\n                loop\r\n                muted\r\n                playsInline\r\n                coverContent\r\n                isMobile={isMobile}\r\n                sources={videoSources}\r\n              />\r\n            </OverlayNotABackdrop>\r\n          )}\r\n          {children}\r\n        </AspectRatioInner>\r\n      </AspectRatioOuter>\r\n    );\r\n  }\r\n);\r\n\r\nexport const ViewportSizeVideoBackground = styled(\r\n  (\r\n    props: ViewportSizeVideoBackgroundPropTypes & StyledProps,\r\n  ) => {\r\n    const { children,\r\n      image,\r\n      videoSources,\r\n      breakPoint,\r\n      fixedVideo = false,\r\n      //css,\r\n      borderRadius,\r\n      preset,\r\n      height = '100%',\r\n      compose,\r\n    } = props;\r\n    const hasVideo = (videoSources?.length ?? 0) > 0;\r\n    const isMobile = isCompact(breakPoint);\r\n    return (\r\n      <styled.Div\r\n        css={compose({\r\n          height: height,\r\n          width: '100%',\r\n          position: 'relative',\r\n          ...(image && !hasVideo && {\r\n            background: {\r\n              image: setImageBackground(image?.url, preset),\r\n              size: 'cover',\r\n              position: 'center center',\r\n            },\r\n          }),\r\n          ...(!hasVideo && {\r\n            borderRadius: borderRadius && borderRadius > 0 ? `${borderRadius}px` : '0px'\r\n          }),\r\n          ...(fixedVideo && {\r\n            clipPath: 'inset(0 0 0 0)',\r\n            overflow: 'hidden',\r\n          }),\r\n        })}\r\n      >\r\n        {hasVideo && (\r\n          <OverlayNotABackdrop>\r\n            <VideoPlayer\r\n              autoPlay\r\n              loop\r\n              muted\r\n              coverContent\r\n              playsInline\r\n              fixedVideo={fixedVideo}\r\n              isMobile={isMobile}\r\n              sources={videoSources}\r\n            />\r\n          </OverlayNotABackdrop>\r\n        )}\r\n        {children}\r\n      </styled.Div>\r\n    );\r\n  }\r\n);\r\n\r\ntype AutoSizeVideoBackgroundPropTypes = BasePropTypes & {\r\n  borderRadius: number;\r\n  gradientBg?: boolean;\r\n};\r\n\r\nexport const AutoSizeVideoBackground = styled(\r\n  (\r\n    props: AutoSizeVideoBackgroundPropTypes & StyledProps,\r\n  ) => {\r\n    const { children,\r\n      image,\r\n      videoSources,\r\n      breakPoint,\r\n      borderRadius,\r\n      preset,\r\n      compose,\r\n    } = props;\r\n    return (\r\n      <ViewportSizeVideoBackground image={image} borderRadius={borderRadius} videoSources={videoSources} preset={preset} breakPoint={breakPoint} css={compose({ height: 'auto' })} fixedVideo>\r\n        {children}\r\n      </ViewportSizeVideoBackground>\r\n    );\r\n  });\r\n","import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport ProductFeatureViewModel from 'Product/ProductFeature/ProductFeatureViewModel.type';\r\nimport { OverlayNotABackdrop } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport { AspectImageVideoBackground } from 'Shared/SharedComponents/molecules/ImageVideoBackground';\r\nimport { Paragraph, ResponsiveSize, ResponsiveLineHeight } from 'Shared/SharedComponents/atoms/Typography';\r\nimport connect from 'Shared/connect';\r\nimport { selectDeviceImage } from 'Shared/utils';\r\nimport { isCompact } from 'Shared/Viewport';\r\nimport { PictureImage, Preset } from 'Shared/Image';\r\nimport * as style from 'Shared/Style';\r\n\r\ntype PropType = {\r\n  className?: string;\r\n  feature: ProductFeatureViewModel;\r\n  currentBreakpoint: number;\r\n};\r\n\r\nconst Wrap = styled.div({\r\n  color: style.colors.monochrome.black,\r\n})\r\n\r\nconst Overlay = styled(OverlayNotABackdrop, {\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'center',\r\n  alignItems: 'center',\r\n})\r\n\r\nconst Image = styled.img({\r\n  width: '88px', height: '88px'\r\n})\r\n\r\nconst ContentWrap = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  alignItems: 'flex-start',\r\n  gap: '8px',\r\n  marginTop: '16px',\r\n})\r\n\r\nconst Heading = styled.span({\r\n  fontStyle: 'normal',\r\n  fontWeight: 500,\r\n  fontSize: '24px',\r\n  lineHeight: '100%',\r\n  textTransform: 'uppercase',\r\n  display: 'block',\r\n})\r\n\r\nconst FeatureImage = styled(PictureImage, {\r\n  position: 'absolute',\r\n  width: '100%',\r\n  height: '100%',\r\n  objectFit: 'cover',\r\n  objectPosition: 'center center',\r\n  borderRadius: '8px'\r\n});\r\n\r\nexport const ProductFeature = connect((state) => {\r\n  return {\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  };\r\n})((props: PropType) => {\r\n  const { feature } = props;\r\n  const isMobile = isCompact(props.currentBreakpoint);\r\n  const deviceImage = selectDeviceImage(feature.backgroundImage, feature.backgroundImageSmallScreen, isMobile);\r\n\r\n  return (\r\n    <Wrap className={props.className}>\r\n      <div>\r\n        <AspectImageVideoBackground\r\n          paddingTop={'100%'}\r\n          videoSources={feature.backgroundVideoSources}\r\n          borderRadius={8}\r\n          breakPoint={props.currentBreakpoint}\r\n        >\r\n          {deviceImage && (\r\n            <FeatureImage src={deviceImage?.url} />\r\n          )}\r\n          <Overlay\r\n            css={{\r\n              ...(feature.imageFilter && {\r\n                backgroundColor: style.colors.rgbaFilters.blue,\r\n                borderRadius: '8px',\r\n              })\r\n            }}\r\n          >\r\n            {feature.icon?.url && (\r\n              <Image src={feature.icon?.url} />\r\n            )}\r\n          </Overlay>\r\n        </AspectImageVideoBackground>\r\n      </div>\r\n      <ContentWrap>\r\n        <Heading>\r\n          {feature.heading}\r\n        </Heading>\r\n        <Paragraph fontSize={ResponsiveSize.D16_M16} lineHeight={ResponsiveLineHeight.D130_M130}>\r\n          {feature.text}\r\n        </Paragraph>\r\n      </ContentWrap>\r\n    </Wrap>\r\n  );\r\n});\r\n\r\nexport default ProductFeature;\r\n","import React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport ProductFeatureViewModel from 'Product/ProductFeature/ProductFeatureViewModel.type';\r\nimport ProductFeature from 'Product/ProductFeature';\r\nimport { AspectImageVideoBackground } from 'Shared/SharedComponents/molecules/ImageVideoBackground';\r\nimport {\r\n  H2,\r\n  Paragraph,\r\n  ResponsiveSize,\r\n  ResponsiveLineHeight,\r\n} from 'Shared/SharedComponents/atoms/Typography';\r\nimport { Preset } from 'Shared/Image';\r\nimport { calculateTopPadding, Ratio } from 'Shared/AspectRatio';\r\nimport SwiperList from 'Shared/SwiperList';\r\nimport { createGridClasses, createOffsetGridClassLarge } from 'Shared/grid';\r\nimport * as style from 'Shared/Style';\r\n\r\ntype PropType = {\r\n  features: ProductFeatureViewModel[];\r\n  smallLayout: boolean;\r\n  isCompact: boolean;\r\n  skipGridOffSet?: boolean;\r\n  label: string;\r\n};\r\n\r\nconst BigContentWrap = styled.div({\r\n  position: 'relative',\r\n  height: '100%',\r\n  justifyItems: 'center',\r\n  alignContent: 'center',\r\n})\r\n\r\nconst BigIconWrap = styled.div({\r\n  position: 'absolute',\r\n  textAlign: 'center',\r\n  width: '100%',\r\n  marginTop: '104px',\r\n})\r\n\r\nconst BigParagraphWrap = styled.div({\r\n  position: 'absolute',\r\n  bottom: '40px',\r\n  width: '100%'\r\n})\r\n\r\nconst BigParagraph = styled(Paragraph, {\r\n  textAlign: 'center',\r\n})\r\n\r\nconst CenterContent = styled.div({\r\n  textAlign: 'center',\r\n})\r\n\r\nconst SwiperWrap = styled.div({\r\n  position: 'relative',\r\n  color: style.colors.monochrome.white,\r\n})\r\n\r\nconst Image = styled.img({\r\n  width: '106px',\r\n  height: '106px',\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    width: '95px',\r\n    height: '95px',\r\n  },\r\n})\r\n\r\nexport const ProductFeatureList = (props: PropType) => {\r\n  const { features, smallLayout, isCompact, label } = props;\r\n  const totalCount = features?.length ?? 0;\r\n  if (smallLayout)\r\n    return (\r\n      <div className='grid'>\r\n        <div className={createGridClasses(12, !props.skipGridOffSet ? 11 : 12, !props.skipGridOffSet ? createOffsetGridClassLarge(2) : '')}>\r\n          <div>\r\n            <SwiperList\r\n              slidesPerView={isCompact ? 1.2 : 3.6666}\r\n              slidesPerGroup={isCompact ? 1 : 2}\r\n              spaceBetween={isCompact ? 8 : 16}\r\n              isCompact={isCompact}\r\n              showNav={!isCompact && totalCount > 3}\r\n              freeMode={false}\r\n              cssMode={true}\r\n              parallax={false}\r\n              alternativeNav={true}\r\n              listHeading={label}\r\n              showSwirl={isCompact && totalCount > 1}\r\n            >\r\n              {features?.map((feature, index) => (\r\n                <ProductFeature className=\"swiper-slide\" key={index} feature={feature} />\r\n              ))}\r\n            </SwiperList>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n\r\n  return (\r\n    <SwiperWrap>\r\n      <SwiperList\r\n        slidesPerView={1}\r\n        spaceBetween={0}\r\n        isCompact={isCompact}\r\n        showNav={false}\r\n        pagination\r\n        freeMode={false}\r\n        paginationContainerCss={{\r\n          position: 'absolute',\r\n          bottom: '172px',\r\n          left: `calc(50% - ${((totalCount - 1) * 4) + ((totalCount - 1) * 6) + 'px'} + 12px)`,\r\n          zIndex: 1,\r\n        }}\r\n        pagingItemCount={features?.length}\r\n        pagingIconColor={style.colors.monochrome.white}\r\n        cssMode={true}\r\n      >\r\n        {features?.map((feature, index) => (\r\n          <div key={index} className='swiper-slide'>\r\n            <AspectImageVideoBackground\r\n              paddingTop={\r\n                isCompact\r\n                  ? `${calculateTopPadding(Ratio.TwelveToTwentyThree)}`\r\n                  : `${calculateTopPadding(Ratio.SixteenToNine)}`\r\n              }\r\n              preset={Preset.FullWidth}\r\n              image={feature.backgroundImage}\r\n              videoSources={feature.backgroundVideoSources}\r\n              breakPoint={isCompact ? 0 : 1}\r\n            >\r\n              <BigContentWrap className='grid' key={index}>\r\n                <BigIconWrap className={createGridClasses(12, 0)}>\r\n                  <CenterContent>\r\n                    <Image src={feature.icon?.url} />\r\n                  </CenterContent>\r\n                </BigIconWrap>\r\n                <CenterContent className={createGridClasses(12, 8, createOffsetGridClassLarge(3))}>\r\n                  <H2>{feature.heading}</H2>\r\n                </CenterContent>\r\n                <BigParagraphWrap>\r\n                  <div className='grid'>\r\n                    <div className={createGridClasses(12, 4, createOffsetGridClassLarge(5))}>\r\n                      <BigParagraph\r\n                        fontSize={ResponsiveSize.D16_M16}\r\n                        lineHeight={ResponsiveLineHeight.D130_M130}\r\n                      >\r\n                        {feature.text}\r\n                      </BigParagraph>\r\n                    </div>\r\n                  </div>\r\n                </BigParagraphWrap>\r\n              </BigContentWrap>\r\n            </AspectImageVideoBackground>\r\n          </div>\r\n        ))}\r\n      </SwiperList>\r\n    </SwiperWrap>\r\n  );\r\n};\r\n\r\nexport default ProductFeatureList;\r\n","/**\r\n * @ComponentFor ProductFeatureListBlockViewModel\r\n */\r\n\r\nimport connect from 'Shared/connect';\r\nimport { isCompact as functionIsCompact } from 'Shared/Viewport';\r\nimport React from 'react';\r\nimport ProductFeatureListBlockViewModel from './ProductFeatureListBlockViewModel.type';\r\nimport ProductFeatureList from 'Product/ProductFeatureList';\r\nimport { GridWrap } from 'Shared/PageLayout';\r\nimport { styled } from '@glitz/react';\r\nimport * as style from 'Shared/Style';\r\n\r\nconst BaseWrapDiv = styled.div({\r\n  padding: {\r\n    bottom: '80px',\r\n  },\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    padding: {\r\n      bottom: '120px',\r\n    },\r\n  },\r\n})\r\n\r\nconst BaseWrapGridWrap = styled(GridWrap, {\r\n  padding: {\r\n    bottom: '80px',\r\n  },\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    padding: {\r\n      bottom: '120px',\r\n    },\r\n  },\r\n})\r\n\r\nexport const ProductFeatureListBlock = connect(\r\n  state => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  }),\r\n)((props: ProductFeatureListBlockViewModel & { currentBreakpoint: number }) => {\r\n  const { currentBreakpoint } = props;\r\n  const isMobile = functionIsCompact(currentBreakpoint);\r\n  const RootElement = props.noStandardMargins || !props.smallLayout ? BaseWrapDiv : BaseWrapGridWrap;\r\n  return (\r\n    <RootElement className='wsb'>\r\n      <ProductFeatureList skipGridOffSet={props.noStandardMargins} features={props.items} isCompact={isMobile} label={props.label} smallLayout={props.smallLayout} />\r\n    </RootElement>\r\n  );\r\n});\r\n\r\nexport default ProductFeatureListBlock;\r\n"],"sourceRoot":""}