import { library } from '@fortawesome/fontawesome-svg-core';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { h, Host } from "@stencil/core";
import { NativeEvent } from '../../utils/native-event';
library.add(faTimes);
export class BceDialog {
    constructor() {
        this.errors = [];
        this.handleClickHost = (event) => {
            const target = event.target;
            if (target && target.type === 'submit')
                this.submit();
        };
        this.handleClickBackdrop = () => {
            if (this.required)
                return;
            this.backdrop.emit();
            this.active = false;
        };
        this.handleForm = (event) => {
            const target = event.target;
            this.errors = target.errors;
            this.el.dispatchEvent(new NativeEvent(event.type));
            if (!this.errors.length)
                this.active = false;
        };
    }
    async close() {
        this.active = false;
        this.el.dispatchEvent(new NativeEvent('close'));
    }
    async hide() {
        this.active = false;
    }
    async show() {
        this.active = true;
    }
    async submit() {
        const form = this.el.shadowRoot.querySelector('bce-form');
        if (form)
            form.submit();
    }
    render() {
        return (h(Host, { onClick: this.handleClickHost },
            h("div", { class: "backdrop", onClick: this.handleClickBackdrop }),
            h("bce-form", { onSubmit: this.handleForm, onError: this.handleForm },
                h("div", { class: "action-header" }, this.closeButton && !this.required && (h("bce-button", { class: "close-button", icon: "fas:times", design: "text", onClick: this.handleClickBackdrop }))),
                h("slot", null),
                h("div", { class: "action-bar" },
                    h("slot", { name: "action" })))));
    }
    static get is() { return "bce-dialog"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-dialog.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-dialog.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "required",
            "reflect": true
        },
        "closeButton": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "close-button",
            "reflect": true
        },
        "errors": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Validation[]",
                "resolved": "Validation[]",
                "references": {
                    "Validation": {
                        "location": "import",
                        "path": "../../models/validation"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        }
    }; }
    static get events() { return [{
            "method": "backdrop",
            "name": "backdrop",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "close": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "hide": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "show": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "submit": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
