import { create, tsx } from '@dojo/framework/core/vdom';
import theme from '../middleware/theme';
import * as css from '../theme/default/progress.m.css';
import { formatAriaProperties } from '../common/util';
const factory = create({ theme })
    .properties()
    .children();
export const Progress = factory(function Progress({ children, id, properties, middleware: { theme } }) {
    const themeCss = theme.classes(css);
    const { aria = {}, value, showOutput = true, max = 100, min = 0, widgetId = `progress-${id}` } = properties();
    const _output = (value, percent) => {
        const { output } = children()[0] || {};
        return output ? output(value, percent) : `${percent}%`;
    };
    const renderProgress = (percent) => {
        return tsx("div", { classes: themeCss.progress, styles: { width: `${percent}%` } });
    };
    const percent = Math.round(((value - min) / (max - min)) * 100);
    const output = _output(value, percent);
    return (tsx("div", { key: "root", classes: [theme.variant(), themeCss.root] },
        tsx("div", Object.assign({ classes: themeCss.bar, role: "progressbar" }, formatAriaProperties(aria), { "aria-valuemin": `${min}`, "aria-valuemax": `${max}`, "aria-valuenow": `${value}`, "aria-valuetext": `${output}`, id: widgetId }), renderProgress(percent)),
        showOutput ? tsx("span", { classes: themeCss.output }, output) : null));
});
export default Progress;

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