import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f64949.js';

const balRadioGroupCss = "@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sc-bal-radio-group-h{display:inline-block;position:relative}.bal-select-button.sc-bal-radio-group-h{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;border:1px solid #d3dbeb;border-radius:100px;padding:5px}";

const RadioGroup = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.balChange = createEvent(this, "balChange", 7);
    /**
     * 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)));
  }
  get element() { return getElement(this); }
  static get watchers() { return {
    "value": ["valueChanged"]
  }; }
};
RadioGroup.style = balRadioGroupCss;

export { RadioGroup as bal_radio_group };
