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

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CarouselStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const pageControl_1 = require("../pageControl/pageControl");
const pageControlAutomateUnControlled_1 = require("../pageControlAutomate/pageControlAutomateUnControlled");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const carousel_styled_1 = require("./carousel.styled");
const extraPaddingArrowStandAlone_1 = require("./components/extraPaddingArrowStandAlone");
const carousel_utils_1 = require("./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 = (0, useId_1.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 ((0, jsx_runtime_1.jsxs)(carousel_styled_1.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: [(0, jsx_runtime_1.jsxs)(carousel_styled_1.ArrowAndCarouselWrapperStyled, { allowModifySliceWidth: allowModifySliceWidth, styles: styles, children: [displayArrowsOnCarousel && numPages > 1 && ((0, jsx_runtime_1.jsx)(carousel_styled_1.ArrowLeftIconContainer, { "data-disabled": leftArrowDisabled, styles: styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { "aria-controls": id, customIconStyles: !leftArrowDisabled ? styles.leftArrowIcon : styles.leftArrowIconDisabled, disabled: leftArrowDisabled, ...props.leftArrow, onClick: onLeftArrowClick }) })), (0, jsx_runtime_1.jsxs)(carousel_styled_1.CarouselContainerStyled, { ref: carouselContainerRef, "data-testid": `${dataTestId}-container`, styles: styles, tabIndex: -1, onMouseOutCapture: onMouseOut, onMouseOverCapture: onMouseOver, children: [(0, jsx_runtime_1.jsx)(carousel_styled_1.CarouselContentStyled, { ref: carouselContentRef, "aria-live": props['aria-live'] ?? (playing ? ariaLiveOption_1.AriaLiveOptionType.OFF : ariaLiveOption_1.AriaLiveOptionType.POLITE), centerMode: centerMode, "data-testid": `${dataTestId}-content`, disableSwipe: disableSwipe, id: id, styles: styles, children: elements }), (0, jsx_runtime_1.jsx)(extraPaddingArrowStandAlone_1.ExtraPaddingArrowStandAlone, { ariaControls: id, ariaLabel: props.leftArrow?.['aria-label'], dataTestId: `${dataTestId}-left-arrow`, extraPadding: extraPadding, extraPaddingAsArrow: extraPaddingAsArrow, styles: styles, onClick: onLeftArrowClick }), (0, jsx_runtime_1.jsx)(extraPaddingArrowStandAlone_1.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 && ((0, jsx_runtime_1.jsx)(carousel_styled_1.ArrowRightIconContainer, { "data-disabled": rightArrowDisabled, styles: styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { "aria-controls": id, customIconStyles: !rightArrowDisabled ? styles.rightArrowIcon : styles.rightArrowIconDisabled, disabled: rightArrowDisabled, ...props.rightArrow, onClick: onRightArrowClick }) }))] }), hasPagination && pageControlArrowsControlVariant && pageControlVariant && numPages > 1 && ((0, jsx_runtime_1.jsx)(carousel_styled_1.PageControlContainerStyled, { styles: styles, children: (0, jsx_runtime_1.jsx)(pageControl_1.PageControl, { arrowsControlVariant: pageControlArrowsControlVariant, currentPosition: currentPage, leftControl: leftArrowControlPageControl, pages: numPages, rightControl: rightArrowControlPageControl, variant: pageControlVariant }) })), pageControlAutomateConfig && numPages > 1 && ((0, jsx_runtime_1.jsx)(carousel_styled_1.PageControlAutomateContainerStyled, { styles: styles, children: (0, jsx_runtime_1.jsx)(pageControlAutomateUnControlled_1.PageControlAutomateUnControlled, { ...pageControlAutomateConfig, currentBar: currentPage, mediaProgressBar: {
                        ...pageControlAutomateConfig.mediaProgressBar,
                        barsNum: numPages,
                        circular: props.circular,
                        onBarChange: onIndicatorChange,
                    }, playStop: { ...pageControlAutomateConfig.playStop, onClick: onMediaButtonClick }, playing: playing }) })), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { ariaLive: playing ? ariaLiveOption_1.AriaLiveOptionType.OFF : ariaLiveOption_1.AriaLiveOptionType.POLITE, children: (0, carousel_utils_1.buildScreenReaderText)(currentPage, numPages, screenReaderText) })] }));
};
exports.CarouselStandAlone = react_1.default.forwardRef(CarouselStandAloneComponent);
//# sourceMappingURL=carouselStandAlone.js.map