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: '2697b58a7c65243705c15993e5a967894b725196', onExit: e => this.handleDismiss(e) }, h("div", { key: '0c6d340d05717b4580e001e8cff4d544f3dac072', slot: "heading", class: "heading" }, h("div", { key: 'e5e3c323b48a90431f2593a062715d316608dc71', class: "icon", innerHTML: QuestionIcon }), h("div", { key: '8ebc86de76b84cf255efbf6bc8db8876142e858d', class: "title" }, "Ask the Sender a Question")), h("div", { key: 'c3f96587257dbd2e0ce98eba44a8ef7c3bba7c88', slot: "content", class: "content" }, h("textarea", { key: '22c2c8dd80e41e77e0bed92f0b48a81f85466532', name: "question", rows: 6, placeholder: "Enter your question...", onInput: (e) => (this.question = e.target.value) }, this.question)), h("div", { key: '11a32d726ead166b7b9bfa994a31de4c4998fdec', class: "footer", slot: "footer" }, h("div", { key: '3fa336237b33537b9154c1eb7dfcd6b929a28e1e', class: "buttons" }, h("button", { key: 'aedcec8fc3948515d93adce69f15eb048bdd824e', class: "cancel", onClick: () => this.handleCancel() }, "Cancel"), h("button", { key: '2bd012fe2e6866922edde4a4abadb943c78f44ef', 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
