bromcom-ui 2.9.1-rc.0 → 2.9.1-rc.1

package/dist/cjs/bcm-label_2.cjs.entry.js

@@ -0,0 +1,126 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const generate = require('./generate-efeda203.js');
+const bcm = require('./bcm-9e47c4b2.js');
+const labelTemplate = require('./label-template-d531dfb7.js');
+require('./color-helper-c3a819ea.js');
+require('./datetime-helper-eaf4fadb.js');
+require('./number-helper-b178b610.js');
+require('./string-helper-4cd32dbb.js');
+require('./validators-2adde99d.js');
+const tooltipHelper = require('./tooltip-helper-f828ebee.js');
+require('./element-dragger-a8562f82.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-2899048c.js');
+require('./colors-078851ec.js');
+require('./slot-template-46018683.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./floating-ui-4a2c2bd4.js');
+
+const labelCss = "@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}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}";
+
+const BcmLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.required = false;
+    this.value = undefined;
+    this.size = "medium";
+    this.form = undefined;
+    this.htmlFor = undefined;
+    this.hidden = false;
+    this.type = bcm.Bcm$1.Status.default;
+    this.tooltip = undefined;
+  }
+  render() {
+    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
+    const hostClasses = index$1.classnames('bcm-label', { hidden });
+    const Label = (index.h(labelTemplate.LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
+    return (index.h(index.Host, { class: hostClasses }, Label, tooltip && (index.h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, index.h("bcm-icon", { icon: "far fa-question-circle" })))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmLabel.style = labelCss;
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmTooltipShow = index.createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = index.createEvent(this, "bcmTooltipHide", 7);
+    this._id = generate.Generate.UID();
+    this.message = "";
+    this.placement = bcm.Bcm.Placement.top;
+    this.trigger = bcm.Bcm.TriggerType.click;
+    this.open = false;
+    this.color = "slate";
+    this.size = bcm.Bcm.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    this.tooltip = new tooltipHelper.Tooltip({
+      targetId: this.targetId || this._id,
+      message: this.message,
+      placement: this.placement,
+      color: this.color,
+      trigger: this.trigger,
+      size: this.size,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.tooltip.listener();
+  }
+  componentDidRender() {
+    this.tooltip.message = this.message;
+    this.tooltip.placement = this.placement;
+    this.tooltip.color = this.color;
+    this.tooltip.trigger = this.trigger;
+    this.tooltip.size = this.size;
+    this.tooltip.openDelay = this.openDelay;
+    this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.autoHide = this.autoHide;
+    this.tooltip.update();
+  }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
+  async show() {
+    this.tooltip.show();
+  }
+  async hide() {
+    this.tooltip.hide();
+  }
+  async toggle() {
+    this.tooltip.toggle();
+  }
+  render() {
+    return (index.h(index.Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.bcm_label = BcmLabel;
+exports.bcm_tooltip = BcmTooltip;

package/dist/cjs/bcm-link.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const bcm = require('./bcm-7f703055.js');
+const bcm = require('./bcm-9e47c4b2.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 
 const linkCss = "@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}*{box-sizing:border-box}.bcm-link{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline;color:var(--bcm-new-ds-color-blue-500)}.bcm-link.hidden{display:none}.bcm-link.disabled{pointer-events:none;opacity:0.5;cursor:not-allowed}.bcm-link__anchor{display:inline-flex;align-items:baseline;font-size:inherit;color:inherit}.bcm-link__anchor.prefix .prefix-icon{margin-right:4px}.bcm-link__anchor.suffix .suffix-icon{margin-left:4px}.bcm-link__anchor:hover,.bcm-link__anchor:focus,.bcm-link__anchor:active,.bcm-link__anchor:focus-visible{outline:none}.bcm-link__anchor:hover{color:var(--bcm-new-ds-color-blue-600)}.bcm-link__anchor:active{color:var(--bcm-new-ds-color-blue-700)}.bcm-link__anchor:focus-visible{color:var(--bcm-new-ds-color-blue-800)}";
@@ -21,7 +21,7 @@ const BcmLink = class {
     this.target = undefined;
     this.icon = undefined;
     this.disabled = false;
-    this.iconPosition = bcm.Bcm.IconPosition.prefix;
+    this.iconPosition = bcm.Bcm$1.IconPosition.prefix;
   }
   handleOnClick(e) {
     if (this.disabled) {
@@ -42,7 +42,7 @@ const BcmLink = class {
       'suffix': this.linkIsExternal(href)
     });
     const ElementTagType = href ? 'a' : 'span';
-    return (index.h(index.Host, { disabled: disabled, class: hostClasses }, index.h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === bcm.Bcm.IconPosition.prefix && index.h("bcm-icon", { class: "prefix-icon", icon: icon }), index.h("slot", null), this.linkIsExternal(href) && index.h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (index.h(index.Host, { disabled: disabled, class: hostClasses }, index.h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === bcm.Bcm$1.IconPosition.prefix && index.h("bcm-icon", { class: "prefix-icon", icon: icon }), index.h("slot", null), this.linkIsExternal(href) && index.h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/bcm-linked_2.cjs.entry.js

@@ -0,0 +1,289 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-c3a819ea.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-efeda203.js');
+require('./number-helper-b178b610.js');
+require('./string-helper-4cd32dbb.js');
+require('./validators-2adde99d.js');
+require('./element-dragger-a8562f82.js');
+const utils = require('./utils-fc077139.js');
+const floatingUi = require('./floating-ui-4a2c2bd4.js');
+const bcm = require('./bcm-9e47c4b2.js');
+const index$1 = require('./index-5279dea2.js');
+require('./colors-56282b00.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-2899048c.js');
+
+const BcmLinked = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmOpen = index.createEvent(this, "bcm-open", 7);
+    this._id = generate.Generate.UID();
+    this.placement = bcm.Bcm.Placement["bottom-start"];
+    this.trigger = bcm.Bcm.TriggerType.click;
+    this.targetId = "";
+    this.height = undefined;
+    this.maxHeight = undefined;
+    this.minHeight = "50px";
+    this.isOpen = false;
+    this.hideDelay = 500;
+    this.isMouseOverLink = false;
+    window.addEventListener("scroll", () => this.calculatePosition(), true);
+    window.addEventListener("wheel", () => this.calculatePosition(), true);
+    window.addEventListener("resize", () => this.calculatePosition(), true);
+  }
+  target() {
+    const target = document.querySelectorAll(`[id="${this.targetId}"]`);
+    if (target.length > 0) {
+      target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
+      return target[0];
+    }
+    else {
+      // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
+      this.el.remove();
+      return null;
+    }
+  }
+  detectClone() {
+    const linked = document.querySelectorAll(`[target-id="${this.targetId}"]`);
+    if (linked.length > 0) {
+      linked.forEach((item) => {
+        if (item.id !== this._id) {
+          console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" is duplicated.`);
+          item.remove();
+        }
+      });
+    }
+  }
+  dismissEvent() {
+    document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
+  }
+  checkDataDismiss(e) {
+    generate.Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
+  }
+  hideChildLinked() {
+    this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
+      var _a;
+      (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
+    });
+  }
+  calculatePosition() {
+    const el = this.el;
+    if (el && this.target()) {
+      if (this.isOpen) {
+        floatingUi.FloatingUI({
+          ref: this.target(),
+          floating: el,
+          placement: this.placement,
+          offset: 4,
+          autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
+          autoSize: true,
+          style: {
+            height: this.height,
+            maxHeight: this.maxHeight,
+            minHeight: this.minHeight,
+          },
+        });
+      }
+      else {
+        el.style.visibility = "hidden";
+        el.style.opacity = "0";
+      }
+    }
+  }
+  init() {
+    const target = this.target();
+    this.trigger === bcm.Bcm.TriggerType.hover && this.listenMouseOver();
+    if (target) {
+      target.setAttribute("is-linked", this.el.id);
+      if (!generate.Generate.getAncestor(target, "bcm-linked")) {
+        this.el.setAttribute("main-linked", "true");
+      }
+      else {
+        this.el.removeAttribute("main-linked");
+      }
+    }
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  triggerWatch(newValue) {
+    if (newValue === bcm.Bcm.TriggerType.hover) {
+      this.listenMouseOver();
+    }
+  }
+  watchIsOpen() {
+    this.bcmOpen.emit(this.isOpen);
+  }
+  onLinkedDataDismis() {
+    this.hide(false);
+  }
+  onBcmFloatingIsHide(e) {
+    if (e.detail.id === this._id) {
+      this.hide(false);
+    }
+  }
+  async show(wait = true) {
+    wait && (await utils.delay(50));
+    this.detectClone();
+    const target = this.target();
+    if (target) {
+      const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
+      bcmOverlayContainer.appendChild(this.el);
+      target.setAttribute("linked-is-open", "true");
+      this.isOpen = true;
+      this.calculatePosition();
+    }
+    else {
+      this.hide(false);
+    }
+    return this.isOpen;
+  }
+  async hide(wait = true) {
+    wait && (await utils.delay(50));
+    const target = this.target();
+    this.isMouseOverLink = false;
+    if (target) {
+      target.removeAttribute("linked-is-open");
+      this.hideChildLinked();
+      this.isOpen = false;
+    }
+    return this.isOpen;
+  }
+  async toggle(wait = true) {
+    return this.isOpen ? await this.hide(wait) : await this.show(wait);
+  }
+  clickListener(e) {
+    if (!this.target())
+      return;
+    if (this.trigger === bcm.Bcm.TriggerType.hover || this.trigger === bcm.Bcm.TriggerType.custom)
+      return;
+    const isTarget = generate.Generate.findEventPath(e, this.target());
+    const isSelf = generate.Generate.findEventPath(e, this.el);
+    const isLinked = generate.Generate.findEventPathWithNodeName(e, "BCM-LINKED");
+    if (!isTarget && !isSelf && !isLinked) {
+      this.hide();
+      this.bcmOpen.emit(this.isOpen);
+      return;
+    }
+    if (this.isOpen) {
+      isTarget && this.hide(false);
+      isSelf && this.checkDataDismiss(e);
+      if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
+        this.dismissEvent();
+      }
+    }
+    else {
+      isTarget && this.show(false);
+    }
+  }
+  listenMouseOver() {
+    var _a, _b;
+    this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
+    this.el.addEventListener("mouseleave", () => {
+      this.isMouseOverLink = false;
+      this.handleMouseLeave();
+    });
+    (_a = this.target()) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseenter", this.handleMouseEnter.bind(this));
+    (_b = this.target()) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+  }
+  handleMouseLeave() {
+    setTimeout(() => {
+      !this.isMouseOverLink && this.hide();
+    }, this.hideDelay);
+  }
+  handleMouseEnter() {
+    clearTimeout(this.timeoutId);
+    this.isMouseOverLink = false;
+    this.show();
+  }
+  render() {
+    const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
+    return (index.h(index.Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "trigger": ["triggerWatch"],
+    "isOpen": ["watchIsOpen"]
+  }; }
+};
+
+const skeletonStyle = index$1.ce({
+  slots: {
+    host: "tw-bg-gray-200 tw-w-full tw-inline-block",
+  },
+  variants: {
+    variant: {
+      rect: {
+        host: "tw-rounded-md",
+      },
+      circle: {
+        host: "tw-rounded-full tw-w-8 tw-h-8",
+      },
+    },
+    effect: {
+      pulse: {
+        host: "tw-animate-pulse",
+      },
+      ping: {
+        host: "tw-animate-ping",
+      },
+      none: {
+        host: "tw-animate-none",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "rect",
+    effect: "pulse",
+  },
+});
+
+const skeletonCss = "@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([hidden]){display:none}:host{display:block;position:relative;overflow:hidden}";
+
+const BcmSkeleton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.items = [];
+    this._id = generate.Generate.UID();
+    this.effect = "pulse";
+    this.variant = "rect";
+    this.count = 1;
+    this.hidden = false;
+    this.width = null;
+    this.height = "16px";
+    this.marginBottom = null;
+    this.customStyles = {};
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  componentWillUpdate() {
+    this.init();
+  }
+  init() {
+    this.items.length = this.count;
+    this.items.fill(1);
+  }
+  render() {
+    const { variant, effect, width, height, marginBottom, customStyles } = this;
+    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, (width ? { width } : {})), (height ? { height } : {})), (marginBottom ? { marginBottom } : {})), (typeof customStyles === "string" ? JSON.parse(customStyles) : customStyles));
+    const { host } = skeletonStyle({ variant, effect });
+    return (index.h(index.Host, null, this.items.map((_, index$1) => {
+      return index.h("div", { role: "status", part: "base", key: index$1, class: host(), "aria-busy": "true", "aria-live": "polite", style: style });
+    })));
+  }
+};
+BcmSkeleton.style = skeletonCss;
+
+exports.bcm_linked = BcmLinked;
+exports.bcm_skeleton = BcmSkeleton;

package/dist/cjs/bcm-list_3.cjs.entry.js

@@ -8,27 +8,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const jsonParseDecarator = require('./json-parse-decarator-7529151b.js');
+const jsonParseDecarator = require('./json-parse-decarator-7d2677f0.js');
 require('./color-helper-c3a819ea.js');
-const validators = require('./validators-9b9662d9.js');
-const generate = require('./generate-7bd78318.js');
-const numberHelper = require('./number-helper-6c8e0d90.js');
-const stringHelper = require('./string-helper-fda7cbba.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-efeda203.js');
+const numberHelper = require('./number-helper-b178b610.js');
+const stringHelper = require('./string-helper-4cd32dbb.js');
+const validators = require('./validators-2adde99d.js');
 require('./element-dragger-a8562f82.js');
-const popoverPlacement = require('./popover-placement-f20020a6.js');
+const popoverPlacement = require('./popover-placement-4156a9ec.js');
 const utils = require('./utils-fc077139.js');
-const bcm = require('./bcm-7f703055.js');
+const bcm = require('./bcm-9e47c4b2.js');
 const captionTemplate = require('./caption-template-81dbc490.js');
 const index = require('./index-95ae50d0.js');
 require('./types-cc4adee7.js');
 require('./types-7523fd99.js');
 const index$2 = require('./index-d321de96.js');
-const index$3 = require('./index-7eed931f.js');
-const inputTemplate = require('./input-template-4952273e.js');
+const index$3 = require('./index-e05a7c6f.js');
+const index$4 = require('./index-3d67f613.js');
+const inputTemplate = require('./input-template-c1e96592.js');
 require('./colors-56282b00.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-21f7555f.js');
+require('./package-2899048c.js');
 
 const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
   // if ( indeterminate ) {
@@ -37,7 +39,7 @@ const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate
   const hostClasses = index.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
     // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
     // 'size-3': optionType === 'button' && size === Bcm.Size.large,
-    'error': captionType == bcm.Bcm.Status.error,
+    'error': captionType == bcm.Bcm$1.Status.error,
     hidden,
     checked,
     disabled,
@@ -821,22 +823,22 @@ class ListKeyControl extends KeyControl {
   }
   keyDown() {
     switch (this.getKeyCode()) {
-      case bcm.Bcm.KeyCode.up:
+      case bcm.Bcm$1.KeyCode.up:
         this.keyUpControl();
         break;
-      case bcm.Bcm.KeyCode.down:
+      case bcm.Bcm$1.KeyCode.down:
         this.keyDownControl();
         break;
-      case bcm.Bcm.KeyCode.left:
+      case bcm.Bcm$1.KeyCode.left:
         this.keyLeftControl();
         break;
-      case bcm.Bcm.KeyCode.right:
+      case bcm.Bcm$1.KeyCode.right:
         this.keyRightControl();
         break;
-      case bcm.Bcm.KeyCode.enter:
+      case bcm.Bcm$1.KeyCode.enter:
         this.keyEnterControl();
         break;
-      case bcm.Bcm.KeyCode.space:
+      case bcm.Bcm$1.KeyCode.space:
         this.keySpaceControl();
         break;
     }
@@ -862,12 +864,12 @@ const BcmList = class {
     this.bcmChecklist = index$1.createEvent(this, "bcm-checklist", 7);
     this.bcmSelected = index$1.createEvent(this, "bcm-selected", 7);
     this.change = index$1.createEvent(this, "bcm-change", 7);
-    this.open = index$1.createEvent(this, "bcm-open", 7);
-    this.close = index$1.createEvent(this, "bcm-close", 7);
+    this.open = index$1.createEvent(this, "bcm-open", 3);
+    this.close = index$1.createEvent(this, "bcm-close", 3);
     this.debounce = null;
     this.debounceHandler = generate.Generate.debounceInput(() => this.listenResize(), 300, false);
     this._id = generate.Generate.UID();
-    this.type = bcm.Bcm$1.ListType.listbox;
+    this.type = bcm.Bcm.ListType.listbox;
     this.treeview = false;
     this.checkboxes = false;
     this.searchable = false;
@@ -875,7 +877,7 @@ const BcmList = class {
     this.inputText = undefined;
     this.name = undefined;
     this.label = undefined;
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.disabled = false;
     this.readonly = false;
     this.highlight = false;
@@ -908,7 +910,7 @@ const BcmList = class {
     this.clearable = false;
     this.caption = undefined;
     this.noCaption = false;
-    this.captionType = bcm.Bcm$1.Status.default;
+    this.captionType = bcm.Bcm.Status.default;
     this.captionError = undefined;
     this.emptyText = undefined;
     this.emptyIcon = "fad fa-folder-open";
@@ -934,10 +936,10 @@ const BcmList = class {
       checked: false,
       disabled: false,
       icon: "",
-      status: bcm.Bcm$1.Status.default,
+      status: bcm.Bcm.Status.default,
       indeterminate: "uncheck",
     };
-    this.placement = bcm.Bcm$1.Placement["bottom-start"];
+    this.placement = bcm.Bcm.Placement["bottom-start"];
     this.disableChangeEvent = false;
     this.data = [];
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
@@ -1219,7 +1221,7 @@ const BcmList = class {
   //keyboard navigation
   handleKeyDown(ev) {
     const keycode = ev.keyCode || ev.which;
-    if (keycode === bcm.Bcm$1.KeyCode.escape) {
+    if (keycode === bcm.Bcm.KeyCode.escape) {
       if (this.isOpen) {
         this.isOpen = false;
         ev.preventDefault();
@@ -1567,7 +1569,7 @@ const BcmList = class {
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = index.classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
-      "error": this.captionType == bcm.Bcm$1.Status.error,
+      "error": this.captionType == bcm.Bcm.Status.error,
       "full-width": fullWidth,
       "bcm-list__linked": this.linkedComponent,
       hidden,
@@ -1576,7 +1578,7 @@ const BcmList = class {
     });
     const bcmListContainer = index.classnames("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
       "is-open": this.isOpen && this.calculatedViewport,
-      "error": this.captionType == bcm.Bcm$1.Status.error,
+      "error": this.captionType == bcm.Bcm.Status.error,
       "full-width": fullWidth,
       hidden,
       readonly,
@@ -1826,7 +1828,7 @@ function InternalItem(props, ref) {
     ref: ref
   }), childNode);
   if (responsive) {
-    itemNode = /*#__PURE__*/index$3.react.createElement(index$3.RefResizeObserver, {
+    itemNode = /*#__PURE__*/index$3.react.createElement(index$4.RefResizeObserver, {
       onResize: function onResize(_ref) {
         var offsetWidth = _ref.offsetWidth;
         internalRegisterSize(offsetWidth);
@@ -1841,7 +1843,7 @@ Item.displayName = 'Item';
 
 function channelUpdate(callback) {
   if (typeof MessageChannel === 'undefined') {
-    index$3.wrapperRaf(callback);
+    index$4.wrapperRaf(callback);
   } else {
     var channel = new MessageChannel();
     channel.port1.onmessage = function () {
@@ -1884,7 +1886,7 @@ function useEffectState(notifyEffectUpdate, defaultValue) {
     stateValue = _React$useState2[0],
     setStateValue = _React$useState2[1];
   // Set State
-  var setEffectVal = index$3.useEvent(function (nextValue) {
+  var setEffectVal = index$4.useEvent(function (nextValue) {
     notifyEffectUpdate(function () {
       setStateValue(nextValue);
     });
@@ -2075,7 +2077,7 @@ function Overflow(props, ref) {
   function getItemWidth(index) {
     return itemWidths.get(getKey(mergedData[index], index));
   }
-  index$3.useLayoutEffect(function () {
+  index$4.useLayoutEffect(function () {
     if (mergedContainerWidth && typeof mergedRestWidth === 'number' && mergedData) {
       var totalWidth = suffixWidth;
       var len = mergedData.length;
@@ -2188,7 +2190,7 @@ function Overflow(props, ref) {
     style: suffixStyle
   }), suffix));
   if (isResponsive) {
-    overflowNode = /*#__PURE__*/index$3.react.createElement(index$3.RefResizeObserver, {
+    overflowNode = /*#__PURE__*/index$3.react.createElement(index$4.RefResizeObserver, {
       onResize: onOverflowResize,
       disabled: !shouldResponsive
     }, overflowNode);
@@ -2426,7 +2428,7 @@ const BcmSearch = class {
     this.disabled = false;
     this.readonly = false;
     this.clearable = true;
-    this.size = bcm.Bcm.Size.medium;
+    this.size = bcm.Bcm$1.Size.medium;
     this.limit = 10;
     this.searchIsOnlyChilds = false;
     this.minSearchLength = 2;