@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/esm/carousel/components/Carousel.js

@@ -1,616 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useInteraction, useCurrentDevice, useEditorMode, getResponsiveValueByScreen, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, cls, makeContainerWidthOrHeight, isEmptyChildren, filterToolbarPreview } from '@gem-sdk/core';
-import { forwardRef, useRef, useState, useCallback, useMemo, useEffect, useImperativeHandle, Children, isValidElement } from 'react';
-import { useKeenSlider } from '@gem-sdk/keen-slider/react';
-import Arrow from './Arrow.js';
-import Dots from './Dots.js';
-import { AutoPlayPlugin } from './plugins/AutoPlayPlugin.js';
-import { MutationPlugin } from './plugins/MutationPlugin.js';
-import { DEVICES } from '../../product/components/ProductVariants/index.js';
-import { FixSliderMoveBackwards } from './plugins/FixSliderMoveBackwards.js';
-import { CAROUSEL_ANIMATION, DEFAULT_PLAY_SPEED, AnimationPlugin } from './plugins/AnimationPlugin.js';
-import useTrackPreviewPause from './hooks/useTrackPreviewPause.js';
-import { mappingNavigationCarousel, getResponsiveSetting } from './common/arrow.js';
-
-const Carousel = /*#__PURE__*/ forwardRef(({ children, builderAttrs, builderProps, style, styles, moveToIdx, isHiddenArrowWhenDisabled = true, hiddenDotWhenOnlyOne, onLoaded, onChangeActive, onUpdated, onCreated, onClickArrow, onHandleChangeSlideByInteraction, elmRef, rootClass, slidesClass, rootAttrs, fullHeight, ...props }, ref)=>{
-    const setting = mappingNavigationCarousel(props.setting);
-    const localRef = useRef();
-    const previousIndex = useRef(moveToIdx || 0);
-    const isRunningAnimation = useRef(false);
-    const [loaded, setLoaded] = useState(false);
-    const [slider, setSlider] = useState();
-    const [currentSlide, setCurrentSlide] = useState(setting?.defaultCurrentSlider ?? 0);
-    const [totalSlideItem, setTotalSlideItem] = useState(0);
-    const [slideMaxIndex, setSlideMaxIndex] = useState(0);
-    const [isInfinity, setIsInfinity] = useState(false);
-    const { isFirstPreviewClicked } = useTrackPreviewPause(setting?.runPreview);
-    const { onListener, saveToElementInteractionData, getInteractionPreviousData, trigger } = useInteraction();
-    const currentDevice = useCurrentDevice();
-    const mode = useEditorMode();
-    let delayTimeout;
-    const getSlideToShowFromOldData = useCallback(()=>{
-        if (!setting?.slidesToShow) return null;
-        const result = {};
-        DEVICES.forEach((device)=>{
-            const value = getResponsiveValueByScreen(setting?.slidesToShow, device);
-            result[device] = value ? value === 'auto' ? 4 : value : 0;
-        });
-        return result;
-    }, [
-        setting?.slidesToShow
-    ]);
-    const getItemNumberFromOldData = useCallback(()=>{
-        if (!setting?.slidesToShow) return null;
-        const result = {};
-        DEVICES.forEach((device)=>{
-            const value = getResponsiveValueByScreen(setting?.slidesToShow, device);
-            result[device] = value ? value === 'auto' ? 4 : Math.floor(value) : 0;
-        });
-        return result;
-    }, [
-        setting?.slidesToShow
-    ]);
-    const slidesToShow = useMemo(()=>{
-        const oldData = getSlideToShowFromOldData();
-        if (oldData) {
-            return oldData;
-        }
-        const result = {};
-        DEVICES.forEach((device)=>{
-            const enableSneakPeak = getResponsiveValueByScreen(setting?.sneakPeak, device);
-            const offset = enableSneakPeak ? getResponsiveValueByScreen(setting?.sneakPeakType, device) === 'center' ? getResponsiveValueByScreen(setting?.sneakPeakOffsetCenter, device) ?? 0 : getResponsiveValueByScreen(setting?.sneakPeakOffsetForward, device) ?? 0 : 0;
-            const rx = getResponsiveValueByScreen(setting?.sneakPeakType, device) === 'center' ? -2 : -1;
-            const itemNumberByDevice = getResponsiveValueByScreen(setting?.itemNumber, device);
-            result[device] = typeof itemNumberByDevice === 'number' ? itemNumberByDevice + offset / 100 * rx : 'auto';
-        });
-        return result;
-    }, [
-        getSlideToShowFromOldData,
-        setting?.itemNumber,
-        setting?.sneakPeak,
-        setting?.sneakPeakOffsetCenter,
-        setting?.sneakPeakOffsetForward,
-        setting?.sneakPeakType
-    ]);
-    const itemNumber = useMemo(()=>{
-        const oldData = getItemNumberFromOldData();
-        return oldData || setting?.itemNumber;
-    }, [
-        getItemNumberFromOldData,
-        setting?.itemNumber
-    ]);
-    const slideItemsPerPage = ()=>{
-        const items = getResponsiveValueByScreen(slidesToShow, currentDevice, 1) === 'auto' ? 1 : getResponsiveValueByScreen(slidesToShow, currentDevice, 1);
-        return items ?? 1;
-    };
-    const { sizeSetting } = styles ?? {};
-    const { navigationStyle, arrowButtonSize, arrowBackgroundColor, arrowGapToEachSide = '16', arrowBorder, roundedArrow, arrowIconSize, arrowCustomColor, showWhenHover } = setting ?? {};
-    const styleHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(sizeSetting));
-    const styleWidth = makeStyleWithDefault('w', getWidthByShapeGlobalSize(sizeSetting, true), {
-        desktop: '--g-ct-w',
-        tablet: '--g-ct-w',
-        mobile: '--g-ct-w'
-    });
-    const getNumberOfFullWidthShow = useCallback((device)=>{
-        const sneakPeekTypeByNumber = getResponsiveValueByScreen(setting?.sneakPeakType, device) === 'center' ? 2 : 1;
-        return typeof getResponsiveValueByScreen(itemNumber, device, 4) === 'number' ? getResponsiveValueByScreen(itemNumber, device, 4) - sneakPeekTypeByNumber : undefined;
-    }, [
-        setting?.sneakPeakType,
-        itemNumber
-    ]);
-    const enabledSneakPeak = setting?.sneakPeak?.[currentDevice];
-    const getOriginCarousel = useMemo(()=>(device)=>{
-            const origin = getResponsiveValueByScreen(setting?.sneakPeakType, device) === 'center' && getResponsiveValueByScreen(setting?.sneakPeak, device) ? 'center' : 'auto';
-            return origin;
-        }, [
-        setting?.sneakPeak,
-        setting?.sneakPeakType
-    ]);
-    const getMaxNavigationWhenSneak = useMemo(()=>(device)=>{
-            if (getOriginCarousel(device) !== 'center') return {};
-            const totalItems = setting?.childItem?.length || 1;
-            let itemShow = Number(getResponsiveValueByScreen(slidesToShow, device, 1)) || 1 + 1;
-            if (setting?.sneakPeak?.[currentDevice]) {
-                itemShow = Math.trunc(Number(getNumberOfFullWidthShow(device)));
-            }
-            const max = totalItems - itemShow;
-            const isLoopByDevice = getResponsiveValueByScreen(setting?.loop, device, false);
-            if (isLoopByDevice) return {
-                max: undefined
-            };
-            return {
-                max
-            };
-        }, [
-        setting?.childItem,
-        slidesToShow,
-        getOriginCarousel,
-        setting?.loop,
-        currentDevice,
-        setting?.sneakPeak,
-        getNumberOfFullWidthShow
-    ]);
-    const makeSpacing = ()=>{
-        if (loaded) return;
-        let result = {};
-        DEVICES.forEach((device)=>{
-            const isVertical = getResponsiveValueByScreen(setting?.vertical, device);
-            const spacing = getResponsiveValueByScreen(styles?.spacing, device);
-            const key = isVertical ? `--rg${device !== 'desktop' ? `-${device}` : ''}` : `--cg${device !== 'desktop' ? `-${device}` : ''}`;
-            result = {
-                ...result,
-                [key]: `${spacing}px`
-            };
-        });
-        return result;
-    };
-    const removeInitialCarouselGap = ()=>{
-        const sliderSelector = document.querySelectorAll(`.gp-carousel-slider-${builderProps?.uid}`);
-        if (!sliderSelector) return;
-        sliderSelector.forEach((selector)=>{
-            selector?.style.removeProperty('--cg');
-            selector?.style.removeProperty('--cg-tablet');
-            selector?.style.removeProperty('--cg-mobile');
-            selector?.style.removeProperty('--rg');
-            selector?.style.removeProperty('--rg-tablet');
-            selector?.style.removeProperty('--rg-mobile');
-        });
-    };
-    const [sliderRef, instanceRef] = useKeenSlider({
-        selector: `.gem-slider-item-${builderProps?.uid}`,
-        optionsChanged: (slider)=>{
-            if (slider?.track?.details?.maxIdx === Infinity) {
-                setIsInfinity(true);
-            } else {
-                setIsInfinity(false);
-            }
-            setTotalSlideItem(Math.ceil(slider.slides.length));
-            setSlideMaxIndex(slider?.track?.details?.maxIdx);
-        },
-        defaultAnimation: {
-            duration: styles?.playSpeed === 0 ? 1 : styles?.playSpeed || 500,
-            easing: (t)=>{
-                switch(setting?.animationMode){
-                    case CAROUSEL_ANIMATION.EASE_IN.value:
-                        return CAROUSEL_ANIMATION.EASE_IN.formula(t);
-                    case CAROUSEL_ANIMATION.EASE_OUT.value:
-                        return CAROUSEL_ANIMATION.EASE_OUT.formula(t);
-                    case CAROUSEL_ANIMATION.EASE_IN_OUT.value:
-                        return CAROUSEL_ANIMATION.EASE_IN_OUT.formula(t);
-                    default:
-                        return CAROUSEL_ANIMATION.DEFAULT.formula(t);
-                }
-            }
-        },
-        dragSpeed: 2,
-        renderMode: 'precision',
-        mode: 'snap',
-        loop: getResponsiveValueByScreen(setting?.loop, 'desktop', false),
-        vertical: getResponsiveValueByScreen(setting?.vertical, 'desktop'),
-        rtl: setting?.rtl,
-        breakpoints: {
-            '(max-width: 9999px)': {
-                slides: {
-                    perView: getResponsiveValueByScreen(slidesToShow, 'desktop', 4) || 1,
-                    spacing: getResponsiveValueByScreen(styles?.spacing, 'desktop'),
-                    origin: getOriginCarousel('desktop'),
-                    numberOfFullWidthShow: getNumberOfFullWidthShow('desktop')
-                },
-                loop: getResponsiveValueByScreen(setting?.loop, 'desktop', false),
-                vertical: getResponsiveValueByScreen(setting?.vertical, 'desktop'),
-                drag: getResponsiveValueByScreen(mode == 'edit' ? {
-                    desktop: false
-                } : setting?.enableDrag, 'desktop'),
-                initial: moveToIdx || 0,
-                range: getMaxNavigationWhenSneak('desktop')
-            },
-            '(max-width: 1024px)': {
-                slides: {
-                    perView: getResponsiveValueByScreen(slidesToShow, 'tablet', 4),
-                    spacing: getResponsiveValueByScreen(styles?.spacing, 'tablet'),
-                    origin: getOriginCarousel('tablet'),
-                    numberOfFullWidthShow: getNumberOfFullWidthShow('tablet')
-                },
-                loop: getResponsiveValueByScreen(setting?.loop, 'tablet', false),
-                vertical: getResponsiveValueByScreen(setting?.vertical, 'tablet'),
-                drag: getResponsiveValueByScreen(mode == 'edit' ? {
-                    tablet: false
-                } : setting?.enableDrag, 'tablet'),
-                initial: moveToIdx || 0,
-                range: getMaxNavigationWhenSneak('tablet')
-            },
-            '(max-width: 767px)': {
-                slides: {
-                    perView: getResponsiveValueByScreen(slidesToShow, 'mobile', 4),
-                    spacing: getResponsiveValueByScreen(styles?.spacing, 'mobile'),
-                    origin: getOriginCarousel('mobile'),
-                    numberOfFullWidthShow: getNumberOfFullWidthShow('mobile')
-                },
-                loop: getResponsiveValueByScreen(setting?.loop, 'mobile', false),
-                vertical: getResponsiveValueByScreen(setting?.vertical, 'mobile'),
-                drag: getResponsiveValueByScreen(mode == 'edit' ? {
-                    mobile: false
-                } : setting?.enableDrag, 'mobile'),
-                initial: moveToIdx || 0,
-                range: getMaxNavigationWhenSneak('mobile')
-            }
-        },
-        slideChanged: (slider)=>{
-            setCurrentSlide(slider.track.details.rel);
-            previousIndex.current = slider.track.details.rel;
-            onChangeActive && onChangeActive(slider.track.details.rel);
-        },
-        created: (slider)=>{
-            setLoaded(true);
-            setSlider(slider);
-            setCurrentSlide(slider.track?.details?.rel ?? 0);
-            onCreated && onCreated(slider);
-            removeInitialCarouselGap();
-        },
-        updated: (slider)=>{
-            onLoaded && onLoaded(true);
-            onUpdated && onUpdated(slider);
-        },
-        autoplay: {
-            delay: (setting?.autoplayTimeout ?? 1) * 1000,
-            pauseOnHover: setting?.pauseOnHover,
-            enable: mode === 'edit' ? isFirstPreviewClicked ? setting?.runPreview && setting?.autoplay : false : setting?.autoplay
-        },
-        animation: {
-            type: setting?.animationMode,
-            speed: styles?.playSpeed === 0 ? 1 : styles?.playSpeed || 500
-        },
-        dragStarted: (slider)=>{
-            slider.container.style.cursor = 'grabbing';
-        },
-        dragEnded: (slider)=>{
-            slider.container.style.cursor = 'auto';
-        },
-        animationStarted: (slider)=>{
-            // This code used to handle when user click next/prev button constantly
-            if (!isRunningAnimation.current) {
-                isRunningAnimation.current = true;
-            } else {
-                slider.options.defaultAnimation = {
-                    duration: DEFAULT_PLAY_SPEED,
-                    easing: (t)=>CAROUSEL_ANIMATION.DEFAULT.formula(t)
-                };
-            }
-        },
-        animationEnded: (slider)=>{
-            isRunningAnimation.current = false;
-            slider.options.defaultAnimation = {
-                duration: styles?.playSpeed === 0 ? 1 : styles?.playSpeed || 500,
-                easing (t) {
-                    switch(setting?.animationMode){
-                        case CAROUSEL_ANIMATION.EASE_IN.value:
-                            return CAROUSEL_ANIMATION.EASE_IN.formula(t);
-                        case CAROUSEL_ANIMATION.EASE_OUT.value:
-                            return CAROUSEL_ANIMATION.EASE_OUT.formula(t);
-                        case CAROUSEL_ANIMATION.EASE_IN_OUT.value:
-                            return CAROUSEL_ANIMATION.EASE_IN_OUT.formula(t);
-                        default:
-                            return CAROUSEL_ANIMATION.EASE_IN.formula(t);
-                    }
-                }
-            };
-        }
-    }, [
-        MutationPlugin,
-        AutoPlayPlugin,
-        AnimationPlugin,
-        FixSliderMoveBackwards
-    ]);
-    // Update slider when size change
-    useEffect(()=>{
-        instanceRef.current?.update(instanceRef.current?.options);
-    }, [
-        instanceRef,
-        setting
-    ]);
-    useEffect(()=>{
-        const moveToIndexListenEvent = (event)=>{
-            if (builderProps?.uid !== event?.detail.componentUid) return;
-            const maxIndexSlideTo = instanceRef?.current?.track.details.maxIdx;
-            let indexFinal = event?.detail.index || 0;
-            if (maxIndexSlideTo && indexFinal > maxIndexSlideTo) indexFinal = maxIndexSlideTo;
-            instanceRef.current?.moveToIdx(indexFinal);
-            previousIndex.current = indexFinal;
-        };
-        window.addEventListener('move-to-idx', moveToIndexListenEvent);
-        return ()=>window.removeEventListener('move-to-idx', moveToIndexListenEvent);
-    }, [
-        instanceRef,
-        builderProps?.uid
-    ]);
-    // change slider when receive prop move to idx
-    useEffect(()=>{
-        if (typeof moveToIdx == 'number') {
-            previousIndex.current = moveToIdx;
-            instanceRef?.current?.moveToIdx(moveToIdx);
-        }
-    }, [
-        instanceRef,
-        moveToIdx,
-        isHiddenArrowWhenDisabled
-    ]);
-    const getIndexSlideItemBy = (pageIdx)=>{
-        let indexPage = pageIdx * slideItemsPerPage();
-        if (indexPage >= totalSlideItem - slideItemsPerPage()) {
-            indexPage = totalSlideItem - slideItemsPerPage();
-        }
-        return indexPage;
-    };
-    const sliderNext = ()=>{
-        instanceRef.current?.next();
-        if (onClickArrow) {
-            delayTimeout && clearTimeout(delayTimeout);
-            delayTimeout = setTimeout(()=>onClickArrow && onClickArrow(), 500);
-        }
-    };
-    const moveToIdxInteraction = (idx)=>{
-        instanceRef.current?.moveToIdx(idx);
-        onHandleChangeSlideByInteraction && onHandleChangeSlideByInteraction(idx);
-    };
-    const sliderPrev = ()=>{
-        instanceRef.current?.prev();
-        if (onClickArrow) {
-            delayTimeout && clearTimeout(delayTimeout);
-            delayTimeout = setTimeout(()=>onClickArrow && onClickArrow(), 500);
-        }
-    };
-    const navigationStyleRes = getResponsiveSetting(navigationStyle || {});
-    const showNavigation = useMemo(()=>{
-        return loaded && instanceRef.current && navigationStyleRes[currentDevice] !== 'none';
-    }, [
-        currentDevice,
-        instanceRef,
-        loaded,
-        navigationStyleRes
-    ]);
-    const handleDirectionalSlide = (params, direction)=>{
-        const { key, data, isRollback, element } = params;
-        const currentIndex = Math.max(instanceRef.current?.track?.details?.rel ?? 0, 0);
-        if (isRollback && data === undefined) {
-            return;
-        }
-        if (isRollback) {
-            if (direction === 'specific') {
-                const { previousData } = getInteractionPreviousData(element, key);
-                moveToIdxInteraction(Number(previousData));
-            } else {
-                // For next/previous, move in opposite direction during rollback
-                const newIndex = direction === 'next' ? currentIndex - 1 : currentIndex + 1;
-                moveToIdxInteraction(newIndex);
-            }
-            return;
-        }
-        // Save current state and move to new position
-        const indexToSave = direction === 'specific' ? Math.max(previousIndex.current, 0) : currentIndex;
-        saveToElementInteractionData(element, key, indexToSave.toString());
-        const targetIndex = direction === 'specific' ? Number(data) : direction === 'next' ? currentIndex + 1 : currentIndex - 1;
-        moveToIdxInteraction(targetIndex);
-    };
-    const nextSlideInteraction = (params)=>{
-        handleDirectionalSlide(params, 'next');
-    };
-    const previousSlideInteraction = (params)=>{
-        handleDirectionalSlide(params, 'previous');
-    };
-    const moveToSlideInteraction = (params)=>{
-        handleDirectionalSlide(params, 'specific');
-    };
-    useEffect(()=>{
-        const selector = `[data-id="${builderProps?.uid}"]`;
-        onListener({
-            event: 'gp:change-next-slide',
-            selector,
-            elementRef: localRef
-        }, (params)=>{
-            const { data, isRollback, uniqueStorageKey } = params || {};
-            nextSlideInteraction({
-                element: localRef.current,
-                data,
-                isRollback,
-                key: uniqueStorageKey
-            });
-        });
-        onListener({
-            event: 'gp:change-previous-slide',
-            selector,
-            elementRef: localRef
-        }, (params)=>{
-            const { data, isRollback, uniqueStorageKey } = params || {};
-            previousSlideInteraction({
-                element: localRef.current,
-                data,
-                isRollback,
-                key: uniqueStorageKey
-            });
-        });
-        onListener({
-            event: 'gp:change-image-step',
-            selector,
-            elementRef: localRef
-        }, (params)=>{
-            const { data, isRollback, uniqueStorageKey } = params || {};
-            moveToSlideInteraction({
-                element: localRef.current,
-                data,
-                isRollback,
-                key: uniqueStorageKey
-            });
-        });
-        onListener({
-            event: 'gp:change-index-slide',
-            selector
-        }, (params)=>{
-            const element = document.querySelector(selector);
-            const { data, isRollback, uniqueStorageKey } = params || {};
-            moveToSlideInteraction({
-                element,
-                data,
-                isRollback,
-                key: uniqueStorageKey
-            });
-        });
-    }, []);
-    useImperativeHandle(ref, ()=>({
-            nextSlideInteraction,
-            previousSlideInteraction,
-            moveToSlideInteraction
-        }));
-    const dispatchEventSelectSlide = (index)=>{
-        trigger({
-            event: 'gp:rollback:select-slide',
-            selector: `[data-id="${builderProps?.uid}"]`,
-            element: elmRef?.current
-        });
-        trigger({
-            event: 'gp:select-slide',
-            selector: `[data-id="${builderProps?.uid}"]`,
-            data: index,
-            element: elmRef?.current
-        });
-    };
-    return /*#__PURE__*/ jsx("div", {
-        ref: elmRef,
-        className: cls('gp-flex gp-w-full', rootClass),
-        style: {
-            ...makeStyleResponsive('jc', styles?.align)
-        },
-        children: /*#__PURE__*/ jsxs("div", {
-            ref: localRef,
-            "data-id": builderProps?.uid,
-            ...rootAttrs,
-            ...builderAttrs,
-            className: cls('gp-group/carousel gp-my-0 gp-h-full gp-max-w-full tablet:gp-px-0 mobile:gp-px-0', {
-                '!gp-flex': setting?.vertical?.[currentDevice]
-            }, builderProps?.uid),
-            style: {
-                ...style,
-                ...styleHeight,
-                ...styleWidth
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: "gp-w-full gp-h-full",
-                    children: [
-                        /*#__PURE__*/ jsxs("div", {
-                            className: cls(`gp-relative gp-mx-auto gp-flex gp-items-center gp-justify-between `, {
-                                'gp-flex-col gp-h-full': setting?.vertical?.[currentDevice],
-                                '!gp-h-full': fullHeight
-                            }),
-                            style: {
-                                ...makeContainerWidthOrHeight({
-                                    vertical: setting?.vertical,
-                                    dotStyle: setting?.dotStyle
-                                }),
-                                gap: arrowGapToEachSide + 'px'
-                            },
-                            children: [
-                                showNavigation && /*#__PURE__*/ jsx(Arrow, {
-                                    uid: builderProps?.uid,
-                                    custom: setting?.arrowCustom || '',
-                                    showArrow: navigationStyle,
-                                    arrowButtonSize: arrowButtonSize || {},
-                                    arrowIconSize: arrowIconSize || {},
-                                    arrowBackgroundColor: arrowBackgroundColor || '',
-                                    arrowCustomColor: arrowCustomColor,
-                                    gapToEachSize: arrowGapToEachSide,
-                                    showWhenHover: showWhenHover,
-                                    arrowBorder: arrowBorder || {},
-                                    arrowCorner: roundedArrow || {},
-                                    onClick: (e)=>{
-                                        e.stopPropagation();
-                                        sliderPrev();
-                                    },
-                                    left: true,
-                                    disabled: !isInfinity && slider?.track?.details?.abs === 0,
-                                    vertical: setting?.vertical,
-                                    isHiddenWhenDisabled: isHiddenArrowWhenDisabled,
-                                    className: "gem-slider-previous",
-                                    rootId: props?.parentClass
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    className: `gp-carousel-slider-${builderProps?.uid} gem-slider gp-h-full gp-overflow-hidden ${slidesClass} ${setting?.vertical?.[currentDevice] ? '!gp-min-h-0' : ''}`,
-                                    style: {
-                                        ...makeSpacing()
-                                    },
-                                    ref: sliderRef,
-                                    children: isEmptyChildren(children) ? /*#__PURE__*/ jsx("div", {
-                                        children: "No Slider"
-                                    }) : Children.map(filterToolbarPreview(children), (child, index)=>{
-                                        if (/*#__PURE__*/ isValidElement(child)) {
-                                            return /*#__PURE__*/ jsx(child.type, {
-                                                ...child.props,
-                                                className: `gem-slider-item gp-w-full gem-slider-item-${builderProps?.uid} ${child.props?.className || ''}`,
-                                                parentStyle: styles,
-                                                parentSettings: setting,
-                                                background: setting?.background,
-                                                "data-index": index,
-                                                onClick: ()=>{
-                                                    dispatchEventSelectSlide(index);
-                                                }
-                                            });
-                                        }
-                                        return null;
-                                    })
-                                }),
-                                showNavigation && /*#__PURE__*/ jsx(Arrow, {
-                                    uid: builderProps?.uid,
-                                    custom: setting?.arrowCustom || '',
-                                    showArrow: navigationStyle,
-                                    arrowIconSize: arrowIconSize || {},
-                                    arrowButtonSize: arrowButtonSize || {},
-                                    arrowBackgroundColor: arrowBackgroundColor || '',
-                                    arrowCustomColor: arrowCustomColor,
-                                    gapToEachSize: arrowGapToEachSide,
-                                    showWhenHover: showWhenHover,
-                                    arrowBorder: arrowBorder || {},
-                                    arrowCorner: roundedArrow || {},
-                                    onClick: (e)=>{
-                                        e.stopPropagation();
-                                        sliderNext();
-                                    },
-                                    left: false,
-                                    disabled: !isInfinity && slider?.track?.details?.abs === slideMaxIndex,
-                                    vertical: setting?.vertical,
-                                    isHiddenWhenDisabled: isHiddenArrowWhenDisabled,
-                                    className: "gem-slider-next",
-                                    rootId: props?.parentClass
-                                })
-                            ]
-                        }),
-                        loaded && !!totalSlideItem && instanceRef.current && /*#__PURE__*/ jsx(Dots, {
-                            showDots: setting?.dot,
-                            dotStyle: setting?.dotStyle,
-                            onHandleClick: (idx, isLoop)=>{
-                                const index = setting?.sneakPeak?.[currentDevice] ? idx : isLoop ? idx : getIndexSlideItemBy(idx);
-                                instanceRef.current?.moveToIdx(index);
-                                previousIndex.current = index;
-                            },
-                            totalSlideItem: totalSlideItem,
-                            slideItemsPerPage: slideItemsPerPage(),
-                            currentSlide: currentSlide,
-                            enabledSneakPeak: enabledSneakPeak,
-                            vertical: setting?.vertical,
-                            loop: setting?.loop,
-                            dotColor: setting?.dotColor,
-                            dotGapToCarousel: setting?.dotGapToCarousel,
-                            dotSize: setting?.dotSize,
-                            dotActiveColor: setting?.dotActiveColor,
-                            hiddenWhenOnlyOne: hiddenDotWhenOnlyOne,
-                            sneakPeakType: setting?.sneakPeakType,
-                            numberOfFullWidthShow: getNumberOfFullWidthShow(currentDevice),
-                            className: "carousel-dots"
-                        })
-                    ]
-                }),
-                filterToolbarPreview(children, true)
-            ]
-        })
-    });
-});
-
-export { Carousel as default };