import { Host, h } from "@stencil/core";
import { onBoolValueChanged } from '../../utils/utils';
let radioId = 0;
export class Radio {
    constructor() {
        this.inputId = `anj-rb-${radioId++}`;
        /**
         * Is the radio selected
         */
        this.checked = false;
        /**
         * Make the control read only
         */
        this.disabled = false;
        /**
         * The input name name
         */
        this.name = this.inputId;
    }
    handleChange(checked) {
        if (!checked) {
            return;
        }
        this.anjSelect.emit({
            checked,
            value: this.value
        });
    }
    invalidChanged(newVal, oldVal) {
        onBoolValueChanged(newVal, oldVal, this.anjInvalid.emit);
    }
    componentDidLoad() {
        this.anjRadioDidLoad.emit();
    }
    componentDidUnload() {
        this.anjRadioDidUnload.emit();
    }
    /**
     * Checks the native element validity use native validators
     */
    async checkValidity() {
        this.nativeRadio.checkValidity();
        return this.onValidChange();
    }
    onValidChange() {
        const valid = this.nativeRadio.validity.valid;
        this.invalid = !valid;
        return valid;
    }
    onChange() {
        this.checked = !this.checked;
    }
    onFocus() {
        this.focused = true;
    }
    onBlur() {
        this.focused = false;
        this.anjBlur.emit();
    }
    // TODO: eliminate extra click
    render() {
        return (h(Host, { class: { 'anj-focused': this.focused } },
            h("label", { class: "anj-label", htmlFor: this.inputId },
                h("input", { "aria-label": this.ariaLabel || this.element.textContent, type: "radio", class: "anj-hidden-control", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, onChange: () => this.onChange(), onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), onClick: e => e.stopPropagation(), onInvalid: () => this.onValidChange(), ref: r => this.nativeRadio = r }),
                h("span", { class: "anj-indicator" },
                    h("i", null)),
                !this.solo ? h("span", { class: "anj-inner-label" },
                    h("slot", null)) : undefined)));
    }
    static get is() { return "anj-radio"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["radio.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["radio.css"]
    }; }
    static get properties() { return {
        "ariaLabel": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Label to display for \"solo\" use"
            },
            "attribute": "aria-label",
            "reflect": false
        },
        "checked": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the radio selected"
            },
            "attribute": "checked",
            "reflect": true,
            "defaultValue": "false"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Make the control read only"
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "invalid": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Whether the control is valid"
            },
            "attribute": "invalid",
            "reflect": true
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The input name name"
            },
            "attribute": "name",
            "reflect": false,
            "defaultValue": "this.inputId"
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is it required"
            },
            "attribute": "required",
            "reflect": false
        },
        "solo": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set as true if the checkbox will not have a label or padding to accommodate text"
            },
            "attribute": "solo",
            "reflect": true
        },
        "stacked": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Whether inline (default) or stacked)"
            },
            "attribute": "stacked",
            "reflect": true
        },
        "value": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any | null",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The value of the control."
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get states() { return {
        "focused": {}
    }; }
    static get events() { return [{
            "method": "anjBlur",
            "name": "anjBlur",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the control is blurred"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjRadioDidLoad",
            "name": "anjRadioDidLoad",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the control is loaded"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjRadioDidUnload",
            "name": "anjRadioDidUnload",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the control is unloaded"
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjSelect",
            "name": "anjSelect",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the checked state is changed"
            },
            "complexType": {
                "original": "CheckedInputChangeEvent",
                "resolved": "CheckedInputChangeEvent",
                "references": {
                    "CheckedInputChangeEvent": {
                        "location": "import",
                        "path": "../../types/types"
                    }
                }
            }
        }, {
            "method": "anjInvalid",
            "name": "anjInvalid",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when invalid status changes."
            },
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "checkValidity": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "Checks the native element validity use native validators",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
    static get watchers() { return [{
            "propName": "checked",
            "methodName": "handleChange"
        }, {
            "propName": "invalid",
            "methodName": "invalidChanged"
        }]; }
}
