import Renderables from '../Renderables';
/**
 * Implementation of the 'spinner' markup element.
 * A HTML input element where attribute type is set to number.
 * The class lto-spinner is added to allow CSS manipulations.
 *
 * @see {@link IRenderable}
 */
var Spinner = /** @class */ (function () {
    function Spinner(spec) {
        this.spec = spec;
    }
    /**
     * @inheritDoc
     */
    Spinner.prototype.render = function (renderer, isNested) {
        var position = this.spec.position || 'left';
        var spinner = document.createElement('input');
        spinner.setAttribute("type", "number");
        // @ts-ignore
        spinner.setAttribute('value', isNaN(this.spec.value) ? "" : this.spec.value);
        // @ts-ignore
        spinner.setAttribute('min', isNaN(this.spec.min) ? "" : this.spec.min);
        // @ts-ignore
        spinner.setAttribute('max', isNaN(this.spec.max) ? "" : this.spec.max);
        spinner.setAttribute('step', this.spec.step || "");
        spinner.setAttribute('name', this.spec.name || "");
        spinner.addEventListener("change", function () {
            spinner.setAttribute('value', spinner.value);
        });
        spinner.classList.add("lto-spinner", "lto-" + position);
        if (this.spec.id !== undefined) {
            spinner.id = this.spec.id;
        }
        if (this.spec.class !== undefined) {
            this.spec.class.split(" ").forEach(function (e) { return spinner.classList.add(e); });
        }
        spinner.step = this.spec.step || "";
        if (isNested) {
            spinner.classList.add("lto-nested");
        }
        return spinner;
    };
    return Spinner;
}());
export { Spinner };
Renderables.register("spinner", Spinner);
//# sourceMappingURL=index.js.map