{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Image/ImageBlock.tsx"],"names":["Image","img","width","height","objectFit","objectPosition","AutoWidthImage","ImageWrapOne","borderRadius","paddingTop","ImageWrapTwo","ImageWrapMany","TwoImageWrap","div","rowGap","ImageLink","color","textDecoration","LinkedImage","props","item","url","to","title","titleText","children","ImageBlock","state","currentBreakpoint","dispatch","isCompact","defaultYPadding","noStandardMargins","items","length","className","css","padding","y","src","contentLink","alt","alternateText","map","index","key","slidesPerView","spaceBetween","showNav","cssMode"],"mappings":"2FAAA,gG,EAAA,sFAiBMA,EAAQ,IAAOC,IAAI,CACvBC,MAAO,OACPC,OAAQ,OACRC,UAAW,QACXC,eAAgB,kBAGZC,EAAiB,IAAOL,IAAI,CAChCC,MAAO,OACPC,OAAQ,OACRC,UAAW,QACXC,eAAgB,kBAGZE,EAAe,YAAO,IAAkB,CAC5CC,aAAc,MACdC,WAAY,QAGRC,EAAe,YAAO,IAAkB,CAC5CF,aAAc,MACdC,WAAY,OACZP,MAAO,SAGHS,EAAgB,YAAO,IAAkB,CAC7CH,aAAc,MACdC,WAAY,SAGRG,EAAe,IAAOC,MAAG,MAC5B,UAAY,KAAuB,CAClCC,OAAQ,Q,IAICC,EAAY,YAAO,IAAM,CACpCC,MAAO,UACPC,eAAgB,SAOZC,EAAc,SAACC,GACnB,OAAIA,EAAMC,KAAKC,IAEX,kBAACN,EAAS,CACRO,GAAIH,EAAMC,KAAKC,IACfE,MAAOJ,EAAMC,KAAKI,WAEjBL,EAAMM,UAMX,oCAAGN,EAAMM,WAIAC,EAAa,aACxB,SAAAC,GAAS,OACPC,kBAAmBD,EAAMC,sBAE3B,SAAAC,GAAY,WAJY,EAKxB,SAACV,G,YACOS,EAAA,EAAAA,kBACFE,EAAY,YAAkBF,GAC9BG,EAAkBZ,EAAMa,kBAAoB,MAASF,EAAY,OAAS,OAEhF,OAA4B,KAAb,QAAX,EAAAX,EAAMc,aAAK,eAAEC,QAEb,kBAAC,IAAQ,CAACC,UAAU,WAAWC,IAAK,CAAEC,QAAS,CAAEC,EAAGP,KAClD,yBAAKI,UAAW,YAAkB,GAAI,EAAG,YAA2BhB,EAAMa,kBAAoB,EAAI,KAChG,kBAACd,EAAW,CAACE,KAAMD,EAAMc,MAAM,IAC7B,kBAAC1B,EAAY,KACX,kBAAC,IAAgB,KACf,kBAACP,EAAK,CACJuC,IAAKpB,EAAMc,MAAM,GAAGO,YAAYnB,IAChCoB,IAAKtB,EAAMc,MAAM,GAAGS,qBASR,KAAb,QAAX,EAAAvB,EAAMc,aAAK,eAAEC,QAEb,kBAAC,IAAQ,CAACC,UAAU,WAAWC,IAAK,CAAEC,QAAS,CAAEC,EAAGP,KAClD,kBAACnB,EAAY,CAACuB,UAAW,YAAkB,GAAI,EAAG,YAA2BhB,EAAMa,kBAAoB,EAAI,GAAK,qBAClG,QADqH,EAChIb,EAAMc,aAAK,eAAEU,KAAI,SAACvB,EAAMwB,GAAU,OACjC,yBAAKC,IAAKD,EAAOT,UAAW,YAAkB,GAAI,IAChD,kBAACjB,EAAW,CAACE,KAAMA,GACjB,kBAACV,EAAY,KACX,kBAAC,IAAgB,KACf,kBAACJ,EAAc,CACbiC,IAAKnB,EAAKoB,YAAYnB,IACtBoB,IAAKrB,EAAKsB,yBAY5B,kBAAC,IAAQ,CAACP,UAAU,WAAWC,IAAK,CAAEC,QAAS,CAAEC,EAAGP,KAClD,yBAAKI,UAAW,YAAkB,GAAI,GAAI,YAA2BhB,EAAMa,kBAAoB,EAAI,KACjG,6BACE,kBAAC,IAAU,CACTc,cAAehB,EAAY,IAAM,EACjCiB,aAAcjB,EAAY,GAAK,GAC/BkB,SAAS,EACTC,SAAS,EACTnB,UAAWA,GAEC,QAFQ,EAEnBX,EAAMc,aAAK,eAAEU,KAAI,SAACvB,EAAMwB,GAAU,OACjC,yBAAKT,UAAU,eAAeU,IAAKD,GACjC,kBAAC1B,EAAW,CAACE,KAAMA,GACjB,kBAACT,EAAa,CAACkC,IAAKD,GAClB,kBAAC,IAAgB,KACf,kBAACtC,EAAc,CACbiC,IAAKnB,EAAKoB,YAAYnB,IACtBoB,IAAKrB,EAAKsB,8BAcnB","file":"assets/56.chunk.a94a3c74140379453f5c.js","sourcesContent":["/**\r\n * @ComponentFor ImageBlockViewModel\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 { styled } from '@glitz/react';\r\nimport ImageBlockViewModel from './ImageBlockViewModel.type';\r\nimport { AspectRatioInner, AspectRatioOuter } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport { GridWrap } from 'Shared/PageLayout';\r\nimport { createGridClasses, createOffsetGridClassLarge } from 'Shared/grid';\r\nimport SwiperList from 'Shared/SwiperList';\r\nimport * as style from 'Shared/Style';\r\nimport ImageLinkViewModel from 'Shared/ViewModels/ImageLinkViewModel.type';\r\nimport Link from 'Shared/Link';\r\n\r\nconst Image = styled.img({\r\n  width: '100%',\r\n  height: '100%',\r\n  objectFit: 'cover',\r\n  objectPosition: 'center center',\r\n})\r\n\r\nconst AutoWidthImage = styled.img({\r\n  width: 'auto',\r\n  height: '100%',\r\n  objectFit: 'cover',\r\n  objectPosition: 'center center',\r\n})\r\n\r\nconst ImageWrapOne = styled(AspectRatioOuter, {\r\n  borderRadius: '8px',\r\n  paddingTop: '80%'\r\n})\r\n\r\nconst ImageWrapTwo = styled(AspectRatioOuter, {\r\n  borderRadius: '8px',\r\n  paddingTop: '125%',\r\n  width: '100%'\r\n})\r\n\r\nconst ImageWrapMany = styled(AspectRatioOuter, {\r\n  borderRadius: '8px',\r\n  paddingTop: '125%'\r\n})\r\n\r\nconst TwoImageWrap = styled.div({\r\n  ['@media ' + style.mediaUpToLarge]: {\r\n    rowGap: '12px',\r\n  },\r\n})\r\n\r\nexport const ImageLink = styled(Link, {\r\n  color: 'inherit',\r\n  textDecoration: 'none',\r\n});\r\n\r\ntype LinkedImageProps = React.HTMLAttributes<HTMLElement> & {\r\n  item: ImageLinkViewModel;\r\n};\r\n\r\nconst LinkedImage = (props: LinkedImageProps) => {\r\n  if (props.item.url) {\r\n    return (\r\n      <ImageLink\r\n        to={props.item.url}\r\n        title={props.item.titleText}\r\n      >\r\n        {props.children}\r\n      </ImageLink>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>{props.children}</>\r\n  );\r\n}\r\n\r\nexport const ImageBlock = connect(\r\n  state => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  }),\r\n  dispatch => ({}),\r\n)((props: ImageBlockViewModel & { currentBreakpoint: number }) => {\r\n  const { currentBreakpoint } = props;\r\n  const isCompact = functionIsCompact(currentBreakpoint);\r\n  const defaultYPadding = props.noStandardMargins ? '0px' : (isCompact ? '40px' : '80px');\r\n\r\n  if (props.items?.length === 1)\r\n    return (\r\n      <GridWrap className='grid wsb' css={{ padding: { y: defaultYPadding } }}>\r\n        <div className={createGridClasses(12, 8, createOffsetGridClassLarge(props.noStandardMargins ? 0 : 3))}>\r\n          <LinkedImage item={props.items[0]}>\r\n            <ImageWrapOne>\r\n              <AspectRatioInner>\r\n                <Image\r\n                  src={props.items[0].contentLink.url}\r\n                  alt={props.items[0].alternateText}\r\n                />\r\n              </AspectRatioInner>\r\n            </ImageWrapOne>\r\n          </LinkedImage>\r\n        </div>\r\n      </GridWrap>\r\n    );\r\n\r\n  if (props.items?.length === 2)\r\n    return (\r\n      <GridWrap className='grid wsb' css={{ padding: { y: defaultYPadding } }}>\r\n        <TwoImageWrap className={createGridClasses(12, 8, createOffsetGridClassLarge(props.noStandardMargins ? 0 : 3) + ' grid subgrid-10')}>\r\n          {props.items?.map((item, index) => (\r\n            <div key={index} className={createGridClasses(12, 5)}>\r\n              <LinkedImage item={item}>\r\n                <ImageWrapTwo>\r\n                  <AspectRatioInner>\r\n                    <AutoWidthImage\r\n                      src={item.contentLink.url}\r\n                      alt={item.alternateText}\r\n                    />\r\n                  </AspectRatioInner>\r\n                </ImageWrapTwo>\r\n              </LinkedImage>\r\n            </div>\r\n          ))}\r\n        </TwoImageWrap>\r\n      </GridWrap>\r\n    );\r\n\r\n  return (\r\n    <GridWrap className='grid wsb' css={{ padding: { y: defaultYPadding } }}>\r\n      <div className={createGridClasses(12, 10, createOffsetGridClassLarge(props.noStandardMargins ? 0 : 2))}>\r\n        <div>\r\n          <SwiperList\r\n            slidesPerView={isCompact ? 1.1 : 3}\r\n            spaceBetween={isCompact ? 12 : 16}\r\n            showNav={false}\r\n            cssMode={true}\r\n            isCompact={isCompact}\r\n          >\r\n            {props.items?.map((item, index) => (\r\n              <div className='swiper-slide' key={index}>\r\n                <LinkedImage item={item}>\r\n                  <ImageWrapMany key={index}>\r\n                    <AspectRatioInner>\r\n                      <AutoWidthImage\r\n                        src={item.contentLink.url}\r\n                        alt={item.alternateText}\r\n                      />\r\n                    </AspectRatioInner>\r\n                  </ImageWrapMany>\r\n                </LinkedImage>\r\n              </div>\r\n            ))}\r\n          </SwiperList>\r\n        </div>\r\n      </div>\r\n    </GridWrap>\r\n  );\r\n});\r\n\r\nexport default ImageBlock;\r\n"],"sourceRoot":""}