{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/ShopTheLook/ShopTheLookItemBlock.tsx"],"names":["ImageContainer","background","size","position","display","justifyContent","alignItems","Label","span","color","monochrome","white","fontStyle","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","Content","div","flexDirection","paddingBottom","gap","Wrap","borderRadius","paddingTop","ThreeToFour","marginBottom","TextLabel","textAlign","Plus","marginLeft","state","currentBreakpoint","props","buttonText","label","products","isMobile","onClick","css","image","url","HalfWidth","length","text","padding","x","undefined","iconAfter","setModalData","showModal","theme","TransparentWhite"],"mappings":"oNA0BMA,EAAiB,YAAO,IAAkB,CAC9CC,WAAY,CACVC,KAAM,QACNC,SAAU,iBAEZC,QAAS,OACTC,eAAgB,SAChBC,WAAY,QAGRC,EAAQ,IAAOC,KAAK,CACxBC,MAAO,IAAaC,WAAWC,MAC/BP,QAAS,QACTQ,UAAW,SACXC,WAAY,IACZC,SAAU,OACVC,WAAY,OACZC,cAAe,SACfC,cAAe,cAGXC,EAAU,IAAOC,MAAG,GACxBf,QAAS,OACTgB,cAAe,MACff,eAAgB,gBAChBC,WAAY,SACZe,cAAe,OACfC,IAAK,QACJ,UAAY,KAAsB,CACjCA,IAAK,OACLF,cAAe,SACfC,cAAe,Q,IAIbE,EAAO,YAAO,MAAgB,GAClCC,aAAc,MACdC,WAAY,YAAoB,IAAMC,eACrC,UAAY,KAAuB,CAClCC,aAAc,O,IAIZC,EAAY,YAAOrB,IAAK,MAC3B,UAAY,KAAuB,CAClCsB,UAAW,U,IAITC,EAAO,YAAO,MAAS,GAC3BC,WAAY,QACX,UAAY,KAAsB,CACjCA,WAAY,O,IA8BD,uBACb,SAAAC,GAAS,OACPC,kBAAmBD,EAAMC,qBAFd,CAIb,aA9BF,SAA8BC,G,YACpBD,EAAA,EAAAA,kBAAmBE,EAAA,EAAAA,WAAYC,EAAA,EAAAA,MAAOC,EAAA,EAAAA,SACxCC,EAAW,YAAUL,GAI3B,OAHAK,EAAW,IAAqB,IAI9B,kBAACf,EAAI,CAACgB,QAASL,EAAMK,SACnB,kBAACvC,EAAc,CAACwC,IAAK,CAAEvC,WAAY,CAAEwC,MAAO,YAA8B,QAAZ,EAACP,EAAMO,aAAK,eAAEC,IAAK,IAAOC,cACtF,kBAACzB,EAAO,KACN,kBAACU,EAAS,KAAEQ,GACXD,IAAsB,QAAR,EAAAE,SAAQ,eAAEO,QAAS,GAChC,kBAAC,IAAW,CACVC,MAASP,EAAW,GAAKH,EAAa,KAAG,OAAY,QAAZ,EAAIE,SAAQ,eAAEO,OAAM,UAAI,GAAC,IAClEE,QAASR,EAAW,CAAES,EAAG,SAAOC,EAChCC,UAAW,kBAACnB,EAAI,MAChBS,QAAS,WAAM,OAAAL,EAAMgB,aAAa,CAAEC,WAAW,EAAMd,SAAUH,EAAMG,YACrEe,MAAO,IAAYC","file":"assets/9.chunk.abf7385d23d8ab024d83.js","sourcesContent":["/**\r\n * @ComponentFor ShopTheLookItemBlockViewModel\r\n */\r\nimport React, { useState } from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport connect from 'Shared/connect';\r\nimport { isCompact } from 'Shared/Viewport';\r\nimport ShopTheLookItemBlock from './ShopTheLookItemBlockViewModel.type';\r\nimport { SolidButton, ButtonTheme } from 'Shared/TextButtons';\r\nimport { Plus12x12 } from 'Shared/Icons/Plus';\r\nimport { HEIGHT as mobileHeaderHeight } from 'SiteLayout/Header/MobileHeader';\r\nimport { HEIGHT as desktopHeaderHeight } from 'SiteLayout/Header/DesktopHeader';\r\nimport { AspectRatioInner, AspectRatioOuter } from 'Shared/SharedComponents/atoms/AspectRatio';\r\nimport ProductListItemViewModel from 'Product/ProductListing/ProductListItemViewModel.type';\r\nimport * as style from 'Shared/Style';\r\nimport { calculateTopPadding, Ratio } from 'Shared/AspectRatio';\r\nimport { setImageBackground, Preset } from 'Shared/image-background';\r\n\r\ntype ConnectedPropType = {\r\n  currentBreakpoint: number;\r\n};\r\n\r\ntype PropType = ShopTheLookItemBlock & ConnectedPropType & StyledProps & {\r\n  setModalData: (value: { showModal: boolean, products: ProductListItemViewModel[] }) => void;\r\n};\r\n\r\nconst ImageContainer = styled(AspectRatioInner, {\r\n  background: {\r\n    size: 'cover',\r\n    position: 'center center',\r\n  },\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n  alignItems: 'end'\r\n})\r\n\r\nconst Label = styled.span({\r\n  color: style.colors.monochrome.white,\r\n  display: 'block',\r\n  fontStyle: 'normal',\r\n  fontWeight: 500,\r\n  fontSize: '14px',\r\n  lineHeight: '100%',\r\n  letterSpacing: '0.01em',\r\n  textTransform: 'uppercase',\r\n})\r\n\r\nconst Content = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'row',\r\n  justifyContent: 'space-between',\r\n  alignItems: 'center',\r\n  paddingBottom: '12px',\r\n  gap: '8px',\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    gap: '32px',\r\n    flexDirection: 'column',\r\n    paddingBottom: '24px',\r\n  },\r\n})\r\n\r\nconst Wrap = styled(AspectRatioOuter, {\r\n  borderRadius: '8px',\r\n  paddingTop: calculateTopPadding(Ratio.ThreeToFour),\r\n  ['@media ' + style.mediaUpToLarge]: {\r\n    marginBottom: '8px',\r\n  },\r\n})\r\n\r\nconst TextLabel = styled(Label, {\r\n  ['@media ' + style.mediaUpToLarge]: {\r\n    textAlign: 'center',\r\n  },\r\n})\r\n\r\nconst Plus = styled(Plus12x12, {\r\n  marginLeft: '6px',\r\n  ['@media ' + style.mediaMinLarge]: {\r\n    marginLeft: '8px'\r\n  },\r\n})\r\n\r\nfunction ShopTheLookItemBlock(props: PropType & { currentBreakpoint: number; onClick?: () => void }) {\r\n  const { currentBreakpoint, buttonText, label, products } = props;\r\n  const isMobile = isCompact(currentBreakpoint);\r\n  isMobile ? mobileHeaderHeight : desktopHeaderHeight;\r\n\r\n  // 3:4 ratio\r\n  return (\r\n    <Wrap onClick={props.onClick}>\r\n      <ImageContainer css={{ background: { image: setImageBackground(props.image?.url, Preset.HalfWidth), }, }}>\r\n        <Content>\r\n          <TextLabel>{label}</TextLabel>\r\n          {buttonText && products?.length > 0 && (\r\n            <SolidButton\r\n              text={`${isMobile ? '' : buttonText + ' '}(${products?.length ?? 0})`}\r\n              padding={isMobile ? { x: 11 } : undefined}\r\n              iconAfter={<Plus />}\r\n              onClick={() => props.setModalData({ showModal: true, products: props.products })}\r\n              theme={ButtonTheme.TransparentWhite}\r\n            />\r\n          )}\r\n        </Content>\r\n      </ImageContainer>\r\n    </Wrap>\r\n  );\r\n}\r\n\r\nexport default connect(\r\n  state => ({\r\n    currentBreakpoint: state.currentBreakpoint,\r\n  })\r\n)(styled(ShopTheLookItemBlock));"],"sourceRoot":""}