{"version":3,"file":"dist/build-client/static/js/Organisms-Blocks-ItemListingBlock.8fa89f7e.chunk.js","mappings":"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","sources":["Atoms/Grids/GridItem.tsx","Organisms/Blocks/ItemListingBlock.tsx","Shared/Common/ItemListingBlockSlider.tsx","Shared/Common/Utils/groupArray.ts"],"sourcesContent":["import { styled } from '../../stitches.config';\r\n\r\ntype PropType = {\r\n  layout?: string;\r\n  children: JSX.Element | string;\r\n};\r\n\r\nfunction GridItem({ layout = '1/1', children }: PropType) {\r\n  return (\r\n    <GridItemContainer data-gridsize={layout}>{children}</GridItemContainer>\r\n  );\r\n}\r\n\r\nconst GridItemContainer = styled('div', {\r\n  wh: '100%',\r\n  mx: 'auto',\r\n  gridColumnStart: 'auto',\r\n  gridColumnEnd: 'span 12',\r\n  '@mediaMinMedium': {\r\n    maxW: 'unset',\r\n    '&:nth-child(n)[data-gridsize=\"1/2\"], &:nth-child(n)[data-gridsize=\"1/3\"], &:nth-child(n)[data-gridsize=\"1/4\"]':\r\n      {\r\n        gridColumnEnd: 'span 6',\r\n      },\r\n  },\r\n  '@mediaMinLarge': {\r\n    '&:nth-child(n)[data-gridsize=\"1/3\"]': {\r\n      gridColumnEnd: 'span 4',\r\n    },\r\n    '&:nth-child(n)[data-gridsize=\"1/4\"]': {\r\n      gridColumnEnd: 'span 3',\r\n    },\r\n    mx: 0,\r\n  },\r\n  '&:nth-child(n)[data-gridsize=\"FullWidth\"]': {\r\n    maxW: '$maxWidthMobile',\r\n    '@mediaMinLarge': {\r\n      left: '50%',\r\n      marginLeft: '-50vw',\r\n      marginRight: '-50vw',\r\n      maxW: '100vw',\r\n      position: 'relative',\r\n      right: '50%',\r\n      w: '100vw',\r\n    },\r\n    px: 0,\r\n  },\r\n});\r\n\r\nexport default GridItem;\r\n","import Button from '../../Atoms/Buttons/Button';\r\nimport { H2 } from '../../Atoms/Typography/Headings/Heading';\r\nimport KexLink from '../../Kex/KexLink';\r\nimport { styled } from '../../stitches.config';\r\nimport GridItem from '../../Atoms/Grids/GridItem';\r\nimport ContentAreaItem from '../../Shared/Models/ContentAreaItem.interface';\r\nimport IItemListingBlock from '../../Blocks/ItemListingBlock/Models/ItemListingBlockModel.interface';\r\nimport ItemListingBlockSlider from '../../Shared/Common/ItemListingBlockSlider';\r\n\r\ninterface ItemListingBlockModel extends ContentAreaItem {\r\n  content: IItemListingBlock;\r\n  blockId: any;\r\n}\r\n\r\nfunction ItemListingBlock({\r\n  content: { items, link, heading },\r\n  blockId,\r\n}: ItemListingBlockModel) {\r\n  const MainContent = ItemListingBlockSlider(items);\r\n\r\n  return (\r\n    <GridItem>\r\n      <Container data-litium-block-id={blockId}>\r\n        <HeadingWrapper>\r\n          <StyledH2>{heading}</StyledH2>\r\n        </HeadingWrapper>\r\n        <ContentWrapper>\r\n          <MainContent />\r\n        </ContentWrapper>\r\n        {link && (\r\n          <LinkContainer>\r\n            <StyledLink href={link.href}>\r\n              <Button size=\"s\" type=\"primary\">\r\n                {link.text}\r\n              </Button>\r\n            </StyledLink>\r\n          </LinkContainer>\r\n        )}\r\n      </Container>\r\n    </GridItem>\r\n  );\r\n}\r\n\r\nexport default ItemListingBlock;\r\n\r\nconst Container = styled('div', {});\r\n\r\nconst ContentWrapper = styled('div', {\r\n  mx: -2,\r\n});\r\n\r\nconst HeadingWrapper = styled('div', {\r\n  display: 'flex',\r\n  justifyContent: 'center',\r\n});\r\n\r\nconst StyledH2 = styled(H2, {\r\n  fs: 10,\r\n});\r\n\r\nconst LinkContainer = styled('div', {\r\n  w: '100%',\r\n  display: 'flex',\r\n  flexWrap: 'wrap',\r\n  justifyContent: 'flex-end',\r\n});\r\n\r\nconst StyledLink = styled(KexLink, {\r\n  py: 6,\r\n  '&:hover': {\r\n    textDecoration: 'underline',\r\n  },\r\n  '@mediaMaxSmall': {\r\n    mx: 'auto',\r\n  },\r\n});\r\n","import loadable from '@loadable/component';\r\nimport { styled } from '../../stitches.config';\r\nimport { groupArray } from './Utils/groupArray';\r\nimport IProductCardModel from '../../ProductCard/Models/ProductCardModel.interface';\r\nimport ProductCard from '../../Organisms/ProductCard/ProductCard';\r\nimport Grid from '../../Atoms/Grids/Grid';\r\nimport useMedia from '../Hooks/useMedia';\r\nimport { mediaQueryTypes } from '../../Theme/Settings/mediaQueries';\r\nimport { ArrowIcon } from '../../Atoms/Icons';\r\nimport { timings } from '../../Theme/Settings/animation';\r\n\r\nconst CarouselLib = loadable.lib(() => import('nuka-carousel'));\r\n\r\nfunction ItemListingBlockSlider(products: IProductCardModel[]) {\r\n  const isSmallMobile = useMedia(mediaQueryTypes.mediaMaxVerySmall);\r\n  const isLargeMobile = useMedia(mediaQueryTypes.mediaMinVerySmall);\r\n  const isTablet = useMedia(mediaQueryTypes.mediaMinMedium);\r\n  const isLargeDesktop = useMedia(mediaQueryTypes.mediaMinHuge);\r\n\r\n  const getSliderCount = () => {\r\n    if (isSmallMobile) {\r\n      return 1;\r\n    } else if (isLargeMobile && !isTablet) {\r\n      return 2;\r\n    } else if (isTablet && !isLargeDesktop) {\r\n      return 3;\r\n    } else if (isLargeDesktop) {\r\n      return 4;\r\n    }\r\n  };\r\n\r\n  const slidesToShow = getSliderCount();\r\n  const groupedProducts = groupArray(products, slidesToShow);\r\n  return () => {\r\n    return (\r\n      <CarouselLib fallback={<div />}>\r\n        {({ default: Carousel }) => (\r\n          <div>\r\n            <Carousel\r\n              style={{\r\n                height: '100%',\r\n              }}\r\n              speed={600}\r\n              cellSpacing={16}\r\n              renderCenterLeftControls={({ previousSlide, currentSlide }) => (\r\n                <SliderButton\r\n                  onClick={previousSlide}\r\n                  hide={currentSlide === 0}\r\n                  left={true}\r\n                >\r\n                  <ArrowIcon size=\"xs\" rotateLeft color={'white'} />\r\n                </SliderButton>\r\n              )}\r\n              renderCenterRightControls={({ nextSlide, currentSlide }) => (\r\n                <SliderButton\r\n                  onClick={nextSlide}\r\n                  hide={currentSlide === groupedProducts?.length - 1}\r\n                >\r\n                  <ArrowIcon size=\"xs\" color={'white'} />\r\n                </SliderButton>\r\n              )}\r\n              renderBottomCenterControls={() => <></>}\r\n            >\r\n              {groupedProducts &&\r\n                groupedProducts.map(\r\n                  (productsSlide: IProductCardModel[], index) => {\r\n                    return (\r\n                      <Grid key={index}>\r\n                        {productsSlide.map((product: IProductCardModel) => (\r\n                          <ProductCard\r\n                            key={product.code + product.name}\r\n                            item={product}\r\n                          />\r\n                        ))}\r\n                      </Grid>\r\n                    );\r\n                  }\r\n                )}\r\n            </Carousel>\r\n          </div>\r\n        )}\r\n      </CarouselLib>\r\n    );\r\n  };\r\n}\r\n\r\nconst SliderButton = styled('button', {\r\n  transitionDuration: timings.oneHalf,\r\n  transitionProperty: 'all',\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  justifyContent: 'center',\r\n  wh: '32px',\r\n  mr: 4,\r\n  br: '100%',\r\n  background: '$primary',\r\n  variants: {\r\n    hide: {\r\n      true: {\r\n        visibility: 'hidden',\r\n        opacity: 0,\r\n      },\r\n    },\r\n    left: {\r\n      true: {\r\n        mr: 0,\r\n        ml: 4,\r\n      },\r\n    },\r\n  },\r\n});\r\n\r\nexport default ItemListingBlockSlider;\r\n","// import ContentAreaItem from 'Models/App/ContentAreaItem.interface';\r\n\r\n/**\r\n * Group Array by size param\r\n * if size is 1 [1,2] will return [[1], [2]],\r\n * if size is 2 [1,2] will return [[1,2]]\r\n */\r\nexport const groupArray = (arr: any[], size = 1) => {\r\n  const newArray = [];\r\n  const copiedArr = [...arr];\r\n  while (copiedArr.length > 0) newArray.push(copiedArr.splice(0, size));\r\n\r\n  return newArray;\r\n};\r\n"],"names":["GridItemContainer","styled","wh","mx","gridColumnStart","gridColumnEnd","maxW","left","marginLeft","marginRight","position","right","w","px","_ref","_ref$layout","layout","children","_jsx","_ref$content","content","items","link","heading","blockId","MainContent","ItemListingBlockSlider","GridItem","_jsxs","Container","HeadingWrapper","StyledH2","ContentWrapper","LinkContainer","StyledLink","href","Button","size","type","text","display","justifyContent","H2","fs","flexWrap","KexLink","py","textDecoration","CarouselLib","loadable","resolved","chunkName","isReady","props","key","resolve","__webpack_modules__","importAsync","requireAsync","_this","then","requireSync","id","__webpack_require__","products","isSmallMobile","useMedia","mediaQueryTypes","isLargeMobile","isTablet","isLargeDesktop","slidesToShow","groupedProducts","groupArray","fallback","Carousel","default","style","height","speed","cellSpacing","renderCenterLeftControls","_ref2","previousSlide","currentSlide","SliderButton","onClick","hide","ArrowIcon","rotateLeft","color","renderCenterRightControls","_ref3","nextSlide","length","renderBottomCenterControls","_Fragment","map","productsSlide","index","Grid","product","ProductCard","item","code","name","transitionDuration","timings","transitionProperty","alignItems","mr","br","background","variants","true","visibility","opacity","ml","arr","arguments","undefined","newArray","copiedArr","_toConsumableArray","push","splice"],"sourceRoot":""}