import { MDCDialog } from '@material/dialog';
import { h } from "@stencil/core";
export class Dialog {
    constructor() {
        /**
         * @deprecated since 1.1.0 : not used
         */
        this.items = [];
        /** Set the title of the dialog */
        this.dialogTitle = '';
    }
    componentDidLoad() {
        this.mdcDialog = new MDCDialog(this.dialogEl);
        this.mdcDialog.listen('MDCDialog:closing', (event) => {
            switch (event.detail.action) {
                case 'accept':
                    this.accept.emit(true);
                    break;
                case 'close':
                    this.cancel.emit(false);
                    break;
                default:
                    this.cancel.emit(false);
                    break;
            }
        });
        this.updateBody();
    }
    watchBody() {
        this.updateBody();
    }
    updateBody() {
        if (this.bodySection && this.body) {
            this.body instanceof HTMLElement ? this.bodySection.appendChild(this.body) : this.bodySection.innerText = this.body;
        }
    }
    /**
     * @deprecated since 1.1.0 : use toggle() instead
     * Open/Close dialog.
     */
    async show() {
        this.toggle();
    }
    /**
     * Open/close dialog
     */
    async toggle() {
        this.mdcDialog.isOpen ? this.close() : this.open();
    }
    /**
     * Returns true if the dialog is open
     */
    async isOpen() {
        return this.mdcDialog.isOpen;
    }
    /**
     * Opens the dialog
     */
    async open() {
        this.mdcDialog.open();
    }
    /**
     * CloseS the dialog
     */
    async close() {
        this.mdcDialog.close();
        this.cancel.emit(false);
    }
    getSectionClass() {
        return {
            'mdc-dialog__content': true
        };
    }
    render() {
        return (h("aside", { class: "mdc-dialog", role: "alertdialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle, "aria-describedby": "mdc-dialog-description", ref: el => this.dialogEl = el },
            h("div", { class: "mdc-dialog__container" },
                h("div", { style: { 'min-width': this.width + 'px', 'width': this.width + 'px' }, class: "mdc-dialog__surface" },
                    this.dialogTitle &&
                        h("h2", { id: "mdc-dialog-label", class: "mdc-dialog__title" },
                            this.dialogTitle,
                            "\u00A0\u00A0\u00A0\u00A0",
                            this.closeButton && h("materials-icon-button", { class: "close-btn", icon: "close", onClick: () => this.close() })),
                    h("section", { ref: el => this.bodySection = el, id: "mdc-dialog-content", style: { 'min-height': this.height + 'px', 'height': this.height + 'px' }, class: this.getSectionClass() },
                        h("slot", { name: "body" })),
                    this.actions ?
                        h("footer", { class: "mdc-dialog__actions" }, this.actions.map(a => h("button", { type: "button", class: "mdc-button mdc-dialog__button", title: a.title ? a.title : a.label, onClick: () => { if (a.action)
                                a.action(); }, disabled: a.role === 'accept' && this.disableAcceptButton, "data-mdc-dialog-action": a.role === 'accept' || a.role === 'close' ? a.role : null }, a.label)))
                        :
                            h("footer", { class: "mdc-dialog__actions" },
                                h("slot", { name: "third-button" }),
                                !!this.cancelButton &&
                                    h("button", { type: "button", class: "mdc-button mdc-dialog__button", "data-mdc-dialog-action": "close" }, this.cancelButton),
                                !!this.acceptButton &&
                                    h("button", { type: "button", disabled: this.disableAcceptButton, class: "mdc-button mdc-dialog__button", "data-mdc-dialog-action": "accept" }, this.acceptButton)))),
            h("div", { class: "mdc-dialog__scrim" })));
    }
    static get is() { return "materials-dialog"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["dialog.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["dialog.css"]
    }; }
    static get properties() { return {
        "scrollable": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": "since 1.1.0 : dialog scroll automatically",
                        "name": "deprecated"
                    }],
                "text": ""
            },
            "attribute": "scrollable",
            "reflect": false
        },
        "items": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[]",
                "resolved": "string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": "since 1.1.0 : not used",
                        "name": "deprecated"
                    }],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "width": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set the witdth of the dialog screen"
            },
            "attribute": "width",
            "reflect": false
        },
        "height": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set the height of the dialog screen"
            },
            "attribute": "height",
            "reflect": false
        },
        "dialogTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set the title of the dialog"
            },
            "attribute": "dialog-title",
            "reflect": false,
            "defaultValue": "''"
        },
        "acceptButton": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Display a button which execute accept action"
            },
            "attribute": "accept-button",
            "reflect": false
        },
        "cancelButton": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Display a button which execute cancel action"
            },
            "attribute": "cancel-button",
            "reflect": false
        },
        "disableAcceptButton": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Display accept button as disabled"
            },
            "attribute": "disable-accept-button",
            "reflect": false
        },
        "closeButton": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Display a close button in the top right of the dialog"
            },
            "attribute": "close-button",
            "reflect": false
        },
        "actions": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "DialogAction[]",
                "resolved": "DialogAction[]",
                "references": {
                    "DialogAction": {
                        "location": "import",
                        "path": "./dialog-action"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "A list of this dialog actions"
            }
        },
        "body": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | HTMLElement",
                "resolved": "HTMLElement | string",
                "references": {
                    "HTMLElement": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The dialog body, it can be an HTMLElement or plain text"
            },
            "attribute": "body",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "accept",
            "name": "accept",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Event emitted when acceptButton is clicked"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "cancel",
            "name": "cancel",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Event emitted when cancelButton is clicked"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "show": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": [{
                        "name": "deprecated",
                        "text": "since 1.1.0 : use toggle() instead\nOpen/Close dialog."
                    }]
            }
        },
        "toggle": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Open/close dialog",
                "tags": []
            }
        },
        "isOpen": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "Returns true if the dialog is open",
                "tags": []
            }
        },
        "open": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "Opens the dialog",
                "tags": []
            }
        },
        "close": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "CloseS the dialog",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "host"; }
    static get watchers() { return [{
            "propName": "body",
            "methodName": "watchBody"
        }]; }
}
