'use strict';

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

const index = require('./index-7f52f1a2.js');

const balInputCss = "@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);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.balKeyPress = index.createEvent(this, "balKeyPress", 7);
    this.balFocus = index.createEvent(this, "balFocus", 7);
    this.inputId = `bal-in-${InputIds++}`;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * Defines the type of the input (text, number, email ...).
     */
    this.type = 'text';
    /**
     * Placeholder of the input
     */
    this.placeholder = '';
    /**
     * The tabindex of the control.
     */
    this.balTabindex = 0;
    /**
     * Defines the max length of the value.
     */
    this.maxLength = undefined;
    /**
     * Defines the min length of the value.
     */
    this.minLength = undefined;
    /**
     * If `true` this component can be placed on dark background
     */
    this.inverted = false;
    /**
     * If `true` the input is readonly
     */
    this.readonly = false;
    /**
     * If `true` the input is disabled
     */
    this.disabled = false;
    /**
     * If `true` the input gets a clickable cursor style
     */
    this.clickable = false;
    /**
     * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
     */
    this.autoComplete = false;
    /**
     * If `true` on mobile device the number keypad is active
     */
    this.numberKeyboard = false;
    /**
     * If `true` the input only allows numbers
     */
    this.onlyNumbers = 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);
      if (this.onlyNumbers) {
        val = this.filterNumbers(val);
      }
      if (this.value !== val) {
        this.value = val;
        this.balInput.emit(this.value);
      }
      else {
        this.updateInputValue();
      }
    };
  }
  valueChanged() {
    this.updateInputValue();
  }
  /**
   * Sets the focus on the input element.
   */
  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,
      }, autoComplete: this.autoComplete ? 'on' : 'off', id: this.inputId, type: this.type, placeholder: this.placeholder, name: this.name, value: this.value, tabindex: this.balTabindex, disabled: this.disabled, readonly: this.readonly, pattern: this.numberKeyboard ? '[0-9]*' : '', maxLength: this.maxLength, minLength: this.minLength, onInput: e => this.onInput(e), onBlur: e => this.balBlur.emit(e), onClick: e => this.balClick.emit(e), onKeyPress: e => this.balKeyPress.emit(e), onFocus: e => this.balFocus.emit(e), ref: inputEl => (this.inputEl = inputEl) })));
  }
  updateInputValue() {
    if (this.inputEl.value !== this.value) {
      this.inputEl.value = this.value;
    }
  }
  filterNumbers(val) {
    if (val && typeof val === 'string') {
      val = val.replace(/[^\d]/g, '');
    }
    return val;
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "value": ["valueChanged"]
  }; }
};
let InputIds = 0;
Input.style = balInputCss;

exports.bal_input = Input;
