import { h, Host } from "@stencil/core";
/**
 * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog
 * box with a message and optional header/title. An OK button is shown that will dismiss the message.
 * It can also be dismissed by clicking the background overlay.
 */
export class VerdocsOkDialog {
    constructor() {
        /**
         * The title of the dialog. "title" is a reserved word, so we use heading.
         */
        this.heading = '';
        /**
         * The message content to display.
         */
        this.message = '';
        /**
         * Override the "OK" button's label
         */
        this.buttonLabel = 'OK';
        /**
         * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background
         * overlay to dismiss it.
         */
        this.showCancel = false;
        this.closed = false;
    }
    handleOk() {
        this.next.emit();
    }
    handleCancel() {
        this.exit.emit();
    }
    // We need a separate event handler for clicking the background because it can receive events "through" other child components
    handleDismiss(e) {
        this.closed = true;
        if (e.target.className === 'background-overlay') {
            e.preventDefault();
            this.exit.emit();
        }
    }
    render() {
        return (h(Host, { key: 'a53ec883d89c75014091071d45b629f14fb8a14f', class: this.closed ? 'closed' : '' }, h("div", { key: 'eeba1a34d586227ddbdbccb2ce6a273bf516a2ed', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'd803f8cda0d55045eb85d13c98e359ded7fddf24', class: "dialog" }, h("div", { key: 'cd12ec9dd5c8e1e496ad1410a87fa866c7cd3143', class: "heading" }, this.heading), h("div", { key: '9256bbda5d99136202bd36847bf488c8b29de936', class: "content" }, h("div", { key: '3ffeaaf5cda9073ed5775acbe9bb44f2aca14fa2', class: "message", innerHTML: this.message }), h("div", { key: '0914a64b1de3f12de80cdb8536315eb3dd804fa1', class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { key: '6cffacc69dad4bfe86b324a6b15b684a8233557e', label: this.buttonLabel, onClick: () => this.handleOk() })))))));
    }
    static get is() { return "verdocs-ok-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-ok-dialog.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-ok-dialog.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "attribute": "heading",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The title of the dialog. \"title\" is a reserved word, so we use heading."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "message": {
                "type": "string",
                "attribute": "message",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The message content to display."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "buttonLabel": {
                "type": "string",
                "attribute": "button-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Override the \"OK\" button's label"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'OK'"
            },
            "showCancel": {
                "type": "boolean",
                "attribute": "show-cancel",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\noverlay to dismiss it."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "closed": {}
        };
    }
    static get events() {
        return [{
                "method": "next",
                "name": "next",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the user clicks the OK button."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "exit",
                "name": "exit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-ok-dialog.js.map
