@kubit-ui-web/react-components/dist/esm/components/carousel/carouselStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useId } from '../../hooks/useId/useId';
import { AriaLiveOptionType } from '../../types/ariaLiveOption/ariaLiveOption';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { PageControl } from '../pageControl/pageControl';
import { PageControlAutomateUnControlled as PageControlAutomate } from '../pageControlAutomate/pageControlAutomateUnControlled';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { ArrowAndCarouselWrapperStyled, ArrowLeftIconContainer, ArrowRightIconContainer, CarouselContainerStyled, CarouselContentStyled, PageControlAutomateContainerStyled, PageControlContainerStyled, RootStyled, } from './carousel.styled';
import { ExtraPaddingArrowStandAlone } from './components/extraPaddingArrowStandAlone';
import { buildScreenReaderText } from './utils/carousel.utils';
const CarouselStandAloneComponent = ({ styles, carouselContainerRef, carouselContentRef, elements, numPages, centerMode, extraPadding, extraPaddingAsArrow = true, currentPage, onLeftArrowClick, onRightArrowClick, hasPagination, pageControlVariant, pageControlArrowsControlVariant, onKeyDown, dataTestId = 'carousel', displayArrowsOnCarousel, disableSwipe, allowModifySliceWidth, pageControlAutomateConfig, onIndicatorChange, onMediaButtonClick, onMouseOut, onMouseOver, playing, screenReaderText, ...props }, ref) => {
    const id = useId('carousel');
    const leftArrowDisabled = !props.circular && currentPage === 0;
    const rightArrowDisabled = !props.circular && currentPage === numPages - 1;
    const leftArrowControlPageControl = displayArrowsOnCarousel
        ? undefined
        : {
            icon: props.leftArrow?.icon,
            ['aria-label']: props.leftArrow?.['aria-label'],
            disabled: leftArrowDisabled,
            onClick: onLeftArrowClick,
        };
    const rightArrowControlPageControl = displayArrowsOnCarousel
        ? undefined
        : {
            icon: props.rightArrow?.icon,
            ['aria-label']: props.rightArrow?.['aria-label'],
            disabled: rightArrowDisabled,
            onClick: onRightArrowClick,
        };
    return (_jsxs(RootStyled, { ref: ref, allowModifySliceWidth: allowModifySliceWidth, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-roledescription": "carousel", "data-testid": dataTestId, styles: styles, onKeyDown: onKeyDown, children: [_jsxs(ArrowAndCarouselWrapperStyled, { allowModifySliceWidth: allowModifySliceWidth, styles: styles, children: [displayArrowsOnCarousel && numPages > 1 && (_jsx(ArrowLeftIconContainer, { "data-disabled": leftArrowDisabled, styles: styles, children: _jsx(ElementOrIcon, { "aria-controls": id, customIconStyles: !leftArrowDisabled ? styles.leftArrowIcon : styles.leftArrowIconDisabled, disabled: leftArrowDisabled, ...props.leftArrow, onClick: onLeftArrowClick }) })), _jsxs(CarouselContainerStyled, { ref: carouselContainerRef, "data-testid": `${dataTestId}-container`, styles: styles, tabIndex: -1, onMouseOutCapture: onMouseOut, onMouseOverCapture: onMouseOver, children: [_jsx(CarouselContentStyled, { ref: carouselContentRef, "aria-live": props['aria-live'] ?? (playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE), centerMode: centerMode, "data-testid": `${dataTestId}-content`, disableSwipe: disableSwipe, id: id, styles: styles, children: elements }), _jsx(ExtraPaddingArrowStandAlone, { ariaControls: id, ariaLabel: props.leftArrow?.['aria-label'], dataTestId: `${dataTestId}-left-arrow`, extraPadding: extraPadding, extraPaddingAsArrow: extraPaddingAsArrow, styles: styles, onClick: onLeftArrowClick }), _jsx(ExtraPaddingArrowStandAlone, { right: true, ariaControls: id, ariaLabel: props.rightArrow?.['aria-label'], dataTestId: `${dataTestId}-right-arrow`, extraPadding: extraPadding, extraPaddingAsArrow: extraPaddingAsArrow, styles: styles, onClick: onRightArrowClick })] }), displayArrowsOnCarousel && numPages > 1 && (_jsx(ArrowRightIconContainer, { "data-disabled": rightArrowDisabled, styles: styles, children: _jsx(ElementOrIcon, { "aria-controls": id, customIconStyles: !rightArrowDisabled ? styles.rightArrowIcon : styles.rightArrowIconDisabled, disabled: rightArrowDisabled, ...props.rightArrow, onClick: onRightArrowClick }) }))] }), hasPagination && pageControlArrowsControlVariant && pageControlVariant && numPages > 1 && (_jsx(PageControlContainerStyled, { styles: styles, children: _jsx(PageControl, { arrowsControlVariant: pageControlArrowsControlVariant, currentPosition: currentPage, leftControl: leftArrowControlPageControl, pages: numPages, rightControl: rightArrowControlPageControl, variant: pageControlVariant }) })), pageControlAutomateConfig && numPages > 1 && (_jsx(PageControlAutomateContainerStyled, { styles: styles, children: _jsx(PageControlAutomate, { ...pageControlAutomateConfig, currentBar: currentPage, mediaProgressBar: {
                        ...pageControlAutomateConfig.mediaProgressBar,
                        barsNum: numPages,
                        circular: props.circular,
                        onBarChange: onIndicatorChange,
                    }, playStop: { ...pageControlAutomateConfig.playStop, onClick: onMediaButtonClick }, playing: playing }) })), _jsx(ScreenReaderOnly, { ariaLive: playing ? AriaLiveOptionType.OFF : AriaLiveOptionType.POLITE, children: buildScreenReaderText(currentPage, numPages, screenReaderText) })] }));
};
export const CarouselStandAlone = React.forwardRef(CarouselStandAloneComponent);
//# sourceMappingURL=carouselStandAlone.js.map