'use strict';

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

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

const checkboxGroupCss = ".ibk-checkbox-group:not(.ibk-checkbox-group--inline) ibk-checkbox:not(:last-child){display:block;margin-bottom:10px}.ibk-checkbox-group__subtitle{margin:0 0 12px 0;font-family:var(--fontMontserrat);font-size:14px}.ibk-checkbox-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-checkbox-group--inline .ibk-checkbox-group__list{display:flex;align-items:center;flex-wrap:wrap}.ibk-checkbox-group--inline ibk-checkbox:not(:last-child){margin-right:30px}.ibk-checkbox-group--inline ibk-checkbox{display:inline-block}";

const IbkCheckboxGroup = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.oncheckedgroup = index.createEvent(this, "oncheckedgroup", 7);
    /** Define si los checkbox se alinearán uno al lado de otro */
    this.inline = false;
    /** Error en el checkbox group */
    this.error = false;
    /** Cuando se encuentra dentro de un "ibk-form" al hacer submit si todos los checkboxes 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-checkbox-group', [
        { inline: this.inline },
        { error: this.error }
      ]);
    };
    /** Escucha el evento al seleccionar algún checkbox dentro del gruppo */
    this.listenSlottedEvents = () => {
      const checkboxes = this.host.querySelectorAll('ibk-checkbox');
      let checked = [];
      Array.from(checkboxes, (check) => {
        checked.push({
          checked: false,
          value: check.getAttribute('value')
        });
        check.addEventListener('onchecked', (e) => {
          let current = checked.findIndex(c => c.value == e.detail.value);
          checked[current] = e.detail;
          this.oncheckedgroup.emit(checked);
          this.error = false;
          Array.from(checkboxes, (c) => c.removeAttribute('error'));
        });
        if (this.error) {
          check.setAttribute('error', '');
        }
      });
    };
  }
  componentDidLoad() {
    this.listenSlottedEvents();
  }
  render() {
    return (index.h("div", { class: this.containerClass() }, index.h("div", { class: "ibk-checkbox-group__list" }, this.subtitle && index.h("p", { class: "ibk-checkbox-group__subtitle", innerHTML: this.subtitle }), index.h("slot", null)), this.error && index.h("span", { class: "ibk-checkbox-group__error-message", innerHTML: this.requiredMessage })));
  }
  get host() { return index.getElement(this); }
};
IbkCheckboxGroup.style = checkboxGroupCss;

exports.ibk_checkbox_group = IbkCheckboxGroup;
