import { Component, Prop, h, Method, Listen } from '@stencil/core';
import { isRtl } from '../../../functions/page-align';
export class ScRadioGroup {
  constructor() {
    /** The radio group label. Required for proper accessibility. */
    this.label = '';
    /** The selected value of the control. */
    this.value = '';
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  async reportValidity() {
    this.invalid = !this.input.checkValidity();
    return this.input.reportValidity();
  }
  handleRadioClick(event) {
    const target = event.target;
    console.log(target);
    if (target.disabled) {
      return;
    }
    this.value = target.value;
  }
  render() {
    return (h("fieldset", { part: "base", class: {
        'radio-group': true,
        'radio-group--invalid': this.invalid,
        'radio-group--is-required': this.required,
        'radio-group--is-rtl': isRtl()
      }, "aria-invalid": this.invalid, role: "radiogroup" },
      h("legend", { part: "label", class: "radio-group__label" },
        h("slot", { name: "label" }, this.label)),
      h("input", { type: "text", class: "radio-group__hidden-input", ref: el => (this.input = el), required: this.required, value: this.value, tabindex: "-1" }),
      h("slot", null)));
  }
  static get is() { return "sc-radio-group"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-radio-group.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-radio-group.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The radio group label. Required for proper accessibility."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "invalid": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n`required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API."
      },
      "attribute": "invalid",
      "reflect": true
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The selected value of the control."
      },
      "attribute": "value",
      "reflect": true,
      "defaultValue": "''"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is one of these items required."
      },
      "attribute": "required",
      "reflect": false
    }
  }; }
  static get methods() { return {
    "reportValidity": {
      "complexType": {
        "signature": "() => Promise<boolean>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<boolean>"
      },
      "docs": {
        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
        "tags": []
      }
    }
  }; }
  static get listeners() { return [{
      "name": "click",
      "method": "handleRadioClick",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
