import * as css from '../theme/default/loading-indicator.m.css';
import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
const factory = create({ theme }).properties();
export const LoadingIndicator = factory(function LoadingIndicator({ properties, middleware: { theme } }) {
    const classes = theme.classes(css);
    const { active = true, type = 'linear' } = properties();
    const isLinear = type === 'linear';
    if (isLinear) {
        return (tsx("div", { classes: [
                theme.variant(),
                classes.root,
                !active && classes.inactive,
                classes.linear
            ], role: "progressbar" },
            tsx("div", { classes: classes.buffer }),
            active && (tsx("div", { classes: [classes.bar, classes.primary] },
                tsx("span", { classes: classes.inner })))));
    }
    let sizeClass;
    switch (type) {
        case 'circular-small':
            sizeClass = css.small;
            break;
        case 'circular-large':
            sizeClass = css.large;
            break;
        case 'circular-medium':
        default:
            sizeClass = css.medium;
            break;
    }
    return (tsx("div", { classes: [
            theme.variant(),
            classes.root,
            !active && classes.inactive,
            classes.circular,
            sizeClass
        ], role: "progressbar" }, active && (tsx("div", { classes: classes.circularContainer },
        tsx("div", { classes: classes.spinnerLayer },
            tsx("div", { classes: [classes.circleClipper, classes.circleLeft] },
                tsx("svg", { classes: classes.circleGraphic, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
                    tsx("circle", { cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "27.489", "stroke-width": "2.5" }))),
            tsx("div", { classes: classes.gapPatch },
                tsx("svg", { classes: classes.circleGraphic, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
                    tsx("circle", { cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "27.489", "stroke-width": "2" }))),
            tsx("div", { classes: [classes.circleClipper, classes.circleRight] },
                tsx("svg", { classes: classes.circleGraphic, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
                    tsx("circle", { cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "27.489", "stroke-width": "2.5" }))))))));
});
export default LoadingIndicator;

/*# sourceMappingURL=index.mjs.map*/