import { h, Host } from "@stencil/core";
import { validateAccessibleLabel } from "../../helpers/Validate/wcag";
import { BackdropClass } from "./constants";
import { canValidateWcagOnRender } from "../../helpers/Dom/win";
import { govHost } from "../../helpers/Dom/template";
import { tick } from "../../utils/stencil.utils";
export class GovBackdrop {
    constructor() {
        /**
         * Determine if component should have inverse colors to be used on dark background.
         */
        this.inverse = false;
        /**
         * Makes the backdrop component disabled.
         */
        this.disabled = false;
        this.h = govHost(this.host);
    }
    async componentDidRender() {
        if (canValidateWcagOnRender()) {
            tick(() => this.validateAccessibility());
        }
    }
    render() {
        return (h(Host, { key: 'a86624d0cdaf83455d71298e609324fed9cd19bd', class: this.h.classes(BackdropClass.root), inverse: this.inverse }, h("div", { key: 'fb299b51c9e2e2dbc0093a8a365e98dabcfc6e8c', role: 'button', "aria-disabled": this.disabled, "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, onClick: e => {
                if (!this.disabled) {
                    this.govClick.emit(e);
                }
            }, class: BackdropClass.bg })));
    }
    /**
     * Validate the accessibility attributes of the component
     */
    async validateAccessibility() {
        validateAccessibleLabel(this.accessibleLabel, this.accessibleLabelledBy, BackdropClass.root, this.host);
    }
    static get is() { return "gov-backdrop"; }
    static get properties() {
        return {
            "inverse": {
                "type": "boolean",
                "attribute": "inverse",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determine if component should have inverse colors to be used on dark background."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the backdrop component disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "accessibleLabel": {
                "type": "string",
                "attribute": "accessible-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Adds accessible label for the backdrop that is only shown for screen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "accessibleLabelledBy": {
                "type": "string",
                "attribute": "accessible-labelledby",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String of id's that indicate alternative labels elements"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "govClick",
                "name": "gov-click",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when button clicks."
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "validateAccessibility": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Validate the accessibility attributes of the component",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}
//# sourceMappingURL=gov-backdrop.js.map
