text: import { Host, h } from '@stencil/core';
  import { getIonMode } from '../../global/ionic-global';
  import { findItemLabel } from '../../utils/helpers';
  import { createColorClasses, hostContext } from '../../utils/theme';
  /**
   * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
   */
  export class Radio {
      constructor() {
          this.inputId = `ion-rb-${radioButtonIds++}`;
          /**
           * The name of the control, which is submitted with the form data.
           */
          this.name = this.inputId;
          /**
           * If `true`, the user cannot interact with the radio.
           */
          this.disabled = false;
          /**
           * If `true`, the radio is selected.
           */
          this.checked = false;
          this.onFocus = () => {
              this.ionFocus.emit();
          };
          this.onBlur = () => {
              this.ionBlur.emit();
          };
          this.onClick = () => {
              if (this.checked) {
                  this.ionDeselect.emit();
              }
              else {
                  this.checked = true;
              }
          };
      }
      colorChanged() {
          this.emitStyle();
      }
      checkedChanged(isChecked) {
          if (isChecked) {
              this.ionSelect.emit({
                  checked: true,
                  value: this.value
              });
          }
          this.emitStyle();
      }
      disabledChanged() {
          this.emitStyle();
      }
      componentWillLoad() {
          if (this.value === undefined) {
              this.value = this.inputId;
          }
          this.emitStyle();
      }
      componentDidLoad() {
          this.ionRadioDidLoad.emit();
      }
      componentDidUnload() {
          this.ionRadioDidUnload.emit();
      }
      emitStyle() {
          this.ionStyle.emit({
              'radio-checked': this.checked,
              'interactive-disabled': this.disabled,
          });
      }
      render() {
          const { inputId, disabled, checked, color, el } = this;
          const mode = getIonMode(this);
          const labelId = inputId + '-lbl';
          const label = findItemLabel(el);
          if (label) {
              label.id = labelId;
          }
          return (h(Host, { onClick: this.onClick, role: "radio", "aria-disabled": disabled ? 'true' : null, "aria-checked": `${checked}`, "aria-labelledby": labelId, class: Object.assign({}, createColorClasses(color), { [mode]: true, 'in-item': hostContext('ion-item', el), 'interactive': true, 'radio-checked': checked, 'radio-disabled': disabled }) },
              h("div", { class: "radio-icon" },
                  h("div", { class: "radio-inner" })),
              h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: disabled })));
      }
      static get is() { return "ion-radio"; }
      static get encapsulation() { return "shadow"; }
      static get originalStyleUrls() { return {
          "ios": ["radio.ios.scss"],
          "md": ["radio.md.scss"]
      }; }
      static get styleUrls() { return {
          "ios": ["radio.ios.css"],
          "md": ["radio.md.css"]
      }; }
      static get properties() { return {
          "color": {
              "type": "string",
              "mutable": false,
              "complexType": {
                  "original": "Color",
                  "resolved": "string | undefined",
                  "references": {
                      "Color": {
                          "location": "import",
                          "path": "../../interface"
                      }
                  }
              },
              "required": false,
              "optional": true,
              "docs": {
                  "tags": [],
                  "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
              },
              "attribute": "color",
              "reflect": false
          },
          "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"
          },
          "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"
          },
          "checked": {
              "type": "boolean",
              "mutable": true,
              "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"
          },
          "value": {
              "type": "any",
              "mutable": true,
              "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 events() { return [{
              "method": "ionRadioDidLoad",
              "name": "ionRadioDidLoad",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [{
                          "text": undefined,
                          "name": "internal"
                      }],
                  "text": "Emitted when the radio loads."
              },
              "complexType": {
                  "original": "void",
                  "resolved": "void",
                  "references": {}
              }
          }, {
              "method": "ionRadioDidUnload",
              "name": "ionRadioDidUnload",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [{
                          "text": undefined,
                          "name": "internal"
                      }],
                  "text": "Emitted when the radio unloads."
              },
              "complexType": {
                  "original": "void",
                  "resolved": "void",
                  "references": {}
              }
          }, {
              "method": "ionStyle",
              "name": "ionStyle",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [{
                          "text": undefined,
                          "name": "internal"
                      }],
                  "text": "Emitted when the styles change."
              },
              "complexType": {
                  "original": "StyleEventDetail",
                  "resolved": "StyleEventDetail",
                  "references": {
                      "StyleEventDetail": {
                          "location": "import",
                          "path": "../../interface"
                      }
                  }
              }
          }, {
              "method": "ionSelect",
              "name": "ionSelect",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [],
                  "text": "Emitted when the radio button is selected."
              },
              "complexType": {
                  "original": "RadioChangeEventDetail",
                  "resolved": "RadioChangeEventDetail",
                  "references": {
                      "RadioChangeEventDetail": {
                          "location": "import",
                          "path": "../../interface"
                      }
                  }
              }
          }, {
              "method": "ionDeselect",
              "name": "ionDeselect",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [{
                          "text": undefined,
                          "name": "internal"
                      }],
                  "text": "Emitted when checked radio button is selected."
              },
              "complexType": {
                  "original": "RadioChangeEventDetail",
                  "resolved": "RadioChangeEventDetail",
                  "references": {
                      "RadioChangeEventDetail": {
                          "location": "import",
                          "path": "../../interface"
                      }
                  }
              }
          }, {
              "method": "ionFocus",
              "name": "ionFocus",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [],
                  "text": "Emitted when the radio button has focus."
              },
              "complexType": {
                  "original": "void",
                  "resolved": "void",
                  "references": {}
              }
          }, {
              "method": "ionBlur",
              "name": "ionBlur",
              "bubbles": true,
              "cancelable": true,
              "composed": true,
              "docs": {
                  "tags": [],
                  "text": "Emitted when the radio button loses focus."
              },
              "complexType": {
                  "original": "void",
                  "resolved": "void",
                  "references": {}
              }
          }]; }
      static get elementRef() { return "el"; }
      static get watchers() { return [{
              "propName": "color",
              "methodName": "colorChanged"
          }, {
              "propName": "checked",
              "methodName": "checkedChanged"
          }, {
              "propName": "disabled",
              "methodName": "disabledChanged"
          }]; }
  }
  let radioButtonIds = 0;
  