bromcom-ui 2.3.70 → 2.3.71

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

@@ -1,36 +1,20 @@
-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';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
-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 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
+};
 const BcmInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -39,68 +23,40 @@ const BcmInput = class {
     this.clear = createEvent(this, "bcm-clear", 7);
     this.change = createEvent(this, "bcm-change", 7);
     this.input = createEvent(this, "bcm-input", 7);
-    /** Props **/
-    this._id = Generate.UID();
-    this._internal_id = Generate.UID();
+    this.inputId = `input-${++id}`;
+    this.type = 'text';
     this.value = '';
-    this.size = Bcm.Size.medium;
+    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.type = Bcm.InputType.text;
+    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.fullWidth = false;
-    this.noMargin = false;
-    this.disableWatchValue = false; // datetimepicker
-    this.passwordToggle = false; // type password
+    this.disableWatchValue = false;
     this.maxLength = null;
-    this.unitPrefix = null;
-    this.decimal = true;
-    this.noCaption = false;
-    this.captionType = Bcm.Status.default;
-    /** initial States **/
     this.inValid = false;
-    this.valueCache = '';
-    this.focused = false;
-    this.isPasswordVisible = false;
+    this.hasFocus = false;
     this.isBlur = false;
+    this.isPasswordVisible = 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 onBcmFocus() {
+  async setFocus() {
     this.inputElement.focus();
   }
-  async onBcmBlur() {
+  async removeFocus() {
     this.inputElement.blur();
   }
-  async onBcmSelect() {
-    this.inputElement.select();
+  async select() {
+    return this.inputElement.select();
   }
   async setValue(value) {
     this.inputElement.value = value;
@@ -111,6 +67,7 @@ const BcmInput = class {
   async setClear() {
     this.inputElement.value = '';
     this.value = '';
+    return Promise.resolve();
   }
   async resetCaption() {
     this.caption = this.captionCache;
@@ -120,45 +77,19 @@ 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.focused = true;
+    this.hasFocus = true;
     this.focus.emit();
-    this.whatchHasFocus();
   }
   handleBlur() {
-    this.focused = false;
+    this.hasFocus = false;
     this.isBlur = true;
-    this.whatchHasFocus();
+    if (this.type == "email") {
+      this.isEmailValid();
+    }
+    if (this.type == "tel") {
+      this.isTelValid();
+    }
     this.blur.emit();
   }
   handleChange() {
@@ -166,6 +97,15 @@ 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);
   }
@@ -173,102 +113,268 @@ 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 || this.captionCache;
-    this.captionType = captionType || this.captionTypeCache;
+    this.caption = caption ? caption : this.captionCache;
+    this.captionType = captionType ? captionType : this.captionTypeCache;
     this.captionError = captionType == "error" ? caption : null;
   }
-  stepUpOrDown(type) {
-    if (!this.inValid && !this.disabled && !this.readonly) {
-      let step = +(this.step) || 1;
-      let val = +(this.value);
-      if (type == 'up') {
-        val = +(val + step);
+  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 {
-        val = +(val - step);
+        splitDec = 0;
       }
-      this.value = val;
+      returnDecimalLength = splitDec;
     }
+    return Number(returnDecimalLength);
   }
-  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;
-        }
+  componentWillRender() {
+    const { type } = this;
+    if (type == "number" && this.value) {
+      if (!this.isNumberValid()) {
+        this.validationRange();
       }
-      else if (min) {
-        if (value < min) {
-          this.setCaption(StringHelper.getMessage('min', [min]), "error");
-          return false;
-        }
+    }
+    if (this.isBlur) {
+      if (type == "email" && this.value) {
+        this.isEmailValid();
       }
-      else if (max) {
-        if (value > max) {
-          this.setCaption(StringHelper.getMessage('max', [max]), "error");
-          return false;
-        }
+      if (type == "tel" && this.value) {
+        this.isTelValid();
       }
     }
-    this.setCaption();
-    return true;
   }
-  checkValid(type) {
-    const { value } = this;
-    if (Validators.isValidate(value, type)) {
-      this.setCaption();
-      this.inValid = false;
+  componentWillLoad() {
+    const { type, value } = this;
+    if (type == "number" && Number(value) == value) {
+      this.value = this.numberDecimal(value);
     }
-    else {
-      this.setCaption(StringHelper.getMessage(type), "error");
-      this.inValid = true;
+  }
+  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);
+        }
+      }
     }
-    return this.inValid;
   }
   whatchHasFocus() {
-    const { type, focused, valueCache, inValid } = this;
-    if (type == Bcm.InputType.number && inValid) {
-      if (focused) {
-        this.value = '';
+    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 (!StringHelper.isNullOrEmpty(this.value)) {
-          this.value = this.value ? this.fixToNumber(this.value) : '';
-        }
-        else {
+        if (this.value == '' && inValid == false) {
           this.value = valueCache;
+          inValidState = true;
+        }
+        if (value != valueCache && inValid == false && inValidState == false) {
+          this.value = value ? this.numberDecimal(value) : '';
         }
       }
     }
   }
-  fixToNumber(val) {
-    if (val) {
-      const decLen = NumberHelper.getDecimalLength(this.step);
-      return decLen > 0 ? NumberHelper.parseFloatFixed(val, decLen) : val;
+  watchValue() {
+    if (!this.disableWatchValue && this.type != 'number') {
+      this.handleChange();
     }
-    return val;
   }
   render() {
-    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,
+    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', {
       '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
     });
-    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 })));
+    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, " "))))));
   }
   static get watchers() { return {
+    "hasFocus": ["whatchHasFocus"],
     "value": ["watchValue"]
   }; }
 };
+BcmInput.style = inputCss;
 
 export { BcmInput as bcm_input };

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

@@ -1,11 +1,74 @@
-import { r as registerInstance, h, f as Host, g as getElement } 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 { B as Bcm } from './bcm-ad02f9c9.js';
-import './string-helper-35840f91.js';
-import './slot-template-f79b82ee.js';
-import { L as LabelTemplate } from './label-template-501216fc.js';
+import { h, r as registerInstance, f as Host, g as getElement } from './index-9dbea026.js';
+import { S as StatusProps } from './types-911a8837.js';
+import { c as classnames } from './index-43956e3c.js';
+import { S as StringHelper, B as Bcm } from './string-helper-1d51eff7.js';
+
+class Generate {
+}
+Generate.UID = () => Math.random().toString(36).substr(2, 9);
+Generate.getIconAttrWithStatusType = (status, loading = false) => {
+  if (loading)
+    return { icon: 'loading', color: 'blue-6' };
+  switch (status) {
+    case StatusProps.info:
+      return { color: 'blue-6', icon: 'info-circle' };
+    case StatusProps.error:
+      return { color: 'red-6', icon: 'close-circle' };
+    case StatusProps.warning:
+      return { color: 'warmyellow-6', icon: 'exclamation-circle' };
+    case StatusProps.success:
+      return { color: 'green-6', icon: 'check-circle' };
+  }
+};
+Generate.createComponent = (element, props) => {
+  let box = document.createElement(element);
+  Object.keys(props).forEach(key => {
+    box[key] = props[key];
+  });
+  document.body.appendChild(box);
+  return box;
+};
+Generate.debounceInput = (func, wait, immediate) => {
+  let timeout;
+  return function () {
+    let context = this, args = arguments;
+    let later = function () {
+      timeout = null;
+      if (!immediate)
+        func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow)
+      func.apply(context, args);
+  };
+};
+Generate.flatArray = (arr) => {
+  return arr.reduce((acc, val) => {
+    return acc.concat(Array.isArray(val) ? Generate.flatArray(val) : val);
+  }, []);
+};
+
+const SlotTemplate = ({ value, className, name }) => {
+  return StringHelper.isNullOrEmpty(value) ? h("span", { class: className },
+    h("slot", Object.assign({}, (name && { name: name })))) : h("span", { class: className }, value);
+};
+
+const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
+  size = size || Bcm.FontSize['size-1'];
+  type = type || Bcm.Status.default;
+  const labelClasses = classnames('bcm-label__text', size, {
+    'bcm-label__text-error': type === Bcm.Status.error,
+  });
+  return (h("label", { form: form, htmlFor: htmlFor, class: labelClasses },
+    " ",
+    h(SlotTemplate, { value: value }),
+    " ",
+    required && ('*')));
+};
+
+const labelCss = "@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}.bcm-label{display:flex;align-items:center;grid-gap:2px}.bcm-label__text{display:inline-block;color:var(--bcm-color-grey-9);margin-bottom:4px}.bcm-label__text-error{color:var(--bcm-color-red-6)}";
 
 const BcmLabel = class {
   constructor(hostRef) {
@@ -18,11 +81,13 @@ const BcmLabel = class {
     this.type = Bcm.Status.default;
   }
   render() {
-    const { required, value, size, form, htmlFor, hidden, type } = this;
+    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
     const hostClasses = classnames('bcm-label', { hidden });
-    return (h(Host, { class: hostClasses }, h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required })));
+    const Label = (h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
+    return (h(Host, null, h("div", { class: hostClasses }, Label, tooltip && (h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, h("bcm-icon", { color: "grey-8", icon: "question-circle", type: "fill" }))))));
   }
   get el() { return getElement(this); }
 };
+BcmLabel.style = labelCss;
 
 export { BcmLabel as bcm_label };