bromcom-ui 2.12.3-rc.2 → 2.12.3

package/dist/esm/bcm-old-input.entry.js

@@ -0,0 +1,393 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { c as classnames } from './index-f549811f.js';
+import { C as CaptionTemplate } from './caption-template-d7953d13.js';
+import { d as delay } from './utils-57652744.js';
+import './_commonjsHelpers-82aa9212.js';
+
+const oldInputCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.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{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;flex:1 1 auto;display:inline-flex;align-items:stretch;justify-content:start;position:relative;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;vertical-align:middle;overflow:hidden;padding:0 4px;cursor:text}.input-base.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.input-base.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-300)}.input-base.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.input-base.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.input-base:not(.disabled):hover .caret-container,.input-base:not(.disabled).focused .caret-container{opacity:1}.input-base:not(.disabled):hover .input-clear-button,.input-base:not(.disabled).focused .input-clear-button{opacity:1}.input-base:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.input-base:not(.disabled):hover{border-color: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) .caret-container{opacity:1}.input-base:hover:not(.disabled) .input-clear-button{opacity:1}.input-base.disabled{cursor:not-allowed}.input-base.readonly{cursor:default}.input-base.empty .input-clear-button{display:none}.input-base.invalid,.input-base.error{border-color:var(--bcm-new-ds-color-red-500)}.error .label{color:var(--bcm-new-ds-color-red-500) !important}.error .input-base{border-color:var(--bcm-new-ds-color-red-500) !important}.input-base input{color:var(--bcm-new-ds-color-slate-600);flex:1 1 auto;width:0%;border:none;border-radius:2px;background:none;box-shadow:none;padding:0;margin:0 4px;font-family:\"Inter\", 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{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);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-new-ds-color-slate-500)}.input-prefix ::slotted(*),.input-prefix>span{line-height:1;margin-left:4px}.input-suffix ::slotted(*),.input-suffix>span{line-height:1;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;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;color:var(--bcm-new-ds-color-slate-600);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:-space(\"xxxs\");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}.input-large{height:40px}.input-medium{height:32px}.input-small{height:24px}.bcm-label{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-bottom:4px;font-weight:500;color:#475569}.bcm-label.tw-text-1{font-size:10px;line-height:18px}.bcm-label.tw-text-2{font-size:12px;line-height:20px}.bcm-label.tw-text-3{font-size:14px;line-height:22px}.bcm-caption-area{color:#dc2626;font-weight:400;justify-content:space-between;align-items:flex-start;flex-direction:row;min-height:20px;display:flex;margin-top:4px;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bcm-caption-area.tw-text-1{font-size:10px;line-height:18px}.bcm-caption-area.tw-text-2{font-size:12px;line-height:20px}.bcm-caption-area.tw-text-3{font-size:14px;line-height:22px}";
+
+let id = 0;
+const defaultIcons = {
+  email: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>',
+  tel: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M476.5 22.9L382.3 1.2c-21.6-5-43.6 6.2-52.3 26.6l-43.5 101.5c-8 18.6-2.6 40.6 13.1 53.4l40 32.7C311 267.8 267.8 311 215.4 339.5l-32.7-40c-12.8-15.7-34.8-21.1-53.4-13.1L27.7 329.9c-20.4 8.7-31.5 30.7-26.6 52.3l21.7 94.2c4.8 20.9 23.2 35.5 44.6 35.5C312.3 512 512 313.7 512 67.5c0-21.4-14.6-39.8-35.5-44.6zM69.3 464l-20.9-90.7 98.2-42.1 55.7 68.1c98.8-46.4 150.6-98 197-197l-68.1-55.7 42.1-98.2L464 69.3C463 286.9 286.9 463 69.3 464z"/></svg>',
+  search: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"/></svg>',
+  url: '<svg style="fill: #595959; width: 14px; height: 14px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>'
+};
+const BcmOldInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    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.isBlur = false;
+    this.type = 'text';
+    this.value = '';
+    this.size = "medium";
+    this.label = undefined;
+    this.noCaption = false;
+    this.noMargin = false;
+    this.captionError = undefined;
+    this.caption = undefined;
+    this.captionType = 'default';
+    this.placeholder = undefined;
+    this.fullWidth = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = false;
+    this.passwordToggle = undefined;
+    this.noDefaultIcon = undefined;
+    this._id = undefined;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.name = undefined;
+    this.unit = null;
+    this.unitPrefix = null;
+    this.decimal = undefined;
+    this.min = null;
+    this.max = null;
+    this.step = null;
+    this.hidden = false;
+    this.required = false;
+    this.disableWatchValue = false;
+    this.maxLength = null;
+    this.tooltip = undefined;
+    this.inValid = false;
+    this.valueCache = undefined;
+    this.captionCache = undefined;
+    this.captionTypeCache = undefined;
+    this.hasFocus = 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 = '';
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  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;
+    let returnDecimalLength = 0, splitted, splitDec;
+    if (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 = 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
+    });
+    const inputClass = size === 'large' ? 'size-3' : 'size-2';
+    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("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" })))), type === 'password' && passwordToggle && (h("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-invisible" : "far fa-eye" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon", innerHTML: defaultIcons[type] })), 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: "far fa-caret-up" })), h("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h("bcm-icon", { icon: "far fa-caret-down" })))), type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "hasFocus": ["whatchHasFocus"],
+    "value": ["watchValue"]
+  }; }
+};
+BcmOldInput.style = oldInputCss;
+
+export { BcmOldInput as bcm_old_input };

package/dist/esm/bcm-old-tag_2.entry.js

@@ -0,0 +1,140 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { c as classnames } from './index-f549811f.js';
+import { C as ColorPalette } from './colors-1d7854ea.js';
+import { e as extractColor } from './utils-57652744.js';
+import './_commonjsHelpers-82aa9212.js';
+
+/**
+ * 'color' prop predefined values
+ */
+var ColorProps;
+(function (ColorProps) {
+  ColorProps["black"] = "black";
+  ColorProps["white"] = "white";
+  ColorProps["prime-blue"] = "prime-blue";
+  ColorProps["grey"] = "grey";
+  ColorProps["blue"] = "blue";
+  ColorProps["warmyellow"] = "warmyellow";
+  ColorProps["yellow"] = "yellow";
+  ColorProps["limegreen"] = "limegreen";
+  ColorProps["red"] = "red";
+  ColorProps["darkorange"] = "darkorange";
+  ColorProps["orange"] = "orange";
+  ColorProps["green"] = "green";
+  ColorProps["turquosie"] = "turquosie";
+  ColorProps["cobaltblue"] = "cobaltblue";
+  ColorProps["magenta"] = "magenta";
+  ColorProps["purple"] = "purple";
+  ColorProps["bc-red"] = "bc-red";
+  ColorProps["bc-blue"] = "bc-blue";
+  ColorProps["bc-green"] = "bc-green";
+  ColorProps["bc-orange"] = "bc-orange";
+})(ColorProps || (ColorProps = {}));
+
+const oldTagCss = "@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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.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:fit-content}:host(.hidden){display:none}:host(.maxwidth){max-width:100px}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px}.tag.size-1{padding:calc(8px - 8px) 8px}.tag.size-2{padding:calc(9px - 8px) 9px}.tag.size-3{padding:calc(10px - 8px) 10px}.tag.size-4{padding:calc(11px - 8px) 11px}.tag.size-5{padding:calc(12px - 8px) 12px}.tag.size-6{padding:calc(13px - 8px) 13px}.tag.size-7{padding:calc(14px - 8px) 14px}.tag.size-8{padding:calc(15px - 8px) 15px}.tag.size-9{padding:calc(16px - 8px) 16px}.tag.basic,.tag.closeable,.tag.add,.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.basic:hover,.tag.closeable:hover,.tag.add:hover,.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon{color:var(--bcm-color-grey-10)}.tag.add{border-style:dashed;background-color:var(--bcm-color-grey-1)}.tag.checkable{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border-color:var(--bcm-color-grey-1)}.tag.checkable:hover{color:var(--bcm-color-prime-blue-5);cursor:pointer}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}button{border:none;outline:0;cursor:pointer !important;margin:0}input[type=checkbox]{margin:0;width:0;height:0;visibility:hidden;position:absolute}input[type=checkbox]:checked+label{background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-prime-blue-6)}input[type=checkbox]:checked+label:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}input[type=checkbox]:checked+label.checkable:hover{color:var(--bcm-color-grey-1)}input[type=checkbox]:checked+label:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}";
+
+const BcmOldTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkedChange = createEvent(this, "bcm-old-tag-checked-change", 7);
+    this.tagDissmisable = createEvent(this, "bcm-old-tag-dissmisable", 7);
+    this.type = 'basic';
+    this.size = 'size-1';
+    this.checked = false;
+    this.color = undefined;
+    this.value = '';
+    this.hidden = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.maxWidth = false;
+    this.customStyle = undefined;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+  }
+  handleClick() {
+    if (this.type === 'checkable') {
+      this.checked = !this.checked;
+    }
+  }
+  onCheckedChange(newValue, oldValue) {
+    this.checkedChange.emit({ newValue, oldValue });
+  }
+  getColor(color) {
+    if ((this.type == 'basic' || this.type == 'dissmisable') && ColorProps[color])
+      return {
+        color: extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: extractColor(ColorPalette, ColorProps[color] + '-3'),
+        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-1')
+      };
+  }
+  getSize(size, returnNumber = false) {
+    if (Number(size) == size) {
+      size = "size-" + size;
+    }
+    if (returnNumber) {
+      size = size.split("-");
+      size = size[size.length - 1];
+      var sizeList = { "1": "12", "2": "14", "3": "16", "4": "20", "5": "24", "6": "30", "7": "38", "8": "46", "9": "56" };
+      size = sizeList[size];
+    }
+    return size;
+  }
+  handleClose() {
+    this.tagDissmisable.emit(this.el);
+    // this.el.remove()
+  }
+  render() {
+    const { type, color, value, customStyle, size } = this;
+    const classes = classnames('tag', this.getSize(size), type);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.maxWidth ? 'maxwidth' : null);
+    if (type === 'add') {
+      return (h(Host, { class: hostClasses }, h("button", { class: classes }, h("span", { class: "left" }, h("bcm-icon", { icon: "far fa-plus" })), value)));
+    }
+    else if (type === 'dissmisable') {
+      return (h(Host, { class: hostClasses }, h("span", { class: classes, style: this.getColor(color) }, h("span", { class: "value", style: customStyle }, value), h("span", { class: "right close-button", onClick: () => this.handleClose(), style: { 'width': (Number(this.getSize(size, true)) + 2) + "px" } }, h("svg", { id: "close", style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }))))));
+    }
+    else if (type === 'checkable') {
+      return (h(Host, { class: hostClasses }, h("input", { type: "checkbox", checked: this.checked }), h("label", { class: classes }, value)));
+    }
+    return (h(Host, { class: hostClasses }, h("span", { class: classes, style: this.getColor(color) }, value)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["onCheckedChange"]
+  }; }
+};
+BcmOldTag.style = oldTagCss;
+
+const selectBoxCss = "@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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.select-box{flex:1}:host{z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;visibility:hidden !important;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.show){opacity:1;z-index:100000;visibility:visible !important}";
+
+const BcmSelectBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+    this.isShow = false;
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  handleChangeEvent(event) {
+    event.stopPropagation();
+  }
+  render() {
+    const classes = classnames('select-box');
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'show': this.isShow,
+    });
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("bcm-listbox", { id: "listbox-box" + this._internal_id, class: "listbox-box", _internal_id: this._internal_id, "inner-component": true, "no-caption": true, fullWidth: true, _flex: "true" }))));
+  }
+  get el() { return getElement(this); }
+};
+BcmSelectBox.style = selectBoxCss;
+
+export { BcmOldTag as bcm_old_tag, BcmSelectBox as bcm_select_box };

package/dist/esm/bcm-overlay_2.entry.js

@@ -3,9 +3,9 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host } from './index-0615c2b8.js';
-import { c as classnames } from './index-00c8a8f7.js';
-import { c as colors } from './colors-ed4e7579.js';
-import './_commonjsHelpers-7002e5de.js';
+import { c as classnames } from './index-f549811f.js';
+import { c as colors } from './colors-dd598eea.js';
+import './_commonjsHelpers-82aa9212.js';
 
 const BcmOverlay = class {
   constructor(hostRef) {