import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-3f33e631.js';
import { o as onBoolValueChanged } from './utils-3aef1637.js';

let radioId = 0;
const Radio = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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;
        this.anjBlur = createEvent(this, "anjBlur", 7);
        this.anjRadioDidLoad = createEvent(this, "anjRadioDidLoad", 7);
        this.anjRadioDidUnload = createEvent(this, "anjRadioDidUnload", 7);
        this.anjSelect = createEvent(this, "anjSelect", 7);
        this.anjInvalid = createEvent(this, "anjInvalid", 7);
    }
    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)));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "checked": ["handleChange"],
        "invalid": ["invalidChanged"]
    }; }
    static get style() { return ".sc-anj-radio-h {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  margin-right: 0.75rem;\n  position: relative;\n  -webkit-transition: color 0.3s ease;\n  transition: color 0.3s ease;\n}\n.sc-anj-radio-h .anj-hidden-control.sc-anj-radio {\n  clip: rect(0 0 0 0);\n  height: 0;\n  left: 0;\n  opacity: 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 0;\n}\n\@media (max-width: 575.98px) {\n  .sc-anj-radio-h {\n    display: block;\n    margin-bottom: 0.5rem;\n    margin-right: 0;\n  }\n}\n[stacked].sc-anj-radio-h {\n  display: block;\n  margin-bottom: 0.5rem;\n  margin-right: 0;\n}\n[solo].sc-anj-radio-h {\n  margin-bottom: 0;\n}\n[solo].sc-anj-radio-h .anj-label.sc-anj-radio {\n  padding-left: 1rem;\n}\n[solo].sc-anj-radio-h .anj-inner-label.sc-anj-radio {\n  display: none;\n}\n.anj-focused.sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  border-color: var(--anj-highlight);\n  -webkit-box-shadow: 0 0 0 0.25rem rgba(18, 105, 186, 0.25);\n  box-shadow: 0 0 0 0.25rem rgba(18, 105, 186, 0.25);\n}\n[checked].sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  background-color: var(--anj-highlight);\n  border-color: var(--anj-highlight);\n}\n[disabled].sc-anj-radio-h {\n  color: var(--anj-neutral);\n}\n[disabled].sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  background-color: var(--anj-background);\n}\n[disabled].sc-anj-radio-h .anj-indicator.sc-anj-radio i.sc-anj-radio {\n  background-color: var(--anj-background);\n}\n[disabled][checked].sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  border: 1px solid var(--anj-neutral-light);\n  background-color: var(--anj-neutral-light);\n}\n[disabled][checked].sc-anj-radio-h .anj-indicator.sc-anj-radio i.sc-anj-radio {\n  background-color: var(--anj-light);\n}\n[invalid].sc-anj-radio-h {\n  color: var(--anj-danger);\n}\n[invalid].sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  border-color: var(--anj-danger);\n}\n[invalid].anj-focused.sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  -webkit-box-shadow: 0 0 0 0.25rem rgba(165, 44, 44, 0.25);\n  box-shadow: 0 0 0 0.25rem rgba(165, 44, 44, 0.25);\n}\n.sc-anj-radio-h .anj-label.sc-anj-radio {\n  display: inline-block;\n  padding-left: 1.5rem;\n  position: relative;\n  -webkit-transition: background-color 0.2s ease;\n  transition: background-color 0.2s ease;\n}\n.sc-anj-radio-h .anj-indicator.sc-anj-radio {\n  border: 1px solid var(--anj-border-dark);\n  border-radius: 50%;\n  display: inline-block;\n  height: 1rem;\n  left: 0;\n  line-height: 1;\n  margin-top: -1px;\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n  -webkit-transition: background-color 0.2s ease, border-color 0.3s ease, -webkit-box-shadow 0.2s ease;\n  transition: background-color 0.2s ease, border-color 0.3s ease, -webkit-box-shadow 0.2s ease;\n  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;\n  transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n  width: 1rem;\n}\n.sc-anj-radio-h .anj-indicator.sc-anj-radio i.sc-anj-radio {\n  background-color: var(--anj-light);\n  border-radius: 50%;\n  display: block;\n  height: 0.4rem;\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  width: 0.4rem;\n}"; }
};

export { Radio as anj_radio };
