bromcom-ui 2.3.57 → 2.3.58

package/dist/esm/{bcm-button_5.entry.js → bcm-button_11.entry.js}

@@ -1,7 +1,9 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
 import { C as ColorPalette } from './colors-7c7b35e9.js';
-import { g as getChilds, e as extractColor } from './utils-de9aee67.js';
+import { e as extractColor, g as getChilds, d as delay } from './utils-de9aee67.js';
+import { S as StatusProps } from './types-911a8837.js';
+import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.js';
 
 /**
  * 'type' prop variantOption
@@ -241,6 +243,404 @@ const BcmButton = class {
 };
 BcmButton.style = buttonsCss;
 
+/**
+ * '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 checkboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}:host(.indeterminate) label span.icon{position:relative}:host(.indeterminate) label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}:host(.indeterminate) label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}:host(.indeterminate) label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+
+const BcmCheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    /**
+     * Component Properties
+     */
+    this.value = '';
+    this.name = 'checkbox';
+    this.checked = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.hidden = false;
+    this.required = false;
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.noCaption = false;
+    this.captionType = 'default';
+  }
+  /**
+  * @ComponentMethod
+  */
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  async setClear() {
+    if (this.inputElement.checked == true) {
+      this.inputElement.checked = false;
+      this.handleChange();
+    }
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  componentDidLoad() {
+    this.value = this.inputElement.checked;
+    this.checked = this.value;
+  }
+  /**
+   * @desc
+   * @param event
+   * @returns
+   */
+  handleChange() {
+    this.value = this.inputElement.checked;
+    this.checked = this.value;
+    this.change.emit({
+      name: this.name,
+      value: this.value
+    });
+  }
+  handleFocus() {
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.blur.emit();
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {void}
+   */
+  async check(uncheck) {
+    this.inputElement.checked = uncheck;
+    this.handleChange();
+  }
+  getColor(color) {
+    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
+      return {
+        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: extractColor(ColorPalette, ColorProps[color] + '-5'),
+        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-5')
+      };
+  }
+  render() {
+    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    const defaultClasses = classnames();
+    const buttonClasses = classnames('radio-button', buttonStyle, size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+      'checked': checked,
+      'disabled': disabled,
+    });
+    var fontColor = extractColor(ColorPalette, ColorProps[this.color] + '-6');
+    var style = "<style>.radio-button:not(.checked):hover{color: " + fontColor + "} </style>";
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }), optionType == 'button' && (h("span", { innerHTML: style })), h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("span", { class: "icon" }, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), h("span", { class: "slot" }, h("slot", null))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+  }
+  get el() { return getElement(this); }
+};
+BcmCheckbox.style = checkboxCss;
+
+const groupCss = "@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}:host{display:block;width:100%}:host(.hidden){display:none}:host(.error) .label{color:var(--bcm-color-red-6) !important}.group-container{display:flex;gap:24px}.group-container.vertical{gap:unset;flex-direction:column}.group-container.button{gap:unset}.group-container.full-width{max-width:100%}.indeterminate{padding:0 0 16px 0;margin-bottom:16px;border-bottom:1px solid #efefef;}.indeterminate input{display:none}.indeterminate label{display:flex;align-items:center;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.indeterminate label .icon-checked{display:none}.indeterminate span{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px}.indeterminate span:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:0}.indeterminate bcm-icon{filter:brightness(0) invert(1)}.indeterminate input[disabled]+label{cursor:not-allowed}.indeterminate input[disabled]+label span{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.indeterminate input[disabled]+label span:after{background-color:var(--bcm-color-grey-6)}.indeterminate input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.indeterminate input:not([disabled])+label:hover span{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.indeterminate.bcm-uncheck label span{background-color:#ffffff}.indeterminate.bcm-determinate bcm-icon{display:block}.indeterminate.bcm-determinate label span{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.indeterminate.bcm-determinate label span:after{opacity:0}.indeterminate.bcm-indeterminate bcm-icon{display:none !important}.indeterminate.bcm-indeterminate label span{background-color:#ffffff}.indeterminate.bcm-indeterminate label span:after{opacity:1}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:8px}";
+
+const BcmCheckboxGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.groupChange = createEvent(this, "bcm-group-change", 7);
+    this.groupCheckedList = createEvent(this, "bcm-group-checked-list", 7);
+    /**
+     * Private variables
+     */
+    this.checkboxes = [];
+    /**
+     * Component Properties
+     */
+    this.direction = 'horizontal';
+    this.items = [];
+    this.indeterminate = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    this.label = null;
+    this.gap = null;
+    this.fullWidth = "false";
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.noCaption = false;
+    this.captionType = 'default';
+    /**
+     * Component State Variables
+     */
+    this.indeterminateState = 'uncheck';
+    this.checkboxesProp = [];
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.parseItems(this.items);
+    this.parseOptions();
+  }
+  /**
+   * @ComponentMethod
+   */
+  connectedCallback() { }
+  componentDidLoad() {
+    let checkboxesInit = [];
+    checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      if (this.fullWidth != "false") {
+        if (this.fullWidth === "flex") {
+          checkbox.style.flex = "auto";
+        }
+        else {
+          checkbox.style.width = "100%";
+        }
+      }
+      this.optionType && (checkbox.optionType = this.optionType);
+      this.buttonStyle && (checkbox.buttonStyle = this.buttonStyle);
+      this.size && (checkbox.size = this.size);
+      // this.required == true && checkbox.required == true && (
+      //     checkbox.required = true
+      // )
+      this.disabled == true && (checkbox.disabled = true);
+    });
+    this.groupChecked().then(values => this.value = values);
+  }
+  async setClear() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.setClear();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  async resetCaption() {
+    const checkboxesInit = this.getAllInputs();
+    checkboxesInit.map(checkbox => {
+      checkbox.resetCaption();
+      checkbox.noCaption = this.noCaption;
+    });
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentDidRender() {
+    let slotElements;
+    slotElements = this.el.shadowRoot.querySelector('slot').assignedElements();
+    this.checkboxes = [];
+    // Get only bcm-checkbox elements from 
+    // slot childs
+    slotElements.map(element => {
+      String(element.tagName).toLowerCase() == 'bcm-checkbox'
+        && this.checkboxes.push(element);
+    });
+    this.setIndeterminateState();
+    if (this.items.length > 0) {
+      let checkboxesInit = [];
+      checkboxesInit = this.getAllInputs();
+      checkboxesInit.map(checkbox => {
+        this.defaultValueState && (this.defaultValueState.find(e => e === checkbox.name) && checkbox.check(checkbox.name));
+      });
+    }
+  }
+  componentDidUpdate() {
+    this.handleChange();
+  }
+  /**
+   * @desc
+   */
+  inputChange() {
+    this.groupChecked().then(values => this.value = values);
+    this.setIndeterminateState();
+  }
+  /**
+   * @desc Returns merged slot and prop
+   * checkbox items
+   * @returns {Array<BcmCheckbox>}
+   */
+  getAllInputs() {
+    return [
+      ...this.checkboxes,
+      ...this.el.shadowRoot.querySelectorAll('bcm-checkbox')
+    ];
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  setIndeterminateState() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    this.getAllInputs().map((checkbox) => {
+      checkbox.checked && (allUnchecked = false);
+      !checkbox.checked && (allChecked = false);
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    this.indeterminateState = state;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  indeterminateClick() {
+    if (this.disabled == false) {
+      let checkAll = true;
+      if (this.indeterminateState == 'determinate') {
+        checkAll = false;
+      }
+      this.getAllInputs().map((checkbox) => {
+        checkbox.check(checkAll);
+      });
+    }
+  }
+  parseOptions() {
+    if (this.defaultValue) {
+      this.defaultValueState = JSON.parse(this.defaultValue);
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.checkboxesProp = JSON.parse(newValue)
+        : this.checkboxesProp = newValue;
+    }
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async check(options) {
+    if (options) {
+      typeof options == 'string'
+        ? options = JSON.parse(options)
+        : options = options;
+    }
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    const inBoth = (list1, list2) => list1.filter(a => true === list2.some(b => a.name === b.name));
+    let optionsArray = options;
+    inBoth(checkboxes, options).map(item => {
+      item.check(optionsArray.find(x => x.name === item.name).checked);
+    });
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {boolean | Array<any>}
+   */
+  async groupChecked(name) {
+    let retVal = null;
+    let checkeds = {};
+    let checkboxes = [];
+    if (typeof retVal != 'boolean' && !retVal) {
+      retVal = checkeds;
+    }
+    // Merge slotted items with prop items
+    // #
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      !checkbox.checked && (checkeds[checkbox.name] = {
+        value: false,
+        name: checkbox.name
+      });
+      if (checkbox.name === name) {
+        retVal = checkbox.checked;
+      }
+    });
+    return retVal;
+  }
+  handleChange() {
+    let checkeds = {};
+    let changes = {};
+    let checkboxes = [];
+    checkboxes = this.getAllInputs();
+    checkboxes.map(checkbox => {
+      checkbox.checked && (checkeds[checkbox.name] = {
+        value: true,
+        name: checkbox.name
+      });
+      changes[checkbox.name] = {
+        value: checkbox.checked ? true : false,
+        name: checkbox.name
+      };
+    });
+    this.groupChange.emit(changes);
+    this.groupCheckedList.emit(checkeds);
+  }
+  render() {
+    const { checkboxesProp, indeterminate, disabled, label, required, captionType } = this;
+    const groupContainerClasses = classnames('group-container', this.direction, this.optionType, this.fullWidth, {
+      'full-width': this.fullWidth
+    });
+    const indeterminateClasses = classnames('indeterminate', 'bcm-' + this.indeterminateState, {
+      'disabled': disabled
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    var customStyle = {};
+    this.gap && (customStyle = { 'gap': this.gap });
+    return (h(Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), indeterminate && (h("div", { class: indeterminateClasses }, h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }), h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() }, h("span", null, h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), "Check All"))), h("div", { class: groupContainerClasses, style: customStyle }, checkboxesProp && this.checkboxesProp.map((checkbox) => h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, required: this.required === true && checkbox.required === true && (true), noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "defaultValue": ["parseOptions"],
+    "items": ["parseItems"]
+  }; }
+};
+BcmCheckboxGroup.style = groupCss;
+
 // /**
 //  * 
 //  * @param type 
@@ -6325,7 +6725,7 @@ const BcmInput = class {
     const inputClass = size === 'large' ? 'size-3' : 'size-2';
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
     const hostClasses = classnames(this.hidden ? 'hidden' : null, this.noMargin ? 'no-margin' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("label", { htmlFor: this.inputId, class: "label size-1" }, " ", label, " ", required && ('*'), " "), 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' :
+    return (h(Host, { class: hostClasses }, h("div", { class: containerClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.inputId })), h("div", { class: baseClasses }, h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), unitPrefix && h("span", { class: classnames(inputClass, 'unit-prefix') }, unitPrefix)), h("input", { "bcm-internal-id": this._id, id: this.inputId, class: inputClass, ref: el => (this.inputElement = el), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onInput: this.handleInput, maxLength: this.maxLength, type: type === 'password' && isPasswordVisible ? 'text' :
         type === 'number' ? 'text' : type, placeholder: placeholder, value: type === 'number' && !this.hasFocus
         ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '')
         : value, disabled: this.disabled, readonly: this.readonly }), clearable && !this.disabled && (h("button", { class: "input-clear-button", onClick: this.handleClear }, h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes$1[size], color: "grey-7" }))), type === 'password' && passwordToggle && (h("button", { class: "input-password-toggle", onClick: this.changePasswordVisibility }, h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes$1[size], color: "grey-7" }))), Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix default-icon" }, h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes$1[size], color: "grey-7" }))), type === 'number' && (h("div", { class: classnames('caret-container', { 'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0 }, { 'disabled': inValid }, { 'disabled': readonly }) }, h("span", { class: "caret", onClick: inValid == false && this.incrementNumber }, h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })), h("span", { class: "caret", onClick: inValid == false && this.decrementNumber }, h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))), type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" })))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
@@ -6339,6 +6739,644 @@ const BcmInput = class {
 };
 BcmInput.style = inputCss;
 
+class Generate {
+}
+Generate.UID = () => Math.random().toString(36).substr(2, 9);
+Generate.getIconAttrWithStatusType = (status, loading = false) => {
+  if (loading)
+    return { icon: 'loading', color: 'blue-6' };
+  switch (status) {
+    case StatusProps.info:
+      return { color: 'blue-6', icon: 'info-circle' };
+    case StatusProps.error:
+      return { color: 'red-6', icon: 'close-circle' };
+    case StatusProps.warning:
+      return { color: 'warmyellow-6', icon: 'exclamation-circle' };
+    case StatusProps.success:
+      return { color: 'green-6', icon: 'check-circle' };
+  }
+};
+Generate.createComponent = (element, props) => {
+  let box = document.createElement(element);
+  Object.keys(props).forEach(key => {
+    box[key] = props[key];
+  });
+  document.body.appendChild(box);
+  return box;
+};
+Generate.debounceInput = (func, wait, immediate) => {
+  let timeout;
+  return function () {
+    let context = this, args = arguments;
+    let later = function () {
+      timeout = null;
+      if (!immediate)
+        func.apply(context, args);
+    };
+    let callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow)
+      func.apply(context, args);
+  };
+};
+Generate.flatArray = (arr) => {
+  return arr.reduce((acc, val) => {
+    return acc.concat(Array.isArray(val) ? Generate.flatArray(val) : val);
+  }, []);
+};
+
+var Bcm;
+(function (Bcm) {
+  let HtmlElementType;
+  (function (HtmlElementType) {
+    HtmlElementType["div"] = "div";
+    HtmlElementType["span"] = "span";
+    HtmlElementType["button"] = "button";
+    HtmlElementType["a"] = "a";
+    HtmlElementType["input"] = "input";
+    HtmlElementType["textarea"] = "textarea";
+    HtmlElementType["select"] = "select";
+    HtmlElementType["option"] = "option";
+    HtmlElementType["img"] = "img";
+    HtmlElementType["table"] = "table";
+    HtmlElementType["tr"] = "tr";
+    HtmlElementType["td"] = "td";
+    HtmlElementType["th"] = "th";
+    HtmlElementType["tbody"] = "tbody";
+    HtmlElementType["thead"] = "thead";
+    HtmlElementType["tfoot"] = "tfoot";
+    HtmlElementType["ul"] = "ul";
+    HtmlElementType["li"] = "li";
+    HtmlElementType["form"] = "form";
+    HtmlElementType["label"] = "label";
+    HtmlElementType["main"] = "main";
+    HtmlElementType["header"] = "header";
+    HtmlElementType["footer"] = "footer";
+    HtmlElementType["section"] = "section";
+    HtmlElementType["article"] = "article";
+    HtmlElementType["nav"] = "nav";
+    HtmlElementType["aside"] = "aside";
+  })(HtmlElementType = Bcm.HtmlElementType || (Bcm.HtmlElementType = {}));
+  let Status;
+  (function (Status) {
+    Status["info"] = "info";
+    Status["error"] = "error";
+    Status["warning"] = "warning";
+    Status["success"] = "success";
+    Status["default"] = "default";
+  })(Status = Bcm.Status || (Bcm.Status = {}));
+  let Shape;
+  (function (Shape) {
+    Shape["ellipse"] = "ellipse";
+    Shape["square"] = "square";
+  })(Shape = Bcm.Shape || (Bcm.Shape = {}));
+  let Direction;
+  (function (Direction) {
+    Direction["horizontal"] = "horizontal";
+    Direction["vertical"] = "vertical";
+  })(Direction = Bcm.Direction || (Bcm.Direction = {}));
+  let PreDefinedIconSize;
+  (function (PreDefinedIconSize) {
+    PreDefinedIconSize[PreDefinedIconSize["large"] = 48] = "large";
+    PreDefinedIconSize[PreDefinedIconSize["medium"] = 24] = "medium";
+    PreDefinedIconSize[PreDefinedIconSize["default"] = 16] = "default";
+    PreDefinedIconSize[PreDefinedIconSize["small"] = 12] = "small";
+    PreDefinedIconSize[PreDefinedIconSize["xsmall"] = 8] = "xsmall";
+  })(PreDefinedIconSize = Bcm.PreDefinedIconSize || (Bcm.PreDefinedIconSize = {}));
+  let IconSize;
+  (function (IconSize) {
+    IconSize["small"] = "16";
+    IconSize["medium"] = "20";
+    IconSize["large"] = "24";
+  })(IconSize = Bcm.IconSize || (Bcm.IconSize = {}));
+  let Size;
+  (function (Size) {
+    Size["small"] = "small";
+    Size["medium"] = "medium";
+    Size["large"] = "large";
+    Size["xsmall"] = "xsmall";
+    Size["xlarge"] = "xlarge";
+    Size["xxlarge"] = "xxlarge";
+    Size["xxxlarge"] = "xxxlarge";
+  })(Size = Bcm.Size || (Bcm.Size = {}));
+  let Kind;
+  (function (Kind) {
+    Kind["solid"] = "solid";
+    Kind["ghost"] = "ghost";
+    Kind["link"] = "link";
+    Kind["solid-link"] = "solid-link";
+    Kind["ghost-link"] = "ghost-link";
+  })(Kind = Bcm.Kind || (Bcm.Kind = {}));
+  let ButtonType;
+  (function (ButtonType) {
+    ButtonType["button"] = "button";
+    ButtonType["reset"] = "reset";
+    ButtonType["submit"] = "submit";
+  })(ButtonType = Bcm.ButtonType || (Bcm.ButtonType = {}));
+  let IconPosition;
+  (function (IconPosition) {
+    IconPosition["prefix"] = "prefix";
+    IconPosition["suffix"] = "suffix";
+  })(IconPosition = Bcm.IconPosition || (Bcm.IconPosition = {}));
+  let TagType;
+  (function (TagType) {
+    TagType["basic"] = "basic";
+    TagType["add"] = "add";
+    TagType["checkable"] = "checkable";
+    TagType["dissmisable"] = "dissmisable";
+  })(TagType = Bcm.TagType || (Bcm.TagType = {}));
+  let FontSize;
+  (function (FontSize) {
+    FontSize["size-1"] = "size-1";
+    FontSize["size-2"] = "size-2";
+    FontSize["size-3"] = "size-3";
+    FontSize["size-4"] = "size-4";
+    FontSize["size-5"] = "size-5";
+    FontSize["size-6"] = "size-6";
+    FontSize["size-7"] = "size-7";
+    FontSize["size-8"] = "size-8";
+    FontSize["size-9"] = "size-9";
+  })(FontSize = Bcm.FontSize || (Bcm.FontSize = {}));
+  let FontSizeValue;
+  (function (FontSizeValue) {
+    FontSizeValue[FontSizeValue["size-1"] = 12] = "size-1";
+    FontSizeValue[FontSizeValue["size-2"] = 14] = "size-2";
+    FontSizeValue[FontSizeValue["size-3"] = 16] = "size-3";
+    FontSizeValue[FontSizeValue["size-4"] = 20] = "size-4";
+    FontSizeValue[FontSizeValue["size-5"] = 24] = "size-5";
+    FontSizeValue[FontSizeValue["size-6"] = 30] = "size-6";
+    FontSizeValue[FontSizeValue["size-7"] = 38] = "size-7";
+    FontSizeValue[FontSizeValue["size-8"] = 46] = "size-8";
+    FontSizeValue[FontSizeValue["size-9"] = 56] = "size-9";
+  })(FontSizeValue = Bcm.FontSizeValue || (Bcm.FontSizeValue = {}));
+  let FontWeight;
+  (function (FontWeight) {
+    FontWeight["thin"] = "thin";
+    FontWeight["light"] = "light";
+    FontWeight["regular"] = "regular";
+    FontWeight["medium"] = "medium";
+    FontWeight["bold"] = "bold";
+    FontWeight["black"] = "black";
+  })(FontWeight = Bcm.FontWeight || (Bcm.FontWeight = {}));
+  let ColorPalette;
+  (function (ColorPalette) {
+    ColorPalette["default"] = "default";
+    ColorPalette["black"] = "black";
+    ColorPalette["white"] = "white";
+    ColorPalette["prime-blue"] = "prime-blue";
+    ColorPalette["prime-blue-1"] = "prime-blue-1";
+    ColorPalette["prime-blue-2"] = "prime-blue-2";
+    ColorPalette["prime-blue-3"] = "prime-blue-3";
+    ColorPalette["prime-blue-4"] = "prime-blue-4";
+    ColorPalette["prime-blue-5"] = "prime-blue-5";
+    ColorPalette["prime-blue-6"] = "prime-blue-6";
+    ColorPalette["prime-blue-7"] = "prime-blue-7";
+    ColorPalette["prime-blue-8"] = "prime-blue-8";
+    ColorPalette["prime-blue-9"] = "prime-blue-9";
+    ColorPalette["prime-blue-10"] = "prime-blue-10";
+    ColorPalette["grey"] = "grey";
+    ColorPalette["grey-1"] = "grey-1";
+    ColorPalette["grey-2"] = "grey-2";
+    ColorPalette["grey-3"] = "grey-3";
+    ColorPalette["grey-4"] = "grey-4";
+    ColorPalette["grey-5"] = "grey-5";
+    ColorPalette["grey-6"] = "grey-6";
+    ColorPalette["grey-7"] = "grey-7";
+    ColorPalette["grey-8"] = "grey-8";
+    ColorPalette["grey-9"] = "grey-9";
+    ColorPalette["grey-10"] = "grey-10";
+    ColorPalette["blue"] = "blue";
+    ColorPalette["blue-1"] = "blue-1";
+    ColorPalette["blue-2"] = "blue-2";
+    ColorPalette["blue-3"] = "blue-3";
+    ColorPalette["blue-4"] = "blue-4";
+    ColorPalette["blue-5"] = "blue-5";
+    ColorPalette["blue-6"] = "blue-6";
+    ColorPalette["blue-7"] = "blue-7";
+    ColorPalette["blue-8"] = "blue-8";
+    ColorPalette["blue-9"] = "blue-9";
+    ColorPalette["blue-10"] = "blue-10";
+    ColorPalette["warmyellow"] = "warmyellow";
+    ColorPalette["warmyellow-1"] = "warmyellow-1";
+    ColorPalette["warmyellow-2"] = "warmyellow-2";
+    ColorPalette["warmyellow-3"] = "warmyellow-3";
+    ColorPalette["warmyellow-4"] = "warmyellow-4";
+    ColorPalette["warmyellow-5"] = "warmyellow-5";
+    ColorPalette["warmyellow-6"] = "warmyellow-6";
+    ColorPalette["warmyellow-7"] = "warmyellow-7";
+    ColorPalette["warmyellow-8"] = "warmyellow-8";
+    ColorPalette["warmyellow-9"] = "warmyellow-9";
+    ColorPalette["warmyellow-10"] = "warmyellow-10";
+    ColorPalette["yellow"] = "yellow";
+    ColorPalette["yellow-1"] = "yellow-1";
+    ColorPalette["yellow-2"] = "yellow-2";
+    ColorPalette["yellow-3"] = "yellow-3";
+    ColorPalette["yellow-4"] = "yellow-4";
+    ColorPalette["yellow-5"] = "yellow-5";
+    ColorPalette["yellow-6"] = "yellow-6";
+    ColorPalette["yellow-7"] = "yellow-7";
+    ColorPalette["yellow-8"] = "yellow-8";
+    ColorPalette["yellow-9"] = "yellow-9";
+    ColorPalette["yellow-10"] = "yellow-10";
+    ColorPalette["limegreen"] = "limegreen";
+    ColorPalette["limegreen-1"] = "limegreen-1";
+    ColorPalette["limegreen-2"] = "limegreen-2";
+    ColorPalette["limegreen-3"] = "limegreen-3";
+    ColorPalette["limegreen-4"] = "limegreen-4";
+    ColorPalette["limegreen-5"] = "limegreen-5";
+    ColorPalette["limegreen-6"] = "limegreen-6";
+    ColorPalette["limegreen-7"] = "limegreen-7";
+    ColorPalette["limegreen-8"] = "limegreen-8";
+    ColorPalette["limegreen-9"] = "limegreen-9";
+    ColorPalette["limegreen-10"] = "limegreen-10";
+    ColorPalette["red"] = "red";
+    ColorPalette["red-1"] = "red-1";
+    ColorPalette["red-2"] = "red-2";
+    ColorPalette["red-3"] = "red-3";
+    ColorPalette["red-4"] = "red-4";
+    ColorPalette["red-5"] = "red-5";
+    ColorPalette["red-6"] = "red-6";
+    ColorPalette["red-7"] = "red-7";
+    ColorPalette["red-8"] = "red-8";
+    ColorPalette["red-9"] = "red-9";
+    ColorPalette["red-10"] = "red-10";
+    ColorPalette["darkorange"] = "darkorange";
+    ColorPalette["darkorange-1"] = "darkorange-1";
+    ColorPalette["darkorange-2"] = "darkorange-2";
+    ColorPalette["darkorange-3"] = "darkorange-3";
+    ColorPalette["darkorange-4"] = "darkorange-4";
+    ColorPalette["darkorange-5"] = "darkorange-5";
+    ColorPalette["darkorange-6"] = "darkorange-6";
+    ColorPalette["darkorange-7"] = "darkorange-7";
+    ColorPalette["darkorange-8"] = "darkorange-8";
+    ColorPalette["darkorange-9"] = "darkorange-9";
+    ColorPalette["darkorange-10"] = "darkorange-10";
+    ColorPalette["orange"] = "orange";
+    ColorPalette["orange-1"] = "orange-1";
+    ColorPalette["orange-2"] = "orange-2";
+    ColorPalette["orange-3"] = "orange-3";
+    ColorPalette["orange-4"] = "orange-4";
+    ColorPalette["orange-5"] = "orange-5";
+    ColorPalette["orange-6"] = "orange-6";
+    ColorPalette["orange-7"] = "orange-7";
+    ColorPalette["orange-8"] = "orange-8";
+    ColorPalette["orange-9"] = "orange-9";
+    ColorPalette["orange-10"] = "orange-10";
+    ColorPalette["green"] = "green";
+    ColorPalette["green-1"] = "green-1";
+    ColorPalette["green-2"] = "green-2";
+    ColorPalette["green-3"] = "green-3";
+    ColorPalette["green-4"] = "green-4";
+    ColorPalette["green-5"] = "green-5";
+    ColorPalette["green-6"] = "green-6";
+    ColorPalette["green-7"] = "green-7";
+    ColorPalette["green-8"] = "green-8";
+    ColorPalette["green-9"] = "green-9";
+    ColorPalette["green-10"] = "green-10";
+    ColorPalette["turquosie"] = "turquosie";
+    ColorPalette["turquosie-1"] = "turquosie-1";
+    ColorPalette["turquosie-2"] = "turquosie-2";
+    ColorPalette["turquosie-3"] = "turquosie-3";
+    ColorPalette["turquosie-4"] = "turquosie-4";
+    ColorPalette["turquosie-5"] = "turquosie-5";
+    ColorPalette["turquosie-6"] = "turquosie-6";
+    ColorPalette["turquosie-7"] = "turquosie-7";
+    ColorPalette["turquosie-8"] = "turquosie-8";
+    ColorPalette["turquosie-9"] = "turquosie-9";
+    ColorPalette["turquosie-10"] = "turquosie-10";
+    ColorPalette["cobaltblue"] = "cobaltblue";
+    ColorPalette["cobaltblue-1"] = "cobaltblue-1";
+    ColorPalette["cobaltblue-2"] = "cobaltblue-2";
+    ColorPalette["cobaltblue-3"] = "cobaltblue-3";
+    ColorPalette["cobaltblue-4"] = "cobaltblue-4";
+    ColorPalette["cobaltblue-5"] = "cobaltblue-5";
+    ColorPalette["cobaltblue-6"] = "cobaltblue-6";
+    ColorPalette["cobaltblue-7"] = "cobaltblue-7";
+    ColorPalette["cobaltblue-8"] = "cobaltblue-8";
+    ColorPalette["cobaltblue-9"] = "cobaltblue-9";
+    ColorPalette["cobaltblue-10"] = "cobaltblue-10";
+    ColorPalette["magenta"] = "magenta";
+    ColorPalette["magenta-1"] = "magenta-1";
+    ColorPalette["magenta-2"] = "magenta-2";
+    ColorPalette["magenta-3"] = "magenta-3";
+    ColorPalette["magenta-4"] = "magenta-4";
+    ColorPalette["magenta-5"] = "magenta-5";
+    ColorPalette["magenta-6"] = "magenta-6";
+    ColorPalette["magenta-7"] = "magenta-7";
+    ColorPalette["magenta-8"] = "magenta-8";
+    ColorPalette["magenta-9"] = "magenta-9";
+    ColorPalette["magenta-10"] = "magenta-10";
+    ColorPalette["purple"] = "purple";
+    ColorPalette["purple-1"] = "purple-1";
+    ColorPalette["purple-2"] = "purple-2";
+    ColorPalette["purple-3"] = "purple-3";
+    ColorPalette["purple-4"] = "purple-4";
+    ColorPalette["purple-5"] = "purple-5";
+    ColorPalette["purple-6"] = "purple-6";
+    ColorPalette["purple-7"] = "purple-7";
+    ColorPalette["purple-8"] = "purple-8";
+    ColorPalette["purple-9"] = "purple-9";
+    ColorPalette["purple-10"] = "purple-10";
+    ColorPalette["bc-red"] = "bc-red";
+    ColorPalette["bc-red-1"] = "bc-red-1";
+    ColorPalette["bc-red-2"] = "bc-red-2";
+    ColorPalette["bc-red-3"] = "bc-red-3";
+    ColorPalette["bc-red-4"] = "bc-red-4";
+    ColorPalette["bc-red-5"] = "bc-red-5";
+    ColorPalette["bc-red-6"] = "bc-red-6";
+    ColorPalette["bc-red-7"] = "bc-red-7";
+    ColorPalette["bc-red-8"] = "bc-red-8";
+    ColorPalette["bc-red-9"] = "bc-red-9";
+    ColorPalette["bc-blue"] = "bc-blue";
+    ColorPalette["bc-blue-1"] = "bc-blue-1";
+    ColorPalette["bc-blue-2"] = "bc-blue-2";
+    ColorPalette["bc-blue-3"] = "bc-blue-3";
+    ColorPalette["bc-blue-4"] = "bc-blue-4";
+    ColorPalette["bc-blue-5"] = "bc-blue-5";
+    ColorPalette["bc-blue-6"] = "bc-blue-6";
+    ColorPalette["bc-blue-7"] = "bc-blue-7";
+    ColorPalette["bc-blue-8"] = "bc-blue-8";
+    ColorPalette["bc-blue-9"] = "bc-blue-9";
+    ColorPalette["bc-green"] = "bc-green";
+    ColorPalette["bc-green-1"] = "bc-green-1";
+    ColorPalette["bc-green-2"] = "bc-green-2";
+    ColorPalette["bc-green-3"] = "bc-green-3";
+    ColorPalette["bc-green-4"] = "bc-green-4";
+    ColorPalette["bc-green-5"] = "bc-green-5";
+    ColorPalette["bc-green-6"] = "bc-green-6";
+    ColorPalette["bc-green-7"] = "bc-green-7";
+    ColorPalette["bc-green-8"] = "bc-green-8";
+    ColorPalette["bc-green-9"] = "bc-green-9";
+    ColorPalette["bc-orange"] = "bc-orange";
+    ColorPalette["bc-orange-1"] = "bc-orange-1";
+    ColorPalette["bc-orange-2"] = "bc-orange-2";
+    ColorPalette["bc-orange-3"] = "bc-orange-3";
+    ColorPalette["bc-orange-4"] = "bc-orange-4";
+    ColorPalette["bc-orange-5"] = "bc-orange-5";
+    ColorPalette["bc-orange-6"] = "bc-orange-6";
+    ColorPalette["bc-orange-7"] = "bc-orange-7";
+    ColorPalette["bc-orange-8"] = "bc-orange-8";
+    ColorPalette["bc-orange-9"] = "bc-orange-9";
+  })(ColorPalette = Bcm.ColorPalette || (Bcm.ColorPalette = {}));
+  let InputType;
+  (function (InputType) {
+    InputType["text"] = "text";
+    InputType["number"] = "number";
+    InputType["email"] = "email";
+    InputType["password"] = "password";
+    InputType["url"] = "url";
+    InputType["search"] = "search";
+    InputType["tel"] = "tel";
+    InputType["hidden"] = "hidden";
+  })(InputType = Bcm.InputType || (Bcm.InputType = {}));
+  let KeyCode;
+  (function (KeyCode) {
+    KeyCode[KeyCode["backspace"] = 8] = "backspace";
+    KeyCode[KeyCode["tab"] = 9] = "tab";
+    KeyCode[KeyCode["enter"] = 13] = "enter";
+    KeyCode[KeyCode["shift"] = 16] = "shift";
+    KeyCode[KeyCode["ctrl"] = 17] = "ctrl";
+    KeyCode[KeyCode["alt"] = 18] = "alt";
+    KeyCode[KeyCode["pause"] = 19] = "pause";
+    KeyCode[KeyCode["capslock"] = 20] = "capslock";
+    KeyCode[KeyCode["escape"] = 27] = "escape";
+    KeyCode[KeyCode["space"] = 32] = "space";
+    KeyCode[KeyCode["pageup"] = 33] = "pageup";
+    KeyCode[KeyCode["pagedown"] = 34] = "pagedown";
+    KeyCode[KeyCode["end"] = 35] = "end";
+    KeyCode[KeyCode["home"] = 36] = "home";
+    KeyCode[KeyCode["left"] = 37] = "left";
+    KeyCode[KeyCode["up"] = 38] = "up";
+    KeyCode[KeyCode["right"] = 39] = "right";
+    KeyCode[KeyCode["down"] = 40] = "down";
+    KeyCode[KeyCode["insert"] = 45] = "insert";
+    KeyCode[KeyCode["delete"] = 46] = "delete";
+    KeyCode[KeyCode["f1"] = 112] = "f1";
+    KeyCode[KeyCode["f2"] = 113] = "f2";
+    KeyCode[KeyCode["f3"] = 114] = "f3";
+    KeyCode[KeyCode["f4"] = 115] = "f4";
+    KeyCode[KeyCode["f5"] = 116] = "f5";
+    KeyCode[KeyCode["f6"] = 117] = "f6";
+    KeyCode[KeyCode["f7"] = 118] = "f7";
+    KeyCode[KeyCode["f8"] = 119] = "f8";
+    KeyCode[KeyCode["f9"] = 120] = "f9";
+    KeyCode[KeyCode["f10"] = 121] = "f10";
+    KeyCode[KeyCode["f11"] = 122] = "f11";
+    KeyCode[KeyCode["f12"] = 123] = "f12";
+    KeyCode[KeyCode["numlock"] = 144] = "numlock";
+    KeyCode[KeyCode["scrolllock"] = 145] = "scrolllock";
+    KeyCode[KeyCode["semicolon"] = 186] = "semicolon";
+    KeyCode[KeyCode["equal"] = 187] = "equal";
+    KeyCode[KeyCode["comma"] = 188] = "comma";
+    KeyCode[KeyCode["dash"] = 189] = "dash";
+    KeyCode[KeyCode["period"] = 190] = "period";
+    KeyCode[KeyCode["slash"] = 191] = "slash";
+    KeyCode[KeyCode["backslash"] = 220] = "backslash";
+    KeyCode[KeyCode["bracketleft"] = 219] = "bracketleft";
+    KeyCode[KeyCode["bracketright"] = 221] = "bracketright";
+    KeyCode[KeyCode["quote"] = 222] = "quote";
+    KeyCode[KeyCode["backtick"] = 192] = "backtick";
+    KeyCode[KeyCode["a"] = 65] = "a";
+  })(KeyCode = Bcm.KeyCode || (Bcm.KeyCode = {}));
+  Bcm.FormErrorMessages = {
+    'email': 'Please enter a valid email address',
+    'password': 'Please enter a valid password',
+    'url': 'Please enter a valid URL',
+    'phone': 'Please enter a valid phone number',
+    'search': 'Please enter a valid search term',
+    'number': 'Please enter a valid number',
+    'text': 'Please enter a valid text',
+    'required': 'This field is required',
+    'minlength': 'This field must be at least {0} characters long',
+    'maxlength': 'This field must be at most {0} characters long',
+    'min': 'This field must be at least {0}',
+    'max': 'This field must be at most {0}',
+    'between': 'This field must be between {0} and {1}',
+    'pattern': 'This field is invalid',
+    'date': 'Please enter a valid date',
+    'time': 'Please enter a valid time',
+    'datetime': 'Please enter a valid date and time',
+    'datetime-local': 'Please enter a valid date and time',
+    'month': 'Please enter a valid month',
+    'week': 'Please enter a valid week',
+    'color': 'Please enter a valid color',
+    'file': 'Please enter a valid file',
+    'range': 'Please enter a valid range',
+    'radio': 'Please select a valid option',
+    'checkbox': 'Please select a valid option',
+    'select': 'Please select a valid option',
+    'multiple': 'Please select a valid option',
+  };
+  let IndeterminateType;
+  (function (IndeterminateType) {
+    IndeterminateType["uncheck"] = "uncheck";
+    IndeterminateType["indeterminate"] = "indeterminate";
+    IndeterminateType["determinate"] = "determinate"; // true
+  })(IndeterminateType = Bcm.IndeterminateType || (Bcm.IndeterminateType = {}));
+  let Placement;
+  (function (Placement) {
+    Placement["top"] = "top";
+    Placement["top-start"] = "top-start";
+    Placement["top-end"] = "top-end";
+    Placement["bottom"] = "bottom";
+    Placement["bottom-start"] = "bottom-start";
+    Placement["bottom-end"] = "bottom-end";
+    Placement["left"] = "left";
+    Placement["left-start"] = "left-start";
+    Placement["left-end"] = "left-end";
+    Placement["right"] = "right";
+    Placement["right-start"] = "right-start";
+    Placement["right-end"] = "right-end";
+  })(Placement = Bcm.Placement || (Bcm.Placement = {}));
+  let TriggerType;
+  (function (TriggerType) {
+    TriggerType["hover"] = "hover";
+    TriggerType["click"] = "click";
+    TriggerType["focus"] = "focus";
+  })(TriggerType = Bcm.TriggerType || (Bcm.TriggerType = {}));
+})(Bcm || (Bcm = {}));
+const Bcm$1 = Bcm;
+
+class StringHelper {
+}
+StringHelper.lowercase = (str) => str.toLowerCase();
+StringHelper.uppercase = (str) => str.toUpperCase();
+StringHelper.capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+StringHelper.camelCase = (str) => str.replace(/\s(.)/g, function ($1) { return $1.toUpperCase(); }).replace(/\s/g, '');
+StringHelper.kebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+StringHelper.snakeCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
+StringHelper.titleCase = (str) => str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
+StringHelper.trim = (str) => str.trim();
+StringHelper.trimLeft = (str) => str.trimLeft();
+StringHelper.trimRight = (str) => str.trimRight();
+StringHelper.trimAll = (str) => str.trim().replace(/\s+/g, ' ');
+StringHelper.replace = (str, search, replace) => str.replace(search, replace);
+StringHelper.remove = (str, search) => str.replace(search, '');
+StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
+StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => typeof args[number] != 'undefined' ? args[number] : match);
+StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(Bcm$1.FormErrorMessages[type], args);
+StringHelper.split = (str, separator) => str.split(separator);
+StringHelper.textContains = (str, search) => str.indexOf(search) !== -1;
+
+const SlotTemplate = ({ value, className, name }) => {
+  return StringHelper.isNullOrEmpty(value) ? h("span", { class: className },
+    h("slot", Object.assign({}, (name && { name: name })))) : h("span", { class: className }, value);
+};
+
+const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
+  size = size || Bcm$1.FontSize['size-1'];
+  type = type || Bcm$1.Status.default;
+  const labelClasses = classnames('bcm-label__text', size, {
+    'bcm-label__text-error': type === Bcm$1.Status.error,
+  });
+  return (h("label", { form: form, htmlFor: htmlFor, class: labelClasses },
+    " ",
+    h(SlotTemplate, { value: value }),
+    " ",
+    required && ('*')));
+};
+
+const labelCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.bcm-label{display:flex;align-items:center;grid-gap:2px}.bcm-label__text{display:inline-block;color:var(--bcm-color-grey-9);margin-bottom:4px}.bcm-label__text-error{color:var(--bcm-color-red-6)}";
+
+const BcmLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Props **/
+    this._id = Generate.UID();
+    this.required = false;
+    this.size = Bcm$1.FontSize['size-1'];
+    this.hidden = false;
+    this.type = Bcm$1.Status.default;
+  }
+  render() {
+    const { required, value, size, form, htmlFor, hidden, type, tooltip } = this;
+    const hostClasses = classnames('bcm-label', { hidden });
+    const Label = (h(LabelTemplate, { form: form, htmlFor: htmlFor, value: value, size: size, type: type, required: required }));
+    return (h(Host, null, h("div", { class: hostClasses }, Label, tooltip && (h("bcm-tooltip", { message: tooltip, placement: 'top', trigger: 'hover' }, h("bcm-icon", { color: "grey-8", icon: "question-circle", type: "fill" }))))));
+  }
+  get el() { return getElement(this); }
+};
+BcmLabel.style = labelCss;
+
+const switchCss = "@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}:host{display:inline-block;margin:0 0 8px 0}:host(.hidden){display:none}*{box-sizing:border-box}.wrapper{display:inline-flex;padding-top:0px;padding-bottom:5px}.wrapper .active-text{color:var(--bcm-color-prime-blue-6);margin-left:4px}.wrapper .inactive-text{color:var(--bcm-color-grey-6);margin-right:4px}.container{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-color-grey-6);position:relative}.container .handle{padding:1px;position:absolute;background-color:var(--bcm-color-grey-1);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:all 0.2s ease-in-out;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1)}.container .icon-active{opacity:0}.container .icon-inactive{opacity:1}.container.small{width:28px;min-width:28px;height:16px;padding:4px}.container.small .handle{width:12px;height:12px;left:4px}.container.small.switch-checked .handle{left:12px}.container.small:active:not(.disabled) .handle{width:16px}.container.small:active.switch-checked:not(.disabled) .handle{left:8px}.container.small .spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.medium{width:44px;min-width:44px;height:22px;padding:4px}.container.medium .handle{width:16px;height:16px;left:4px}.container.medium.switch-checked .handle{left:24px}.container.medium:active:not(.disabled) .handle{width:22px}.container.medium:active.switch-checked:not(.disabled) .handle{left:18px}.container.medium .spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.switch-checked{background-color:var(--bcm-color-prime-blue-6)}.container.switch-checked .icon-active{color:var(--bcm-color-grey-1);opacity:1}.container.switch-checked .icon-inactive{opacity:0}.container.switch-checked .spinner{border-top-color:var(--bcm-color-prime-blue-6)}.wrapper.disabled{opacity:40%;cursor:not-allowed}@keyframes spinner{to{transform:rotate(360deg)}}input[type=checkbox]{position:absolute;width:0;height:0;opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}:host(.error) .label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}";
+
+const BcmSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.checked = false;
+    this.size = 'medium';
+    this.pending = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.value = '';
+    this.label = null;
+    this.required = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  handleClick() {
+    this.checked = this.input.checked;
+    this.value = this.checked;
+    this.change.emit(this.checked);
+  }
+  componentDidLoad() {
+    this.value = this.checked;
+  }
+  handleFocus() {
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.blur.emit();
+  }
+  componentWillRender() {
+    if (this.pending) {
+      this.disabled = true;
+    }
+  }
+  async setClear() {
+    if (this.input.checked == true) {
+      this.input.checked = false;
+      this.checked = this.input.checked;
+      this.value = this.checked;
+      this.change.emit(this.checked);
+    }
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  render() {
+    const { checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, label, required, noCaption, captionType, captionError, caption } = this;
+    const classes = classnames('container', size, {
+      'switch-checked': checked,
+      'disabled': disabled
+    });
+    const wrapperClass = classnames('wrapper', {
+      'checked': checked,
+      'disabled': disabled
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    const isPermitted = (condition) => {
+      return (condition && size === 'medium');
+    };
+    const isMedium = size === 'medium';
+    const hostClasses = classnames('bcm-switch', this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("label", { class: wrapperClass }, isPermitted(inactiveText) && h("span", { class: "inactive-text size-1" }, inactiveText), h("div", { class: classes }, isMedium && h("bcm-icon", { icon: activeIcon, size: 14, class: "icon-active" }), h("span", { class: "handle" }, pending && h("span", { class: "spinner" })), isMedium && h("bcm-icon", { icon: inactiveIcon, size: 14, class: "icon-inactive" })), h("input", { onClick: () => this.handleClick(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), ref: el => (this.input = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled }), isPermitted(activeText) && h("span", { class: "active-text size-1" }, activeText)), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+  }
+};
+BcmSwitch.style = switchCss;
+
 const textareaCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}.textarea-wrapper{width:256px}.textarea-wrapper.full-width{width:100%}.textarea-wrapper:hover .clear-button{opacity:1}.textarea-container{position:relative;width:100%;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.textarea-container.empty .clear-button{display:none}.textarea-container.focused:not(.disabled){outline:none;border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.textarea-container:hover:not(:disabled){border-color:var(--bcm-color-prime-blue-6)}.textarea-container textarea{resize:vertical;display:flex;flex:1 1 auto;align-items:center;color:var(--bcm-color-grey-8);width:100%;background-color:var(--bcm-color-grey-1);border:none;border-radius:2px;box-shadow:none;font-family:\"Roboto\", sans-serif;-webkit-appearance:none;box-sizing:border-box}.textarea-container textarea::-webkit-search-decoration,.textarea-container textarea::-webkit-search-cancel-button,.textarea-container textarea::-webkit-search-results-button,.textarea-container textarea::-webkit-search-results-decoration{-webkit-appearance:none}.textarea-container textarea::placeholder{color:var(--bcm-color-grey-6);user-select:none}.textarea-container textarea:focus:not(:disabled){outline:none;border-color:none;box-shadow:none}.textarea-container textarea:hover:not(:disabled){border-color:none}.textarea-container textarea:disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.textarea-container textarea.clearable{padding-right:32px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px;display:flex;flex-direction:row;justify-content:space-between}.input-caption{display:block}.clear-button{position:absolute;opacity:0;right:10px;top:7px;display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer}.clear-button:focus{outline:none}.textarea-footer{display:flex;justify-content:space-between;margin-bottom:8px;min-height:20px}.textarea-footer .count{color:var(--bcm-color-grey-7);margin-left:4px}.textarea-footer .count:only-child{margin-left:auto}.size-large{padding:7px 12px;min-height:38px}.size-large~.clear-button{top:12px}.size-medium{padding:4px 12px;min-height:30px}.size-medium~.clear-button{top:7px}.size-small{padding:0px 12px;min-height:20px}.size-small~.clear-button{top:2px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .textarea-container{border:1px solid var(--bcm-color-red-6) !important}";
 
 let id$1 = 0;
@@ -6458,7 +7496,7 @@ const BcmTextarea = class {
       'clearable': clearable
     });
     const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: wrapperClasses }, label && h("label", { class: "label size-1", htmlFor: this.textareaId }, " ", label, " ", required && ('*'), " "), h("div", { class: contanerClasses }, h("textarea", { ref: el => (this.textarea = el), onInput: this.handleInput, onFocus: this.handleFocus, onChange: this.handleChange, onBlur: this.handleBlur, class: textareaClasses, id: this.textareaId, value: value, rows: rows, disabled: disabled, maxlength: maxLength, placeholder: placeholder }), clearable && (h("button", { class: "clear-button", onClick: this.handleClear }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" })))), !noCaption || maxLength ? (h("div", { class: "caption-area" }, h("span", null, captionType == "error"
+    return (h(Host, { class: hostClasses }, h("div", { class: wrapperClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.textareaId })), h("div", { class: contanerClasses }, h("textarea", { ref: el => (this.textarea = el), onInput: this.handleInput, onFocus: this.handleFocus, onChange: this.handleChange, onBlur: this.handleBlur, class: textareaClasses, id: this.textareaId, value: value, rows: rows, disabled: disabled, maxlength: maxLength, placeholder: placeholder }), clearable && (h("button", { class: "clear-button", onClick: this.handleClear }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" })))), !noCaption || maxLength ? (h("div", { class: "caption-area" }, h("span", null, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " ")), maxLength && h("span", { class: countClasses }, " ", `${valueLength}/${maxLength}`, " "))) : null)));
   }
@@ -6469,4 +7507,164 @@ const BcmTextarea = class {
 };
 BcmTextarea.style = textareaCss;
 
-export { BcmButton as bcm_button, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmTextarea as bcm_textarea };
+const tooltipCss = "@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}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip{position:relative;}.tooltip .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.tooltip.open .box,.tooltip.open::after{display:block}.tooltip.top .box{bottom:100%;margin-bottom:8px}.tooltip.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip.bottom .box{top:100%;margin-top:8px}.tooltip.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip.left .box{right:100%;margin-right:8px}.tooltip.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip.right .box{left:100%;margin-left:8px}.tooltip.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip.top.center .box,.tooltip.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip.top.center::after,.tooltip.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip.top.start .box,.tooltip.bottom.start .box{left:0}.tooltip.top.start::after,.tooltip.bottom.start::after{left:8px}.tooltip.top.end .box,.tooltip.bottom.end .box{right:0}.tooltip.top.end::after,.tooltip.bottom.end::after{right:8px}.tooltip.left.center .box,.tooltip.right.center .box{top:50%;transform:translateY(-50%)}.tooltip.left.center::after,.tooltip.right.center::after{top:50%;transform:translateY(-50%)}.tooltip.left.start .box,.tooltip.right.start .box{top:0}.tooltip.left.start::after,.tooltip.right.start::after{top:4px}.tooltip.left.end .box,.tooltip.right.end .box{bottom:0}.tooltip.left.end::after,.tooltip.right.end::after{bottom:4px}";
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onShow = createEvent(this, "bcm-show", 7);
+    this.onHide = createEvent(this, "bcm-hide", 7);
+    this.placement = 'top';
+    this.trigger = 'hover';
+    this.hidden = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+  }
+  async show() {
+    // Prevent subsequent calls
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.onShow.emit();
+  }
+  async hide() {
+    // Prevent subsequent calls
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.onHide.emit();
+  }
+  handleClickOutside(e) {
+    if (!this.host.contains(e.target)) {
+      if (this.open) {
+        this.open = false;
+      }
+    }
+  }
+  async handleOpen() {
+    await this.createElement();
+    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
+    if (tooltipBox && tooltipBox.querySelector(".box")) {
+      var tooltipBoxIn = tooltipBox.querySelector(".box");
+      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
+      tooltipBox.classList.toggle("open");
+    }
+  }
+  async createElement() {
+    var target = this.host.getBoundingClientRect();
+    var placementString = String([...this.getPlacement()]).replace(',', ' ');
+    var element;
+    if (!document.getElementById("box" + this._internal_id)) {
+      element = document.createElement("bcm-tooltip-box");
+      element.setAttribute("id", "box" + this._internal_id);
+    }
+    else {
+      element = document.getElementById("box" + this._internal_id);
+    }
+    element.setAttribute("message", this.message);
+    // element.setAttribute("placement", placementString)
+    element.style.position = "absolute";
+    // element.style.top = target.top + "px"
+    // element.style.left = (target.left + (target.width / 2)) + "px"
+    element.setAttribute("placement", placementString);
+    // element.style.zIndex = "999999999"
+    document.body.appendChild(element);
+    await delay(50);
+    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
+    if (tooltipBox && tooltipBox.querySelector(".box")) {
+      var tooltipBoxIn = tooltipBox.querySelector(".box");
+      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
+    }
+    element.style.top = popoverBoxPlacement(this.placement, target)[0] + "px";
+    element.style.left = popoverBoxPlacement(this.placement, target)[1] + "px";
+  }
+  hasTrigger(trigger) {
+    return this.trigger === trigger;
+  }
+  getPlacement() {
+    const placements = this.placement.split('-');
+    if (placements.length === 1) {
+      placements.push('center');
+    }
+    return placements;
+  }
+  /*
+      Trigger Functions
+  */
+  handleMouseOver() {
+    if (this.hasTrigger('hover')) {
+      this.show();
+    }
+  }
+  handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      this.hide();
+    }
+  }
+  handleClick() {
+    if (this.hasTrigger('click')) {
+      this.open ? this.hide() : this.show();
+    }
+  }
+  handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
+    }
+  }
+  handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  }
+  async componentDidRender() {
+    await this.createElement();
+    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
+    if (tooltipBox && tooltipBox.querySelector(".box")) {
+      var tooltipBoxIn = tooltipBox.querySelector(".box");
+      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
+    }
+  }
+  render() {
+    const classes = classnames('tooltip', ...this.getPlacement(), {
+    // 'open': this.open
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: 0 }, h("span", { class: classes }, h("span", { class: "box size-2" }, this.message), h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpen"]
+  }; }
+};
+BcmTooltip.style = tooltipCss;
+
+const tooltipBoxCss = "@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}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip-box{position:relative;}.tooltip-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700;pointer-events:none}.tooltip-box.open .box,.tooltip-box.open::after{display:block}.tooltip-box.top .box{bottom:100%;margin-bottom:8px}.tooltip-box.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip-box.bottom .box{top:100%;margin-top:8px}.tooltip-box.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip-box.left .box{right:100%;margin-right:8px}.tooltip-box.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip-box.right .box{left:100%;margin-left:8px}.tooltip-box.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip-box.top.center .box,.tooltip-box.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip-box.top.center::after,.tooltip-box.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip-box.top.start .box,.tooltip-box.bottom.start .box{left:0}.tooltip-box.top.start::after,.tooltip-box.bottom.start::after{left:8px}.tooltip-box.top.end .box,.tooltip-box.bottom.end .box{right:0}.tooltip-box.top.end::after,.tooltip-box.bottom.end::after{right:8px}.tooltip-box.left.center .box,.tooltip-box.right.center .box{top:50%;transform:translateY(-50%)}.tooltip-box.left.center::after,.tooltip-box.right.center::after{top:50%;transform:translateY(-50%)}.tooltip-box.left.start .box,.tooltip-box.right.start .box{top:0}.tooltip-box.left.start::after,.tooltip-box.right.start::after{top:4px}.tooltip-box.left.end .box,.tooltip-box.right.end .box{bottom:0}.tooltip-box.left.end::after,.tooltip-box.right.end::after{bottom:4px}.tooltip-box a{color:var(--bcm-color-grey-1)}";
+
+const BcmTooltipBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hidden = false;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  async openBox(open) {
+    this.open = open;
+  }
+  render() {
+    const classes = classnames('tooltip-box', this.open, this.placement);
+    const boxClasses = classnames('box');
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: boxClasses, innerHTML: this.message }))));
+  }
+  get el() { return getElement(this); }
+};
+BcmTooltipBox.style = tooltipBoxCss;
+
+export { BcmButton as bcm_button, BcmCheckbox as bcm_checkbox, BcmCheckboxGroup as bcm_checkbox_group, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmLabel as bcm_label, BcmSwitch as bcm_switch, BcmTextarea as bcm_textarea, BcmTooltip as bcm_tooltip, BcmTooltipBox as bcm_tooltip_box };