bromcom-ui 2.3.66 → 2.3.70

package/dist/bromcom-ui/bcm-input.entry.js

@@ -1,20 +1,36 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-9dbea026.js';
-import { c as classnames } from './index-43956e3c.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-dbc63c66.js';
+import { G as Generate } from './generate-8e440fc4.js';
+import './_commonjsHelpers-2088bffa.js';
+import { c as classnames } from './index-55174f2a.js';
+import './snq.es5-946822b8.js';
+import { B as Bcm } from './bcm-ad02f9c9.js';
+import { S as StringHelper } from './string-helper-35840f91.js';
+import { C as CaptionTemplate } from './caption-template-2d4ffc88.js';
+import { I as InputTemplate } from './input-template-487d3243.js';
+import { N as NumberHelper } from './number-helper-fea1966f.js';
 
-const inputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}:host(.no-margin){margin:0}.input-container{display:flex;flex-direction:column;width:100%;max-width:256px}.input-container.full-width{max-width:100%}.input-base{flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);border-radius:2px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.focused:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.input-base.focused:not(.disabled) .caret-container{opacity:1}.input-base.focused:not(.disabled) .input-clear-button{opacity:1}.input-base:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-6)}.input-base:hover:not(.disabled) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.input-base.empty .input-clear-button{display:none}.input-base.invalid{border-color:var(--bcm-color-red-6)}.error .label{color:var(--bcm-color-red-6) !important}.error .input-base{border:1px solid var(--bcm-color-red-6) !important}.input-base input{color:var(--bcm-color-grey-8);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Roboto\", sans-serif;cursor:inherit;-webkit-appearance:none;appearance:none}.input-base input::-webkit-search-decoration,.input-base input::-webkit-search-cancel-button,.input-base input::-webkit-search-results-button,.input-base input::-webkit-search-results-decoration{-webkit-appearance:none}.input-base input::placeholder{color:var(--bcm-color-grey-6);user-select:none}.input-base input:focus{outline:none}input::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.input-prefix,.input-suffix{display:inline-flex;align-items:center;justify-content:center;cursor:default;color:var(--bcm-color-grey-7)}.input-prefix ::slotted(*),.input-prefix>span{margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{margin-right:4px}.input-clear-button,.input-password-toggle{display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;transition:0.2s opacity}.input-clear-button:last-child,.input-clear-button:last-of-type,.input-password-toggle:last-child,.input-password-toggle:last-of-type{margin-right:8px}.input-clear-button:focus,.input-password-toggle:focus{outline:none}.input-clear-button{opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.unit.input-suffix{width:24px}.unit-prefix{display:inline-flex;flex:0 0 auto;align-items:center;cursor:default;color:var(--bcm-color-grey-8)}.caret-container{opacity:0;width:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid #D9D9D9;border-right:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box;margin-right:4px}.caret-container:last-of-type{margin-right:-4px;border-right:none}.caret-container .caret{display:inline-flex;height:50%;width:100%;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer}.caret-container .caret:hover{color:var(--bcm-color-prime-blue-6)}.caret-container .caret:active{background-color:var(--bcm-color-grey-3)}.caret-container .caret:last-child{border-top:1px solid #D9D9D9}.caret-container.disabled{background-color:var(--bcm-color-grey-3)}.caret-container.disabled .caret{cursor:not-allowed}.default-icon{margin-right:8px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
-
-let id = 0;
-const defaultIcons = {
-  email: 'mail',
-  tel: 'phone',
-  search: 'search',
-  url: 'link'
-};
-const iconSizes = {
-  'small': 14,
-  'medium': 16,
-  'large': 18
+class Validators {
+}
+Validators.isEmailValid = (str) => /^(([^<>()\[\]\\.,;:\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,}))$/.test(str);
+Validators.isUrlValid = (str) => /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/i.test(str);
+Validators.isNumberValid = (str) => /^\d+$/.test(str);
+Validators.isNumberFloatValid = (str) => /^\d+(\.\d+)?$/.test(str);
+Validators.isPhoneValid = (str) => /^(?=.*[0-9])[- +()0-9]+$/.test(str);
+Validators.isValidate = (str, type) => {
+  switch (type) {
+    case 'email':
+      return Validators.isEmailValid(str);
+    case 'url':
+      return Validators.isUrlValid(str);
+    case 'number':
+      return Validators.isNumberValid(str) || Validators.isNumberFloatValid(str);
+    case 'phone':
+      return Validators.isPhoneValid(str);
+    default:
+      return true;
+  }
 };
+
 const BcmInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -23,40 +39,68 @@ const BcmInput = class {
     this.clear = createEvent(this, "bcm-clear", 7);
     this.change = createEvent(this, "bcm-change", 7);
     this.input = createEvent(this, "bcm-input", 7);
-    this.inputId = `input-${++id}`;
-    this.type = 'text';
+    /** Props **/
+    this._id = Generate.UID();
+    this._internal_id = Generate.UID();
     this.value = '';
-    this.size = "medium";
-    this.noCaption = false;
-    this.noMargin = false;
-    this.captionType = 'default';
-    this.fullWidth = false;
+    this.size = Bcm.Size.medium;
     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.type = Bcm.InputType.text;
     this.hidden = false;
     this.required = false;
-    this.disableWatchValue = false;
+    this.fullWidth = false;
+    this.noMargin = false;
+    this.disableWatchValue = false; // datetimepicker
+    this.passwordToggle = false; // type password
     this.maxLength = null;
+    this.unitPrefix = null;
+    this.decimal = true;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    /** initial States **/
     this.inValid = false;
-    this.hasFocus = false;
-    this.isBlur = false;
+    this.valueCache = '';
+    this.focused = false;
     this.isPasswordVisible = false;
+    this.isBlur = false;
+  }
+  connectedCallback() {
+    this.valueCache = this.value;
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillRender() {
+    const { type, isBlur, value } = this;
+    if (value) {
+      switch (type) {
+        case "number":
+          {
+            !this.checkValid("number") && (this.validationRange());
+          }
+          break;
+        case "email":
+          {
+            isBlur && (this.checkValid("email"));
+          }
+          break;
+        case "tel":
+          {
+            isBlur && (this.checkValid("phone"));
+          }
+          break;
+      }
+    }
   }
-  async setFocus() {
+  async onBcmFocus() {
     this.inputElement.focus();
   }
-  async removeFocus() {
+  async onBcmBlur() {
     this.inputElement.blur();
   }
-  async select() {
-    return this.inputElement.select();
+  async onBcmSelect() {
+    this.inputElement.select();
   }
   async setValue(value) {
     this.inputElement.value = value;
@@ -67,7 +111,6 @@ const BcmInput = class {
   async setClear() {
     this.inputElement.value = '';
     this.value = '';
-    return Promise.resolve();
   }
   async resetCaption() {
     this.caption = this.captionCache;
@@ -77,19 +120,45 @@ const BcmInput = class {
   async getValue() {
     return this.value;
   }
+  watchValue() {
+    if (!this.disableWatchValue && this.type != 'number') {
+      this.handleChange();
+    }
+  }
+  listenKeyDown(e) {
+    if (!this.disabled && !this.readonly) {
+      this.onBcmFocus();
+      if (this.type == "number") {
+        var which = e.which || 0;
+        var key = e.key;
+        if (which == 38) { // up arrow
+          e.preventDefault(),
+            this.stepUpOrDown('up');
+        }
+        if (which == 40) { // down arrow
+          e.preventDefault(),
+            this.stepUpOrDown('down');
+        }
+        if ((which == 190 || which == 110 || key == ".") && this.value.indexOf(".") > -1) { //.
+          e.preventDefault();
+        }
+        if ((which == 189 || which == 109 || key == "-")) { //-
+          if (this.value.charAt(0) == '-' || this.value.indexOf("-") > -1) {
+            e.preventDefault();
+          }
+        }
+      }
+    }
+  }
   handleFocus() {
-    this.hasFocus = true;
+    this.focused = true;
     this.focus.emit();
+    this.whatchHasFocus();
   }
   handleBlur() {
-    this.hasFocus = false;
+    this.focused = false;
     this.isBlur = true;
-    if (this.type == "email") {
-      this.isEmailValid();
-    }
-    if (this.type == "tel") {
-      this.isTelValid();
-    }
+    this.whatchHasFocus();
     this.blur.emit();
   }
   handleChange() {
@@ -97,15 +166,6 @@ const BcmInput = class {
     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);
   }
@@ -113,268 +173,102 @@ const BcmInput = class {
     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.caption = caption || this.captionCache;
+    this.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;
+  stepUpOrDown(type) {
+    if (!this.inValid && !this.disabled && !this.readonly) {
+      let step = +(this.step) || 1;
+      let val = +(this.value);
+      if (type == 'up') {
+        val = +(val + step);
       }
       else {
-        splitDec = 0;
+        val = +(val - step);
       }
-      returnDecimalLength = splitDec;
+      this.value = val;
     }
-    return Number(returnDecimalLength);
   }
-  componentWillRender() {
-    const { type } = this;
-    if (type == "number" && this.value) {
-      if (!this.isNumberValid()) {
-        this.validationRange();
+  validationRange() {
+    const { min, max, value } = this;
+    if (value) {
+      if (min && max) {
+        if (value < min || value > max) {
+          this.setCaption(StringHelper.getMessage('between', [min, max]), "error");
+          return false;
+        }
       }
-    }
-    if (this.isBlur) {
-      if (type == "email" && this.value) {
-        this.isEmailValid();
+      else if (min) {
+        if (value < min) {
+          this.setCaption(StringHelper.getMessage('min', [min]), "error");
+          return false;
+        }
       }
-      if (type == "tel" && this.value) {
-        this.isTelValid();
+      else if (max) {
+        if (value > max) {
+          this.setCaption(StringHelper.getMessage('max', [max]), "error");
+          return false;
+        }
       }
     }
+    this.setCaption();
+    return true;
   }
-  componentWillLoad() {
-    const { type, value } = this;
-    if (type == "number" && Number(value) == value) {
-      this.value = this.numberDecimal(value);
+  checkValid(type) {
+    const { value } = this;
+    if (Validators.isValidate(value, type)) {
+      this.setCaption();
+      this.inValid = false;
     }
-  }
-  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);
-        }
-      }
+    else {
+      this.setCaption(StringHelper.getMessage(type), "error");
+      this.inValid = true;
     }
+    return this.inValid;
   }
   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;
-        }
+    const { type, focused, valueCache, inValid } = this;
+    if (type == Bcm.InputType.number && inValid) {
+      if (focused) {
+        this.value = '';
       }
       else {
-        if (this.value == '' && inValid == false) {
-          this.value = valueCache;
-          inValidState = true;
+        if (!StringHelper.isNullOrEmpty(this.value)) {
+          this.value = this.value ? this.fixToNumber(this.value) : '';
         }
-        if (value != valueCache && inValid == false && inValidState == false) {
-          this.value = value ? this.numberDecimal(value) : '';
+        else {
+          this.value = valueCache;
         }
       }
     }
   }
-  watchValue() {
-    if (!this.disableWatchValue && this.type != 'number') {
-      this.handleChange();
+  fixToNumber(val) {
+    if (val) {
+      const decLen = NumberHelper.getDecimalLength(this.step);
+      return decLen > 0 ? NumberHelper.parseFloatFixed(val, decLen) : val;
     }
+    return val;
   }
   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 = classnames('input-container', {
+    const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, noMargin, _id } = this;
+    const hostClasses = classnames('bcm-input', {
+      hidden,
+      'no-margin': noMargin,
       'full-width': fullWidth,
-      'error': captionType == 'error' ? true : false
-    });
-    const baseClasses = classnames('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 = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const hostClasses = classnames(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: classnames(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: classnames('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, " "))))));
+    return (h(Host, { tabindex: "1", onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: clearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), ref: (el) => this.inputElement = el }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get watchers() { return {
-    "hasFocus": ["whatchHasFocus"],
     "value": ["watchValue"]
   }; }
 };
-BcmInput.style = inputCss;
 
 export { BcmInput as bcm_input };