import { r as registerInstance, e as createEvent, h, f as Host } from './index-06929dd0.js';

const radioCss = ":host{display:-ms-flexbox;display:flex}.radio{display:-ms-flexbox;display:flex;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;-ms-flex-negative:0;flex-shrink:0;border:2px solid var(--color-content-default, #454545);padding:4px;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;position:relative}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:transparent;height:10px;width:10px}.radio__circle .hover{width:0;height:0;opacity:0}.radio__circle .focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid var(--color-focus, #c226fb);border-radius:4px;padding:4px;width:100%;height:100%;outline:none}.radio:hover{border-color:var(--color-content-disable, #636363)}.radio:hover .hover{display:-ms-flexbox;display:flex;background-color:var(--color-hover, rgba(0, 0, 0, 0.08));position:absolute;width:36px;height:36px;opacity:1;border-radius:24px;-webkit-transition:width 0.2s, height 0.2s;transition:width 0.2s, height 0.2s}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:var(--color-content-default, #454545)}.radio__input[type=radio]:checked~.radio__circle{background:transparent;border-color:var(--color-content-default, #454545)}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:var(--color-primary, #1e6bf1)}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:var(--color-content-default, #454545)}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:var(--color-primary, #1e6bf1)}.radio__input[type=radio]:disabled~.radio__circle{border-color:var(--color-content-disable, #636363);background-color:var(--color-surface-3, #cfcfcf)}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:hover~.radio__circle{border-color:var(--color-content-disable, #636363);background-color:var(--color-surface-3, #cfcfcf)}.radio__input[type=radio]:disabled:hover~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:checked~.radio__circle{border-color:var(--color-content-disable, #636363);background-color:var(--color-surface-3, #cfcfcf)}.radio__input[type=radio]:disabled:checked~.radio__circle .radio__circle__pointer{background-color:var(--color-content-default, #454545)}.radio__input[type=radio]:disabled:checked:hover~.radio__circle{border-color:var(--color-content-disable, #636363);background-color:var(--color-surface-3, #cfcfcf)}.radio__input[type=radio]:disabled:checked:hover~.radio__circle .radio__circle__pointer{background-color:var(--color-content-default, #454545)}.radio__input[type=radio]:disabled~.radio__text{color:var(--color-content-disable, #636363);cursor:not-allowed}.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";

let radioButtonIds = 0;
const Radio = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.bdsChange = createEvent(this, "bdsChange", 7);
    this.bdsClickChange = createEvent(this, "bdsClickChange", 7);
    this.onClick = (event) => {
      this.checked = true;
      this.bdsClickChange.emit({ checked: this.checked });
      event.stopPropagation();
    };
    this.refNativeInput = (input) => {
      this.nativeInput = input;
    };
    this.radioId = undefined;
    this.refer = undefined;
    this.label = undefined;
    this.value = undefined;
    this.name = undefined;
    this.checked = false;
    this.disabled = false;
    this.dataTest = null;
  }
  checkedChanged(isChecked) {
    this.bdsChange.emit({ checked: isChecked });
  }
  getInputElement() {
    return Promise.resolve(this.nativeInput);
  }
  getValue() {
    return Promise.resolve(this.nativeInput.checked);
  }
  connectedCallback() {
    this.radioId = this.refer || `bds-radio-${radioButtonIds++}`;
  }
  handleClickKey(event) {
    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
      this.onClick(event);
      event.preventDefault();
      this.bdsClickChange.emit({ checked: this.checked });
    }
  }
  render() {
    return (h(Host, null, h("label", { class: "radio", htmlFor: this.radioId }, h("input", { class: "radio__input", type: "radio", ref: this.refNativeInput, id: this.radioId, onClick: this.onClick, disabled: this.disabled, checked: this.checked, value: this.value, name: this.name, "data-test": this.dataTest }), h("div", { class: "radio__circle" }, !this.disabled ? h("div", { class: "focus", tabindex: "0", onKeyDown: this.handleClickKey.bind(this) }) : '', !this.disabled ? h("div", { class: "hover" }) : '', h("div", { class: "radio__circle__pointer" })), this.label && (h("bds-typo", { class: "radio__text", variant: "fs-14", bold: this.checked ? 'bold' : 'regular', tag: "span" }, this.label)), h("slot", null))));
  }
  static get watchers() { return {
    "checked": ["checkedChanged"]
  }; }
};
Radio.style = radioCss;

export { Radio as bds_radio };
