{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/ImageContent/ImageContentBlock.tsx"],"names":["state","cloakedImages","appShellData","cloakProductImages","currentBreakpoint","props","items","isMobile","Small","ImageContainer","map","item","index","Item","key","Date","now","alt","block","altText","itemProp","preset","imageUrl","url","includes","undefined","Large","ratio","ThreeToTwo","src","div","display","flexFlow","justifyContent","backgroundColor","marginTop","padding","x","width","xy"],"mappings":"2FAAA,W,IAAA,6DAqDe,uBACb,SAACA,GAA4B,OAC3BC,cAAeD,EAAME,aAAaC,mBAClCC,kBAAmBJ,EAAMI,qBAHd,EA3BW,SAACC,GACzB,IAAMC,EAAQ,YAAiBD,EAAMC,OAC/BC,EAAWF,EAAMD,kBAAoB,IAAWI,MAEtD,OACE,kBAACC,EAAc,KACZH,EAAMA,MAAMI,KAAI,SAACC,EAA0BC,G,cAAU,OACpD,kBAACC,EAAI,CAACC,IAAKF,EAAQG,KAAKC,OACtB,kBAAC,IAAK,CACJC,IAAK,YAA2B,QAAX,EAACN,EAAKO,aAAK,eAAEC,SAClCC,SAAS,QACTC,QACyC,QAAvC,EAAC,YAA2B,QAAX,EAACV,EAAKO,aAAK,eAAEI,iBAAS,eAAEC,IAAIC,SAAS,cAIlDC,EAHClB,EAEC,IAAYC,MADZ,IAAYkB,MAIpBC,MAAO,IAAWC,WAClBC,IAA2C,QAAxC,EAAE,YAA2B,QAAX,EAAClB,EAAKO,aAAK,eAAEI,iBAAS,eAAEC,cAezD,IAAMd,EAAiB,IAAOqB,MAAG,GAC/BC,QAAS,OACTC,SAAU,SACVC,eAAgB,SAChBC,gBAAiB,KACjBC,UAAW,aAAa,IACxBC,QAAS,CACPC,EAAG,aAAa,MAEjB,MAAsB,CACrBJ,eAAgB,gBAElB,EAAC,MAAqB,CACpBD,SAAU,WACVI,QAAS,CACPC,EAAG,aAAa,M,IAKhBxB,EAAO,IAAOiB,MAAG,GACrBQ,MAAO,OACPF,QAAS,CACPG,GAAI,aAAa,MAElB,MAAqB,CACpBD,MAAO,O","file":"assets/50.chunk.383b1543ee0e251ffd74.js","sourcesContent":["/**\r\n * @ComponentFor ImageContentBlock\r\n */\r\n\r\nimport React from 'react';\r\nimport { Breakpoint } from '@avensia/scope';\r\nimport { epiPropertyValue } from '@avensia/scope-episerver';\r\nimport { styled } from '@glitz/react';\r\nimport connect from 'Shared/connect';\r\nimport ImageContentBlockType from './ImageContentBlock.type';\r\nimport ImageBlockType from 'Shared/Blocks/Image/ImageBlock.type';\r\nimport Image, { Ratio as ImageRatio, Preset as ImagePreset } from 'Shared/Image/Ratio';\r\nimport { minSmallMediaQuery, minMediumMediaQuery, pixelsToUnit, white } from 'Shared/Style';\r\n\r\ntype ImageBlockPropType = {\r\n  block: ImageBlockType;\r\n  componentName: string;\r\n  width: string;\r\n};\r\n\r\ntype ConnectStateType = {\r\n  cloakedImages: boolean;\r\n  currentBreakpoint: number;\r\n};\r\ntype PropType = ImageContentBlockType & ConnectStateType;\r\n\r\nconst ProductImageBlock = (props: PropType) => {\r\n  const items = epiPropertyValue(props.items);\r\n  const isMobile = props.currentBreakpoint < Breakpoint.Small;\r\n\r\n  return (\r\n    <ImageContainer>\r\n      {items.items.map((item: ImageBlockPropType, index) => (\r\n        <Item key={index + Date.now()}>\r\n          <Image\r\n            alt={epiPropertyValue(item.block?.altText)}\r\n            itemProp=\"image\"\r\n            preset={\r\n              !epiPropertyValue(item.block?.imageUrl)?.url.includes('.gif')\r\n                ? !isMobile\r\n                  ? ImagePreset.Large\r\n                  : ImagePreset.Small\r\n                : undefined\r\n            }\r\n            ratio={ImageRatio.ThreeToTwo}\r\n            src={epiPropertyValue(item.block?.imageUrl)?.url}\r\n          />\r\n        </Item>\r\n      ))}\r\n    </ImageContainer>\r\n  );\r\n};\r\n\r\nexport default connect(\r\n  (state): ConnectStateType => ({\r\n    cloakedImages: state.appShellData.cloakProductImages,\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  }),\r\n)(ProductImageBlock);\r\n\r\nconst ImageContainer = styled.div({\r\n  display: 'flex',\r\n  flexFlow: 'column',\r\n  justifyContent: 'center',\r\n  backgroundColor: white,\r\n  marginTop: pixelsToUnit(15),\r\n  padding: {\r\n    x: pixelsToUnit(7),\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    justifyContent: 'space-around',\r\n  },\r\n  [minSmallMediaQuery]: {\r\n    flexFlow: 'row wrap',\r\n    padding: {\r\n      x: pixelsToUnit(15),\r\n    },\r\n  },\r\n});\r\n\r\nconst Item = styled.div({\r\n  width: '100%',\r\n  padding: {\r\n    xy: pixelsToUnit(8),\r\n  },\r\n  [minSmallMediaQuery]: {\r\n    width: '50%',\r\n  },\r\n});\r\n"],"sourceRoot":""}