import { Component, h, Host, Prop, Element, Event, Watch } from '@stencil/core';
export class RadioGroup {
  constructor() {
    /**
     * Defines the layout of the radio button
     */
    this.interface = 'radio';
    /**
     * If `true` the component can be used on dark background
     */
    this.inverted = false;
    /**
     * The value of the control.
     */
    this.value = '';
    this.onClick = (ev) => {
      const selectedRadio = ev.target && ev.target.closest('bal-radio');
      if (selectedRadio && !selectedRadio.disabled) {
        const currentValue = this.value;
        const newValue = selectedRadio.value;
        if (newValue !== currentValue) {
          this.value = newValue;
        }
      }
    };
  }
  valueChanged(value, oldValue) {
    if (value !== oldValue) {
      this.sync();
      this.balChange.emit(value);
    }
  }
  componentWillLoad() {
    this.sync();
  }
  get children() {
    return Array.from(this.element.querySelectorAll('bal-radio'));
  }
  sync() {
    this.children.forEach((item) => {
      item.interface = this.interface;
      item.inverted = this.inverted;
      if (item.value === this.value) {
        item.checked = true;
      }
      else {
        item.checked = false;
      }
    });
  }
  render() {
    return (h(Host, { role: "radiogroup", onClick: this.onClick, class: `bal-${this.interface}` },
      h("slot", null)));
  }
  static get is() { return "bal-radio-group"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-radio-group.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-radio-group.css"]
  }; }
  static get properties() { return {
    "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'"
    },
    "inverted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the component can be used on dark background"
      },
      "attribute": "inverted",
      "reflect": false,
      "defaultValue": "false"
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the control."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    }
  }; }
  static get events() { return [{
      "method": "balChange",
      "name": "balChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the checked property has changed."
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "valueChanged"
    }]; }
}
