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

const balFieldCss = "@keyframes spinAround{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.icon.sc-bal-field{align-items:center;display:inline-flex;justify-content:center;height:1.5rem;width:1.5rem}.icon.is-small.sc-bal-field{height:1rem;width:1rem}.icon.is-medium.sc-bal-field{height:2rem;width:2rem}.icon.is-large.sc-bal-field{height:3rem;width:3rem}.sc-bal-field-h{display:block}.control.is-loading.sc-bal-field::after,.select.is-loading.sc-bal-field::after{border-top-color:#009ee7 !important;border-right-color:#009ee7 !important;border-left-color:transparent !important;border-bottom-color:transparent !important}.form.sc-bal-field>.label.sc-bal-field{font-size:0.9375rem !important;margin-bottom:0 !important;font-family:MetaPro, Arial, sans-serif}p.help.sc-bal-field{min-height:22.5px;margin-top:0 !important;margin-bottom:0 !important;font-family:MetaPro, Arial, sans-serif}.control.has-icons-left.sc-bal-field *.sc-bal-field::part(input){padding-left:38px}.control.sc-bal-field bal-icon.sc-bal-field{display:block}.form.sc-bal-field p.help.sc-bal-field{text-align:left}.form.is-disabled.sc-bal-field .label.sc-bal-field,.form.is-disabled.sc-bal-field .control.sc-bal-field{opacity:0.6}.form.is-inverted.sc-bal-field .label.sc-bal-field{color:#ffffff}.form.is-inverted.sc-bal-field p.help.sc-bal-field:not(.is-danger){color:#99add6}";

const Field = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * Text of the inputs label
     */
    this.label = '';
    /**
     * If `true` a asterix (*) is added to the label text
     */
    this.required = false;
    /**
     * If `true` the field loses opacity
     */
    this.disabled = false;
    /**
     * Validation message text
     */
    this.validationMessage = '';
    /**
     * Baloise icon for the right side of the input
     */
    this.iconRight = '';
    /**
     * Baloise icon for the left side of the input
     */
    this.iconLeft = '';
    /**
     * If `true` the field can be used on blue background.
     */
    this.inverted = false;
    /**
     * If `true` a loading spinner is visible at the end of the input
     */
    this.loading = false;
  }
  get buildIconLeftTemplate() {
    if (this.iconLeft) {
      return h("bal-icon", { name: this.iconLeft, isLeft: true, size: "medium" });
    }
    return '';
  }
  get buildIconRightTemplate() {
    if (this.iconRight) {
      return h("bal-icon", { name: this.iconRight, isRight: true, size: "medium" });
    }
    return '';
  }
  render() {
    return (h(Host, null, h("div", { class: {
        'form': true,
        'is-inverted': this.inverted,
        'is-disabled': this.disabled,
      } }, h("label", { class: "label", htmlFor: this.findInputId() }, this.label, this.required === true ? ' *' : '', h("slot", { name: "hint" })), h("div", { class: {
        'control': true,
        'has-icons-left': !!this.iconLeft,
        'has-icons-right': !!this.iconRight,
        'is-loading': this.loading,
      } }, h("slot", null), this.buildIconLeftTemplate, this.buildIconRightTemplate), h("p", { class: "help is-danger" }, this.validationMessage))));
  }
  findInputId() {
    const inputElement = this.element.querySelector('input.input');
    return inputElement && inputElement.id ? inputElement.id : '';
  }
  get element() { return getElement(this); }
};
Field.style = balFieldCss;

export { Field as bal_field };
