{"version":3,"sources":["webpack:///./Avensia.Common/Features/Campaign/PromotionCard.tsx","webpack:///./Avensia.Common/Features/Campaign/PromotionOverviewPage.tsx"],"names":["props","link","promotionOverviewImage","name","backgroundColor","textBackgroundColor","textColor","lessCardsInRow","lessCardsInRowStyle","height","width","TINY_CARDS_PER_ROW","GUTTER","SMALL_CARDS_PER_ROW","MEDIUM_CARDS_PER_ROW","moreCardsInRowStyle","LARGE_CARDS_PER_ROW","imageContainerLessCardsStyle","maxHeight","PromotionCardWrapper","css","PromotionPageLink","to","display","alignItems","justifyContent","overflow","PromotionName","position","textAlign","fontSize","color","Wrapper","ImageContainer","ImageStyled","src","url","div","textDecoration","minHeight","margin","xy","boxShadow","padding","Link","top","right","zIndex","textTransform","fontWeight","x","y","borderRadius","img","objectFit","memo","PromosContainer","flexFlow","page","appearance","Narrow","promotions","map","promotion","i","key"],"mappings":"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","file":"assets/44.chunk.43876ce88304b9d81910.js","sourcesContent":["import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport { Style } from '@glitz/type';\r\nimport Link from 'Shared/Link';\r\nimport {\r\n  minMediumMediaQuery,\r\n  minLargeMediaQuery,\r\n  minTinyMediaQuery,\r\n  minSmallMediaQuery,\r\n  minHugeMediaQuery,\r\n} from 'Shared/Style';\r\nimport PromotionCardViewModel from './PromotionCardViewModel.type';\r\n\r\ntype PropType = StyledProps & PromotionCardViewModel & { lessCardsInRow: boolean };\r\n\r\nexport default styled(function PromotionCard(props: PropType) {\r\n  const { link, promotionOverviewImage, name, backgroundColor, textBackgroundColor, textColor, lessCardsInRow } = props;\r\n  const defaultTextColor = '#fff';\r\n  const defaultTextBackgroundColor = '#000';\r\n\r\n  const lessCardsInRowStyle: Style = {\r\n    height: '250px',\r\n    [minSmallMediaQuery]: {\r\n      width: `calc(100% / ${TINY_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n    [minMediumMediaQuery]: {\r\n      width: `calc(100% / ${SMALL_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n    [minHugeMediaQuery]: {\r\n      width: `calc(100% / ${MEDIUM_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n  };\r\n\r\n  const moreCardsInRowStyle: Style = {\r\n    height: '185px',\r\n    [minTinyMediaQuery]: {\r\n      width: `calc(100% / ${TINY_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n    [minSmallMediaQuery]: {\r\n      width: `calc(100% / ${SMALL_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n    [minMediumMediaQuery]: {\r\n      width: `calc(100% / ${MEDIUM_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n    [minLargeMediaQuery]: {\r\n      width: `calc(100% / ${LARGE_CARDS_PER_ROW} - ${GUTTER}px)`,\r\n    },\r\n  };\r\n\r\n  const imageContainerLessCardsStyle: Style = {\r\n    maxHeight: 'unset',\r\n    [minSmallMediaQuery]: {},\r\n  };\r\n\r\n  const imageContainerMoreCardsStyle: Style = {\r\n    // [minTinyMediaQuery]: {\r\n    //   height: '135px',\r\n    // },\r\n  };\r\n\r\n  return (\r\n    <PromotionCardWrapper css={lessCardsInRow ? lessCardsInRowStyle : moreCardsInRowStyle}>\r\n      <PromotionPageLink\r\n        to={link}\r\n        css={\r\n          backgroundColor\r\n            ? {\r\n                backgroundColor: `${backgroundColor}`,\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                overflow: 'hidden',\r\n              }\r\n            : {\r\n                backgroundColor: 'white',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                overflow: 'hidden',\r\n              }\r\n        }\r\n      >\r\n        {name && (\r\n          <PromotionName\r\n            css={\r\n              backgroundColor && !promotionOverviewImage\r\n                ? {\r\n                    position: 'unset',\r\n                    backgroundColor: 'unset',\r\n                    textAlign: 'center',\r\n                    fontSize: '25px',\r\n                    color: `${textColor ? textColor : defaultTextColor}`,\r\n                  }\r\n                : { backgroundColor: `${textBackgroundColor ? textBackgroundColor : defaultTextBackgroundColor}` }\r\n            }\r\n          >\r\n            {name}\r\n          </PromotionName>\r\n        )}\r\n        <Wrapper>\r\n          {promotionOverviewImage && (\r\n            <ImageContainer css={lessCardsInRow ? imageContainerLessCardsStyle : imageContainerMoreCardsStyle}>\r\n              <ImageStyled src={promotionOverviewImage.url} />\r\n            </ImageContainer>\r\n          )}\r\n        </Wrapper>\r\n      </PromotionPageLink>\r\n    </PromotionCardWrapper>\r\n  );\r\n});\r\n\r\nconst TINY_CARDS_PER_ROW = 2;\r\nconst SMALL_CARDS_PER_ROW = 3;\r\nconst MEDIUM_CARDS_PER_ROW = 4;\r\nconst LARGE_CARDS_PER_ROW = 5;\r\nconst GUTTER = 10;\r\n\r\nconst PromotionCardWrapper = styled.div({\r\n  position: 'relative',\r\n  textDecoration: 'inherit',\r\n  color: 'inherit',\r\n  minHeight: '150px',\r\n  display: 'flex',\r\n  width: '100%',\r\n  margin: { xy: '5px' },\r\n  boxShadow: '3px 3px 7px rgba(0,0,0,0.3)',\r\n  padding: { xy: '10px' },\r\n});\r\n\r\nconst Wrapper = styled.div({\r\n  position: 'relative',\r\n});\r\n\r\nconst PromotionPageLink = styled(Link, {\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  textDecoration: 'inherit',\r\n  overflow: 'hidden',\r\n  color: 'inherit',\r\n  height: '100%',\r\n  width: '100%',\r\n});\r\n\r\nconst PromotionName = styled.div({\r\n  position: 'absolute',\r\n  top: 0,\r\n  right: 0,\r\n  zIndex: 1,\r\n  textTransform: 'uppercase',\r\n  fontWeight: 'bold',\r\n  color: 'white',\r\n  padding: { x: '5px', y: 0 },\r\n  borderRadius: '2px',\r\n});\r\n\r\nconst ImageContainer = styled.div({\r\n  backgroundColor: 'transparent',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  width: 'auto',\r\n  height: '100%',\r\n  overflow: 'hidden',\r\n});\r\n\r\nconst ImageStyled = styled.img({\r\n  width: '100%',\r\n  height: '100%',\r\n  objectFit: 'fill',\r\n});\r\n","/**\r\n * @ComponentFor PromotionOverviewPageViewModel\r\n */\r\nimport React from 'react';\r\nimport PromotionCard from './PromotionCard';\r\nimport PromotionOverviewPageViewModelType from './PromotionOverviewPageViewModel.type';\r\nimport { Main, Appearance } from 'Shared/PageLayout';\r\nimport { styled } from '@glitz/react';\r\nimport { epiPropertyValue } from '@avensia/scope-episerver';\r\ntype PropType = PromotionOverviewPageViewModelType;\r\n\r\nconst PromotionOverviewPage = (props: PropType) => {\r\n  const PromosContainer = styled.div({\r\n    display: 'flex',\r\n    flexFlow: 'row wrap',\r\n  });\r\n\r\n  const lessCardsInRow = epiPropertyValue(props.page.lessCardsInRow);\r\n\r\n  return (\r\n    <Main appearance={Appearance.Narrow}>\r\n      <PromosContainer>\r\n        {props.promotions &&\r\n          props.promotions.map((promotion, i) => {\r\n            return <PromotionCard lessCardsInRow={lessCardsInRow} {...promotion} key={promotion.name + i} />;\r\n          })}\r\n      </PromosContainer>\r\n    </Main>\r\n  );\r\n};\r\n\r\nexport default React.memo(PromotionOverviewPage);\r\n"],"sourceRoot":""}