'use strict';

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

const index = require('./index-35579fcb.js');

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

const Input = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.balInput = index.createEvent(this, "balInput", 7);
    this.balBlur = index.createEvent(this, "balBlur", 7);
    this.balClick = index.createEvent(this, "balClick", 7);
    this.balKeyDown = index.createEvent(this, "balKeyDown", 7);
    this.balKeyPress = index.createEvent(this, "balKeyPress", 7);
    this.balKeyUp = index.createEvent(this, "balKeyUp", 7);
    this.balFocus = index.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.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 (index.h(index.Host, null, index.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, 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 index.getElement(this); }
  static get watchers() { return {
    "value": ["valueChanged"]
  }; }
};
let checkboxIds = 0;
Input.style = balInputCss;

exports.bal_input = Input;
