import { Component, Host, h, State, Prop, Element, Method } from '@stencil/core';
export class UxplRadio {
  constructor() {
    this.inputId = `${radioButtonIds++}-radio-button`;
    this.radioGroup = null;
    /**
     * If `true`, the radio is selected.
     */
    this.checked = false;
    /**
     * If `true`, the user cannot interact with the radio.
     */
    this.disabled = false;
    /**
     * The tabindex of the radio button.
     * @internal
     */
    this.buttonTabindex = -1;
    this.updateState = () => {
      if (this.radioGroup) {
        this.checked = this.radioGroup.value === this.value;
      }
    };
  }
  /** @internal */
  async setButtonTabIdx(value) {
    this.buttonTabindex = value;
  }
  connectedCallback() {
    if (this.value === undefined) {
      this.value = this.inputId;
    }
    const radioGroup = this.radioGroup = this.el.closest('uxpl-radio-group');
    if (radioGroup) {
      this.updateState();
      radioGroup.addEventListener('uxplChanged', this.updateState);
    }
  }
  disconnectedCallback() {
    const radioGroup = this.radioGroup;
    if (radioGroup) {
      radioGroup.removeEventListener('uxplChanged', this.updateState);
      this.radioGroup = null;
    }
  }
  render() {
    return (h(Host, null,
      h("div", { class: "pl-form-field pl-form-field--radio-button" },
        h("input", { class: "pl-form-field__input", type: "radio", id: this.inputId, "aria-checked": this.checked, name: "radio", checked: this.checked ? true : false }),
        h("label", { class: "pl-form-field__label", part: "label-selector", htmlFor: this.inputId },
          h("slot", null)),
        h("div", { class: "content-block" },
          h("slot", { name: "content" }),
          this.checked))));
  }
  static get is() { return "uxpl-radio"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-radio.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-radio.css"]
  }; }
  static get properties() { return {
    "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 radio."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "value": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any | null",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "the value of the radio."
      },
      "attribute": "value",
      "reflect": false
    }
  }; }
  static get states() { return {
    "buttonTabindex": {}
  }; }
  static get methods() { return {
    "setButtonTabIdx": {
      "complexType": {
        "signature": "(value: number) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": [{
            "name": "internal",
            "text": undefined
          }]
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
let radioButtonIds = 0;
