{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Hero/HeroBlock.tsx"],"names":["Base","div","height","width","display","position","overflow","SliderWrap","SliderItemWrap","pointerEvents","justifyItems","alignItems","SliderItemBackground","left","top","transition","property","duration","timingFunction","ItemContent","gridTemplateRows","ItemContentWrap","gridRowStart","flexDirection","ItemHeading","margin","y","x","textAlign","lineHeight","userSelect","color","monochrome","white","transform","ItemLabel","span","fontSize","fontWeight","textTransform","marginTop","marginBottom","zIndex","ItemBottomWrap","ItemButtonWrap","justifyContent","ItemButton","cursor","Swirl","SlideNavContainer","SlideNavBase","opacity","SlideNavLeft","SlideNavRight","getOffset","isMobile","gridGap","sideGap","sideMultiplier","totalWidth","window","innerWidth","Math","round","HeroBlock","state","currentBreakpoint","props","items","activeSlideIndex","setActiveSlideIndex","realSlideIndex","setRealSlideIndex","currentSlideBgElement","setCurrentSlideBg","nextSlideBgElement","setNextSlideBg","offSet","setOffset","swiperRef","updateOffset","mouseLeaveLeft","style","marginLeft","mouseLeaveRight","addEventListener","removeEventListener","current","activeIndex","realIndex","originalItemCount","length","firstItem","lastItem","adjustedItems","itemCount","isCompact","css","slidesPerView","spaceBetween","showNav","freeMode","loop","rewind","grabCursor","sliderRef","initialSlide","onSlideChange","swiper","slideTo","cssMode","map","item","index","shiftLeft","shiftRight","Div","key","className","backgroundVideoSources","background","image","backgroundImage","backgroundImageSmallScreen","url","FullWidth","size","positionX","positionY","autoPlay","muted","coverContent","playsInline","sources","label","textColor","heading","upperCase","D96_M40","paddingLeft","paddingRight","boxSizing","whiteSpace","direction","mobileHeading","mobileHeadingExtraRow","headingExtraRow","getHeading","button","to","text","title","onClick","idx","slideToLoop","onMouseEnter","currentIndex","nextSlideBg","slides","querySelector","currentSlideBg","onMouseLeave"],"mappings":"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","file":"assets/55.chunk.aaa6bdeafbaa7b604623.js","sourcesContent":["/**\r\n * @ComponentFor HeroBlockViewModel\r\n */\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { isCompact } from 'Shared/Viewport';\r\nimport connect from 'Shared/connect';\r\nimport { HEIGHT as DESKTOP_HEADER_HEIGHT } from 'SiteLayout/Header/DesktopHeader';\r\nimport { BLACK_TOP_MOBILE_HEIGHT, BLACK_TOP_DESKTOP_HEIGHT } from 'SiteLayout/Header';\r\nimport Viewport from 'Shared/Viewport';\r\nimport { HEIGHT as MOBILE_HEIGHT } from 'SiteLayout/Header/MobileHeader';\r\nimport { QUICKSEARCH_HEIGHT } from 'Search/QuickSearch';\r\nimport * as style from 'Shared/Style';\r\nimport { LinkButton } from 'Shared/TextButtons';\r\nimport HeroBlockViewModel from './HeroBlockViewModel.type';\r\nimport HeroBlockItemViewModel from './HeroItemBlockViewModel.type';\r\nimport { Down32x64 } from 'Shared/Icons/ArrowSwirl';\r\nimport { setImageBackground, Preset } from 'Shared/image-background';\r\nimport { LeftUri, RightUri } from 'Shared/Icons/ArrowCircle';\r\nimport { selectDeviceImage } from 'Shared/utils';\r\nimport VideoPlayer from 'Shared/Video/VideoPlayer'\r\nimport { H2, ResponsiveSize } from 'Shared/SharedComponents/atoms/Typography';\r\nimport SwiperList from 'Shared/SwiperList';\r\n\r\ntype HeroBlockType = HeroBlockViewModel;\r\n\r\nconst MARGIN_TOP_HERO = '170px'\r\n\r\nconst Base = styled.div({\r\n  height: '100vh',\r\n  width: '100%',\r\n  display: 'flex',\r\n  position: 'relative',\r\n  overflow: 'hidden',\r\n});\r\n\r\nconst SliderWrap = styled.div({\r\n  height: '100vh',\r\n  width: '100%',\r\n})\r\n\r\nconst SliderItemWrap = styled.div({\r\n  pointerEvents: 'none',\r\n  height: '100%',\r\n  width: '100%',\r\n  display: 'flex',\r\n  justifyItems: 'center',\r\n  alignItems: 'center',\r\n})\r\n\r\nconst SliderItemBackground = styled.div({\r\n  position: 'absolute',\r\n  left: '0',\r\n  top: '0',\r\n  height: '100vh',\r\n  width: '100%',\r\n  transition: { property: ['transform, width, margin'], duration: 300, timingFunction: 'ease' },\r\n})\r\n\r\nconst ItemContent = styled.div({\r\n  height: '100vh',\r\n  width: '100%',\r\n  alignItems: 'center',\r\n  display: 'grid',\r\n  gridTemplateRows: '1fr auto 1fr'\r\n});\r\n\r\nconst ItemContentWrap = styled.div({\r\n  gridRowStart: 2,\r\n  display: 'flex',\r\n  flexDirection: 'column'\r\n})\r\n\r\nconst ItemHeading = styled(H2, {\r\n  margin: {\r\n    y: 0,\r\n    x: 0,\r\n  },\r\n  textAlign: 'center',\r\n  lineHeight: '100%',\r\n  userSelect: 'none',\r\n  color: style.colors.monochrome.white,\r\n  width: '100%',\r\n  transition: { property: ['all'], duration: 600, timingFunction: 'ease' },\r\n  transform: 'translateX(0)'\r\n})\r\n\r\nconst ItemLabel = styled.span({\r\n  lineHeight: 1,\r\n  fontSize: '14px',\r\n  fontWeight: 'bold',\r\n  textTransform: 'uppercase',\r\n  color: style.colors.monochrome.white,\r\n  marginTop: 0,\r\n  display: 'block',\r\n  marginBottom: '16px',\r\n  textAlign: 'center',\r\n  zIndex: 1,\r\n})\r\n\r\nconst ItemBottomWrap = styled.div({\r\n  textAlign: 'center',\r\n  gridRowStart: 3,\r\n  height: '100%'\r\n})\r\n\r\nconst ItemButtonWrap = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n})\r\n\r\nconst ItemButton = styled(LinkButton, {\r\n  cursor: 'pointer',\r\n  pointerEvents: 'auto',\r\n})\r\n\r\nconst Swirl = styled(Down32x64, {\r\n  color: style.colors.monochrome.white,\r\n  marginBottom: '16px'\r\n})\r\n\r\nconst SlideNavContainer = styled.div({\r\n  height: '100vh',\r\n  width: '100%',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  position: 'absolute',\r\n  left: '0',\r\n  top: '0',\r\n  justifyContent: 'space-between',\r\n  overflow: 'hidden',\r\n});\r\n\r\nconst SlideNavBase = styled.div({\r\n  zIndex: 1,\r\n  height: '100vh',\r\n  marginTop: MARGIN_TOP_HERO,\r\n  width: 'calc(((100% - 32px) / 12) * 2 + 16px)',\r\n  opacity: 0,\r\n  pointerEvents: 'auto',\r\n})\r\n\r\nconst SlideNavLeft = styled(SlideNavBase, {\r\n  cursor: `url(\"${LeftUri}\") 24 24, pointer`,\r\n})\r\n\r\nconst SlideNavRight = styled(SlideNavBase, {\r\n  cursor: `url(\"${RightUri}\") 24 24, pointer`,\r\n})\r\n\r\nconst getOffset = (isMobile: boolean) => {\r\n  const gridGap = isMobile ? 8 : 16;\r\n  const sideGap = isMobile ? 12 : 16;\r\n  const sideMultiplier = isMobile ? 1 : 2;\r\n  const totalWidth = window.innerWidth; //document.documentElement.clientWidth;\r\n  const offset = Math.round(((totalWidth - (2 * sideGap)) / 12) * sideMultiplier + gridGap);\r\n  return offset;\r\n};\r\n\r\n\r\nconst HeroBlock = connect((state) => {\r\n  return {\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  };\r\n})((props: HeroBlockType & { currentBreakpoint: number }) => {\r\n  const isMobile = isCompact(props.currentBreakpoint);\r\n  const { items } = props;\r\n  const [activeSlideIndex, setActiveSlideIndex] = useState(0);\r\n  const [realSlideIndex, setRealSlideIndex] = useState(0);\r\n  const [currentSlideBgElement, setCurrentSlideBg] = useState<HTMLElement>(null);\r\n  const [nextSlideBgElement, setNextSlideBg] = useState<HTMLElement>(null);\r\n  const [offSet, setOffset] = useState(getOffset(isMobile));\r\n  const swiperRef = useRef<any>(null);\r\n\r\n  /* function getSideOffset() {\r\n    console.log(\"doc: \" + document);\r\n    if(typeof document === undefined || typeof document.documentElement === undefined) {\r\n      return 0;\r\n    }\r\n\r\n    const gridGap = isMobile ? 8 : 16;\r\n    const sideGap = isMobile ? 12 : 16;\r\n    const totalWidth = document.documentElement.clientWidth;\r\n    const offset = Math.round(((totalWidth - (2 * sideGap)) / 12) * 2 + gridGap);\r\n    return offset;\r\n  } */\r\n\r\n  const updateOffset = () => {\r\n    setOffset(getOffset(isMobile));\r\n  };\r\n\r\n  useEffect(() => {\r\n    window.addEventListener(\"resize\", updateOffset);\r\n    return () => window.removeEventListener(\"resize\", updateOffset);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (swiperRef.current !== null) {\r\n      setActiveSlideIndex(swiperRef.current.activeIndex);\r\n    }\r\n  }, [activeSlideIndex]);\r\n\r\n  useEffect(() => {\r\n    if (swiperRef.current !== null) {\r\n      setRealSlideIndex(swiperRef.current.realIndex);\r\n    }\r\n  }, [realSlideIndex]);\r\n\r\n  function mouseLeaveLeft() {\r\n    if (nextSlideBgElement !== null) {\r\n      nextSlideBgElement.style.transform = 'translateX(0)'\r\n      setNextSlideBg(null);\r\n    }\r\n\r\n    if (currentSlideBgElement !== null) {\r\n      currentSlideBgElement.style.marginLeft = '';\r\n      currentSlideBgElement.style.width = '';\r\n      setCurrentSlideBg(null);\r\n    }\r\n  }\r\n\r\n  function mouseLeaveRight() {\r\n    if (nextSlideBgElement !== null) {\r\n      nextSlideBgElement.style.transform = 'translateX(0)'\r\n      setNextSlideBg(null);\r\n    }\r\n\r\n    if (currentSlideBgElement !== null) {\r\n      currentSlideBgElement.style.width = '';\r\n      setCurrentSlideBg(null);\r\n    }\r\n  }\r\n\r\n  function getHeading(item: HeroBlockItemViewModel) {\r\n    if (isMobile && item.mobileHeading) {\r\n      if (item.mobileHeadingExtraRow) {\r\n        return <>{item.mobileHeading}<br />{item.mobileHeadingExtraRow}</>\r\n      }\r\n\r\n      return (\r\n        <>{item.mobileHeading}</>\r\n      );\r\n    }\r\n\r\n    if (item.headingExtraRow) {\r\n      return <>{item.heading}<br />{item.headingExtraRow}</>\r\n    }\r\n\r\n    return (\r\n      <>{item.heading}</>\r\n    );\r\n  }\r\n\r\n  const originalItemCount = items.length;\r\n  const firstItem = items[0];\r\n  const lastItem = items[items.length - 1];\r\n  const adjustedItems: HeroBlockItemViewModel[] = originalItemCount > 1 ? [lastItem, ...items, firstItem] : items;\r\n  const itemCount = adjustedItems.length;\r\n  const gridGap = isMobile ? 8 : 16;\r\n  return (\r\n    <Viewport>\r\n      {(isCompact) => (\r\n        <Base\r\n          css={{\r\n            marginTop: isCompact\r\n              ? -(QUICKSEARCH_HEIGHT + MOBILE_HEIGHT)\r\n              : -(isCompact ? MOBILE_HEIGHT : DESKTOP_HEADER_HEIGHT) -\r\n              (isCompact ? BLACK_TOP_MOBILE_HEIGHT : BLACK_TOP_DESKTOP_HEIGHT),\r\n          }}\r\n        >\r\n          <SliderWrap>\r\n            <SwiperList\r\n              isCompact={isCompact}\r\n              slidesPerView={1}\r\n              spaceBetween={0}\r\n              showNav={false}\r\n              height='100%'\r\n              freeMode={false}\r\n              loop={false}\r\n              rewind={true}\r\n              grabCursor={false}\r\n              sliderRef={swiperRef}\r\n              initialSlide={1}\r\n              onSlideChange={(swiper) => {\r\n                if (swiper !== null) {\r\n                  if (swiper.realIndex === 0) {\r\n                    swiper.slideTo((itemCount - 2), 300, true);\r\n                    setRealSlideIndex(itemCount - 2);\r\n                  } else if (swiper.realIndex === (itemCount - 1)) {\r\n                    swiper.slideTo(1, 300, true);\r\n                    setRealSlideIndex(1);\r\n                  } else {\r\n                    setRealSlideIndex(swiper.realIndex);\r\n                  }\r\n                }\r\n\r\n              }}\r\n              cssMode={true}\r\n            >\r\n              {adjustedItems.map((item, index) => {\r\n                let shiftLeft = realSlideIndex !== index && ((realSlideIndex === 0 && index === (itemCount - 1)) || (index < realSlideIndex && realSlideIndex < itemCount));\r\n                let shiftRight = realSlideIndex !== index && ((realSlideIndex === 0 && index > 0) || (realSlideIndex == (itemCount - 1) && index === 0) || (index > realSlideIndex));\r\n\r\n                return (\r\n                  <styled.Div\r\n                    key={index}\r\n                    className='swiper-slide'\r\n                    style={{\r\n                      ...(shiftLeft && {\r\n                        zIndex: 2,\r\n                      })\r\n                    }}\r\n                  >\r\n                    <SliderItemWrap>\r\n                      <SliderItemBackground\r\n                        className='sld-bg'\r\n                        css={{\r\n                          ...((item.backgroundVideoSources?.length ?? 0) < 1 && {\r\n                            background: {\r\n                              image: setImageBackground(selectDeviceImage(item.backgroundImage, item.backgroundImageSmallScreen, isCompact)?.url, Preset.FullWidth),\r\n                              size: 'cover',\r\n                              positionX: 'center',\r\n                              positionY: 'center',\r\n                            }\r\n                          }),\r\n                        }}\r\n                      >\r\n                        {item.backgroundVideoSources && item.backgroundVideoSources.length > 0 && (\r\n                          <VideoPlayer\r\n                            autoPlay\r\n                            loop\r\n                            muted\r\n                            coverContent\r\n                            playsInline\r\n                            isMobile={isCompact}\r\n                            sources={item.backgroundVideoSources}\r\n                          />\r\n                        )}\r\n                      </SliderItemBackground>\r\n\r\n                      <ItemContent key={index}>\r\n                        <ItemContentWrap>\r\n                          {item.label && <ItemLabel css={{ color: item.textColor, }}>{item.label}</ItemLabel>}\r\n                          {item.heading && <ItemHeading\r\n                            upperCase\r\n                            fontSize={ResponsiveSize.D96_M40}\r\n                            css={{\r\n                              ...(!shiftLeft && !shiftRight && {\r\n                                paddingLeft: `${offSet + gridGap}px`,\r\n                                paddingRight: `${offSet + gridGap}px`,\r\n                                boxSizing: 'border-box',\r\n                              }),\r\n                              ...(shiftLeft && {\r\n                                textAlign: 'right',\r\n                                transform: `translateX(${offSet - gridGap}px)`,\r\n                                opacity: '0.5',\r\n                                whiteSpace: 'nowrap',\r\n                                direction: 'rtl',\r\n                              }),\r\n                              ...(shiftRight && {\r\n                                textAlign: 'left',\r\n                                transform: `translateX(-${offSet - gridGap}px)`,\r\n                                opacity: '0.5',\r\n                                whiteSpace: 'nowrap',\r\n                                direction: 'rtl',\r\n                              }),\r\n                              color: item.textColor,\r\n                            }}\r\n                          >\r\n                            {getHeading(item)}\r\n                          </ItemHeading>}\r\n                        </ItemContentWrap>\r\n                        <ItemBottomWrap>\r\n                          {item.label && item.heading && <Swirl />}\r\n                          <ItemButtonWrap>\r\n                            {item.button && item.button.url && (\r\n                              <ItemButton\r\n                                to={item.button.url}\r\n                                text={item.button.text}\r\n                                title={item.button.text}\r\n                              />\r\n                            )}\r\n                          </ItemButtonWrap>\r\n                        </ItemBottomWrap>\r\n\r\n                      </ItemContent>\r\n                    </SliderItemWrap>\r\n                  </styled.Div>\r\n                );\r\n              })}\r\n            </SwiperList>\r\n          </SliderWrap>\r\n          {!isCompact &&\r\n            <SlideNavContainer>\r\n              <SlideNavLeft\r\n                onClick={() => {\r\n                  const idx = swiperRef.current.realIndex <= 0 ? (itemCount - 1) : (swiperRef.current.realIndex - 1);\r\n                  swiperRef.current.slideToLoop(idx);\r\n                  setActiveSlideIndex(swiperRef.current.activeIndex);\r\n                  mouseLeaveLeft();\r\n                }}\r\n                {...{\r\n                  onMouseEnter: () => {\r\n                    const currentIndex = swiperRef.current.activeIndex;\r\n\r\n                    const prevSlide = swiperRef.current.slides[currentIndex === 0 ? (itemCount - 1) : (currentIndex - 1)] as HTMLElement;\r\n                    var nextSlideBg = prevSlide.querySelector('.sld-bg') as HTMLElement;\r\n                    nextSlideBg.style.transform = `translateX(${offSet}px)`\r\n                    setNextSlideBg(nextSlideBg);\r\n                    const currentSlide = swiperRef.current.slides[swiperRef.current.activeIndex] as HTMLElement;\r\n                    var currentSlideBg = currentSlide.querySelector('.sld-bg') as HTMLElement;\r\n                    currentSlideBg.style.width = `calc(100% - ${offSet}px)`;\r\n                    currentSlideBg.style.marginLeft = `${offSet}px`;\r\n                    setCurrentSlideBg(currentSlideBg);\r\n                  },\r\n                  onMouseLeave: () => {\r\n                    mouseLeaveLeft();\r\n                  },\r\n                }}\r\n              />\r\n              <SlideNavRight\r\n                onClick={() => {\r\n                  const idx = swiperRef.current.realIndex >= (itemCount - 1) ? 0 : (swiperRef.current.realIndex + 1);\r\n                  swiperRef.current.slideToLoop(idx);\r\n                  setActiveSlideIndex(swiperRef.current.activeIndex);\r\n                  mouseLeaveRight();\r\n                }}\r\n                {...{\r\n                  onMouseEnter: () => {\r\n                    const currentIndex = swiperRef.current.activeIndex;\r\n                    const nextSlide = swiperRef.current.slides[currentIndex === (itemCount - 1) ? 0 : (currentIndex + 1)] as HTMLElement;\r\n                    var nextSlideBg = nextSlide.querySelector('.sld-bg') as HTMLElement;\r\n                    nextSlideBg.style.transform = `translateX(-${offSet}px)`\r\n\r\n                    setNextSlideBg(nextSlideBg);\r\n                    const currentSlide = swiperRef.current.slides[swiperRef.current.activeIndex] as HTMLElement;\r\n                    var currentSlideBg = currentSlide.querySelector('.sld-bg') as HTMLElement;\r\n                    currentSlideBg.style.width = `calc(100% - ${offSet}px)`;\r\n                    setCurrentSlideBg(currentSlideBg);\r\n                  },\r\n                  onMouseLeave: () => {\r\n                    mouseLeaveRight();\r\n                  },\r\n                }}\r\n              />\r\n            </SlideNavContainer>\r\n          }\r\n        </Base>\r\n      )}\r\n    </Viewport>\r\n  );\r\n})\r\n\r\nexport default HeroBlock;\r\n"],"sourceRoot":""}