@kubit-ui-web/react-components/dist/esm/components/progressBar/progressBarStandAlone.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Slider } from '../slider/slider';
import { SliderType } from '../slider/types/type';
import { BarContainerStyled, BarStyled, ParentContainerStyled, ProgressBarStyled, } from './progressBar.styled';
const SLIDER_MAX_VALUE = 1000;
const SLIDER_MIN_VALUE = 0;
const SLIDER_PERCENTAGE_CONVERSION = 10;
const ProgressBarStandaloneComponent = ({ dataTestIdBar = 'bar', dataTestIdProgressBar = 'progress-bar', ...props }, ref) => {
    return (_jsx(ParentContainerStyled, { ref: ref, styles: props.styles, children: _jsx(BarContainerStyled, { styles: props.styles, children: props.styles.useAsSlider && props.styles.sliderVariant ? (_jsx(Slider, { ariaLabel: props.barAriaLabel, max: SLIDER_MAX_VALUE, min: SLIDER_MIN_VALUE, tooltip: props.tooltip, type: SliderType.CONTINUOUS, 
                // Convert 0-100 values to 0 - 1000
                value: props.progressCompleted * SLIDER_PERCENTAGE_CONVERSION, variant: props.styles.sliderVariant, onChange: (newValue) => {
                    if (props.onChange && !Array.isArray(newValue)) {
                        // in order to retun a value 0 - 100
                        props.onChange(newValue / SLIDER_PERCENTAGE_CONVERSION);
                    }
                }, onDragEnd: props.onDragEnd, onDragStart: props.onDragStart })) : (_jsxs(_Fragment, { children: [_jsx(BarStyled, { "data-testid": dataTestIdBar, sizeStyles: props.sizeStyles, styles: props.styles }), _jsx(ProgressBarStyled, { "data-testid": dataTestIdProgressBar, progressAnimation: props.progressAnimation, progressCompleted: props.progressCompleted, sizeStyles: props.sizeStyles, styles: props.styles })] })) }) }));
};
/**
 * @description
 * ProgressBar component is used to show a progress bar.
 * @param {React.PropsWithChildren<IProgressBarStandAlone>} props
 * @returns {JSX.Element}
 */
export const ProgressBarStandalone = React.forwardRef(ProgressBarStandaloneComponent);
//# sourceMappingURL=progressBarStandAlone.js.map