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

const balRadioCss = "@-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)}}.bal-radio.sc-bal-radio-h{min-height:26px;display:inline-block;position:relative;padding-right:25px;padding-bottom:15px}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;outline:0}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio{cursor:pointer;padding-left:34px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#003399}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio::before,.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio::after{display:inline-block;position:absolute;left:0;top:0;height:24px;width:24px;border-radius:50%}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio:before{content:\"\";border:1px solid #99add6}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio:after{content:none;background:#003399;-webkit-transform:scale(0.4);transform:scale(0.4);top:1px;left:1px}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio:disabled+label.sc-bal-radio{cursor:not-allowed;opacity:0.5}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio:checked+label.sc-bal-radio::after{content:\"\"}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio:hover:not([disabled])+label.sc-bal-radio:before{border-color:#003399}.bal-radio.sc-bal-radio-h input[type=radio].sc-bal-radio:focus+label.sc-bal-radio::before{outline:1px dashed #009ee7 !important}.bal-radio.is-inverted.sc-bal-radio-h input[type=radio].sc-bal-radio:hover:not([disabled])+label.sc-bal-radio:before{border-color:#ffffff}.bal-radio.is-inverted.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio:after{background:#ffffff}.bal-radio.is-inverted.sc-bal-radio-h input[type=radio].sc-bal-radio+label.sc-bal-radio{color:#ffffff}.bal-select-button.sc-bal-radio-h{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.bal-select-button.sc-bal-radio-h input[type=radio].sc-bal-radio{position:absolute;opacity:0}.bal-select-button.sc-bal-radio-h input[type=radio].sc-bal-radio:focus~label.sc-bal-radio{outline:none;border:2px dashed #009ee7}.bal-select-button.sc-bal-radio-h label.sc-bal-radio{display:-ms-flexbox;display:flex;-ms-flex:1 1 0px;flex:1 1 0;height:30px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:100px;background:transparent;min-height:30px;padding:0 15px !important;border-color:transparent;border-width:2px;text-align:center;font-size:0.9375rem;font-weight:bold;color:#7188b8}.bal-select-button.sc-bal-radio-h label.sc-bal-radio:hover{color:#003399}.bal-select-button.sc-bal-radio-h input.sc-bal-radio:checked~label.sc-bal-radio{border-color:#003399;background:#003399;color:white}.bal-select-button.sc-bal-radio-h input.sc-bal-radio:checked~label.sc-bal-radio:hover{color:white}.bal-select-button.sc-bal-radio-h input.sc-bal-radio:disabled~label.sc-bal-radio{cursor:not-allowed;color:#7188b8}.bal-select-button.sc-bal-radio-h input.sc-bal-radio:disabled~label.sc-bal-radio:hover{color:#7188b8}.bal-select-button.sc-bal-radio-h input.sc-bal-radio:disabled:checked~label.sc-bal-radio{border-color:#003399;background:#003399;opacity:0.5;color:white}.bal-select-button.sc-bal-radio-h input.sc-bal-radio:disabled:checked~label.sc-bal-radio:hover{color:white}.bal-select-button.is-inverted.sc-bal-radio-h label.sc-bal-radio:hover{color:white}.bal-select-button.is-inverted.sc-bal-radio-h input.sc-bal-radio:checked~label.sc-bal-radio{border-color:#ffffff;background:#ffffff;color:#003399}.bal-select-button.is-inverted.sc-bal-radio-h input.sc-bal-radio:checked~label.sc-bal-radio:hover{color:#003399}.bal-select-button.is-inverted.sc-bal-radio-h input[type=radio].sc-bal-radio:focus~label.sc-bal-radio{outline:none;border:2px dashed #009ee7}.bal-select-button.is-inverted.sc-bal-radio-h input.sc-bal-radio:disabled:checked~label.sc-bal-radio{border-color:#003399;background:#ffffff;opacity:0.5;color:#003399}.bal-select-button.is-inverted.sc-bal-radio-h input.sc-bal-radio:disabled:checked~label.sc-bal-radio:hover{color:#003399}.bal-select-button.is-inverted.sc-bal-radio-h input.sc-bal-radio:disabled~label.sc-bal-radio{cursor:not-allowed;color:#99add6}.bal-select-button.is-inverted.sc-bal-radio-h input.sc-bal-radio:disabled~label.sc-bal-radio:hover{color:#99add6}";

const Radio = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.balFocus = createEvent(this, "balFocus", 7);
    this.balBlur = createEvent(this, "balBlur", 7);
    this.inputId = `bal-rb-${radioIds++}`;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * Defines the layout of the radio button
     */
    this.interface = 'radio';
    /**
   * The tabindex of the control.
   */
    this.balTabindex = 0;
    /**
     * The label of the control.
     */
    this.label = '';
    /**
     * The value of the control.
     */
    this.value = '';
    /**
     * If `true`, the radio is selected.
     */
    this.checked = false;
    /**
     * If `true`, the user cannot interact with the checkbox.
     */
    this.disabled = false;
    /**
     * If `true`, the control works on dark background.
     */
    this.inverted = false;
    this.updateState = () => {
      if (this.parent) {
        this.checked = this.parent.value === this.value;
      }
    };
    this.onFocus = () => {
      this.balFocus.emit();
    };
    this.onBlur = () => {
      this.balBlur.emit();
    };
  }
  /**
   * Sets the focus on the input element.
   */
  async setFocus() {
    if (this.inputEl) {
      this.inputEl.focus();
    }
  }
  get parent() {
    return this.element.closest('bal-radio-group');
  }
  connectedCallback() {
    if (this.parent) {
      this.updateState();
      this.parent.addEventListener('balChange', () => this.updateState());
    }
  }
  disconnectedCallback() {
    if (this.parent) {
      this.parent.removeEventListener('balChange', () => this.updateState());
    }
  }
  render() {
    const { inputId, label } = this;
    return (h(Host, { class: {
        'bal-radio': this.interface === 'radio',
        'bal-select-button': this.interface === 'select-button',
        'is-inverted': this.inverted,
      } }, h("input", { type: "radio", role: "radio", id: inputId, name: this.name, tabindex: this.balTabindex, value: this.value, "aria-label": label, disabled: this.disabled, checked: this.checked, "aria-disabled": this.disabled ? 'true' : 'false', onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.inputEl = inputEl) }), h("label", { htmlFor: inputId }, h("bal-text", null, label))));
  }
  get element() { return getElement(this); }
};
let radioIds = 0;
Radio.style = balRadioCss;

export { Radio as bal_radio };
