import { h, Host } from "@stencil/core";
import { createID } from "../../../utils/string.utils";
import { validateProp } from "../../../helpers/Validate/props";
import { FormCheckboxClass, FormCheckboxSizes } from "./constants";
import { govHost, toBoolAttr, toBoolAttrIfDefined } from "../../../helpers/Dom/template";
import { govForm } from "../../../helpers/Dom/form";
import Fragment from "../../../helpers/Fragment";
import { AttributeObserver } from "../../../helpers/Dom/attribute";
import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
export class GovFormCheckbox {
    constructor() {
        this.hydrated = false;
        /**
         * Checkbox button state
         */
        this.checked = false;
        /**
         * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
         * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
         */
        this.required = false;
        /**
         * Makes the checkbox component disabled.
         */
        this.disabled = false;
        /**
         * Same as original parameter (https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)
         */
        this.indeterminate = false;
        /**
         * Checkboxes size.
         */
        this.size = "m";
        /**
         * When you can't use the form label.
         */
        this.noLabel = false;
        this.inheritedAttributes = {};
        this.checkboxId = createID("GovCheckbox");
        this.h = govHost(this.host);
        this.f = govForm(this.h);
    }
    validateSize(newValue) {
        validateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root);
    }
    watchControlAttrs() {
        this.passControlAttrs();
    }
    passControlAttrs() {
        this.f.passAttrToControl("size", this.size);
        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
        this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
        this.f.passAttrToControl("type", "checkbox");
    }
    componentWillLoad() {
        this.passControlAttrs();
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    async componentDidRender() {
        this.f.passAttrToLabel("identifier", this.identifier || this.checkboxId);
        this.f.passAttrToLabel("required", String(this.required));
        this.passControlAttrs();
    }
    connectedCallback() {
        this.hydrated = true;
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    render() {
        const wrapCheckbox = (children) => {
            if (this.noLabel) {
                return (h("label", { class: FormCheckboxClass.label }, children));
            }
            return children;
        };
        return (h(Host, { class: FormCheckboxClass.root, hydrated: this.hydrated, checked: this.checked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, h("input", Object.assign({ id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.checked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, ref: el => (this.inputRef = el) }, this.inheritedAttributes, { "aria-checked": toBoolAttr(this.checked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled) })), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check-lg", type: "components" }), h("gov-icon", { class: FormCheckboxClass.indeterminate, name: "dash-lg", type: "components" }))))));
    }
    onFocusHandler(e) {
        e.stopPropagation();
        this.govFocus.emit({
            component: FormCheckboxClass.root,
            value: this.value,
            checked: this.checked,
            originalEvent: e,
        });
    }
    onBlurHandler(e) {
        e.stopPropagation();
        this.govBlur.emit({
            component: FormCheckboxClass.root,
            value: this.value,
            checked: this.checked,
            originalEvent: e,
        });
    }
    onClickHandler(e) {
        e.stopPropagation();
    }
    onChangeHandler(e) {
        this.checked = e.target.checked;
        e.stopPropagation();
        this.govChange.emit({
            component: FormCheckboxClass.root,
            value: this.value,
            checked: this.checked,
            originalEvent: e,
        });
    }
    /**
     * Returns the reference of the native element
     */
    async getRef() {
        return this.inputRef;
    }
    static get is() { return "gov-form-checkbox"; }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Value of checkbox"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "checked": {
                "type": "boolean",
                "attribute": "checked",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Checkbox button state"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "attribute": "required",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\r\nWhen using this property you need to also set \u201Cnovalidate\u201D attribute to your form element to prevent browser from displaying its own validation errors."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the checkbox component disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "indeterminate": {
                "type": "boolean",
                "attribute": "indeterminate",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Same as original parameter (https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)"
                },
                "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": "Name of the checkbox."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "FormCheckboxSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                    "references": {
                        "FormCheckboxSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-form/checkbox/constants.ts::FormCheckboxSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Checkboxes size."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "\"m\""
            },
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom checkbox identifier."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "noLabel": {
                "type": "boolean",
                "attribute": "no-label",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When you can't use the form label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "attribute": "invalid",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates the entered value does not conform to the format expected by the application."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "inheritedAttributes": {}
        };
    }
    static get events() {
        return [{
                "method": "govFocus",
                "name": "gov-focus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the checkbox has focus."
                },
                "complexType": {
                    "original": "FormCheckboxEvent",
                    "resolved": "FormCheckboxEvent",
                    "references": {
                        "FormCheckboxEvent": {
                            "location": "import",
                            "path": "./gov-form-checkbox.types",
                            "id": "../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.types.ts::FormCheckboxEvent"
                        }
                    }
                }
            }, {
                "method": "govBlur",
                "name": "gov-blur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the checkbox loses focus."
                },
                "complexType": {
                    "original": "FormCheckboxEvent",
                    "resolved": "FormCheckboxEvent",
                    "references": {
                        "FormCheckboxEvent": {
                            "location": "import",
                            "path": "./gov-form-checkbox.types",
                            "id": "../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.types.ts::FormCheckboxEvent"
                        }
                    }
                }
            }, {
                "method": "govChange",
                "name": "gov-change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the checkbox change value."
                },
                "complexType": {
                    "original": "FormCheckboxEvent",
                    "resolved": "FormCheckboxEvent",
                    "references": {
                        "FormCheckboxEvent": {
                            "location": "import",
                            "path": "./gov-form-checkbox.types",
                            "id": "../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.types.ts::FormCheckboxEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "getRef": {
                "complexType": {
                    "signature": "() => Promise<HTMLInputElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLInputElement": {
                            "location": "global",
                            "id": "global::HTMLInputElement"
                        }
                    },
                    "return": "Promise<HTMLInputElement>"
                },
                "docs": {
                    "text": "Returns the reference of the native element",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "size",
                "methodName": "validateSize"
            }, {
                "propName": "disabled",
                "methodName": "watchControlAttrs"
            }, {
                "propName": "invalid",
                "methodName": "watchControlAttrs"
            }, {
                "propName": "size",
                "methodName": "watchControlAttrs"
            }];
    }
}
//# sourceMappingURL=gov-form-checkbox.js.map
