{"version":3,"file":"PaginationBullets.mrb68rhu.js","sources":["../../../wwwdev/esm/components/generic/ScrollSnapSlider/hooks/getSlideIndex.ts","../../../wwwdev/esm/components/generic/ScrollSnapSlider/components/PaginationBullets.tsx"],"sourcesContent":["import type { ScrollSnapSlider } from 'scroll-snap-slider';\r\n\r\nexport default function getSlideIndex({ event, slider }: { event: CustomEvent; slider: ScrollSnapSlider }) {\r\n    const slideElementIndex = event.detail;\r\n    const slideElement = slider.element.children[slideElementIndex] as HTMLElement;\r\n\r\n    return Number(slideElement.dataset.slideIndex);\r\n}\r\n","/* eslint-disable react/no-array-index-key */\r\nimport { ColorNeutralWhite, ColorNeutralGrey1, Spacing4 } from 'autogen/design-tokens/tokens';\r\nimport React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ScrollSnapAutoplay } from 'scroll-snap-slider';\r\nimport useScrollSnapSliderContext from '../hooks/useScrollSnapSliderContext';\r\nimport getSlideIndex from '../hooks/getSlideIndex';\r\n\r\nconst Container = styled.div`\r\n    display: grid;\r\n    grid-auto-flow: column;\r\n    gap: ${Spacing4};\r\n    grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));\r\n`;\r\n\r\nconst Bullet = styled.button<{ isActive: boolean }>`\r\n    background-color: ${ColorNeutralWhite};\r\n    border: 1px solid ${ColorNeutralGrey1};\r\n    border-radius: 100%;\r\n    width: 10px;\r\n    height: 10px;\r\n    padding: 0;\r\n    opacity: 0.5;\r\n\r\n    ${({ isActive }) =>\r\n        isActive &&\r\n        css`\r\n            opacity: 1;\r\n        `}\r\n`;\r\n\r\ninterface IPaginationBullets extends HTMLAttributes<HTMLDivElement> {\r\n    bulletsCount: number;\r\n}\r\n\r\nexport default function PaginationBullets({ bulletsCount, ...restProps }: IPaginationBullets): JSX.Element {\r\n    // Remember to set dataset.slideIndex on your slides when using PaginationBullets\r\n    const [activeIndex, setActiveIndex] = useState<number>(0);\r\n    const slider = useScrollSnapSliderContext();\r\n\r\n    const setSelectedIndex = useCallback(\r\n        (event) => {\r\n            const slideIndex = getSlideIndex({ event, slider });\r\n\r\n            setActiveIndex(slideIndex);\r\n        },\r\n        [slider]\r\n    );\r\n\r\n    useEffect(() => {\r\n        slider?.addEventListener('slide-pass', setSelectedIndex);\r\n\r\n        return () => {\r\n            slider?.removeEventListener('slide-pass', setSelectedIndex);\r\n        };\r\n    }, [slider, setSelectedIndex]);\r\n\r\n    function handleClick(index: number) {\r\n        (slider.plugins.get('ScrollSnapAutoplay') as ScrollSnapAutoplay)?.disableTemporarily();\r\n\r\n        const slideElementIndex = Array.prototype.slice\r\n            .call(slider.element.children)\r\n            .findIndex((slide) => Number(slide.dataset.slideIndex) === index);\r\n\r\n        slider.slideTo(slideElementIndex);\r\n    }\r\n\r\n    return (\r\n        <Container {...restProps}>\r\n            {[...Array(bulletsCount)].map((x, index) => (\r\n                <Bullet\r\n                    isActive={activeIndex === index}\r\n                    type=\"button\"\r\n                    key={index}\r\n                    onClick={() => {\r\n                        handleClick(index);\r\n                    }}\r\n                    aria-label={`slide ${index + 1}`}\r\n                />\r\n            ))}\r\n        </Container>\r\n    );\r\n}\r\n"],"names":["getSlideIndex","event","slider","slideElementIndex","detail","slideElement","element","children","Number","dataset","slideIndex","Container","styled","div","withConfig","displayName","componentId","Spacing4","Bullet","button","ColorNeutralWhite","ColorNeutralGrey1","isActive","css","PaginationBullets","bulletsCount","restProps","activeIndex","setActiveIndex","useState","useScrollSnapSliderContext","setSelectedIndex","useCallback","useEffect","addEventListener","removeEventListener","handleClick","index","plugins","get","disableTemporarily","Array","prototype","slice","call","findIndex","slide","slideTo","jsx","map","x"],"mappings":"4JAEA,SAAwBA,EAAc,CAAEC,MAAAA,EAAOC,OAAAA,CAAyD,EAAG,CACvG,MAAMC,EAAoBF,EAAMG,OAC1BC,EAAeH,EAAOI,QAAQC,SAASJ,CAAiB,EAEvDK,OAAAA,OAAOH,EAAaI,QAAQC,UAAU,CACjD,CCCA,MAAMC,EAAYC,EAAOC,IAAGC,WAAA,CAAAC,YAAA,+BAAAC,YAAA,aAAA,CAAA,EAAA,CAAA,0CAAA,4DAAA,EAGjBC,CAAQ,EAIbC,EAASN,EAAOO,OAAML,WAAA,CAAAC,YAAA,4BAAAC,YAAA,aAAA,CAAA,EAAA,CAAA,oBAAA,qBAAA,oEAAA,EAAA,EACJI,EACAC,EAOlB,CAAC,CAAEC,SAAAA,CAAS,IACVA,GACAC,iBAEC,EAOT,SAAwBC,EAAkB,CAAEC,aAAAA,EAAc,GAAGC,CAA8B,EAAgB,CAEvG,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAiB,CAAC,EAClD3B,EAAS4B,EAA2B,EAEpCC,EAAmBC,cACV/B,GAAA,CACP,MAAMS,EAAaV,EAAc,CAAEC,MAAAA,EAAOC,OAAAA,CAAAA,CAAQ,EAElD0B,EAAelB,CAAU,CAAA,EAE7B,CAACR,CAAM,CACX,EAEA+B,EAAAA,UAAU,KACEC,GAAAA,MAAAA,EAAAA,iBAAiB,aAAcH,GAEhC,IAAM,CACDI,GAAAA,MAAAA,EAAAA,oBAAoB,aAAcJ,EAC9C,GACD,CAAC7B,EAAQ6B,CAAgB,CAAC,EAE7B,SAASK,EAAYC,EAAe,QAC/BnC,EAAAA,EAAOoC,QAAQC,IAAI,oBAAoB,IAAvCrC,MAAAA,EAAiEsC,qBAElE,MAAMrC,EAAoBsC,MAAMC,UAAUC,MACrCC,KAAK1C,EAAOI,QAAQC,QAAQ,EAC5BsC,aAAqBrC,OAAOsC,EAAMrC,QAAQC,UAAU,IAAM2B,CAAK,EAEpEnC,EAAO6C,QAAQ5C,CAAiB,CAAA,CAIhC,OAAA6C,EAAA,IAACrC,GAAce,GAAAA,EACV,UAAC,GAAGe,MAAMhB,CAAY,CAAC,EAAEwB,IAAI,CAACC,EAAGb,UAC7BnB,EACG,CAAA,SAAUS,IAAgBU,EAC1B,KAAK,SAEL,QAAS,IAAM,CACXD,EAAYC,CAAK,CAAA,EAErB,aAAY,SAASA,EAAQ,CAAC,EAJzBA,EAAAA,CAI4B,CAExC,EACL,CAER"}