{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/Magazine/MagazineBlock.tsx"],"names":["Wrap","div","backgroundColor","brandColors","lightBlue","color","monochrome","white","padding","y","LabelWrap","marginBottom","alignSelf","justifySelf","TextWrap","marginTop","Heading","textAlign","Text","ButtonWrap","SliderWrap","ImageWrap","ContentWrap","display","flexDirection","alignItems","gap","ArticleCard","props","article","Div","className","to","url","src","image","alt","ratio","FourToThree","preset","MagazineListItem","borderRadius","tag","upperCase","heading","tags","slice","join","length","MagazineBlock","state","currentBreakpoint","dispatch","isCompact","slidesPerView","spaceBetween","showNav","items","label","fontSize","D96_M40","mainIntro","button","text","title","slidesPerGroup","alternativeNav","additionalMargin","cssMode","showSwirl","navColor","map","index","key"],"mappings":"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","file":"assets/57.chunk.aac5ca259071227ab6cd.js","sourcesContent":["/**\r\n * @ComponentFor MagazineBlockViewModel\r\n */\r\nimport connect from 'Shared/connect';\r\nimport { isCompact as functionIsCompact } from 'Shared/Viewport';\r\nimport React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport MagazineBlockViewModel from './MagazineBlockViewModel.type';\r\nimport State from 'Shared/State';\r\nimport { LinkButton } from 'Shared/TextButtons';\r\nimport ArticleListItemViewModel from 'Shared/ViewModels/ContentListItemViewModel.type';\r\nimport SwiperList from 'Shared/SwiperList';\r\nimport { RatioPicture, Preset, Ratio } from 'Shared/Image/Ratio';\r\nimport Link from 'Shared/Link';\r\nimport { H2, H3, Paragraph, ArticleTag, ResponsiveSize, TextLabel } from 'Shared/SharedComponents/atoms/Typography';\r\nimport { GridWrap } from 'Shared/PageLayout';\r\nimport { createGridClasses, createOffsetGridClassLarge } from 'Shared/grid';\r\nimport * as style from 'Shared/Style';\r\n\r\nconst Wrap = styled.div({\r\n  backgroundColor: style.colors.brandColors.lightBlue,\r\n  color: style.colors.monochrome.white,\r\n  padding: { y: '80px' },\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    padding: { y: '120px' },\r\n  },\r\n})\r\n\r\nconst LabelWrap = styled.div({\r\n  marginBottom: '24px',\r\n  alignSelf: 'end',\r\n  justifySelf: 'center'\r\n})\r\n\r\nconst TextWrap = styled.div({\r\n  marginTop: '24px',\r\n  alignSelf: 'start'\r\n})\r\n\r\nconst Heading = styled(H2, {\r\n  textAlign: 'center'\r\n})\r\n\r\nconst Text = styled(Paragraph, {\r\n  textAlign: 'center'\r\n})\r\n\r\nconst ButtonWrap = styled.div({\r\n  marginTop: '24px',\r\n  justifySelf: 'center'\r\n})\r\n\r\nconst SliderWrap = styled.div({\r\n  marginTop: '48px',\r\n})\r\n\r\nconst ImageWrap = styled.div({\r\n  marginBottom: '16px',\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: '12px',\r\n})\r\n\r\nconst ArticleCard = styled((props: { article: ArticleListItemViewModel; isCompact: boolean } & StyledProps) => {\r\n  const article = props.article as ArticleListItemViewModel;\r\n\r\n  return (\r\n    <styled.Div className=\"white-links\">\r\n      <Link to={article.url}>\r\n        <ImageWrap>\r\n          <RatioPicture\r\n            src={article.image?.url}\r\n            alt={''}\r\n            ratio={Ratio.FourToThree}\r\n            preset={Preset.MagazineListItem}\r\n            borderRadius={8}\r\n          />\r\n        </ImageWrap>\r\n        <ContentWrap>\r\n          <ArticleTag>{article.tag}</ArticleTag>\r\n          <H3 upperCase={false}>{article.heading}</H3>\r\n          <ArticleTag>\r\n            {article.tags?.slice(0, 3).join(', ')}\r\n            {(article?.tags?.length ?? 0) > 3 && `, +${(article?.tags?.length as number) - 3}`}\r\n          </ArticleTag>\r\n        </ContentWrap>\r\n      </Link>\r\n    </styled.Div>\r\n  );\r\n});\r\n\r\nexport const MagazineBlock = connect(\r\n  (state) => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  }),\r\n  (dispatch) => ({}),\r\n)((props: MagazineBlockViewModel & { currentBreakpoint: State['currentBreakpoint'] }) => {\r\n  const { currentBreakpoint } = props;\r\n  const isCompact = functionIsCompact(currentBreakpoint);\r\n\r\n  const slidesPerView = isCompact ? 1.25 : 2.25;\r\n  const spaceBetween = isCompact ? 12 : 16;\r\n  const showNav = (slidesPerView < props.items?.length) && !isCompact;\r\n\r\n  return (\r\n    <Wrap>\r\n      <GridWrap className=\"grid\">\r\n        <LabelWrap className={createGridClasses(12, 4, createOffsetGridClassLarge(5))}>\r\n          <TextLabel>{props.label}</TextLabel>\r\n        </LabelWrap>\r\n        <div className={createGridClasses(12, 8, createOffsetGridClassLarge(3))}>\r\n          <Heading fontSize={ResponsiveSize.D96_M40}>\r\n            {props.heading}\r\n          </Heading>\r\n        </div>\r\n        <TextWrap className={createGridClasses(12, 4, createOffsetGridClassLarge(5))}>\r\n          <Text>{props.mainIntro}</Text>\r\n        </TextWrap>\r\n\r\n        {props.button?.text && props.button?.url && (\r\n          <ButtonWrap className={createGridClasses(12, 12)}>\r\n            <LinkButton to={props.button.url} text={props.button.text} title={props.button.title} />\r\n          </ButtonWrap>\r\n        )}\r\n        <SliderWrap className={createGridClasses(12, 11, createOffsetGridClassLarge(2))}>\r\n          <div>\r\n            <SwiperList\r\n              slidesPerView={slidesPerView}\r\n              slidesPerGroup={isCompact ? 1 : 2}\r\n              spaceBetween={spaceBetween}\r\n              showNav={showNav}\r\n              alternativeNav={true}\r\n              additionalMargin=\"16px\"\r\n              isCompact={isCompact}\r\n              cssMode={true}\r\n              showSwirl={isCompact}\r\n              navColor={style.colors.monochrome.white}\r\n            >\r\n              {props.items?.map((article, index) => (\r\n                <div key={index} className=\"swiper-slide\">\r\n                  <ArticleCard isCompact={isCompact} article={article as ArticleListItemViewModel} />\r\n                </div>\r\n              ))}\r\n            </SwiperList>\r\n          </div>\r\n        </SliderWrap>\r\n      </GridWrap>\r\n    </Wrap>\r\n  );\r\n});\r\n\r\nexport default MagazineBlock;\r\n"],"sourceRoot":""}