{"version":3,"file":"SliderBlockNavigation-BdTqLTMS-chunk.js","sources":["../../../GSDClient/Scripts/Components/SliderBlock/SliderBlockNavigation.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { SwiperClass } from 'swiper/react';\n\nimport { BreakPointHooks } from 'Scripts/Hooks/BreakPointHooks';\n\nimport { IBannerSliderBlockViewModel } from 'Types/Litium';\n\nimport CaretIcon from 'Icons/caretGsd.svg?react';\n\nconst { useGreater } = BreakPointHooks();\n\ninterface ISliderBlockNavigation {\n    slides: IBannerSliderBlockViewModel['sliders'];\n    realIndex: number;\n    swiper: SwiperClass;\n    translationNextSlide: string;\n    translationPreviousSlide: string;\n    itemsToShowDesktop?: number;\n    itemsToShowMobile?: number;\n}\n\nconst SliderBlockNavigation = ({\n    slides,\n    realIndex,\n    swiper,\n    translationNextSlide,\n    translationPreviousSlide,\n    itemsToShowDesktop = 1,\n    itemsToShowMobile = 1,\n}: ISliderBlockNavigation) => {\n    const isGreater = useGreater('lg');\n    const arrowPosition = () =>\n        slides[realIndex]?.sliderBlockTextPosition === 'bottom' ||\n        slides[realIndex]?.sliderBlockTextPosition === null ||\n        slides[realIndex]?.sliderBlockTextPosition === undefined\n            ? 'top-[calc(var(--imageHeight)-12px)] lg:top-[calc(var(--imageHeight)-16px)]'\n            : 'bottom-[calc(var(--imageHeight)-12px)] lg:bottom-[calc(var(--imageHeight)-16px)]';\n\n    const isArrowsHidden = () =>\n        `${slides.length <= itemsToShowMobile ? 'hidden' : 'flex'} ${\n            slides.length <= itemsToShowDesktop ? 'lg:hidden' : 'lg:flex'\n        }`;\n\n    const [\n        baseImageHeightBasedOnSwiperWidth,\n        setBaseImageHeightBasedOnSwiperWidth,\n    ] = useState<string>(null);\n\n    const gotoPrev = () => {\n        swiper.slidePrev(600);\n    };\n\n    const gotoNext = () => {\n        swiper.slideNext(600);\n    };\n\n    useEffect(() => {\n        const handleResize = () => {\n            const activeSlide = slides[realIndex];\n            if (activeSlide) {\n                const baseImageHeight =\n                    !isGreater && activeSlide.imageMobile?.src\n                        ? activeSlide.imageMobile?.height ?? 0\n                        : activeSlide.image?.height ?? 0;\n                const baseImageWidth =\n                    !isGreater && activeSlide.imageMobile?.src\n                        ? activeSlide.imageMobile.width ?? 0\n                        : activeSlide.image?.width ?? 0;\n                const aspectRatio = baseImageHeight / baseImageWidth;\n                const slideMediaHeight =\n                    (swiper?.slides?.[realIndex]?.clientWidth ?? 0) *\n                    aspectRatio;\n                setBaseImageHeightBasedOnSwiperWidth(\n                    `${\n                        slideMediaHeight > 0\n                            ? `${slideMediaHeight / 2}px`\n                            : '50%'\n                    }`\n                );\n            }\n        };\n        window.addEventListener('resize', handleResize);\n        handleResize();\n\n        return () => window.removeEventListener('resize', handleResize);\n    }, [realIndex]);\n\n    return (\n        <>\n            <button\n                onClick={gotoPrev}\n                style={\n                    {\n                        '--imageHeight': baseImageHeightBasedOnSwiperWidth,\n                    } as React.CSSProperties\n                }\n                className={`absolute left-1 z-[1] flex h-6 w-6 items-center justify-center rounded-full bg-silverLight lg:left-2.5 lg:h-8 lg:w-8 ${arrowPosition()} ${isArrowsHidden()}`}\n            >\n                <CaretIcon className=\"h-2.5 w-2.5 rotate-180 lg:h-4 lg:w-4\" />\n                <span className=\"sr-only\">{translationPreviousSlide}</span>\n            </button>\n            <button\n                onClick={gotoNext}\n                style={\n                    {\n                        '--imageHeight': baseImageHeightBasedOnSwiperWidth,\n                    } as React.CSSProperties\n                }\n                className={`absolute right-1 z-[1] flex h-6 w-6 items-center justify-center rounded-full bg-silverLight lg:right-2.5 lg:h-8 lg:w-8 ${arrowPosition()} ${isArrowsHidden()}`}\n            >\n                <CaretIcon className=\"h-2.5 w-2.5 lg:h-4 lg:w-4\" />\n                <span className=\"sr-only\">{translationNextSlide}</span>\n            </button>\n        </>\n    );\n};\n\nexport default SliderBlockNavigation;\n"],"names":["useGreater","BreakPointHooks","SliderBlockNavigation","slides","realIndex","swiper","translationNextSlide","translationPreviousSlide","itemsToShowDesktop","itemsToShowMobile","isGreater","arrowPosition","_a","_b","_c","isArrowsHidden","baseImageHeightBasedOnSwiperWidth","setBaseImageHeightBasedOnSwiperWidth","useState","gotoPrev","gotoNext","useEffect","handleResize","activeSlide","baseImageHeight","baseImageWidth","_d","_e","aspectRatio","slideMediaHeight","_g","_f","jsxs","Fragment","jsx","CaretIcon"],"mappings":"+JASA,KAAM,CAAE,WAAAA,CAAW,EAAIC,IAYjBC,EAAwB,CAAC,CAC3B,OAAAC,EACA,UAAAC,EACA,OAAAC,EACA,qBAAAC,EACA,yBAAAC,EACA,mBAAAC,EAAqB,EACrB,kBAAAC,EAAoB,CACxB,IAA8B,CACpB,MAAAC,EAAYV,EAAW,IAAI,EAC3BW,EAAgB,IAAA,WAClB,QAAAC,EAAAT,EAAOC,CAAS,IAAhB,YAAAQ,EAAmB,2BAA4B,YAC/CC,EAAAV,EAAOC,CAAS,IAAhB,YAAAS,EAAmB,2BAA4B,QAC/CC,EAAAX,EAAOC,CAAS,IAAhB,YAAAU,EAAmB,2BAA4B,OACzC,6EACA,oFAEJC,EAAiB,IACnB,GAAGZ,EAAO,QAAUM,EAAoB,SAAW,MAAM,IACrDN,EAAO,QAAUK,EAAqB,YAAc,SACxD,GAEE,CACFQ,EACAC,CAAA,EACAC,EAAAA,SAAiB,IAAI,EAEnBC,EAAW,IAAM,CACnBd,EAAO,UAAU,GAAG,CAAA,EAGlBe,EAAW,IAAM,CACnBf,EAAO,UAAU,GAAG,CAAA,EAGxBgB,OAAAA,EAAAA,UAAU,IAAM,CACZ,MAAMC,EAAe,IAAM,mBACjB,MAAAC,EAAcpB,EAAOC,CAAS,EACpC,GAAImB,EAAa,CACb,MAAMC,EACF,CAACd,KAAaE,EAAAW,EAAY,cAAZ,MAAAX,EAAyB,OACjCC,EAAAU,EAAY,cAAZ,YAAAV,EAAyB,SAAU,IACnCC,EAAAS,EAAY,QAAZ,YAAAT,EAAmB,SAAU,EACjCW,EACF,CAACf,KAAagB,EAAAH,EAAY,cAAZ,MAAAG,EAAyB,KACjCH,EAAY,YAAY,OAAS,IACjCI,EAAAJ,EAAY,QAAZ,YAAAI,EAAmB,QAAS,EAChCC,EAAcJ,EAAkBC,EAChCI,KACDC,GAAAC,EAAA1B,GAAA,YAAAA,EAAQ,SAAR,YAAA0B,EAAiB3B,KAAjB,YAAA0B,EAA6B,cAAe,GAC7CF,EACJX,EACI,GACIY,EAAmB,EACb,GAAGA,EAAmB,CAAC,KACvB,KACV,EAAA,CAER,CAAA,EAEG,cAAA,iBAAiB,SAAUP,CAAY,EACjCA,IAEN,IAAM,OAAO,oBAAoB,SAAUA,CAAY,CAAA,EAC/D,CAAClB,CAAS,CAAC,EAIN4B,EAAA,KAAAC,WAAA,CAAA,SAAA,CAAAD,EAAA,KAAC,SAAA,CACG,QAASb,EACT,MACI,CACI,gBAAiBH,CACrB,EAEJ,UAAW,wHAAwHL,EAAe,CAAA,IAAII,GAAgB,GAEtK,SAAA,CAACmB,EAAAA,IAAAC,EAAA,CAAU,UAAU,sCAAuC,CAAA,EAC3DD,EAAA,IAAA,OAAA,CAAK,UAAU,UAAW,SAAyB3B,EAAA,CAAA,CAAA,CACxD,EACAyB,EAAA,KAAC,SAAA,CACG,QAASZ,EACT,MACI,CACI,gBAAiBJ,CACrB,EAEJ,UAAW,0HAA0HL,EAAe,CAAA,IAAII,GAAgB,GAExK,SAAA,CAACmB,EAAAA,IAAAC,EAAA,CAAU,UAAU,2BAA4B,CAAA,EAChDD,EAAA,IAAA,OAAA,CAAK,UAAU,UAAW,SAAqB5B,EAAA,CAAA,CAAA,CACpD,CACJ,CAAA,CAAA,CAER"}