import { Component, h, Host, Prop, Element, Event, Method } from '@stencil/core';
export class Radio {
  constructor() {
    this.inputId = `bal-rb-${radioIds++}`;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * Defines the layout of the radio button
     */
    this.interface = 'radio';
    /**
   * The tabindex of the control.
   */
    this.balTabindex = 0;
    /**
     * The label of the control.
     */
    this.label = '';
    /**
     * The value of the control.
     */
    this.value = '';
    /**
     * If `true`, the radio is selected.
     */
    this.checked = false;
    /**
     * If `true`, the user cannot interact with the checkbox.
     */
    this.disabled = false;
    /**
     * If `true`, the control works on dark background.
     */
    this.inverted = false;
    this.updateState = () => {
      if (this.parent) {
        this.checked = this.parent.value === this.value;
      }
    };
    this.onFocus = () => {
      this.balFocus.emit();
    };
    this.onBlur = () => {
      this.balBlur.emit();
    };
  }
  /**
   * Sets the focus on the input element.
   */
  async setFocus() {
    if (this.inputEl) {
      this.inputEl.focus();
    }
  }
  get parent() {
    return this.element.closest('bal-radio-group');
  }
  connectedCallback() {
    if (this.parent) {
      this.updateState();
      this.parent.addEventListener('balChange', () => this.updateState());
    }
  }
  disconnectedCallback() {
    if (this.parent) {
      this.parent.removeEventListener('balChange', () => this.updateState());
    }
  }
  render() {
    const { inputId, label } = this;
    return (h(Host, { class: {
        'bal-radio': this.interface === 'radio',
        'bal-select-button': this.interface === 'select-button',
        'is-inverted': this.inverted,
      } },
      h("input", { type: "radio", role: "radio", id: inputId, name: this.name, tabindex: this.balTabindex, value: this.value, "aria-label": label, disabled: this.disabled, checked: this.checked, "aria-disabled": this.disabled ? 'true' : 'false', onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.inputEl = inputEl) }),
      h("label", { htmlFor: inputId },
        h("bal-text", null, label))));
  }
  static get is() { return "bal-radio"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-radio.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-radio.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the control, which is submitted with the form data."
      },
      "attribute": "name",
      "reflect": false,
      "defaultValue": "this.inputId"
    },
    "interface": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'radio' | 'select-button'",
        "resolved": "\"radio\" | \"select-button\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defines the layout of the radio button"
      },
      "attribute": "interface",
      "reflect": false,
      "defaultValue": "'radio'"
    },
    "balTabindex": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tabindex of the control."
      },
      "attribute": "bal-tabindex",
      "reflect": false,
      "defaultValue": "0"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The label of the control."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the control."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the radio is selected."
      },
      "attribute": "checked",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the checkbox."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "inverted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the control works on dark background."
      },
      "attribute": "inverted",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "balFocus",
      "name": "balFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the toggle has focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "balBlur",
      "name": "balBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the toggle loses focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets the focus on the input element.",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "element"; }
}
let radioIds = 0;
