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

package/dist/esm/bcm-form-2.entry.js

@@ -1,208 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { I as IsLoad } from './is-load-decorator-8277e3b8.js';
-import { G as Generate, s as snq } from './generate-c2c0b02e.js';
-import { S as StringHelper } from './string-helper-3592bdc2.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
-import './package-28dc6847.js';
-import './colors-c530a5b8.js';
-import './_commonjsHelpers-82aa9212.js';
-
-const BcmFormComponents = [
-  'BCM-INPUT',
-  'BCM-TEXTAREA',
-  'BCM-SWITCH',
-  'BCM-CHECKBOX',
-  'BCM-RADIO-GROUP',
-  'BCM-CHECKBOX-GROUP',
-  'BCM-RANGE',
-  'BCM-FORM',
-  'BCM-FORM-GROUP',
-  'BCM-LIST',
-  'BCM-COLORPICKER',
-  'BCM-DATE',
-  'BCM-DATE-PICKER',
-  'BCM-TIME-PICKER',
-  'BCM-DATETIME-PICKER',
-  'BCM-SELECT',
-  'BCM-LISTBOX',
-  'BCM-CHIP-GROUP',
-  'BCM-INPUT-DROPDOWN'
-  //... to be added to v3
-];
-
-const form2Css = "@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}:host{display:block}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmForm2 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bcmForm = createEvent(this, "bcm-form", 7);
-    this.isLoad = false;
-    this.formData = {};
-    this.formObj = new Map();
-    this._id = Generate.UID();
-    this.validation = false;
-  }
-  componentDidLoad() {
-    this.isLoad = true;
-    forceUpdate(this);
-  }
-  componentIsValid(element) {
-    if (!element.hidden) {
-      this.checkIsGroup(element);
-      const noValid = ['bcm-checkbox', 'bcm-switch'].includes(StringHelper.lowercase(element.tagName)) ? element.value == false : StringHelper.isNullOrEmpty(element.value);
-      if (element.required) {
-        if (noValid) {
-          element.captionError = Bcm.FormErrorMessages.required;
-          element.captionType = 'error';
-          this.formObj.set(element.id, {
-            name: element.name,
-            valid: false,
-            errorDetails: element.captionError,
-          });
-        }
-        else {
-          element.captionError = null;
-          element.captionType = 'default';
-          this.formObj.delete(element.id);
-        }
-      }
-    }
-  }
-  isGroup(el) {
-    return ['bcm-checkbox-group'].includes(StringHelper.lowercase(el.tagName));
-  }
-  checkIsGroup(element) {
-    if (this.isGroup(element)) {
-      for (let checkbox of Array.from(element.querySelectorAll('bcm-checkbox'))) {
-        checkbox && this.componentIsValid(checkbox);
-      }
-    }
-  }
-  changeCheckboxGroup(event) {
-    const element = event.target;
-    const { changed } = event.detail;
-    const checkboxes = Array.from(element.querySelectorAll('bcm-checkbox'));
-    for (let checkbox of checkboxes) {
-      if (checkbox.id == changed.element.id) {
-        checkbox.value = changed.event.value;
-        this.componentIsValid(checkbox);
-      }
-    }
-  }
-  bcmComponentList() {
-    return snq(() => Array.from(this.el.querySelectorAll('*'))
-      .filter(item => BcmFormComponents.includes(item.tagName) && (!item['s-hn'] || item['s-hn'] == 'BCM-FORM-2'))
-      .filter(Boolean), []);
-  }
-  formResponse() {
-    const formRespObj = {
-      formData: this.formData,
-      isValid: this.formObj.size == 0,
-      errorDetails: Object.assign({}, (this.formObj.size > 0 &&
-        Array.from(this.formObj).map(([_, value]) => ({
-          [value.name]: value.errorDetails,
-        })))),
-      message: this.formObj.size == 0 ? '' : 'Please fill in all inputs',
-    };
-    this.bcmForm.emit(formRespObj);
-    return formRespObj;
-  }
-  async setMethodType(type) {
-    const { isLoad, validation } = this;
-    if (isLoad) {
-      for (const component of this.bcmComponentList()) {
-        try {
-          await component[type]();
-          type == 'setClear' && validation && (this.componentIsValid(component));
-        }
-        catch (e) {
-          console.error(component.nodeName, type, e);
-        }
-      }
-    }
-    return Promise.resolve();
-  }
-  async submit() {
-    const { isLoad, validation } = this;
-    if (isLoad) {
-      for (const item of this.bcmComponentList()) {
-        const { name, value } = item;
-        this.formData[name] = StringHelper.isNullOrEmpty(value) ? null : value;
-        validation && this.componentIsValid(item);
-      }
-    }
-    return Promise.resolve(this.formResponse());
-  }
-  async set(data) {
-    var _a, _b, _c;
-    if (this.isLoad && data && ((_a = this.bcmComponentList()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      for (let key of Object.keys(data)) {
-        const element = (_c = (_b = this.bcmComponentList()) === null || _b === void 0 ? void 0 : _b.find((item) => item.name == key)) !== null && _c !== void 0 ? _c : {};
-        if (element) {
-          try {
-            await element.set(data[key]);
-            this.componentIsValid(element);
-          }
-          catch (error) {
-            console.warn('set: ', key, element.nodeName);
-          }
-        }
-      }
-    }
-  }
-  async get() {
-    var _a;
-    let form = {};
-    if (((_a = this.bcmComponentList()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      for (let element of this.bcmComponentList()) {
-        const value = await element.get();
-        form = Object.assign(Object.assign({}, form), { [element.name]: StringHelper.isNullOrEmpty(value) ? null : value });
-      }
-    }
-    return Promise.resolve(form);
-  }
-  async resetCaption() {
-    return Promise.resolve(await this.setMethodType('resetCaption'));
-  }
-  async setClear() {
-    this.formData = {};
-    this.formObj = new Map();
-    return Promise.resolve(await this.setMethodType('setClear'));
-  }
-  onChange(event) {
-    const { isLoad, validation } = this;
-    if (isLoad) {
-      const target = event.target;
-      const isBcmElement = target && target.tagName.toLowerCase().startsWith('bcm-');
-      if (validation && isBcmElement) {
-        if (this.isGroup(target))
-          return this.changeCheckboxGroup(event);
-        this.componentIsValid(target);
-      }
-    }
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-__decorate([
-  IsLoad()
-], BcmForm2.prototype, "el", void 0);
-BcmForm2.style = form2Css;
-
-export { BcmForm2 as bcm_form_2 };

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 };