bromcom-ui 2.12.3 → 3.0.0-alpha.0

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

@@ -1,393 +0,0 @@
-/*!
- * 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

@@ -1,140 +0,0 @@
-/*!
- * 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 };