{"version":3,"file":"ProductList-Y3vWKUa6-chunk.js","sources":["../../../GSDClient/Scripts/Pages/ProductListingPage/ProductListCreativeItem.tsx","../../../GSDClient/Scripts/Pages/ProductListingPage/ProductList.tsx"],"sourcesContent":["import { Key } from 'react';\n\nimport { dpr } from 'Utils/dpr';\nimport tailwindBreakpoints from 'Utils/tailwindBreakpoints';\n\nimport { IProductListCreativeItem } from 'Types/Litium';\nimport Markup from 'Components/Markup';\nimport { ISrcSetSize } from 'Components/ProductCard/ProductCardImage';\n\ninterface ProductListCreativeItem extends IProductListCreativeItem {\n    item: IProductListCreativeItem;\n    srcSetSizes?: ISrcSetSize;\n}\n\nconst productListCreativeItem = ({\n    item,\n    srcSetSizes = {\n        default: { height: 228, width: 350 },\n        md: { height: 509, width: 732 },\n        lg: { height: 305, width: 444 },\n        xl: {\n            height: 664,\n            width: 950,\n        },\n        xxl: {\n            height: 664,\n            width: 950,\n        },\n    },\n}: ProductListCreativeItem) => {\n    const sizes = (\n        Object.entries(srcSetSizes) as SizeEntries<typeof srcSetSizes>\n    )\n        .map(([key, value]) => ({\n            breakPointVal: parseInt(tailwindBreakpoints[key] as string),\n            key,\n            width: value.width,\n            srcWidth: value.width,\n            height: value.height,\n            srcHeight: value.height,\n        }))\n        .filter((x: { key: string | number }) => tailwindBreakpoints[x.key])\n        .sort(\n            (a: { breakPointVal: number }, b: { breakPointVal: number }) =>\n                b.breakPointVal - a.breakPointVal\n        );\n\n    return (\n        <div className=\"relative mb-2 flex w-full flex-col gap-3 supports-[grid-template-rows:_subgrid]:contents\">\n            <a href={item.linkUrl}>\n                <picture className=\"\">\n                    {sizes.map(\n                        (value: {\n                            key: Key;\n                            width: string | number;\n                            height: string | number;\n                            srcHeight: any;\n                            srcWidth: any;\n                        }) => (\n                            <source\n                                key={value.key}\n                                width={value.width}\n                                height={value.height}\n                                media={`(min-width: ${\n                                    tailwindBreakpoints[value.key]\n                                })`}\n                                srcSet={dpr(\n                                    `${item.image.src}?format=webp&fit=crop&height=${value.srcHeight}&width=${value.srcWidth}`\n                                )}\n                            />\n                        )\n                    )}\n                    <img\n                        className=\"h-full w-full object-cover\"\n                        src={`${item.image.src}?format=webp&fit=crop&height=auto&width=auto`}\n                        srcSet={dpr(\n                            `${item.image.src}?format=webp&fit=crop&height=auto&width=auto`\n                        )}\n                        alt={item.image.altText}\n                        loading=\"lazy\"\n                    />\n                </picture>\n            </a>\n            {item.text?.value && (\n                <Markup\n                    html={item.text.value}\n                    cssClass=\"prose-block leading-4 mb-0 font-light bottom-8 px-1.5 lg:pb-2 lg:px-3\"\n                />\n            )}\n        </div>\n    );\n};\n\nexport default productListCreativeItem;\n","import { AnimatePresence, motion } from 'framer-motion';\n\nimport {\n    IBlockViewModel,\n    IProductItemViewModel,\n    IProductListCreativeItem,\n    IWishListTranslations,\n} from 'Types/Litium';\nimport { ISrcSetSize } from 'Types/shared';\nimport BlockRenderer from 'Blocks/BlockRenderer';\nimport ProductCard from 'Components/ProductCard/ProductCard';\n\nimport ProductListCreativeItem from './ProductListCreativeItem';\n\nconst ProductList = ({\n    products,\n    quickBuyProduct,\n    columns = 5,\n    additionalTranslations,\n    srcSetSizes = {\n        default: { width: 156, height: 222 },\n        md: { width: 356, height: 507 },\n        lg: { width: 166, height: 238 },\n        xl: { width: 250, height: 357 },\n        xxl: { width: 368, height: 525 },\n    },\n    blockAreas,\n    productListCreativeItems,\n}: {\n    products: IProductItemViewModel[];\n    columns?: number;\n    srcSetSizes?: ISrcSetSize;\n    quickBuyProduct?: boolean;\n    additionalTranslations?: IWishListTranslations;\n    blockAreas?: { [key: string]: IBlockViewModel[] };\n    productListCreativeItems: IProductListCreativeItem[];\n}) => (\n    <ul\n        style={{ '--columns': columns } as React.CSSProperties}\n        className={`grid ${\n            quickBuyProduct ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-2'\n        } gap-5 lg:grid-cols-[repeat(var(--columns),_minmax(0,_1fr))] supports-[grid-template-rows:_subgrid]:lg:grid-rows-[auto]`}\n    >\n        <AnimatePresence mode=\"popLayout\">\n            {products?.map((product, index) => (\n                <>\n                    {index === 10 && blockAreas?.third?.length > 0 && (\n                        <li\n                            key=\"block-area-third\"\n                            className={`${\n                                quickBuyProduct\n                                    ? 'col-span-1 md:col-span-2'\n                                    : 'col-span-2'\n                            } lg:col-span-5`}\n                        >\n                            <BlockRenderer blocks={blockAreas.third} />\n                        </li>\n                    )}\n\n                    {productListCreativeItems &&\n                        productListCreativeItems.find(\n                            x => x.index === index && x.image.src\n                        ) && (\n                            <li\n                                key={`creative-list-item-${index}`}\n                                className=\"col-span-2 flex gap-3 supports-[grid-template-rows:_subgrid]:row-[span_2] supports-[grid-template-rows:_subgrid]:grid supports-[grid-template-rows:_subgrid]:grid-rows-subgrid\"\n                            >\n                                <ProductListCreativeItem\n                                    item={productListCreativeItems.find(\n                                        x => x.index === index\n                                    )}\n                                />\n                            </li>\n                        )}\n\n                    <motion.li\n                        layout\n                        initial={{ scale: 0.8, opacity: 0 }}\n                        animate={{ scale: 1, opacity: 1 }}\n                        exit={{ scale: 0.8, opacity: 0 }}\n                        transition={{ type: 'spring', bounce: 0.25 }}\n                        key={`${product.id}-${index}`}\n                        className=\"flex gap-3 supports-[grid-template-rows:_subgrid]:row-[span_2] supports-[grid-template-rows:_subgrid]:grid supports-[grid-template-rows:_subgrid]:grid-rows-subgrid\"\n                    >\n                        <ProductCard\n                            showQuantityField={product.showQuantityField}\n                            id={product.id}\n                            productFilters={product.productFilters}\n                            quickBuyProduct={quickBuyProduct}\n                            isPurchasable={product.isPurchasable}\n                            isOnWishList={product.isOnWishList}\n                            enabledWishlist={product.enabledWishlist}\n                            images={product.images}\n                            name={product.name}\n                            colors={product.productFilters.colors}\n                            sizes={product.productFilters.sizes}\n                            url={product.url}\n                            videoUrl={product.videoUrl}\n                            translations={product.translations}\n                            lazy={index > 3}\n                            srcSetSizes={srcSetSizes}\n                            subgrid\n                            productTag={product.productTag}\n                            priceVM={product.priceVM}\n                            hasAnyVariantEnabled={product.hasAnyVariantEnabled}\n                            values={product.productFilters.values}\n                            additionalTranslations={additionalTranslations}\n                            trackingData={product.trackingData}\n                            descriptiveVariantName={\n                                product.descriptiveVariantName\n                            }\n                            isGiftCard={product.isGiftCard}\n                        />\n                    </motion.li>\n                </>\n            ))}\n        </AnimatePresence>\n    </ul>\n);\n\nexport default ProductList;\n"],"names":["productListCreativeItem","item","srcSetSizes","sizes","key","value","tailwindBreakpoints","x","a","b","jsxs","jsx","dpr","_a","Markup","ProductList","products","quickBuyProduct","columns","additionalTranslations","blockAreas","productListCreativeItems","AnimatePresence","product","index","Fragment","BlockRenderer","ProductListCreativeItem","motion","ProductCard"],"mappings":"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"}