import node from "../../support/node";
import Renderables from "../Renderables";
/**
 * Implementation of the 'overlay' markup element.
 * A HTML div element which can contain several markup elements.
 * An overlay will be triggered by clicking on the associated 'trigger' element
 * For CSS manipulations the following classes are added:
 *  lto-overlay: the overlay element
 *
 * @see {@link IRenderable}
 */
var Overlay = /** @class */ (function () {
    function Overlay(spec) {
        this.spec = spec;
    }
    /**
     * @inheritDoc
     */
    Overlay.prototype.render = function (renderer, isNested) {
        var _this = this;
        var overlay = node("div");
        overlay.setId(this.spec.id);
        overlay.setName(this.spec.trigger);
        overlay.addClasses("lto-overlay");
        this.spec.class !== undefined ? overlay.addClasses(this.spec.class) : function () { };
        var close = node("div");
        close.addClasses("lto-close-overlay");
        close.onClick(function () { return Overlay.hide(overlay); });
        overlay.appendChild(close);
        var elements = (this.spec.elements || []).map(function (e) { return renderer.render(e, _this); });
        elements.forEach(function (e) { return e.forEach(function (x) { return overlay.appendChild(node(x)); }); });
        Overlay.hide(overlay);
        return overlay.unwrap();
    };
    Overlay.hide = function (overlay) {
        overlay.addClasses("lto-inactive");
    };
    Overlay.show = function (overlay) {
        overlay.removeClasses("lto-inactive");
    };
    return Overlay;
}());
export { Overlay };
Renderables.register("overlay", Overlay);
//# sourceMappingURL=Overlay.js.map