'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-399a4a13.js');
const utils = require('./utils-311c1b40.js');

const radioGroupCss = ".ibk-radio-group:not(.ibk-radio-group--inline) ibk-radio:not(:last-child){display:block;margin-bottom:10px}.ibk-radio-group__subtitle{margin:0 0 12px 0;font-family:var(--fontMontserrat);font-size:14px}.ibk-radio-group__error-message{color:var(--extendedWatermelon1);font-size:12px;font-family:var(--fontMontserrat);font-weight:500;min-height:15px;margin-top:7px;display:block}.ibk-radio-group--inline .ibk-radio-group__list{display:flex;align-items:center;flex-wrap:wrap}.ibk-radio-group--inline ibk-radio:not(:last-child){margin-right:30px}.ibk-radio-group--inline ibk-radio{display:inline-block}";

const IbkRadioGroup = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.onchange = index.createEvent(this, "onchange", 7);
    /** Define si los radio se alinearán uno al lado de otro */
    this.inline = false;
    /** Error en el radio group */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si todos los radios se encuentra deseleccionados, mostrará un mensaje de error */
    this.required = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = 'Selecciona una opción';
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return utils.modifiersToClass('ibk-radio-group', [
        { inline: this.inline },
        { error: this.error }
      ]);
    };
    /** Escucha el evento al seleccionar algún radio dentro del gruppo */
    this.listenSlottedEvents = () => {
      const radios = this.host.querySelectorAll('ibk-radio');
      Array.from(radios, (radio) => {
        radio.addEventListener('onselect', (e) => {
          this.onchange.emit(e.detail);
          this.error = false;
          Array.from(radios, (c) => {
            const value = c.getAttribute('value');
            if (value != e.detail.value) {
              c.removeAttribute('selected');
            }
            c.removeAttribute('error');
          });
        });
        if (this.error) {
          radio.setAttribute('error', '');
        }
      });
    };
  }
  componentDidLoad() {
    this.listenSlottedEvents();
  }
  render() {
    return (index.h("div", { class: this.containerClass() }, index.h("div", { class: "ibk-radio-group__list" }, this.subtitle && index.h("p", { class: "ibk-radio-group__subtitle", innerHTML: this.subtitle }), index.h("slot", null)), this.error && index.h("span", { class: "ibk-radio-group__error-message", innerHTML: this.requiredMessage })));
  }
  get host() { return index.getElement(this); }
};
IbkRadioGroup.style = radioGroupCss;

exports.ibk_radio_group = IbkRadioGroup;
