/**
 * Implementation of the 'overlay' markup element.
 * An overlay always has to be a part of an overlays element. A
 * div HTML element is created containing an additional div
 * element for the overlay content and a button for the interaction.
 * The class lto-overlay is added to allow CSS manipulations.
 *
 * @see {@link IRenderable}
 * @see {@link Overlays}
 */
var Overlay = /** @class */ (function () {
    function Overlay(renderable) {
        this.renderable = renderable;
    }
    /**
     * @inheritDoc
     */
    Overlay.prototype.render = function (renderer, isNested) {
        var div = document.createElement("div");
        div.classList.add("lto-overlay");
        var content = document.createElement("div");
        var button = document.createElement("button");
        button.appendChild(document.createTextNode("x"));
        content.appendChild(button);
        button.addEventListener("click", function () {
            if (div.parentElement) {
                div.parentElement.removeChild(div);
            }
        }, { once: true });
        this.renderable.render(renderer, true).querySelectorAll("*")
            .forEach(function (e) { return content.appendChild(e); });
        div.appendChild(content);
        return div;
    };
    return Overlay;
}());
export { Overlay };
//# sourceMappingURL=index.js.map