import { h, Host } from "@stencil/core";
import { validateProp } from "../../../helpers/Validate/props";
import { ButtonClass, ButtonColors, ButtonType, NativeType, } from "./constants";
import { govHost, toBoolAttrIfDefined } from "../../../helpers/Dom/template";
import { toBool } from "../../../utils/bool.utils";
import { Sizes } from "../../../core/constants/sizes";
import { validateAccessibleLabel } from "../../../helpers/Validate/wcag";
import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
import { delay } from "../../../utils/utils";
import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
import { AttributeObserver } from "../../../helpers/Dom/attribute";
var Tags;
(function (Tags) {
    Tags["A"] = "a";
    Tags["BUTTON"] = "button";
})(Tags || (Tags = {}));
export class GovButton {
    constructor() {
        this.hydrated = false;
        /**
         * Button’s size
         */
        this.size = "m";
        /**
         * Expands the button to fill 100% of the container width
         */
        this.expanded = false;
        /**
         * Expands the button to fill 100% of the container width only on mobile
         */
        this.expandedMobile = false;
        /**
         * Makes the button component disabled.
         * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies
         */
        this.disabled = false;
        /**
         * Same as original parameter
         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
         */
        this.nativeType = "button";
        /**
         * Same as original parameter
         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
         */
        this.tab = 0;
        /**
         * Same as original parameter
         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable
         */
        this.focusable = true;
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
    }
    validateColor(newValue) {
        validateProp(ButtonColors, newValue, ButtonClass.root);
    }
    validateType(newValue) {
        validateProp(ButtonType, newValue, ButtonClass.root);
    }
    validateSize(newValue) {
        validateProp(Sizes, newValue, ButtonClass.root);
    }
    validateNativeType(newValue) {
        validateProp(NativeType, newValue, ButtonClass.root);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.validateType(this.type);
        this.validateSize(this.size);
        this.validateNativeType(this.nativeType);
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    async componentDidRender() {
        if (canValidateWcagOnRender()) {
            await delay(500);
            await this.validateAccessibility();
        }
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        const Tag = this.href ? Tags.A : Tags.BUTTON;
        const nativeType = Tag === Tags.A ? undefined : this.nativeType;
        return (h(Host, { key: '0d010913c0331fcb11918152cb9bb2598923c5eb', size: this.size, hydrated: this.hydrated, color: this.color, class: this.h.classes(ButtonClass.root), type: this.type }, h(Tag, Object.assign({ key: 'd413645e924857fb5451c8e03c986013d85ddc06', class: "element", ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), disabled: this.disabled, id: this.identifier, href: this.href, target: this.target, download: this.download, hreflang: this.hreflang, rel: this.rel, name: this.name, type: nativeType, tabindex: this.disabled ? "-1" : this.tab }, this.inheritedAttributes, { "aria-disabled": toBoolAttrIfDefined(this.disabled) }), toBool(this.loading) && !this.h.hasSlot("icon-end") &&
            h("gov-icon", { key: '13528203c29059fe167ca9b6f1f9134415517d47', name: "loader", class: "gov-spin-animation", type: "components" }), this.h.hasSlot("icon-start") && h("slot", { key: '304d82f1e7136a3f11ab44ce5e5b3166c2be2976', name: "icon-start" }), h("slot", { key: '6bc84a79e2acc72405c7b6831951d4984e5a6092' }), this.h.hasSlot("icon-end") && h("slot", { key: '044971729141feb76253c649de01db88e9459ccf', name: "icon-end" }), toBool(this.loading) && this.h.hasSlot("icon-end") &&
            h("gov-icon", { key: 'b55541b4d8ec377ec0aa9c80596b212306a5c02a', name: "loader", class: "gov-spin-animation", type: "components" }))));
    }
    onClickHandler(e) {
        e.stopPropagation();
        if (this.disabled === false) {
            this.govClick.emit({
                component: ButtonClass.root,
                originalEvent: e,
                ref: this.host,
            });
        }
    }
    onFocusHandler(e) {
        e.stopPropagation();
        this.govFocus.emit({
            component: ButtonClass.root,
            originalEvent: e,
            ref: this.host,
        });
    }
    onBlurHandler(e) {
        e.stopPropagation();
        this.govBlur.emit({
            component: ButtonClass.root,
            originalEvent: e,
            ref: this.host,
        });
    }
    /**
     * Focus button element
     */
    async setFocus() {
        this.triggerRef.focus();
    }
    /**
     * Returns a clickable element instance
     */
    async getRef() {
        return this.triggerRef;
    }
    /**
     * Validate the Accessibility attributes of the component
     */
    async validateAccessibility() {
        if (this.focusable) {
            validateAccessibleLabel(this.triggerRef.getAttribute('aria-label'), this.triggerRef.getAttribute('aria-labelledby'), ButtonClass.root, this.host);
        }
    }
    static get is() { return "gov-button"; }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "ButtonColorType",
                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
                    "references": {
                        "ButtonColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonColorType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the button"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "ButtonSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                    "references": {
                        "ButtonSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Button\u2019s size"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "\"m\""
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "ButtonTypesType",
                    "resolved": "\"base\" | \"link\" | \"outlined\" | \"solid\"",
                    "references": {
                        "ButtonTypesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonTypesType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Button's type"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "expanded": {
                "type": "boolean",
                "attribute": "expanded",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Expands the button to fill 100% of the container width"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "expandedMobile": {
                "type": "boolean",
                "attribute": "expanded-mobile",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Expands the button to fill 100% of the container width only on mobile"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the button component disabled.\r\nThis prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "nativeType": {
                "type": "string",
                "attribute": "native-type",
                "mutable": false,
                "complexType": {
                    "original": "NativeTypesType",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {
                        "NativeTypesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::NativeTypesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Same as original parameter\r\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"button\""
            },
            "href": {
                "type": "string",
                "attribute": "href",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "target": {
                "type": "string",
                "attribute": "target",
                "mutable": false,
                "complexType": {
                    "original": "ButtonTargetType",
                    "resolved": "\"_blank\" | \"_new\" | \"_self\"",
                    "references": {
                        "ButtonTargetType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonTargetType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "download": {
                "type": "boolean",
                "attribute": "download",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "tab": {
                "type": "number",
                "attribute": "tab",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "0"
            },
            "hreflang": {
                "type": "string",
                "attribute": "hreflang",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "referrerpolicy": {
                "type": "string",
                "attribute": "referrerpolicy",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "rel": {
                "type": "string",
                "attribute": "rel",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "loading": {
                "type": "string",
                "attribute": "loading",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether an asynchronous process is running"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "focusable": {
                "type": "boolean",
                "attribute": "focusable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "link",
                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom button identifier"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "inheritedAttributes": {}
        };
    }
    static get events() {
        return [{
                "method": "govClick",
                "name": "gov-click",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the button click"
                },
                "complexType": {
                    "original": "ButtonEvent",
                    "resolved": "ButtonEvent",
                    "references": {
                        "ButtonEvent": {
                            "location": "import",
                            "path": "./gov-button.types",
                            "id": "../../../packages/core/src/components/gov-button/button/gov-button.types.ts::ButtonEvent"
                        }
                    }
                }
            }, {
                "method": "govFocus",
                "name": "gov-focus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the button has focus"
                },
                "complexType": {
                    "original": "ButtonEvent",
                    "resolved": "ButtonEvent",
                    "references": {
                        "ButtonEvent": {
                            "location": "import",
                            "path": "./gov-button.types",
                            "id": "../../../packages/core/src/components/gov-button/button/gov-button.types.ts::ButtonEvent"
                        }
                    }
                }
            }, {
                "method": "govBlur",
                "name": "gov-blur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the button loses focus"
                },
                "complexType": {
                    "original": "ButtonEvent",
                    "resolved": "ButtonEvent",
                    "references": {
                        "ButtonEvent": {
                            "location": "import",
                            "path": "./gov-button.types",
                            "id": "../../../packages/core/src/components/gov-button/button/gov-button.types.ts::ButtonEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Focus button element",
                    "tags": []
                }
            },
            "getRef": {
                "complexType": {
                    "signature": "() => Promise<HTMLLinkElement | HTMLButtonElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLLinkElement": {
                            "location": "global",
                            "id": "global::HTMLLinkElement"
                        },
                        "HTMLButtonElement": {
                            "location": "global",
                            "id": "global::HTMLButtonElement"
                        }
                    },
                    "return": "Promise<HTMLLinkElement | HTMLButtonElement>"
                },
                "docs": {
                    "text": "Returns a clickable element instance",
                    "tags": []
                }
            },
            "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"; }
    static get watchers() {
        return [{
                "propName": "color",
                "methodName": "validateColor"
            }, {
                "propName": "type",
                "methodName": "validateType"
            }, {
                "propName": "size",
                "methodName": "validateSize"
            }, {
                "propName": "nativeType",
                "methodName": "validateNativeType"
            }];
    }
}
//# sourceMappingURL=gov-button.js.map
