import { r as registerInstance, h, g as getElement } from './index-cdf8e526.js';
import { m as modifiersToClass } from './utils-f909044c.js';

const formGroupCss = ".ibk-form-group{box-sizing:border-box}.ibk-form-group *{box-sizing:border-box}.ibk-form-group__label{color:var(--gray1);font-size:14px;font-family:var(--fontGeometria);font-weight:500;margin-bottom:7px;display:block}.ibk-form-group__subtitle{font-family:var(--fontMontserrat);color:var(--grayText);font-size:14px;font-weight:500;padding-bottom:7px;display:block}.ibk-form-group__list{display:flex;align-items:flex-start;justify-content:space-between}.ibk-form-group ibk-textfield,.ibk-form-group ibk-dropdown{width:100%}.ibk-form-group:not(.ibk-form-group--joined) ibk-textfield:not(:last-child),.ibk-form-group:not(.ibk-form-group--joined) ibk-dropdown:not(:last-child){margin-right:15px}.ibk-form-group__error-message{font-family:var(--fontMontserrat);font-size:12px;color:var(--extendedWatermelon1);font-weight:500;margin-top:7px;display:block;min-height:15px}.ibk-form-group--joined .ibk-textfield__input,.ibk-form-group--joined .ibk-dropdown__input{border-radius:0}.ibk-form-group--joined ibk-textfield:first-child .ibk-textfield__input,.ibk-form-group--joined ibk-dropdown:first-child .ibk-dropdown__input{border-radius:4px 0 0 4px;position:relative}.ibk-form-group--joined ibk-textfield:not(:last-child) .ibk-textfield__input,.ibk-form-group--joined ibk-dropdown:not(:last-child) .ibk-dropdown__input{border-right:0}.ibk-form-group--joined ibk-textfield:last-child .ibk-textfield__input,.ibk-form-group--joined ibk-dropdown:last-child .ibk-dropdown__input{border-radius:0 4px 4px 0}.ibk-form-group--joined ibk-textfield:not(:last-child):hover+ibk-textfield .ibk-textfield__input,.ibk-form-group--joined ibk-textfield:not(:last-child):hover+ibk-dropdown .ibk-dropdown__input,.ibk-form-group--joined ibk-dropdown:not(:last-child):hover+ibk-textfield .ibk-textfield__input,.ibk-form-group--joined ibk-dropdown:not(:last-child):hover+ibk-dropdown .ibk-dropdown__input{border-left:1px solid var(--gray3)}";

const IbkFormGroup = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Define si los campos se encontrarán unidos, sin espaceios entre si */
    this.joined = false;
    /** Personaliza el mensaje de campo requerido */
    this.requiredMessage = "Los campos son requeridos";
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-form-group', [
        { joined: this.joined }
      ]);
    };
    this.setFocus = () => {
      this._allFields.forEach((field) => {
        field.addEventListener('onfocus', (e) => {
          var _a;
          const next = (_a = field.nextElementSibling) === null || _a === void 0 ? void 0 : _a.querySelector('.ibk-textfield__input, .ibk-dropdown__input');
          if (next && field.getAttribute('error') == null) {
            if (e.detail == 'in') {
              next.style.borderLeft = '1px solid #05be50';
            }
            else if (e.detail == 'out') {
              next.removeAttribute('style');
            }
          }
        });
      });
    };
    /** Elimina los contenedores de los mensajes de error de los campos en el grupo */
    this.configFieldProperties = () => {
      var _a;
      const _fieldsWidth = (_a = this.fieldsWidth) === null || _a === void 0 ? void 0 : _a.split(',');
      this._allFields.forEach((field, index) => {
        if (_fieldsWidth && _fieldsWidth[index]) {
          field.style.width = `${_fieldsWidth[index]}%`;
        }
        if (this.error) {
          field.setAttribute('error', '');
        }
        else {
          field.removeAttribute('error');
        }
        if (this.joined) {
          field.setAttribute('no-handling-error', '');
        }
        else {
          if (this.required) {
            field.setAttribute('required', '');
          }
          else {
            field.removeAttribute('error');
          }
        }
      });
    };
  }
  componentWillLoad() {
    this._allFields = this.host.querySelectorAll('ibk-textfield, ibk-dropdown');
    this.setFocus();
    this.configFieldProperties();
  }
  watchingError() {
    this.configFieldProperties();
  }
  render() {
    return (h("div", { class: this.containerClass() }, this.label && h("span", { class: "ibk-form-group__label", innerHTML: this.label }), this.subtitle && h("span", { class: "ibk-form-group__subtitle", innerHTML: this.subtitle }), h("div", { class: "ibk-form-group__list" }, h("slot", null)), this.joined && h("span", { class: "ibk-form-group__error-message", innerHTML: this.error && this.requiredMessage })));
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "error": ["watchingError"]
  }; }
};
IbkFormGroup.style = formGroupCss;

export { IbkFormGroup as ibk_form_group };
