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

const balInputCss = "@keyframes spinAround{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-bal-input-h{display:block}";

const Input = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.balInput = createEvent(this, "balInput", 7);
    this.balBlur = createEvent(this, "balBlur", 7);
    this.balClick = createEvent(this, "balClick", 7);
    this.balKeyDown = createEvent(this, "balKeyDown", 7);
    this.balKeyPress = createEvent(this, "balKeyPress", 7);
    this.balKeyUp = createEvent(this, "balKeyUp", 7);
    this.balFocus = createEvent(this, "balFocus", 7);
    this.inputId = `bal-in-${checkboxIds++}`;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    this.type = 'text';
    this.placeholder = '';
    this.pattern = '';
    this.maxLength = undefined;
    this.minLength = undefined;
    this.inverted = false;
    this.readonly = false;
    this.disabled = false;
    this.clickable = false;
    /**
     * The value of the control.
     */
    this.value = '';
    this.onInput = (event) => {
      var _a;
      let val = event.target && ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value);
      this.value = val;
      this.balInput.emit(this.value);
    };
  }
  valueChanged() {
    if (this.inputEl.value !== this.value) {
      this.inputEl.value = this.value;
    }
  }
  async setFocus() {
    this.inputEl.focus();
  }
  render() {
    return (h(Host, null, h("input", { class: {
        'input': true,
        'is-inverted': this.inverted,
        'clickable': this.clickable,
      }, id: this.inputId, type: this.type, placeholder: this.placeholder, name: this.name, value: this.value, disabled: this.disabled, readonly: this.readonly, pattern: this.pattern, maxLength: this.maxLength, minLength: this.minLength, onInput: e => this.onInput(e), onBlur: e => this.balBlur.emit(e), onClick: e => this.balClick.emit(e), onKeyDown: e => this.balKeyDown.emit(e), onKeyPress: e => this.balKeyPress.emit(e), onKeyUp: e => this.balKeyUp.emit(e), onFocus: e => this.balFocus.emit(e), ref: inputEl => (this.inputEl = inputEl) })));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "value": ["valueChanged"]
  }; }
};
let checkboxIds = 0;
Input.style = balInputCss;

export { Input as bal_input };
