{"version":3,"file":"ProductCardColors-Cbok0kMD-chunk.js","sources":["../../../GSDClient/Scripts/Components/ProductCardColors.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { IProductItemViewModel } from 'Types/Litium';\n\nimport CrossIcon from 'Icons/closeThin.svg?react';\n\ninterface ProductCardColorsProps {\n    colors: IProductItemViewModel['productFilters']['colors'];\n}\n\nconst ProductCardColors = ({ colors }: ProductCardColorsProps) => {\n    const [showAllColors, setShowAllColors] = useState(false);\n    const colorLengthCriteria = 3;\n    return (\n        <div className=\"flex items-center justify-between\">\n            {colors?.length > 1 && (\n                <ul className=\"flex flex-wrap gap-2\">\n                    {colors\n                        .slice(0, colorLengthCriteria)\n                        .map((color, index) => (\n                            <li key={index} className=\"flex items-center\">\n                                <a\n                                    href={color.url}\n                                    aria-label={color.title}\n                                    title={color.title}\n                                    className=\"block h-6 w-6 rounded-full border border-solid border-gray-300\"\n                                    style={{\n                                        backgroundColor: color.colorHex,\n                                    }}\n                                >\n                                    {!color.enabled && (\n                                        <div className=\"pointer-events-none absolute flex h-[22px] w-[22px] items-center justify-center\">\n                                            <CrossIcon\n                                                className={`pointer-events-none top-0 flex h-5 w-5 ${\n                                                    color.colorHex.includes(\n                                                        '#f'\n                                                    )\n                                                        ? 'text-grey-100'\n                                                        : 'text-white'\n                                                }`}\n                                            />\n                                        </div>\n                                    )}\n                                </a>\n                            </li>\n                        ))}\n\n                    {colors.length > colorLengthCriteria && !showAllColors && (\n                        <li>\n                            <button\n                                className=\"flex h-full cursor-pointer items-center gap-0.5 pr-1\"\n                                onClick={() => setShowAllColors(true)}\n                            >\n                                <span className=\"font-montserrat text-h5 font-normal leading-none text-black\">\n                                    +\n                                </span>\n                                <span className=\"flex items-center font-roboto text-xs text-black\">\n                                    {colors.length - colorLengthCriteria}\n                                </span>\n                            </button>\n                        </li>\n                    )}\n                    {showAllColors &&\n                        colors\n                            .slice(colorLengthCriteria)\n                            .map((color, index) => (\n                                <li\n                                    key={index}\n                                    className=\"flex animate-grow items-center\"\n                                >\n                                    <a\n                                        href={color.url}\n                                        aria-label={color.title}\n                                        title={color.title}\n                                        className=\"block h-6 w-6 rounded-full border border-solid border-gray-300\"\n                                        style={{\n                                            backgroundColor: color.colorHex,\n                                        }}\n                                    >\n                                        {!color.enabled && (\n                                            <div className=\"pointer-events-none absolute flex h-[22px] w-[22px] items-center justify-center\">\n                                                <CrossIcon\n                                                    className={`pointer-events-none top-0 flex h-5 w-5 ${\n                                                        color.colorHex.includes(\n                                                            '#f'\n                                                        )\n                                                            ? 'text-grey-100'\n                                                            : 'text-white'\n                                                    }`}\n                                                />\n                                            </div>\n                                        )}\n                                    </a>\n                                </li>\n                            ))}\n                </ul>\n            )}\n        </div>\n    );\n};\n\nexport default ProductCardColors;\n"],"names":["ProductCardColors","colors","showAllColors","setShowAllColors","useState","colorLengthCriteria","jsx","jsxs","color","index","CrossIcon"],"mappings":"wGAUA,MAAMA,EAAoB,CAAC,CAAE,OAAAC,KAAqC,CAC9D,KAAM,CAACC,EAAeC,CAAgB,EAAIC,WAAS,EAAK,EAClDC,EAAsB,EAExB,OAAAC,EAAAA,IAAC,MAAI,CAAA,UAAU,oCACV,UAAAL,GAAA,YAAAA,EAAQ,QAAS,GACdM,EAAA,KAAC,KAAG,CAAA,UAAU,uBACT,SAAA,CACIN,EAAA,MAAM,EAAGI,CAAmB,EAC5B,IAAI,CAACG,EAAOC,IACTH,EAAAA,IAAC,KAAe,CAAA,UAAU,oBACtB,SAAAA,EAAA,IAAC,IAAA,CACG,KAAME,EAAM,IACZ,aAAYA,EAAM,MAClB,MAAOA,EAAM,MACb,UAAU,iEACV,MAAO,CACH,gBAAiBA,EAAM,QAC3B,EAEC,UAACA,EAAM,SACHF,EAAA,IAAA,MAAA,CAAI,UAAU,kFACX,SAAAA,EAAA,IAACI,EAAA,CACG,UAAW,0CACPF,EAAM,SAAS,SACX,IAAA,EAEE,gBACA,YACV,EAAA,CAAA,EAER,CAAA,CAAA,CAER,EAvBKC,CAwBT,CACH,EAEJR,EAAO,OAASI,GAAuB,CAACH,SACpC,KACG,CAAA,SAAAK,EAAA,KAAC,SAAA,CACG,UAAU,uDACV,QAAS,IAAMJ,EAAiB,EAAI,EAEpC,SAAA,CAACG,EAAA,IAAA,OAAA,CAAK,UAAU,8DAA8D,SAE9E,IAAA,QACC,OAAK,CAAA,UAAU,mDACX,SAAAL,EAAO,OAASI,EACrB,CAAA,CAAA,CAAA,EAER,EAEHH,GACGD,EACK,MAAMI,CAAmB,EACzB,IAAI,CAACG,EAAOC,IACTH,EAAA,IAAC,KAAA,CAEG,UAAU,iCAEV,SAAAA,EAAA,IAAC,IAAA,CACG,KAAME,EAAM,IACZ,aAAYA,EAAM,MAClB,MAAOA,EAAM,MACb,UAAU,iEACV,MAAO,CACH,gBAAiBA,EAAM,QAC3B,EAEC,UAACA,EAAM,SACHF,EAAA,IAAA,MAAA,CAAI,UAAU,kFACX,SAAAA,EAAA,IAACI,EAAA,CACG,UAAW,0CACPF,EAAM,SAAS,SACX,IAAA,EAEE,gBACA,YACV,EAAA,CAAA,EAER,CAAA,CAER,CAAA,EAzBKC,CAAA,CA2BZ,CAAA,CACb,CAAA,CAER,CAAA,CAER"}