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: '12df94c0d9a87decf19d9a1b62c2ab7119681e03', class: this.closed ? 'closed' : '' }, h("div", { key: '29ecdb2e85dfb825d84efecd80729c184c798eed', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '15cdea7df133a16ad3da26b767c1f048c5b5be4a', class: "dialog" }, h("div", { key: '14739ce3942c365ab4dc1ffd12633865c8702ecf', class: "heading" }, this.heading), h("div", { key: 'c04aea2b91bbbe26b24d286a875720df437ac85a', class: "content" }, h("div", { key: '9e78186fed917d0bc4f8810fe2331f6b64c0ae43', class: "message", innerHTML: this.message }), h("div", { key: '26992bb398e78668235d42b87000128ac339bae9', class: "buttons" }, this.showCancel ? h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }) : h("div", { style: { display: 'none' } }), h("verdocs-button", { key: '077902f58556093dfe46056ad0c9d6750356e999', 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
