import { h } from "@stencil/core";
const QuestionIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.4809 13.8423H15.4C16.2962 13.8423 17 13.1288 17 12.2764V5.56582C17 4.71348 16.2962 4 15.4 4H4.6C3.70383 4 3 4.71348 3 5.56582V12.2764C3 13.1288 3.70383 13.8423 4.6 13.8423H6.19908L6.2 17L6.20346 16.9997L6.20502 16.9988L10.4809 13.8423ZM6.79895 17.8034C6.35668 18.1298 5.73 18.0406 5.39921 17.6042C5.26989 17.4335 5.2 17.2262 5.2 17.0133L5.19937 14.8423H4.6C3.16406 14.8423 2 13.6935 2 12.2764V5.56582C2 4.14876 3.16406 3 4.6 3H15.4C16.8359 3 18 4.14876 18 5.56582V12.2764C18 13.6935 16.8359 14.8423 15.4 14.8423H10.81L6.79895 17.8034Z" fill="#ffffff"/></svg>`;
/**
 * 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 VerdocsQuestionDialog {
    constructor() {
        this.question = '';
        this.closed = false;
    }
    handleOk() {
        this.next.emit({ question: this.question });
    }
    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("verdocs-dialog", { key: 'd0e85744fa9901d1be794cd59f4c9b87922e6e91', onExit: e => this.handleDismiss(e) }, h("div", { key: '6d7ead703cdf217588ac98d2ac93a35644838b78', slot: "heading", class: "heading" }, h("div", { key: 'd07c6155fc98f51204a51add33d82afec7592c4b', class: "icon", innerHTML: QuestionIcon }), h("div", { key: 'e9698d0aa4b24db343afd149adee95d9c3c0a52a', class: "title" }, "Ask the Sender a Question")), h("div", { key: 'cdef7a2b00c4c66e1748733e3c614e39ad456192', slot: "content", class: "content" }, h("textarea", { key: '81c88e1d61be54e7ba80c9101fb71bf903df8d1c', name: "question", rows: 6, placeholder: "Enter your question...", onInput: (e) => (this.question = e.target.value) }, this.question)), h("div", { key: 'a7d5a31362337e6c80c0ac5b2c6471efbacb9a23', class: "footer", slot: "footer" }, h("div", { key: '71ae8344f053cfd94dc6befed76933fe67f490d1', class: "buttons" }, h("button", { key: '04aec379b7b4f21885f72ed2016b10ac26730476', class: "cancel", onClick: () => this.handleCancel() }, "Cancel"), h("button", { key: '6e6e8bb27367c9a1167a49519da299d9ce9ee983', class: 'ok', onClick: () => this.handleOk() }, "OK")))));
    }
    static get is() { return "verdocs-question-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-question-dialog.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-question-dialog.css"]
        };
    }
    static get properties() {
        return {
            "question": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "question",
                "defaultValue": "''"
            }
        };
    }
    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": "{question: string}",
                    "resolved": "{ question: string; }",
                    "references": {}
                }
            }, {
                "method": "exit",
                "name": "exit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when Cancel is pressed. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-question-dialog.js.map
