bromcom-ui 2.3.65 → 2.3.69

package/dist/collection/components/molecules/input/input.js

@@ -0,0 +1,1147 @@
+import { Component, Prop, State, Event, Method, h, Watch, Listen, Host } from '@stencil/core';
+import cs from 'classnames';
+let id = 0;
+const defaultIcons = {
+  email: 'mail',
+  tel: 'phone',
+  search: 'search',
+  url: 'link'
+};
+const iconSizes = {
+  'small': 14,
+  'medium': 16,
+  'large': 18
+};
+export class BcmInput {
+  constructor() {
+    this.inputId = `input-${++id}`;
+    this.type = 'text';
+    this.value = '';
+    this.size = "medium";
+    this.noCaption = false;
+    this.noMargin = false;
+    this.captionType = 'default';
+    this.fullWidth = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.unit = null;
+    this.unitPrefix = null;
+    this.min = null;
+    this.max = null;
+    this.step = null;
+    this.hidden = false;
+    this.required = false;
+    this.disableWatchValue = false;
+    this.maxLength = null;
+    this.inValid = false;
+    this.hasFocus = false;
+    this.isBlur = false;
+    this.isPasswordVisible = false;
+  }
+  async setFocus() {
+    this.inputElement.focus();
+  }
+  async removeFocus() {
+    this.inputElement.blur();
+  }
+  async select() {
+    return this.inputElement.select();
+  }
+  async setValue(value) {
+    this.inputElement.value = value;
+    this.value = value;
+    this.handleChange();
+    return value;
+  }
+  async setClear() {
+    this.inputElement.value = '';
+    this.value = '';
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  async getValue() {
+    return this.value;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.isBlur = true;
+    if (this.type == "email") {
+      this.isEmailValid();
+    }
+    if (this.type == "tel") {
+      this.isTelValid();
+    }
+    this.blur.emit();
+  }
+  handleChange() {
+    this.value = this.inputElement.value;
+    this.change.emit(this.value);
+  }
+  handleInput() {
+    if (this.type == "number") {
+      if (this.decimal == "false") {
+        this.inputElement.value = this.inputElement.value.replace(/[^0-9-]/g, '');
+      }
+      else {
+        this.inputElement.value = this.inputElement.value.replace(/[^0-9.,-]/g, '');
+      }
+      this.inputElement.value = this.inputElement.value.replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1');
+    }
+    this.value = this.inputElement.value;
+    this.input.emit(this.value);
+  }
+  handleClear(e) {
+    this.inputElement.value = '';
+    this.value = '';
+    this.inputElement.focus();
+    this.change.emit(this.value);
+    this.clear.emit(e);
+    e.stopPropagation();
+  }
+  changePasswordVisibility() {
+    this.isPasswordVisible = !this.isPasswordVisible;
+  }
+  incrementNumber() {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = this.getNumberStep();
+      let val = Number(this.value) + Number(step);
+      this.value = this.numberDecimal(val);
+    }
+  }
+  decrementNumber() {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = this.getNumberStep();
+      let val = Number(this.value) - Number(step);
+      this.value = this.numberDecimal(val);
+    }
+  }
+  getNumberStep(step = Number(this.step)) {
+    let returnStep = 1;
+    if (step && Number(step) == step)
+      returnStep = step;
+    return Number(returnStep);
+  }
+  connectedCallback() {
+    this.changePasswordVisibility = this.changePasswordVisibility.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.incrementNumber = this.incrementNumber.bind(this);
+    this.decrementNumber = this.decrementNumber.bind(this);
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  validationRange(val = JSON.stringify({
+    "value": this.value,
+    "min": this.min,
+    "max": this.max
+  })) {
+    let cap = null;
+    let capType = null;
+    let returnValidation = true;
+    let item = JSON.parse(val);
+    let { length, value, min, max } = item;
+    length = parseFloat(length);
+    value = parseFloat(value);
+    min = parseFloat(min);
+    max = parseFloat(max);
+    length !== 0 && (value && (min && max && ((value < min || value > max) && (cap = "Please enter a value between " + min + " and " + max + ".",
+      capType = "error",
+      returnValidation = false)) || min && !max && (value < min && (cap = "Please enter a value greater than or equal to " + min + ".",
+      capType = "error",
+      returnValidation = false)) || !min && max && (value > max && (cap = "Please enter a value less than or equal to " + max + ".",
+      capType = "error",
+      returnValidation = false))));
+    this.setCaption(cap, capType);
+    return returnValidation;
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption ? caption : this.captionCache;
+    this.captionType = captionType ? captionType : this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+  }
+  isEmailValid() {
+    const { value } = this;
+    const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+    let cap = null;
+    let capType = null;
+    if (value && !regexp.test(value)) {
+      cap = "Please enter a valid email address.",
+        capType = "error",
+        this.inValid = true;
+    }
+    else {
+      this.inValid = false;
+    }
+    this.setCaption(cap, capType);
+    return this.inValid;
+  }
+  isTelValid() {
+    const { value } = this;
+    const regexp = new RegExp(/^(?=.*[0-9])[- +()0-9]+$/);
+    let cap = null;
+    let capType = null;
+    if (value && !regexp.test(value)) {
+      cap = "Please enter a valid phone number.",
+        capType = "error",
+        this.inValid = true;
+    }
+    else {
+      this.inValid = false;
+    }
+    this.setCaption(cap, capType);
+    return this.inValid;
+  }
+  isNumberValid(caption = "Invalid number", captionType = "error") {
+    const { value } = this;
+    if (value && Number(value) != value) {
+      this.inValid = true;
+      this.setCaption(caption, captionType);
+      return true;
+    }
+    this.inValid = false;
+    return false;
+  }
+  setNumberUnit() {
+    const { value, unit } = this;
+    if (Number(value) == value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !value)
+      this.value = 0;
+  }
+  numberDecimal(val = '') {
+    let decLen = this.getDecimalLength();
+    if (val && decLen)
+      return parseFloat(val).toFixed(decLen);
+    return val;
+  }
+  numberNotDecimal(val = 0) {
+    return Math.trunc(val);
+  }
+  getDecimalLength() {
+    const { step } = this;
+    var decimalNumber = null;
+    let returnDecimalLength = 0, splitted, splitDec;
+    if (decimalNumber && Number(decimalNumber) == decimalNumber) {
+      returnDecimalLength = decimalNumber;
+    }
+    else if (!decimalNumber && step && Number(step) == step) {
+      if (String(step).includes(".")) {
+        splitted = String(step).split('.');
+        splitDec = splitted[splitted.length - 1].length;
+      }
+      else {
+        splitDec = 0;
+      }
+      returnDecimalLength = splitDec;
+    }
+    return Number(returnDecimalLength);
+  }
+  componentWillRender() {
+    const { type } = this;
+    if (type == "number" && this.value) {
+      if (!this.isNumberValid()) {
+        this.validationRange();
+      }
+    }
+    if (this.isBlur) {
+      if (type == "email" && this.value) {
+        this.isEmailValid();
+      }
+      if (type == "tel" && this.value) {
+        this.isTelValid();
+      }
+    }
+  }
+  componentWillLoad() {
+    const { type, value } = this;
+    if (type == "number" && Number(value) == value) {
+      this.value = this.numberDecimal(value);
+    }
+  }
+  numberControl(e) {
+    if (!this.disabled && !this.readonly) {
+      if (this.type == "number") {
+        var which = e.which || 0;
+        var key = e.key;
+        which == 38 && ( // up arrow
+        e.preventDefault(),
+          this.incrementNumber());
+        which == 40 && ( // down arrow
+        e.preventDefault(),
+          this.decrementNumber());
+        key == "." && String(this.value).includes(".") && ( // dot: shouldn't be more than one
+        e.preventDefault());
+        if (which == 8 || //backspace / delete
+          which == 9 || //tab
+          which == 13 || //enter
+          which == 16 || //shift
+          which == 17 || //ctrl
+          which == 18 || //alt
+          which == 46 || //delete
+          (which == 110 && (this.type == 'number' && this.decimal != false)) || //decimal point
+          // (which == 188 && key == ",") || //comma
+          (which == 190 && key == "." && (this.type == 'number' && this.decimal != false)) || //period
+          (which == 189 && this.inputElement.value.length == 0) || //-
+          (which == 109 && this.inputElement.value.length == 0) || //-
+          (which >= 35 && which <= 40) || //end, home, left arrow, up arrow, right arrow, down arrow
+          (which >= 48 && which <= 57) || //0-9
+          (which >= 96 && which <= 105) //0-9(numpad)
+        )
+          return true;
+        e.preventDefault();
+        if (this.decimal == true) {
+          this.value = this.numberDecimal(this.value);
+        }
+        else if (this.decimal == false) {
+          this.value = this.numberNotDecimal(this.value);
+        }
+      }
+    }
+  }
+  whatchHasFocus() {
+    const { type, hasFocus, value, valueCache, inValid } = this;
+    if (type == "number") {
+      this.isNumberValid();
+      let inValidState = false;
+      if (hasFocus == true) {
+        if (inValid == true) {
+          this.value = '';
+          inValidState = true;
+        }
+      }
+      else {
+        if (this.value == '' && inValid == false) {
+          this.value = valueCache;
+          inValidState = true;
+        }
+        if (value != valueCache && inValid == false && inValidState == false) {
+          this.value = value ? this.numberDecimal(value) : '';
+        }
+      }
+    }
+  }
+  watchValue() {
+    if (!this.disableWatchValue && this.type != 'number') {
+      this.handleChange();
+    }
+  }
+  render() {
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, hasFocus, unitPrefix, noCaption, required } = this;
+    const containerClasses = cs('input-container', {
+      'full-width': fullWidth,
+      'error': captionType == 'error' ? true : false
+    });
+    const baseClasses = cs('input-base', 'input-' + size, {
+      'invalid': inValid,
+      'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+      'focused': hasFocus,
+      'disabled': disabled,
+      'readonly': readonly,
+      'empty': (value === null || value === void 0 ? void 0 : value.length) < 1
+    });
+    const inputClass = size === 'large' ? 'size-3' : 'size-2';
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
+    const hostClasses = cs(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
+    return (h(Host, { class: hostClasses },
+      h("div", { class: containerClasses },
+        label && h("div", null,
+          h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })),
+        h("div", { class: baseClasses },
+          h("span", { class: "input-prefix" },
+            h("slot", { name: "prefix" }),
+            unitPrefix && h("span", { class: cs(inputClass, 'unit-prefix') }, unitPrefix)),
+          h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
+              type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
+              ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
+              : value, disabled: this.disabled, readonly: this.readonly }),
+          clearable && !this.disabled && (h("button", { class: "input-clear-button", onClick: this.handleClear },
+            h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" }))),
+          type === 'password' && passwordToggle && (h("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility },
+            h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+          Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon" },
+            h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+          type === 'number' && (h("div", { class: cs('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) },
+            h("span", { class: "caret", onClick: inValid == false && this.incrementNumber },
+              h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+            h("span", { class: "caret", onClick: inValid == false && this.decrementNumber },
+              h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+          type !== 'number' && (h("span", { class: "input-suffix" },
+            h("slot", { name: "suffix" })))),
+        !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+          ? h("span", { class: captionClasses },
+            " ",
+            captionError,
+            " ")
+          : caption && h("span", { class: captionClasses },
+            " ",
+            caption,
+            " "))))));
+  }
+  static get is() { return "bcm-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["input.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"medium\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "noMargin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-margin",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": false
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
+        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "passwordToggle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "password-toggle",
+      "reflect": false
+    },
+    "noDefaultIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-default-icon",
+      "reflect": false
+    },
+    "_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true
+    },
+    "_internal_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_internal_id",
+      "reflect": false,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": true
+    },
+    "unit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "unit",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "unitPrefix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "unit-prefix",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "decimal": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "decimal",
+      "reflect": false
+    },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "step": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "step",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableWatchValue": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disable-watch-value",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-length",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "inValid": {},
+    "valueCache": {},
+    "captionCache": {},
+    "captionTypeCache": {},
+    "hasFocus": {},
+    "isPasswordVisible": {}
+  }; }
+  static get events() { return [{
+      "method": "focus",
+      "name": "bcm-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "blur",
+      "name": "bcm-blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "clear",
+      "name": "bcm-clear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "bcm-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "input",
+      "name": "bcm-input",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "removeFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "select": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setValue": {
+      "complexType": {
+        "signature": "(value: any) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setClear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getValue": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "hasFocus",
+      "methodName": "whatchHasFocus"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "numberControl",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}