@kubit-ui-web/react-components/dist/esm/components/pageControl/pageControlStandAlone.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, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { ArrowControlStandAlone } from './components/arrowControlStandAlone';
import { ButtonControlStandAlone } from './components/buttonControlStandAlone';
import { isIElementOrIcon } from './helper/controlType';
import { DotsWrapper, LeftArrowControlWrapperStyled, PageControlContainer, PageControlDot, RightArrowControlWrapperStyled, } from './pageControl.styled';
import { PageControlState } from './types/pageControlStates';
const PageControlStandAloneComponent = ({ dataTestId = 'page-control', ...props }, ref) => {
    return (_jsx(PageControlContainer, { ref: ref, "data-testid": dataTestId, styles: props.styles, children: props.dots > 0 && (_jsxs(_Fragment, { children: [props.leftControl && !isIElementOrIcon(props.leftControl) && (_jsx(ButtonControlStandAlone, { ...props.leftControl, buttonControlStyles: props.styles.leftButtonControl, dataTestId: `${dataTestId}-left-control` })), ((props.arrowsControlStyles && isIElementOrIcon(props.leftControl)) ||
                    (props.arrowsControlStyles && props.leftArrowControl)) && (_jsx(LeftArrowControlWrapperStyled, { arrowsControlStyles: props.arrowsControlStyles, children: _jsx(ArrowControlStandAlone, { arrowsControlStyles: props.arrowsControlStyles, ...props.leftControl, ...props.leftArrowControl }) })), _jsxs(DotsWrapper, { styles: props.styles, children: [props.styles.isBullet && props.firstVisiblePosition > 0 ? (_jsx(PageControlDot, { state: PageControlState.LAST, styles: props.styles })) : null, [...Array(props.dots)].map((_, _index) => {
                            const index = _index + props.firstVisiblePosition;
                            const state = index === props.currentPosition
                                ? PageControlState.CURRENT
                                : PageControlState.DEFAULT;
                            return (_jsx(PageControlDot, { state: state, styles: props.styles }, `Dot-middle--${index}`));
                        }), props.styles.isBullet && props.lastVisiblePosition < props.pages - 1 && (_jsx(PageControlDot, { state: PageControlState.LAST, styles: props.styles }))] }), props.rightControl && !isIElementOrIcon(props.rightControl) && (_jsx(ButtonControlStandAlone, { ...props.rightControl, buttonControlStyles: props.styles.rightButtonControl, dataTestId: `${dataTestId}-right-control` })), ((props.arrowsControlStyles && isIElementOrIcon(props.rightControl)) ||
                    (props.arrowsControlStyles && props.rightArrowControl)) && (_jsx(RightArrowControlWrapperStyled, { arrowsControlStyles: props.arrowsControlStyles, children: _jsx(ArrowControlStandAlone, { arrowsControlStyles: props.arrowsControlStyles, ...props.rightControl, ...props.rightArrowControl }) }))] })) }));
};
export const PageControlStandAlone = React.forwardRef(PageControlStandAloneComponent);
//# sourceMappingURL=pageControlStandAlone.js.map