import { Component, h, Host, Prop, Element, Watch, Event, Method } from '@stencil/core';
export class Input {
  constructor() {
    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 = '';
    /**
     * 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 (h(Host, null,
      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, 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;
  }
  static get is() { return "bal-input"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-input.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-input.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the control, which is submitted with the form data."
      },
      "attribute": "name",
      "reflect": false,
      "defaultValue": "this.inputId"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defines the type of the input (text, number, email ...)."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'text'"
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Placeholder of the input"
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "''"
    },
    "maxLength": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number | undefined",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defines the max length of the value."
      },
      "attribute": "max-length",
      "reflect": false,
      "defaultValue": "undefined"
    },
    "minLength": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number | undefined",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defines the min length of the value."
      },
      "attribute": "min-length",
      "reflect": false,
      "defaultValue": "undefined"
    },
    "inverted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` this component can be placed on dark background"
      },
      "attribute": "inverted",
      "reflect": false,
      "defaultValue": "false"
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the input is readonly"
      },
      "attribute": "readonly",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the input is disabled"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "clickable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the input gets a clickable cursor style"
      },
      "attribute": "clickable",
      "reflect": false,
      "defaultValue": "false"
    },
    "autoComplete": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The autocomplete attribute specifies whether or not an input field should have autocomplete enabled."
      },
      "attribute": "auto-complete",
      "reflect": false,
      "defaultValue": "false"
    },
    "numberKeyboard": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` on mobile device the number keypad is active"
      },
      "attribute": "number-keyboard",
      "reflect": false,
      "defaultValue": "false"
    },
    "onlyNumbers": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the input only allows numbers"
      },
      "attribute": "only-numbers",
      "reflect": false,
      "defaultValue": "false"
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the control."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    }
  }; }
  static get events() { return [{
      "method": "balInput",
      "name": "balInput",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when a keyboard input occurred."
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "balBlur",
      "name": "balBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when a keyboard input occurred."
      },
      "complexType": {
        "original": "FocusEvent",
        "resolved": "FocusEvent",
        "references": {
          "FocusEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balClick",
      "name": "balClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the input has clicked."
      },
      "complexType": {
        "original": "MouseEvent",
        "resolved": "MouseEvent",
        "references": {
          "MouseEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balKeyPress",
      "name": "balKeyPress",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when a keyboard key has pressed."
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "balFocus",
      "name": "balFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the input has focus."
      },
      "complexType": {
        "original": "FocusEvent",
        "resolved": "FocusEvent",
        "references": {
          "FocusEvent": {
            "location": "global"
          }
        }
      }
    }]; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets the focus on the input element.",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "valueChanged"
    }]; }
}
let InputIds = 0;
