"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var vdom_1 = require("@dojo/framework/core/vdom");
var theme_1 = require("../middleware/theme");
var css = require("../theme/default/progress.m.css");
var util_1 = require("../common/util");
var factory = vdom_1.create({ theme: theme_1.default })
    .properties()
    .children();
exports.Progress = factory(function Progress(_a) {
    var children = _a.children, id = _a.id, properties = _a.properties, theme = _a.middleware.theme;
    var themeCss = theme.classes(css);
    var _b = properties(), _c = _b.aria, aria = _c === void 0 ? {} : _c, value = _b.value, _d = _b.showOutput, showOutput = _d === void 0 ? true : _d, _e = _b.max, max = _e === void 0 ? 100 : _e, _f = _b.min, min = _f === void 0 ? 0 : _f, _g = _b.widgetId, widgetId = _g === void 0 ? "progress-" + id : _g;
    var _output = function (value, percent) {
        var output = (children()[0] || {}).output;
        return output ? output(value, percent) : percent + "%";
    };
    var renderProgress = function (percent) {
        return vdom_1.tsx("div", { classes: themeCss.progress, styles: { width: percent + "%" } });
    };
    var percent = Math.round(((value - min) / (max - min)) * 100);
    var output = _output(value, percent);
    return (vdom_1.tsx("div", { key: "root", classes: [theme.variant(), themeCss.root] },
        vdom_1.tsx("div", tslib_1.__assign({ classes: themeCss.bar, role: "progressbar" }, util_1.formatAriaProperties(aria), { "aria-valuemin": "" + min, "aria-valuemax": "" + max, "aria-valuenow": "" + value, "aria-valuetext": "" + output, id: widgetId }), renderProgress(percent)),
        showOutput ? vdom_1.tsx("span", { classes: themeCss.output }, output) : null));
});
exports.default = exports.Progress;

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