bromcom-ui 2.11.1-rc.9-3 → 2.11.1-rc.9-4

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

@@ -2,55 +2,267 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { Generate } from "@bcm/helpers";
-import { Host, h } from "@stencil/core";
+import { Generate, StringHelper } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 import { CaptionTemplate } from "@bcm/template";
-import { numberInputStyle } from "./number-input.style";
+import { delay } from "@bcm/utils";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import { inputStyle } from "../input/input.style";
 export class NumberInput {
   constructor() {
-    this.blockInvalidChar = e => {
-      return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
+    this.inValid = false;
+    this.onInput = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("input", (e) => {
+        this.input.emit(e);
+      });
+    };
+    this.onChange = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("change", (e) => {
+        this.change.emit(e);
+      });
+    };
+    this.onFocus = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("focus", e => {
+        this.isFocus = true;
+        this.focus.emit(e);
+      });
+    };
+    this.onBlur = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", e => {
+        this.isFocus = false;
+        this.blur.emit(e);
+      });
+    };
+    this.onKeydown = () => {
+      var _a;
+      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.up();
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.down();
+        }
+      });
+    };
+    this.listener = () => {
+      this.onInput();
+      this.onChange();
+      this.onFocus();
+      this.onBlur();
+      this.onKeydown();
     };
     this._id = Generate.UID();
-    this.size = Bcm.Size.medium;
-    this.min = 0;
-    this.max = 100;
+    this.value = "";
+    this.defaultValue = undefined;
+    this._prefix = undefined;
+    this._suffix = undefined;
+    this.size = "medium";
+    this.min = undefined;
+    this.max = undefined;
     this.step = 1;
-    this.placeholder = undefined;
     this.label = undefined;
-    this.tooltip = undefined;
-    this.value = 0;
-    this.disabled = false;
+    this.name = undefined;
+    this.fullWidth = false;
+    this.clearable = false;
     this.readonly = false;
+    this.disabled = false;
     this.required = false;
-    this.pattern = undefined;
+    this.mode = "none";
+    this.placeholder = undefined;
+    this.thousandSeparator = false;
+    this.decimalSeparator = undefined;
+    this.decimalScale = undefined;
+    this.fixedDecimalScale = false;
+    this.allowNegative = false;
+    this.allowLeadingZeros = false;
+    this.unitPrefix = undefined;
+    this.unitSuffix = undefined;
     this.caption = undefined;
     this.noCaption = false;
     this.captionType = Bcm.Status.default;
     this.captionError = undefined;
     this.customErrorMessage = undefined;
-    this.prefixIcon = undefined;
-    this.suffixIcon = undefined;
     this.isFocus = false;
-    this.isError = false;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.valueCache = "";
   }
-  render() {
-    const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
-    const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
-    return (h(Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: container() }, h("div", { class: inputContainer() }, prefixIcon && (h("span", { class: slotIcon() }, h("i", { class: prefixIcon }))), h("input", { type: "number", class: input(), min: min, max: max, step: step, value: value, inputmode: "numeric", pattern: pattern, ref: input => (this.nativeInput = input), onKeyPress: this.blockInvalidChar, onFocus: () => (this.isFocus = true), onBlur: () => (this.isFocus = false), onError: e => console.log(e), onErrorCapture: e => console.log(e) }), suffixIcon && (h("span", { class: slotIcon() }, h("i", { class: suffixIcon })))), h("div", { class: caretContainer() }, h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-up" })), h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-down" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
+  connectedCallback() {
+    if (this.defaultValue)
+      this.value = +this.defaultValue;
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
   }
-  static get is() { return "bcm-number-input"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["number-input.scss"]
-    };
+  componentDidLoad() {
+    this.listener();
   }
-  static get styleUrls() {
-    return {
-      "$": ["number-input.css"]
+  up() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value + +this.step;
+    if (this.mode === "strict") {
+      if (this.max && +this.value > +this.max) {
+        this.value = this.max;
+      }
+    }
+  }
+  down() {
+    if (this.disabled)
+      return;
+    if (!this.value)
+      this.value = Number(0);
+    this.value = +this.value - +this.step;
+    if (this.mode === "strict") {
+      if (this.min && +this.value < +this.min) {
+        this.value = this.min;
+      }
+    }
+  }
+  handleClear(e) {
+    if (this.disabled)
+      return;
+    const event = this.beforeClear.emit(e);
+    if (event.defaultPrevented)
+      return;
+    this.value = "";
+    this.clear.emit(e);
+  }
+  checkLength() {
+    const { min, max, value } = this;
+    const minLength = min;
+    const maxLength = max;
+    let valuePoint = value === null || value === void 0 ? void 0 : value.toString();
+    if (min && max) {
+      if (+valuePoint < +min || +valuePoint > +max) {
+        this.setCaption(StringHelper.getMessage("betweenlength", [minLength, maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (minLength) {
+      if (+valuePoint < +minLength) {
+        this.setCaption(StringHelper.getMessage("minlength", [minLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+    else if (maxLength) {
+      if (valuePoint > maxLength) {
+        this.setCaption(StringHelper.getMessage("maxlength", [maxLength]), "error");
+        this.inValid = true;
+      }
+      else {
+        this.setCaption();
+        this.inValid = false;
+      }
+    }
+  }
+  watchValue() {
+    this.checkLength();
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async set(data) {
+    await this.setValue(data);
+  }
+  async get() {
+    return this.value || null;
+  }
+  async setValue(value) {
+    this.value = value;
+  }
+  async setClear() {
+    this.value = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    this.inValid = false;
+    await delay(10);
+    return Promise.resolve();
+  }
+  setCaption(caption = null, captionType = null) {
+    this.caption = caption || this.captionCache;
+    this.captionType = captionType || this.captionTypeCache;
+    this.captionError = captionType == "error" ? caption : null;
+    return Promise.resolve();
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d, _e;
+    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput.bind(this));
+    (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.onChange.bind(this));
+    (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener("focus", this.onFocus.bind(this));
+    (_d = this.inputElement) === null || _d === void 0 ? void 0 : _d.removeEventListener("blur", this.onBlur.bind(this));
+    (_e = this.inputElement) === null || _e === void 0 ? void 0 : _e.removeEventListener("keydown", this.onKeydown.bind(this));
+  }
+  render() {
+    const { _prefix, _suffix, noCaption, captionType, captionError, caption, required, _id, label, size, fullWidth, clearable, value, placeholder, thousandSeparator, decimalSeparator, decimalScale, fixedDecimalScale, allowNegative, allowLeadingZeros, unitPrefix, unitSuffix, min, max, step, defaultValue, disabled, mode, } = this;
+    const isActiveClearable = (value === null || value === void 0 ? void 0 : value.toString().length) > 0 && clearable;
+    const isInvalid = this.captionType == "error" || this.inValid;
+    const { host, inputContainer, slotClass, clearButton, controls, controlsBtn, controlsBtnDown, controlsBtnUp, controlsDivider, input } = inputStyle({
+      size,
+      fullWidth,
+      clearable: isActiveClearable,
+      disabled,
+      invalid: isInvalid,
+    });
+    const numericProps = {
+      placeholder,
+      thousandSeparator,
+      decimalSeparator,
+      decimalScale,
+      fixedDecimalScale,
+      allowNegative,
+      allowLeadingZeros,
+      prefix: unitPrefix,
+      suffix: unitSuffix,
+    };
+    /* input  props */
+    const inputProps = {
+      min,
+      max,
+      step,
+      value,
+      defaultValue,
     };
+    const generalProps = Object.assign(Object.assign(Object.assign({ "id": _id + "-base-input", "name": this.name, disabled,
+      mode, "aria-label": label, "aria-labelledby": _id + "-label", "getInputRef": el => {
+        this.inputElement = el;
+      }, "className": input() }, numericProps), inputProps), { "onValueChange": (e) => {
+        const { floatValue } = e;
+        this.value = floatValue;
+        this._onChange.emit(e);
+      } });
+    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer() }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { type: "button", disabled: disabled, class: cs(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", disabled: disabled, class: cs(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
   }
+  static get is() { return "bcm-number-input"; }
   static get properties() {
     return {
       "_id": {
@@ -71,6 +283,75 @@ export class NumberInput {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "defaultValue": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "_prefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prefix",
+        "reflect": false
+      },
+      "_suffix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "suffix",
+        "reflect": false
+      },
       "size": {
         "type": "string",
         "mutable": false,
@@ -85,50 +366,48 @@ export class NumberInput {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "Bcm.Size.medium"
+        "defaultValue": "\"medium\""
       },
       "min": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "min",
-        "reflect": false,
-        "defaultValue": "0"
+        "reflect": false
       },
       "max": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "max",
-        "reflect": false,
-        "defaultValue": "100"
+        "reflect": false
       },
       "step": {
         "type": "number",
@@ -139,7 +418,7 @@ export class NumberInput {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -148,7 +427,7 @@ export class NumberInput {
         "reflect": false,
         "defaultValue": "1"
       },
-      "placeholder": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -162,10 +441,10 @@ export class NumberInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "placeholder",
+        "attribute": "label",
         "reflect": false
       },
-      "label": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -179,12 +458,120 @@ export class NumberInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "label",
+        "attribute": "name",
         "reflect": false
       },
-      "tooltip": {
+      "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"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Input states"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mode": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
+        "complexType": {
+          "original": "\"strict\" | \"none\"",
+          "resolved": "\"none\" | \"strict\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number Input Props"
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "\"none\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -196,28 +583,62 @@ export class NumberInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "tooltip",
+        "attribute": "placeholder",
         "reflect": false
       },
-      "value": {
+      "thousandSeparator": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thousand-separator",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "decimalSeparator": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "decimal-separator",
+        "reflect": false
+      },
+      "decimalScale": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "0"
+        "attribute": "decimal-scale",
+        "reflect": false
       },
-      "disabled": {
+      "fixedDecimalScale": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -226,16 +647,16 @@ export class NumberInput {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "disabled",
+        "attribute": "fixed-decimal-scale",
         "reflect": false,
         "defaultValue": "false"
       },
-      "readonly": {
+      "allowNegative": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -244,16 +665,16 @@ export class NumberInput {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "readonly",
+        "attribute": "allow-negative",
         "reflect": false,
         "defaultValue": "false"
       },
-      "required": {
+      "allowLeadingZeros": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -262,30 +683,47 @@ export class NumberInput {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "required",
+        "attribute": "allow-leading-zeros",
         "reflect": false,
         "defaultValue": "false"
       },
-      "pattern": {
+      "unitPrefix": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "unit-prefix",
+        "reflect": false
+      },
+      "unitSuffix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "pattern",
+        "attribute": "unit-suffix",
         "reflect": false
       },
       "caption": {
@@ -300,7 +738,7 @@ export class NumberInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Caption Props"
         },
         "attribute": "caption",
         "reflect": false
@@ -379,47 +817,290 @@ export class NumberInput {
         },
         "attribute": "custom-error-message",
         "reflect": false
-      },
-      "prefixIcon": {
-        "type": "string",
-        "mutable": true,
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isFocus": {},
+      "captionCache": {},
+      "captionTypeCache": {},
+      "valueCache": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "focus",
+        "name": "bcm-focus",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Events *"
+        },
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
+        }
+      }, {
+        "method": "blur",
+        "name": "bcm-blur",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "required": false,
-        "optional": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "clear",
+        "name": "bcm-clear",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "prefix-icon",
-        "reflect": false
-      },
-      "suffixIcon": {
-        "type": "string",
-        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
+        }
+      }, {
+        "method": "change",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         },
-        "required": false,
-        "optional": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "input",
+        "name": "bcm-input",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "suffix-icon",
-        "reflect": false
-      }
-    };
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "beforeClear",
+        "name": "bcm-input-before-clear",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "_onChange",
+        "name": "bcm-onchange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
   }
-  static get states() {
+  static get methods() {
     return {
-      "isFocus": {},
-      "isError": {}
+      "onBcmFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "onBcmBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "onBcmSelect": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "set": {
+        "complexType": {
+          "signature": "(data: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "get": {
+        "complexType": {
+          "signature": "() => Promise<string | number>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string | number>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(value: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "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": []
+        }
+      },
+      "setCaption": {
+        "complexType": {
+          "signature": "(caption?: any, captionType?: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
     };
   }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
 }