bromcom-ui 2.3.54 → 2.3.58

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

@@ -1,47 +1,9 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, f as forceUpdate } from './index-8fe7aea4.js';
+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 { e as extractColor, g as getChilds, d as delay, a as dropInComponent } from './utils-b7fba7c4.js';
-
-const badgeCss = "@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}:host(.hidden){display:none}.success{background-color:#52C41A}.error{background-color:#F5222D}.default{background-color:#D9D9D9}.processing{background-color:#4293CF}.warning{background-color:#FA8C16}.badge-basic{padding:0 8px;border:1px solid #FFFFFF;color:var(--bcm-color-grey-1);border-radius:16px;font-size:14px;height:22px;display:inline-flex;align-items:center;justify-content:center}.badge-info{display:inline-flex;align-items:center}.badge-text{color:var(--bcm-color-grey-7);font-size:14px}.badge-dot{display:inline-block;width:8px;height:8px;border:1px solid #FFFFFF;margin-right:8px;border-radius:100%;box-sizing:border-box;margin-bottom:1px}.badge-dot.basic.medium{width:12px;height:12px;margin-bottom:-1px;line-height:1}.badge-dot.basic.large{width:16px;height:16px;margin-bottom:-1px;line-height:1}";
-
-/**
- * @desc
- * @param str
- */
-const lowercase = (str) => str.toLowerCase();
-const BcmBadge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = 'basic';
-    this.status = this.type === 'basic' ? 'error' : 'default';
-    this.hidden = false;
-    this.color = null;
-    this.size = 'small';
-  }
-  handleColor(color) {
-    var returnColor;
-    if (color) {
-      if (color.match(/^#[a-f0-9]{6}$/i) !== null || lowercase(color.substring(0, 3)) === "rgb") {
-        returnColor = color;
-      }
-      else {
-        returnColor = extractColor(ColorPalette, color);
-      }
-      return { backgroundColor: returnColor };
-    }
-  }
-  render() {
-    const dotClass = classnames('badge-dot', this.status, this.type, this.size);
-    if (this.type === 'info') {
-      return (h("div", { class: "badge-info" }, h("span", { class: dotClass, style: this.handleColor(this.color) }), h("span", { class: "badge-text" }, h("slot", null))));
-    }
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, !this.value ? h("span", { class: dotClass, style: this.handleColor(this.color) })
-      : (h("span", { class: `badge-basic ${this.status}` }, " ", this.value, " "))));
-  }
-};
-BcmBadge.style = badgeCss;
+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
@@ -281,64 +243,403 @@ 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 BcmCheckboxLite = class {
+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.indeterminate = 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';
   }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
+  /**
+  * @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, required } = this;
+    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
     const hostClasses = classnames(this.hidden ? 'hidden' : null, {
-      'indeterminate': this.indeterminate
+      '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,
     });
-    const iconClasses = classnames('icon');
-    return (h(Host, { class: hostClasses }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h("label", { htmlFor: name }, h("span", { class: iconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))));
+    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); }
 };
-BcmCheckboxLite.style = checkboxCss;
+BcmCheckbox.style = checkboxCss;
 
-const dividerCss = "@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:flex;justify-content:center}:host(.hidden){display:none}.divider{background-color:var(--bcm-color-grey-5)}.divider.horizontal{height:1px;margin:4px 0}.divider.vertical{height:100%;width:1px;margin:0 4px}";
+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 BcmBadge$1 = class {
+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.width = '100';
+    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 classes = classnames('divider', this.direction);
-    const styles = {
-      width: this.width + '%'
-    };
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes, style: this.direction === 'horizontal' && styles })));
+    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"]
+  }; }
 };
-BcmBadge$1.style = dividerCss;
+BcmCheckboxGroup.style = groupCss;
 
 // /**
 //  * 
@@ -383,7 +684,7 @@ const formCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:40
  * @desc
  * @param str
  */
-const lowercase$1 = (str) => str.toLowerCase();
+const lowercase = (str) => str.toLowerCase();
 const BcmForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -426,7 +727,7 @@ const BcmForm = class {
     this.name = "";
   }
   handleSubmit(e) {
-    if (lowercase$1(e.target.nodeName) === 'bcm-button') {
+    if (lowercase(e.target.nodeName) === 'bcm-button') {
       if (e.target.type === 'submit') {
         this.submitFunction();
       }
@@ -507,12 +808,12 @@ const BcmForm = class {
     const rootInputs = inputs.filter((input) => !input['s-hn']);
     rootInputs.forEach(element => {
       var item = element;
-      if (lowercase$1(item.nodeName) == "bcm-checkbox-group") {
+      if (lowercase(item.nodeName) == "bcm-checkbox-group") {
         item.querySelectorAll("bcm-checkbox").forEach(element => {
           this.duplicateInput.push(element.name);
         });
       }
-      if (lowercase$1(item.nodeName) == "bcm-form") {
+      if (lowercase(item.nodeName) == "bcm-form") {
         // console.log(item)
         const groupInputs = Array.from(item.querySelectorAll('bcm-' + Object.values(this.Bromcom.inputComponents).join(',bcm-')));
         var itemObject;
@@ -546,7 +847,7 @@ const BcmForm = class {
     return ['bcm-datetime-picker', 'bcm-date-picker', 'bcm-time-picker'].includes(item.toLowerCase());
   }
   isGroupComponent(item) {
-    return ['bcm-checkbox-group', 'bcm-radio-group'].includes(item.toLowerCase());
+    return ['bcm-checkbox-group'].includes(item.toLowerCase());
   }
   async userFormData() {
     this.formData = {};
@@ -578,8 +879,9 @@ const BcmForm = class {
           }
         }
         else if (isGroupComponent) {
-          getChilds(input, "bcm-checkbox").forEach(element => {
-            if (element.required == true) {
+          const childsCheckbox = getChilds(input, "bcm-checkbox");
+          childsCheckbox.length > 0 && (childsCheckbox.forEach((element) => {
+            if (element && element.required === true) {
               valid = validate.required(element.value);
               if (!valid['valid']) {
                 element.noCaption = false;
@@ -592,7 +894,7 @@ const BcmForm = class {
                 element.captionType = "default";
               }
             }
-          });
+          }));
         }
         else {
           valid = validate.required(input.value);
@@ -6099,6 +6401,7 @@ const BcmInput = class {
     this.disabled = false;
     this.readonly = false;
     this.clearable = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
     this.unit = null;
     this.unitPrefix = null;
     this.min = null;
@@ -6177,7 +6480,7 @@ const BcmInput = class {
     this.value = '';
     this.inputElement.focus();
     this.change.emit(this.value);
-    this.clear.emit();
+    this.clear.emit(e);
     e.stopPropagation();
   }
   changePasswordVisibility() {
@@ -6422,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"
@@ -6436,2852 +6739,932 @@ const BcmInput = class {
 };
 BcmInput.style = inputCss;
 
-const listCss = "@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;position:relative;user-select:none;width:256px}:host main{width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;padding:8px}:host(.full-width){width:100%}:host(.full-width) main{width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;z-index:100000}:host(.flex){width:100%;height:100%}:host(.flex) main{width:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}:host(.error) .label{color:var(--bcm-color-red-6) !important}:host(.error) main{border:1px solid var(--bcm-color-red-6) !important}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.8}.spinner.first-run{visibility:visible;opacity:0.9}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
+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 lowercase$2 = (str) => str.toLowerCase();
-const BcmList = class {
+const BcmLabel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.listSelected = createEvent(this, "bcm-list-selected", 7);
-    this.listChecked = createEvent(this, "bcm-list-checklist", 7);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.configObject = [];
-    this.isRendered = false;
-    this.firstRender = true;
-    this.linkedElementWidth = "100%";
-    this.bodyStyleOverflow = '';
-    this.dataLength = 0;
-    this.checklist = [];
-    this.otherList = [];
-    this.configured = false;
-    this.checkStatus = false;
-    this.resetSelected = false;
-    this.indeterminateStatus = false;
-    this.totalSearch = 0;
-    this.empty = false;
-    this.objectMapping = {
-      'id': "id",
-      'text': "text",
-      'selected': "selected",
-    };
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this._list_select_id = null;
-    this._list_id = null;
-    this.type = 'default';
-    this.processType = 'default';
+    /** Props **/
+    this._id = Generate.UID();
+    this.required = false;
+    this.size = Bcm$1.FontSize['size-1'];
     this.hidden = false;
-    this.items = [];
-    this.isShow = true;
-    this.linkedComponent = null;
-    this.selectedId = null;
-    this.flex = false;
-    this.height = "256px";
-    this.minHeight = null;
-    this.maxHeight = null;
-    this.width = "100%";
-    this.minWidth = null;
-    this.maxWidth = null;
-    this.fullWidth = false;
-    this.size = 'medium';
-    this.infoFooter = false;
-    this.searchable = false;
-    this.highlight = false;
-    this.searchPlaceholder = "Search";
-    this.searchFields = ['text'];
-    this.returnField = "id";
-    this.searchData = null;
-    this.searchSub = "items";
-    this.searchText = "";
-    this.value = null;
-    this.multiSelect = false;
-    /******/
-    this.clearable = false;
-    this.label = null;
-    this.placeholder = "Choose an option";
-    this.noCaption = false;
-    this.caption = null;
-    this.captionError = null;
-    this.captionType = 'default';
-    this.disabled = false;
-    this.name = null;
-    this.required = false;
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-    this.bodyStyleOverflow = document.querySelector("body").style.overflow;
-    const elementId = "bcm-list-select-" + this._id;
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      this.selectIsInitialize();
-      this.linkedComponent = elementId;
-    }
-    if (this.type !== 'default' || this.linkedComponent !== null) {
-      this.isShow = false;
-      this.el.classList.add("linked");
-      this.handleLinkedComponent();
-    }
-    const slot = this.el.shadowRoot.querySelectorAll('bcm-list-item');
-    if (slot) {
-      slot.forEach(el => {
-        if (lowercase$2(el.tagName) === 'bcm-list-item') {
-          el.setAttribute("_internal_id", this._internal_id);
-        }
-      });
-    }
-  }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() {
-    const elementId = "bcm-list-select-" + this._id;
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      this.selectIsInitialize();
-      this.linkedComponent = elementId;
-    }
-    if (sessionStorage.getItem(this._internal_id + "-config")) {
-      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-    }
-    setTimeout(() => {
-      const spinner = this.el.shadowRoot.querySelector('.spinner');
-      if (spinner) {
-        spinner.classList.remove("first-run");
-      }
-    }, 500);
-  }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  /**
-   * @desc
-   */
-  async hide() {
-    this.isShow = false;
-    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
-  }
-  async setSearch(text) {
-    const searchInput = this.el.shadowRoot.querySelector("bcm-search");
-    if (searchInput) {
-      searchInput.setValue(text);
-      // searchInput.select()
-    }
-  }
-  async clearAndSelectSearch(select = true) {
-    if (this.searchable == true) {
-      // var searchInput = null
-      const searchInput = this.el.shadowRoot.querySelector("bcm-search");
-      if (searchInput) {
-        searchInput.setClear();
-        if (select == true) {
-          searchInput.select();
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async show() {
-    if (this.processType == 'deselect') {
-      this.firstRender = true;
-      this.isRendered = false;
-      this.setData(this.otherList);
-    }
-    this.isShow = true;
-    if (this.items && this.isRendered === false) {
-      this.isRendered = true;
-      this.processData(this.items);
-    }
-    if (this.linkedComponent !== null) {
-      this.handleLinkedComponent();
-    }
-  }
-  /**
-   * @desc
-   */
-  async toggle() {
-    this.isShow = !this.isShow;
-  }
-  /**
-   * @desc
-   */
-  async openStatus() {
-    return this.isShow;
-  }
-  /**
-   * @desc
-   */
-  handleOpen(value) {
-    if (this.processType === "deselect") {
-      const listSelect = document.getElementById(this._list_select_id);
-      if (listSelect) {
-        const otherTag = listSelect.shadowRoot.querySelector("#other-tag");
-        if (otherTag) {
-          if (value === true) {
-            otherTag.setAttribute("color", "prime-blue");
-          }
-          else {
-            otherTag.removeAttribute("color");
-          }
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleChange(newValue) {
-    this.change.emit(newValue);
-  }
-  /**
-   * @desc
-   */
-  async config(_config) {
-    if (_config['type']) {
-      this.type = _config['type'];
-    }
-    if (_config['searchPlaceholder']) {
-      this.searchPlaceholder = _config['searchPlaceholder'];
-    }
-    if (_config['searchFields']) {
-      this.searchFields = _config['searchFields'];
-    }
-    if (_config['returnField']) {
-      this.returnField = _config['returnField'];
-    }
-    if (_config['highlight']) {
-      this.highlight = _config['highlight'];
-    }
-    if (_config['linkedComponent'] && typeof _config['linkedComponent'] == 'string') {
-      this.linkedComponent = _config['linkedComponent'];
-    }
-    if (_config['searchable'] && typeof _config['searchable'] == 'boolean') {
-      this.searchable = _config['searchable'];
-    }
-    if (_config['infoFooter'] && typeof _config['infoFooter'] == 'boolean') {
-      this.infoFooter = _config['infoFooter'];
-    }
-    if (_config['mapping']) {
-      if (_config['mapping']['id']) {
-        this.objectMapping['id'] = _config['mapping']['id'];
-      }
-      if (_config['mapping']['text']) {
-        this.objectMapping['text'] = _config['mapping']['text'];
-      }
-      if (_config['mapping']['selected']) {
-        this.objectMapping['selected'] = _config['mapping']['selected'];
-      }
-    }
-    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
-    this.configured = true;
-    this.configObject = _config;
-    return _config;
-  }
-  /**
-   * @desc
-   */
-  async setDataOther(_data = []) {
-    this.otherList = _data;
-  }
-  /**
-   * @desc
-   */
-  async setData(_data = []) {
-    if (this.value) {
-      this.setClear();
-    }
-    if (_data) {
-      typeof _data == 'string'
-        ? this.items = JSON.parse(_data)
-        : this.items = _data;
-      if (this.items) {
-        switch (this.processType) {
-          case 'default':
-            if (this.items.find(e => e[this.objectMapping['selected']])) {
-              var selectedIDs = [];
-              this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-                selectedIDs.push(element[this.objectMapping['id']]);
-              });
-              this.checked(selectedIDs);
-            }
-            break;
-          case 'deselect':
-            var selectedIDs = [];
-            this.items.forEach(element => {
-              // element[ this.objectMapping['selected'] ] = true;
-              selectedIDs.push(element[this.objectMapping['id']]);
-            });
-            this.checked(selectedIDs);
-            break;
-        }
-      }
-      this.calculatedTotals({ "total": this.items.length });
-      if (this.multiSelect === true) {
-        this.calculatedTotals({ "selected": selectedIDs ? selectedIDs.length : 0 });
-      }
-      this.isRendered = false;
-      if (this.linkedComponent === null) {
-        this.show();
-      }
-    }
-    return _data;
-  }
-  /**
-   * @desc
-   */
-  async getValue() {
-    return this.value;
-  }
-  /**
-   * @desc
-   */
-  async getChecklist() {
-    return this.checklist;
-  }
-  /**
-   * @desc
-   */
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  /**
-   * @desc
-   */
-  async toggleChecked(checkedItems = null) {
-    if (checkedItems !== null) {
-      var checkStatus = false;
-      if (typeof checkedItems == 'string') {
-        checkStatus = this.items.find(e => e[this.objectMapping['id']] == checkedItems)[this.objectMapping['selected']];
-      }
-      else {
-        let state = 'uncheck';
-        let allChecked = true;
-        let allUnchecked = true;
-        checkedItems.forEach((item) => {
-          if (String(this.items.find(e => e[this.objectMapping['id']] == item)[this.objectMapping['selected']]) === 'true') {
-            allUnchecked = false;
-          }
-          else {
-            allChecked = false;
-          }
-        });
-        !allChecked && !allUnchecked
-          ? state = 'determinate'
-          : allChecked
-            ? state = 'determinate'
-            : state = 'uncheck';
-        checkStatus = state == 'determinate' ? false : true;
-      }
-      // let state: string = 'uncheck'
-      // let allChecked: boolean = true
-      // let allUnchecked: boolean = true
-      // checkedItems.map((item) => {
-      //     item[ this.objectMapping['selected'] ] === true && (allUnchecked = false)
-      //     !item[ this.objectMapping['selected'] ] === true && (allChecked = false)
-      // });
-      // !allChecked && !allUnchecked 
-      // ? state = 'determinate'
-      // : allChecked
-      // ? state = 'determinate'
-      // : state = 'uncheck'
-      // const checkStatus = state == 'determinate' ? true : false
-      // const checkStatus = this.items.find( e => e[ this.objectMapping['id'] ] == checkedItems )[ this.objectMapping['selected'] ]
-      if (checkStatus === true) {
-        this.unChecked(checkedItems);
-      }
-      else {
-        // this.checked(checkedItems, false)
-        var selectedIDs = [];
-        // var checkItem = null
-        if (typeof checkedItems == 'string') {
-          // checkItem = this.sendSelectId( String(checkedItems), true)
-          selectedIDs.push(checkedItems);
-        }
-        else {
-          checkedItems.forEach((item) => {
-            selectedIDs.push(item);
-            // String(item[ this.objectMapping['selected'] ]) === 'true' && (allUnchecked = false),
-            // String(item[ this.objectMapping['selected'] ]) !== 'true' && (allChecked = false)
-          });
-          // this.sendSelectId( String(checkedItems), true)
-          // var selectedIDs = []
-          // if( this.items && this.items.find( e => e[ this.objectMapping['selected'] ] ) ){
-          //     this.items.filter( e => String( e[ this.objectMapping['selected'] ] ) === "true" ).forEach(element => {
-          //         selectedIDs.push( element )
-          //     });
-          // }
-          // this.value = selectedIDs
-          // this.listChecked.emit( this.value )
-          // this.handleIndeterminateStatus()
-          // this.sendSelectValue()
-        }
-        this.checked(selectedIDs, false);
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async unChecked(checkedItems = null) {
-    if (checkedItems !== null) {
-      var selectedIDs = [];
-      this.selectedId = null;
-      if (typeof checkedItems == 'string') {
-        this.sendSelectId(String(checkedItems), false);
-      }
-      else {
-        checkedItems.forEach(item => {
-          this.sendSelectId(String(item), false);
-        });
-      }
-      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-          selectedIDs.push(element);
-        });
-      }
-      this.value = selectedIDs;
-      this.listChecked.emit(this.value);
-      this.handleIndeterminateStatus();
-      this.sendSelectValue();
-    }
-  }
-  /**
-   * @desc
-   */
-  async checked(checkedItems = null, reset = true) {
-    if (checkedItems !== null) {
-      var selectedIDs = [];
-      if (reset === true) {
-        if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-          this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-            element[this.objectMapping['selected']] = false;
-          });
-        }
-        this.setClear(false);
-      }
-      if (typeof checkedItems == 'string') {
-        this.sendSelectId(String(checkedItems));
-        if (this.multiSelect === false) {
-          this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems));
-        }
-      }
-      else {
-        if (this.multiSelect === true) {
-          checkedItems.forEach(item => {
-            this.sendSelectId(String(item));
-          });
-        }
-      }
-      // if ( this.multiSelect === false ){
-      //     this.selectedId = this.items.find( e => String(e[ this.objectMapping['id'] ]) === String(checkedItems) )
-      // }
-      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-          selectedIDs.push(element);
-        });
-      }
-      this.value = selectedIDs;
-      this.listChecked.emit(this.value);
-      this.handleIndeterminateStatus();
-      this.sendSelectValue();
-    }
-  }
-  /**
-   * @desc
-   */
-  async setClear(eventEmit = true) {
-    if (this.items != undefined && this.items.length > 0) {
-      this.unChecked(this.items.map(item => { return item[this.objectMapping["id"]]; }));
-    }
-    this.selectedId = null;
-    this.checklist = [];
-    if (eventEmit === true) {
-      this.listChecked.emit(this.checklist);
-    }
-    this.value = null;
-    this.handleIndeterminateStatus();
-    this.calculatedTotals({ "selected": this.checklist.length });
-  }
-  /**
-   * @desc
-   */
-  async processData(_data) {
-    this.handleLoading(true);
-    await delay(100);
-    const list = this.el.shadowRoot.querySelector('.list');
-    list.innerHTML = "";
-    this.selectedId = null;
-    this.value = null;
-    const elementStatuses = [];
-    var checkedItems = [];
-    if (_data.length > 0) {
-      this.dataLength = _data.length;
-      this.searchData = _data;
-      await delay(100);
-      _data.map(item => {
-        const element = document.createElement("bcm-list-item");
-        element.setAttribute("_internal_id", this._internal_id);
-        element.setAttribute("text", item[this.objectMapping['text']]);
-        element.setAttribute("id", String(item[this.objectMapping['id']]));
-        if (item[this.objectMapping['selected']]) {
-          // element.select()
-          checkedItems.push(String(item[this.objectMapping['id']]));
-        }
-        // element.setAttribute("item-object", JSON.stringify(item))
-        var object = item;
-        element.itemObject = object;
-        element.multiSelect = this.multiSelect;
-        list.appendChild(element);
-        elementStatuses.push(element.componentOnReady());
-      });
-      const allStatuses = await Promise.all(elementStatuses);
-      if (allStatuses) {
-        if (checkedItems != []) {
-          checkedItems.forEach(item => {
-            // if ( this.sendSelectId( String(item) ) !== false ){
-            this.sendSelectId(String(item));
-            // }
-          });
-        }
-        this.handleLoading(false);
-        this.firstRender = false;
-      }
-    }
-    else {
-      this.handleLoading(false);
-      // console.log("no data")
-    }
-  }
-  /**
-   * @desc
-   */
-  handleLoading(show = false) {
-    const spinner = this.el.shadowRoot.querySelector('.spinner');
-    // const searchInput = this.el.shadowRoot.querySelector('#search');
-    if (show == true) {
-      spinner.classList.add("show");
-      // searchInput.setAttribute('readonly', 'true')
-    }
-    else {
-      spinner.classList.remove("show");
-      // searchInput.setAttribute('readonly', 'false')
-    }
-    if (this.linkedComponent !== null) {
-      this.handleLinkedComponent();
-    }
-  }
-  /**
-   * @desc
-   */
-  handleClick(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (!this.el.contains(event.target)
-      || (path
-        && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
-        && path.filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
-        && this.multiSelect === false)) {
-      if (this.isShow === true) {
-        this.hide();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  wheelEvent(event) {
-    if (!this.el.contains(event.target)) {
-      if (this.isShow === true) {
-        this.hide();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  scrollEvent(event) {
-    if (!this.el.contains(event.target)) {
-      if (this.isShow === true) {
-        this.hide();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  resizeEvent() {
-    dropInComponent(this.el, "#" + this.linkedComponent);
-  }
-  /**
-   * @descc
-   */
-  onmousemove(e) {
-    if (this.el.contains(e.target)) {
-      if (document.querySelector("body").style.overflow != "hidden") {
-        document.querySelector("body").style.overflow = "hidden";
-      }
-    }
-    else {
-      if (document.querySelector("body").style.overflow != this.bodyStyleOverflow) {
-        document.querySelector("body").style.overflow = this.bodyStyleOverflow;
-      }
-    }
-  }
-  /**
-   * @descc
-   
-   */
-  listenSearchResult(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (event.isEvent == undefined) {
-      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-        // var childs: any[] = getChilds(this.el, 'bcm-list-item')
-        var childs = this.el.shadowRoot.querySelectorAll("bcm-list-item");
-        childs.forEach(element => {
-          element.classList.add("hidden");
-        });
-        if (event.detail.length > 0) {
-          if (event.detail[0] == -1) {
-            this.totalSearch = 0;
-            this.empty = true;
-          }
-          else {
-            this.totalSearch = event.detail.length;
-            this.empty = false;
-            if (this.dataLength > 0) {
-              childs.forEach(element => {
-                // if ( this.highlight ){
-                //     event.target.addEventListener('bcm-on-search-value', async(event: CustomEvent) => {
-                //         var searchValue = await event.detail
-                //         var inputText = element.shadowRoot.getElementById("text")
-                //         inputText = inputText.textContent || inputText.innerText || ""
-                //         if (searchValue) {
-                //             var cacheInputText = lowercase(inputText)
-                //             var cacheSearchValue = lowercase(searchValue)
-                //             var index = cacheInputText.indexOf(cacheSearchValue);
-                //             if (index >= 0) { 
-                //                 inputText = inputText.substring(0,index) + "<span class='highlight'>" + inputText.substring(index,index+searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
-                //             }
-                //         }
-                //         element.shadowRoot.getElementById("text").innerHTML = inputText;
-                //     })
-                // }
-                if (event.detail.indexOf(element._id) >= 0) {
-                  element.classList.remove("hidden");
-                }
-              });
-            }
-          }
-        }
-        else if (event.detail === true) {
-          this.totalSearch = this.dataLength;
-          this.empty = false;
-          childs.forEach(element => {
-            element.classList.remove("hidden");
-          });
-        }
-        this.calculatedTotals({ "total": this.totalSearch });
-      }
-    }
-  }
-  /**
-   * @descc
-   
-   */
-  sendSelectId(id, status = true) {
-    if (this.items && this.items.find(e => e[this.objectMapping['id']] == id)) {
-      if (this.isRendered === false) {
-        this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
-        this.handleChecklist(this.items.find(e => e[this.objectMapping['id']] == id), status);
-        return this.items.find(e => e[this.objectMapping['id']] == id);
-      }
-      else {
-        var selectedItem = null;
-        if (selectedItem = this.el.shadowRoot.getElementById(id)) {
-          if (status === true) {
-            selectedItem.classList.add("selected");
-          }
-          else {
-            selectedItem.classList.remove("selected");
-          }
-          if (this.multiSelect === true) {
-            this.handleChecklist(selectedItem["itemObject"], status);
-            // selectedItem.classList.toggle("selected")
-            if (selectedItem.shadowRoot.querySelector(".checkbox")) {
-              selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = status;
-            }
-          }
-          this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
-          return this.items.find(e => e[this.objectMapping['id']] == id);
-        }
-      }
-    }
-    return false;
-  }
-  /**
-   * @descc
-   */
-  jsonDataProcess(id, status) {
-    // console.log(id)
-    var item = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
-    if (item) {
-      item[this.objectMapping['selected']] = status;
-    }
-  }
-  /**
-   * @descc
-   */
-  handleListSelected(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    // console.log(path);
-    if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
-      var status = false;
-      var selectedItem = null;
-      const itemId = this.getItemId(event);
-      if (this.multiSelect === false) {
-        if (selectedItem = getChilds(this.el, "bcm-list-item").find(x => x._id === this.selectedId)) {
-          selectedItem.classList.remove("selected");
-          status = false;
-          // selectedItem.selected = false
-        }
-      }
-      selectedItem = this.el.shadowRoot.getElementById(itemId);
-      if (selectedItem) {
-        this.selectedId = selectedItem["id"];
-        // selectedItem.selected = true
-        if (this.multiSelect === true) {
-          selectedItem.classList.toggle("selected");
-          if (selectedItem.classList.contains("selected") === true) {
-            status = false;
-          }
-          else {
-            status = true;
-          }
-        }
-        else {
-          selectedItem.classList.add("selected");
-          status = true;
-        }
-      }
-      if (this.isInternalSlot(event)) {
-        if (selectedItem = path[0]) {
-          this.selectedId = path[0].id;
-          this.value = event.detail;
-          return true;
-        }
-      }
-      if (this.multiSelect === true) {
-        this.handleChecklist(selectedItem["itemObject"], selectedItem.classList.contains("selected"));
-        this.listChecked.emit(this.checklist);
-        if (selectedItem.shadowRoot.querySelector(".checkbox")) {
-          selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = selectedItem.classList.contains("selected");
-        }
-        this.value = this.checklist;
-      }
-      else {
-        this.value = event.detail;
-      }
-      if (this.processType === 'default') {
-        this.jsonDataProcess(this.selectedId, status);
-      }
-      this.handleIndeterminateStatus();
-      this.sendSelectValue();
-      if (this.processType === 'deselect') {
-        var element = document.querySelector("#" + this._list_id);
-        if (element) {
-          if (this.firstRender === false) {
-            element.toggleChecked(this.selectedId);
-          }
-          // element.unChecked(this.selectedId)
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleChecklist(checkItem, process = true) {
-    if (this.items && this.items.find(e => e[this.objectMapping['id']] == checkItem[this.objectMapping['id']])) {
-      switch (process) {
-        case true:
-          if (this.checklist.length > 0) {
-            if (!this.checklist.includes(checkItem)) {
-              this.checklist = [...this.checklist, checkItem];
-            }
-          }
-          else {
-            this.checklist = [checkItem];
-          }
-          break;
-        case false:
-          this.checklist = this.checklist.filter(item => item[this.objectMapping['id']] !== checkItem[this.objectMapping['id']]);
-          break;
-      }
-      let sorted = this.checklist.sort(function (a, b) { return a - b; });
-      this.checklist = sorted;
-      // if ( this.firstRender === false ){
-      this.calculatedTotals({ "selected": this.checklist.length });
-      // }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleIndeterminateStatus() {
-    if (this.multiSelect === true) {
-      this.checkStatus = false;
-      this.indeterminateStatus = false;
-      if (this.items != undefined && this.checklist != undefined) {
-        if (this.checklist.length == 0) {
-          this.checkStatus = false;
-          this.indeterminateStatus = false;
-        }
-        else if (this.checklist.length == this.items.length) {
-          this.checkStatus = true;
-          this.indeterminateStatus = false;
-        }
-        else if (this.checklist.length < this.items.length) {
-          this.checkStatus = false;
-          this.indeterminateStatus = true;
-        }
-        else {
-          this.checkStatus = false;
-          this.indeterminateStatus = false;
-        }
-        if (this.multiSelect === true) {
-          var indeterminateCheckbox;
-          if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {
-            indeterminateCheckbox["checked"] = this.checkStatus;
-            indeterminateCheckbox["indeterminate"] = this.indeterminateStatus;
-          }
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  calculatedTotals(calcObject) {
-    if (calcObject["selected"] != undefined) {
-      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#selected-item")) {
-        if (calcObject["selected"] > 0) {
-          this.el.shadowRoot.querySelector("#selected-item").innerHTML = "( " + calcObject["selected"] + " selected )";
-        }
-        else {
-          this.el.shadowRoot.querySelector("#selected-item").innerHTML = " ";
-        }
-      }
-    }
-    if (calcObject["total"] != undefined) {
-      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#in-total")) {
-        this.el.shadowRoot.querySelector("#in-total").innerHTML = calcObject["total"];
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  getItemId(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && path[0].attributes
-      && path[0].attributes['id']
-      && path[0].attributes['id'].value;
-    return detect;
-  }
-  /**
-   * @desc
-   */
-  isInternalSlot(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && lowercase$2(path[0].tagName) === 'bcm-list-item'
-      && this.el.contains(path[0]);
-    return detect;
-  }
-  /**
-   * @desc
-   */
-  isInternal(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && path[0].attributes
-      && path[0].attributes['_internal_id']
-      && path[0].attributes['_internal_id'].value;
-    return detect == this._internal_id;
-  }
-  /**
-   * @desc
-   */
-  handleLinkedComponent() {
-    dropInComponent(this.el, "#" + this.linkedComponent);
-    var element = null;
-    if (this.width == "100%" && (element = document.querySelector("#" + this.linkedComponent))) {
-      this.linkedElementWidth = element.clientWidth + "px";
-    }
-  }
-  /**
-   * @desc
-   */
-  async selectIsInitialize() {
-    const elementId = "bcm-list-select-" + this._id;
-    var element;
-    if (!document.getElementById(elementId)) {
-      element = document.createElement("bcm-list-select");
-    }
-    else {
-      element = document.getElementById(elementId);
-    }
-    element.setAttribute("id", elementId);
-    element.setAttribute("_list_id", this._id);
-    element.setAttribute("_internal_id", this._internal_id);
-    if (this.type) {
-      element.setAttribute("type", this.type);
-    }
-    if (this.clearable) {
-      element.setAttribute("clearable", this.clearable);
-    }
-    if (this.label) {
-      element.setAttribute("label", this.label);
-    }
-    if (this.placeholder) {
-      element.setAttribute("placeholder", this.placeholder);
-    }
-    if (this.noCaption) {
-      element.setAttribute("no-naption", this.noCaption);
-    }
-    if (this.caption) {
-      element.setAttribute("caption", this.caption);
-    }
-    if (this.captionError) {
-      element.setAttribute("caption-error", this.captionError);
-    }
-    if (this.captionType) {
-      element.setAttribute("caption-type", this.captionType);
-    }
-    if (this.disabled) {
-      element.setAttribute("disabled", this.disabled);
-    }
-    if (this.name) {
-      element.setAttribute("name", this.name);
-    }
-    if (this.required) {
-      element.setAttribute("required", this.required);
-    }
-    if (this.fullWidth) {
-      element.setAttribute("full-width", this.fullWidth);
-    }
-    if (this.multiSelect) {
-      element.setAttribute("multiselect", this.multiSelect);
-    }
-    const parentNode = this.el.parentNode;
-    parentNode.insertBefore(element, this.el);
-    return elementId;
-  }
-  /**
-   * @desc
-   */
-  handleCheckboxClick(e) {
-    e.preventDefault();
-  }
-  /**
-   * @desc
-   */
-  async handleIndeterminateClick(e) {
-    e.preventDefault();
-    this.indeterminateStatus = false;
-    if (this.checkStatus === false) {
-      this.checkStatus = true;
-    }
-    else {
-      this.checkStatus = false;
-    }
-    if (this.items != undefined && this.items.length > 0) {
-      // const subItems = this.el.shadowRoot.querySelectorAll("bcm-list-item")
-      var selectedIDs = [];
-      this.items.forEach(item => {
-        selectedIDs.push(item[this.objectMapping['id']]);
-        // this.jsonDataProcess( item[ this.objectMapping['id'] ], this.checkStatus === true ? true : false)
-        // this.handleChecklist( item, this.checkStatus === true ? true : false)
-        // var element:any = this.el.shadowRoot.getElementById( item[ this.objectMapping['id'] ] )
-        // if ( element ) {
-        //     if ( element.shadowRoot.querySelector(".checkbox") ){
-        //         element.shadowRoot.querySelector(".checkbox").querySelector("input").checked = this.checkStatus
-        //     }
-        //     if ( this.checkStatus === true ){
-        //         element.classList.add("selected")
-        //     } else {
-        //         element.classList.remove("selected")
-        //     }
-        // }
-      });
-      if (this.checkStatus === true) {
-        this.checked(selectedIDs, false);
-      }
-      else {
-        this.unChecked(selectedIDs);
-      }
-      if (this.processType === 'deselect') {
-        var element = document.querySelector("#" + this._list_id);
-        if (element) {
-          // if ( this.firstRender === false ){
-          element.toggleChecked(selectedIDs);
-          // }
-          // element.unChecked(this.selectedId)
-        }
-      }
-      // this.listChecked.emit( this.checklist )
-      // this.value = this.checklist
-      // this.sendSelectValue()
-    }
-    this.handleIndeterminateStatus();
-  }
-  /**
-   * @desc
-   */
-  sendSelectValue() {
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      const select = document.getElementById("bcm-list-select-" + this._id);
-      if (select) {
-        if (this.multiSelect === true) {
-          select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
-        }
-        else {
-          select.setValue(this.value[this.objectMapping["text"]]);
-        }
-      }
-    }
-  }
-  render() {
-    const classes = classnames('list-container', this.size);
-    const listItem = classnames('list-item', this.size, {
-      'size-2': this.size === 'small' || this.size === 'medium',
-      'size-3': this.size === 'large',
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, 'type-' + this.type, {
-      'error': this.captionType == 'error' ? true : false,
-      'show': this.isShow,
-      'flex': this.minHeight != null || this.maxHeight != null,
-      'full-width': this.fullWidth
-    });
-    const searchContainer = classnames('search-container', {
-      'show': this.searchable,
-    });
-    const footer = classnames('footer');
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + this.captionType);
-    var customStyle = {
-      'height': this.minHeight != null || this.maxHeight != null ? 'auto' : this.height,
-      'min-height': this.minHeight != null ? this.minHeight : null,
-      'max-height': this.maxHeight != null ? this.maxHeight : null,
-      'width': this.minWidth != null || this.maxWidth != null ? 'max-content' :
-        this.width != "100%" ? this.width : this.linkedElementWidth,
-      'min-width': this.minWidth != null ? this.minWidth == "100%" || this.minWidth == "auto" ? this.linkedElementWidth : this.minWidth : null,
-      'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
-    };
-    return (h(Host, { class: hostClasses, style: customStyle }, (this.type === 'default' && this.processType === 'default' && this.label) && (h("label", { class: "label size-1" }, " ", this.label, " ", this.required && ('*'), "  ")), h("main", { style: customStyle }, this.searchable === true && (h("div", { class: searchContainer }, h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, searchValue: this.searchText, clearable: true }), h("bcm-divider", null))), h("div", { class: classes }, this.multiSelect === true && (h("div", { class: "check-container" }, h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, h("div", { class: "check-content" }, h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })), "Select All"), h("div", { class: "divider" }, h("bcm-divider", null)))), h("slot", null), h("div", { class: "list" }), h("div", { class: "spinner first-run" }, h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))), this.infoFooter == true && (h("div", { class: footer }, h("bcm-text", { scale: "size-1", color: "grey-8" }, h("span", { id: "selected-item" }), " Total ", h("span", { id: "in-total" }, "0"), " items found.")))), (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (h("div", { class: "caption-area" }, this.captionType == "error"
-      ? h("span", { class: captionClasses }, " ", this.captionError, " ")
-      : this.caption && h("span", { class: captionClasses }, " ", this.caption, " ")))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "isShow": ["handleOpen"],
-    "value": ["handleChange"]
-  }; }
-};
-BcmList.style = listCss;
-
-const listItemCss = "@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(.hidden){display:none}:host(.selected) .list-item{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item:hover:not(.disabled){color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}:host(.selected) .list-item .check{background-color:#333333}:host(.checkable) .list-item .check{display:inline-block}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;white-space:break-spaces}.list-item .check{display:none;background-color:#ededed;width:15px;height:15px}.list-item .highlight{background-color:var(--bcm-color-yellow-5)}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-grey-8);background-color:var(--bcm-color-prime-blue-1)}.list-item .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:8px;margin-bottom:2px}.checkbox{}.checkbox input{display:none}.checkbox .svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}.checkbox label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.checkbox 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)}.checkbox.indeterminate label span.icon{position:relative}.checkbox.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}.checkbox.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}.checkbox.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)}.checkbox input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.checkbox input:checked+label .icon-checked{display:block}.checkbox bcm-icon{filter:brightness(0) invert(1)}.checkbox input[disabled]+label{cursor:not-allowed}.checkbox input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.checkbox input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.checkbox 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)}.checkbox .caption-area{margin-bottom:8px;min-height:20px;display:block}.checkbox .input-caption{display:block}.checkbox .caption-default{color:#8C8C8C}.checkbox .caption-primary{color:#4293CF}.checkbox .caption-success{color:#52C41A}.checkbox .caption-warning{color:#FA8C16}.checkbox .caption-error{color:#F5222D}.checkbox .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}.checkbox .radio-button>span.icon{display:none}.checkbox .radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.checkbox .radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.checkbox .radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.checkbox .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)}.checkbox .radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .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)}.checkbox .radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.large{height:40px}.checkbox .radio-button.medium{height:32px}.checkbox .radio-button.small{height:24px}";
-
-const BcmListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.listSelected = createEvent(this, "bcm-list-selected", 7);
-    this.listChecked = createEvent(this, "bcm-list-checked", 7);
-    this.size = 'medium';
-    this.hidden = false;
-    this.disabled = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.template = null;
-    this._uniq_id = (Math.random() * 4).toString(16).replace('.', '');
-    // @Prop({ attribute: 'id', reflect: true           }) id: string = (Math.random() * 4).toString(16).replace('.', '')
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.itemObject = null;
-    this.selected = false;
-    this.multiSelect = false;
-  }
-  // @Event({ bubbles: true, composed: true }) loaded: EventEmitter<boolean>;
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() {
-    this.itemObject = this.itemObject;
-    // setTimeout(() => {
-    //     this.loaded.emit(true);
-    // }, 1000);
-  }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  /**
-   * @desc
-   */
-  async select() {
-    this.sendSelect();
-  }
-  /**
-   * @desc
-   */
-  handleClick() {
-    this.sendSelect();
-  }
-  /**
-   * @desc
-   */
-  sendSelect() {
-    if (!this.disabled) {
-      var returnValue = null;
-      if (this.itemObject) {
-        typeof this.itemObject == 'string'
-          ? returnValue = JSON.parse(this.itemObject)
-          : returnValue = this.itemObject;
-        // returnValue = this.itemObject
-      }
-      else {
-        returnValue = this._id;
-      }
-      this.listSelected.emit(returnValue);
-    }
-  }
-  handleCheckboxClick(e) {
-    e.preventDefault();
-  }
-  render() {
-    const { size, disabled, selected, hidden, multiSelect } = this;
-    const classes = classnames('list-item', size, {
-      'disabled': disabled,
-      'selected': selected,
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-    });
-    const hostClasses = classnames(hidden ? 'hidden' : null, {
-      'disabled': disabled,
-      'selected': selected,
-      'checkable': multiSelect,
-    });
-    const checkboxClasses = classnames('checkbox', this.hidden ? 'hidden' : null, {
-      'indeterminate': false
-    });
-    const checkboxIconClasses = classnames('icon');
-    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h("div", { class: classes }, multiSelect && (h("div", { class: "check-content" }, h("div", { class: checkboxClasses, onClick: (e) => this.handleCheckboxClick(e) }, h("input", { id: 'check-' + this._id, type: "checkbox", name: 'check-' + this._id, checked: this.selected, disabled: this.disabled }), h("label", { htmlFor: 'check-' + this._id }, h("span", { class: checkboxIconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))))), h("span", { id: "text" }, this.text ? this.text : h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-};
-BcmListItem.style = listItemCss;
-
-const listSelectCss = "@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:256px;margin:0 0 8px 0;overflow:hidden;max-width:100%}:host(.hidden){display:none}:host(.full-width){width:100%}:host(.type-autocomplete) #selected-container{border:none}:host(.type-autocomplete) #selected-container .selected-text{padding:0;border:none}:host(.type-autocomplete) #selected-container .selected-text bcm-input{display:contents}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer;border-radius:2px;position:relative}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center;overflow:hidden}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.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 .selected{border:1px solid var(--bcm-color-red-6) !important}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px;height:20px}.tag[hidden]{opacity:0 !important;position:absolute !important;z-index:-1}.tag .value{cursor:pointer;max-width:164px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.tag.size-large{padding:calc(40px - 8px) 40px}.tag.size-medium{padding:calc(32px - 8px) 32px}.tag.size-small{padding:calc(24px - 8px) 24px}.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon,.tag.dissmisable .close-button .icon *{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon,.tag.dissmisable .close-button:hover .icon *{color:var(--bcm-color-grey-10)}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}";
-
-const BcmListSelect = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.clear = createEvent(this, "bcm-clear", 7);
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.objectMapping = {
-      'id': "id",
-      'text': "text",
-      'selected': "selected",
-    };
-    this.hidden = false;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this._list_id = null;
-    this.value = null;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.type = 'default';
-    this.size = 'medium';
-    this.placeholder = "Choose an option";
-    this.noCaption = false;
-    this.captionType = 'default';
-    this.fullWidth = false;
-    this.required = false;
-    this.multiSelect = false;
-    this.searchData = null;
-    this.searchPlaceholder = "Search";
-    this.searchFields = ['text'];
-    this.returnField = "id";
-    this.searchSub = "items";
-    this.searchText = "";
-    this.captionCache = null;
-    this.captionTypeCache = null;
-    this.isOpen = false;
-    this.selectArea = null;
-    this.selectAreaWidth = 0;
-    this.selectHiddenData = [];
-    this.otherList = [];
-    this.selectText = null;
-    this.selectData = [];
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() {
-    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
-    this.selectAreaWidth = this.selectArea.clientWidth;
-    setTimeout(() => {
-      const spinner = this.el.shadowRoot.querySelector('.spinner');
-      spinner.classList.remove("first-run");
-    }, 100);
-  }
-  componentWillRender() { }
-  componentDidRender() {
-    if (this.selectAreaWidth === 0) {
-      this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
-      this.selectAreaWidth = this.selectArea.clientWidth;
-    }
-    this.selectArea.style.width = "100%";
-    this.handleTagControl();
-    if (sessionStorage.getItem(this._internal_id + "-config")) {
-      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-    }
-  }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  /**
-   * @descc
-   */
-  handleFocus() {
-    this.focus.emit();
-  }
-  /**
-   * @descc
-   */
-  handleBlur() {
-    this.blur.emit();
-  }
-  /**
-   * @desc
-   */
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  /**
-   * @descc
-   */
-  async handleOpen(list = "default") {
-    var element = null;
-    var list_id = null;
-    switch (list) {
-      case "default":
-        list_id = this._list_id;
-        break;
-      case "other":
-        list_id = "bcm-clone-list-" + this._internal_id;
-        break;
-    }
-    element = document.getElementById(list_id);
-    if (element != null) {
-      if (element.classList.contains("show") === true) {
-        element.hide();
-      }
-      else {
-        element.show();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async hide(list = "default") {
-    var element = null;
-    var list_id = null;
-    switch (list) {
-      case "default":
-        list_id = this._list_id;
-        break;
-      case "other":
-        list_id = "bcm-clone-list-" + this._internal_id;
-        break;
-    }
-    element = document.getElementById(list_id);
-    if (element != null) {
-      element.hide();
-    }
-  }
-  /**
-   * @desc
-   */
-  async show(list = "default") {
-    var element = null;
-    var list_id = null;
-    switch (list) {
-      case "default":
-        list_id = this._list_id;
-        break;
-      case "other":
-        list_id = "bcm-clone-list-" + this._internal_id;
-        break;
-    }
-    element = document.getElementById(list_id);
-    if (element != null) {
-      element.show();
-    }
-  }
-  /**
-   * @desc
-   */
-  async toggle(list = "default") {
-    this.handleOpen(list);
-  }
-  /**
-   * @descc
-   */
-  clickClear(e) {
-    e.stopPropagation();
-  }
-  /**
-   * @desc
-   */
-  async config(_config) {
-    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
-    this.selectArea.style.width = "100%";
-    this.selectAreaWidth = this.selectArea.clientWidth;
-    this.handleTagControl();
-    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
-    if (_config['searchPlaceholder']) {
-      this.searchPlaceholder = _config['searchPlaceholder'];
-    }
-    if (_config['searchFields']) {
-      this.searchFields = _config['searchFields'];
-    }
-    if (_config['returnField']) {
-      this.returnField = _config['returnField'];
-    }
-    if (_config['searchSub']) {
-      this.searchSub = _config['searchSub'];
-    }
-    if (_config['searchText']) {
-      this.searchText = _config['searchText'];
-    }
-    if (_config['mapping']) {
-      if (_config['mapping']['id']) {
-        this.objectMapping['id'] = _config['mapping']['id'];
-      }
-      if (_config['mapping']['text']) {
-        this.objectMapping['text'] = _config['mapping']['text'];
-      }
-      if (_config['mapping']['selected']) {
-        this.objectMapping['selected'] = _config['mapping']['selected'];
-      }
-    }
-    return _config;
-  }
-  /**
-   * @descc
-   */
-  async setValue(value, _id = "id", _text = "text") {
-    var newValue = value;
-    // this.searchData = JSON.parse(value as string)
-    this.handleLoading(true);
-    this.selectData = [];
-    this.otherList = [];
-    if (typeof value == 'string') {
-      if (this.value !== value) {
-        this.selectText = String(value);
-        this.value = this.selectText;
-      }
-      this.handleLoading(false);
-    }
-    else {
-      if (value) {
-        value.forEach(item => {
-          // console.log(item[id] + " " + item[text])
-          this.selectData.push({ id: item[_id], text: item[_text], selected: true });
-        });
-      }
-      if (this.value !== this.selectData) {
-        this.value = this.selectData;
-        if (value) {
-          newValue.forEach(element => {
-            // element[this.objectMapping['id']] = element[this.objectMapping['id']]
-            element[this.objectMapping['selected']] = true;
-          });
-        }
-        this.otherList = newValue;
-        var visibleTags = this.el.shadowRoot.getElementById("visible-tags");
-        if (visibleTags) {
-          visibleTags.innerHTML = " ";
-          const maxTags = Math.ceil((this.selectAreaWidth - 16) / 40);
-          const visibleSelectData = this.selectData.slice(0, maxTags);
-          visibleSelectData.map((item) => {
-            const newTag = document.createElement("span");
-            newTag.setAttribute("id", String(item["id"]));
-            newTag.setAttribute("value", item["text"]);
-            newTag.setAttribute("title", item["text"]);
-            newTag.setAttribute("_internal_id", this._internal_id);
-            // newTag.customStyle = customStyleTag
-            newTag.style.opacity = "0";
-            newTag.style.position = "absolute";
-            newTag.classList.add("tag");
-            newTag.classList.add("dissmisable");
-            newTag.classList.add("size-1");
-            newTag.setAttribute("_internal_id", this._internal_id);
-            newTag.innerHTML = '<span class="value"> ' + item["text"] + ' </span>'
-              + '<span id="close-button" ' + '_internal_id="' + this._internal_id + '" class="right close-button"> '
-              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> '
-              + '<g id="icon/outlined/suggested/close">'
-              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" fill="black"/>'
-              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" fill="black"/>'
-              + '</g>'
-              + '</svg>'
-              + '</span>';
-            visibleTags.appendChild(newTag);
-          });
-        }
-      }
-      // this.selectHiddenData = this.value
-    }
-    // console.log('this.otherList: ', this.otherList)
-    // this.resetCaption()
-    return this.value;
-  }
-  /**
-   * @descc
-   * @param event
-   */
-  handleLoading(show = false) {
-    const spinner = this.el.shadowRoot.querySelector('.spinner');
-    if (show == true) {
-      spinner.classList.add("show");
-    }
-    else {
-      spinner.classList.remove("show");
-    }
-  }
-  /**
-   * @descc
-   */
-  resizeEvent() {
-    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
-    this.selectArea.style.width = "100%";
-    this.selectAreaWidth = this.selectArea.clientWidth;
-    this.handleTagControl();
-    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
-  }
-  /**
-   * @descc
-   */
-  async handleTagControl() {
-    this.selectHiddenData = [];
-    const tagcontainer = this.el.shadowRoot.getElementById("tagcontainer");
-    if (tagcontainer) {
-      var tags = tagcontainer.querySelectorAll(".tag");
-      var tagsWidth = 0;
-      // var otherStatus = false
-      var otherTagWidth = 135 + 2;
-      var padding = 16;
-      var visibleTags = [];
-      tags.forEach(element => {
-        element["hidden"] = false;
-        element["style"]["opacity"] = "0";
-        element["style"]["position"] = "absolute";
-      });
-      tags.forEach(element => {
-        var clientWidth = element.clientWidth <= 200 ? element.clientWidth : 200;
-        if ((this.selectAreaWidth - padding) > (clientWidth + 2 + tagsWidth)) {
-          tagsWidth += clientWidth + 2;
-          element["style"]["opacity"] = "1";
-          element["style"]["position"] = "relative";
-        }
-        else {
-          element["hidden"] = true;
-          // otherStatus = true
-        }
-      });
-      const removeTag = (calcOther = false) => {
-        if ((this.selectAreaWidth - padding) < (calcOther === true ? tagsWidth + otherTagWidth : tagsWidth)) {
-          visibleTags = Array.from(tags).filter(e => e["hidden"] === false);
-          if (visibleTags[visibleTags.length - 1]) {
-            var clientWidth = visibleTags[visibleTags.length - 1].clientWidth <= 200 ? visibleTags[visibleTags.length - 1].clientWidth : 200;
-            tagsWidth -= clientWidth + 2;
-            visibleTags[visibleTags.length - 1]["hidden"] = true;
-            removeTag(calcOther);
-          }
-        }
-      };
-      removeTag();
-      await delay(100);
-      tags = tagcontainer.querySelectorAll(".tag");
-      var hiddenData = Array.from(tags).filter(e => e["hidden"] === true);
-      const otherTagcontainer = this.el.shadowRoot.getElementById("other-container");
-      if (Number(hiddenData.length) > 0) {
-        removeTag(true);
-        if (otherTagcontainer) {
-          otherTagcontainer.style.display = "flex";
-          const otherTag = otherTagcontainer.querySelector("bcm-tag");
-          if (otherTag) {
-            this.selectHiddenData = this.otherList;
-            Array.from(tags).filter(e => e["hidden"] === false).forEach(element => {
-              this.selectHiddenData = this.selectHiddenData.filter(e => String(e[this.objectMapping['id']]) !== String(element.id));
-            });
-            otherTag.setAttribute("value", this.selectHiddenData.length + " item" + (this.selectHiddenData.length > 1 ? 's' : '') + " selected");
-            var result = Object.keys(this.selectHiddenData).map((key) => (this.selectHiddenData[key][this.objectMapping['text']]).substring(0, 15) + "...").slice(0, 10) + "\r\n...";
-            const hiddenTagsString = result.toString().split(',').join("\r\n");
-            otherTag.setAttribute("title", hiddenTagsString);
-          }
-        }
-      }
-      else {
-        if (otherTagcontainer) {
-          otherTagcontainer.style.display = "none";
-        }
-      }
-    }
-    const cloneList = this.listIsInitialize();
-    if (cloneList) {
-      if (sessionStorage.getItem(this._internal_id + "-config")) {
-        cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-      }
-      // console.log('selectHiddenData: ',    this.selectHiddenData )
-      cloneList.setDataOther(this.selectHiddenData);
-      // cloneList.show()
-    }
-    // await delay(100)
-    this.handleLoading(false);
-  }
-  /**
-  * @desc
-  */
-  listIsInitialize() {
-    // console.log("olusturuldu")
-    var element;
-    const elementId = "bcm-clone-list-" + this._internal_id;
-    const otherListInternalId = (Math.random() * 4).toString(16).replace('.', '');
-    if (!document.getElementById(elementId)) {
-      element = document.createElement("bcm-list");
-      var el = document.getElementById(this._list_id);
-      for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
-        element.setAttribute(atts[i].nodeName, atts[i].nodeValue);
-      }
-      element.setAttribute("id", elementId);
-      element.setAttribute("_list_id", this._list_id);
-      element.setAttribute("_list_select_id", this._id);
-      element.setAttribute("_internal_id", otherListInternalId);
-      element.searchable = true;
-      element.infoFooter = false;
-      element.type = "default";
-      element.processType = "deselect";
-      element.setAttribute("linked-component", this._id);
-      element.linkedComponent = this._id;
-      element.multiSelect = true;
-      const parentNode = this.el.parentNode;
-      parentNode.insertBefore(element, this.el);
-    }
-    else {
-      element = document.getElementById(elementId);
-    }
-    // 
-    return element;
-  }
-  /**
-   * @descc
-   */
-  inputChange(e) {
-    this.search(e);
-  }
-  search(value) {
-    const element = document.getElementById(this._list_id);
-    if (element != null) {
-      element.setSearch(value);
-    }
-  }
-  /**
-   * @desc
-   */
-  async handleClick(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0]) {
-      const cloneElementId = "bcm-clone-list-" + this._internal_id;
-      const cloneElement = document.querySelector("#" + cloneElementId);
-      const element = document.querySelector("#" + this._list_id);
-      if (path.filter((input) => input['id'] == "close-button")[0]
-        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]
-        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"]) {
-        event.preventDefault();
-        event.stopPropagation();
-        const selectedID = path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"];
-        if (element) {
-          element.unChecked(selectedID);
-        }
-      }
-      if (path.filter((input) => input['id'] == "other-tag")[0]) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (path.filter((input) => input['id'] == "close")[0]) {
-          if (cloneElement) {
-            if (await cloneElement.openStatus() === true) {
-              if (element) {
-                element.show();
-              }
-            }
-          }
-          var selectedIDs = [];
-          this.selectHiddenData.forEach(item => {
-            selectedIDs.push(item[this.objectMapping['id']]);
-          });
-          if (element) {
-            element.unChecked(selectedIDs);
-          }
-        }
-        else {
-          if (cloneElement) {
-            setTimeout(() => {
-              cloneElement.show();
-            }, 100);
-          }
-        }
-      }
-    }
-  }
-  render() {
-    const { label, fullWidth, required, selectText, selectData, placeholder, clearable, value, isOpen, noCaption, captionType, captionError, caption, size, disabled } = this;
-    // const classes = cs(
-    //     'card',
-    //     this.size
-    // )
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, 'type-' + this.type, {
-      'full-width': fullWidth
-    });
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const container = classnames('container', {
-      'error': captionType == 'error' ? true : false,
-      'full-width': fullWidth
-    });
-    const selectedText = classnames('selected-text');
-    const selected = classnames('selected', 'selected-' + size, {
-      'size-3': size === 'large',
-      'size-2': size === 'small' || size === 'medium',
-      'disabled': disabled
-    });
-    // const customStyleTag = {
-    //     'cursor': 'pointer',
-    //     'max-width': '164px',
-    //     'text-overflow': 'ellipsis',
-    //     'white-space': 'nowrap',
-    //     'overflow': 'hidden',
-    //     'display': 'block'
-    // }
-    const customStyleOtherTag = {
-      'cursor': 'pointer',
-      'white-space': 'nowrap'
-    };
-    return (
-    // <Host class={hostClasses}>
-    //     <div class={classes}>
-    //       <slot />
-    //     </div>
-    // </Host>
-    h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("label", { class: "label size-1", onClick: () => this.handleOpen() }, " ", label, " ", required === true && ('*'), "  "), h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 }, h("span", { class: selectedText, title: selectText !== null && (selectText) }, h("div", { class: "spinner first-run" }), this.type === 'select' && (selectText !== null && (h("div", { class: "text-content" }, selectText))), (this.type === 'select' || this.type === 'autocomplete' && this.multiSelect === true) && (selectText === null && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", { id: "visible-tags" }), h("span", { id: "other-container" }, h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))), this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (h("span", { class: "placeholder" }, " ", placeholder, " "))), this.type === 'autocomplete' && (h("bcm-input", { "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", value: this.searchText, "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), h("span", { class: isOpen ? 'open' : 'close' }, h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))), noCaption === false && (h("div", { class: "caption-area" }, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
-  }
-  get el() { return getElement(this); }
-};
-BcmListSelect.style = listSelectCss;
-
-/**
- * 'status' prop predefined values
- */
-var StatusProps;
-(function (StatusProps) {
-  StatusProps["info"] = "info";
-  StatusProps["error"] = "error";
-  StatusProps["warning"] = "warning";
-  StatusProps["success"] = "success";
-  StatusProps["none"] = "none";
-})(StatusProps || (StatusProps = {}));
-/**
- * 'type' prop predefined values
- */
-var TypeProps;
-(function (TypeProps) {
-  TypeProps["modal"] = "modal";
-  TypeProps["information"] = "information";
-  TypeProps["confirmation"] = "confirmation";
-})(TypeProps || (TypeProps = {}));
-/**
- * 'type' prop predefined values
- */
-var OrientationProps;
-(function (OrientationProps) {
-  OrientationProps["portrait"] = "portrait";
-  OrientationProps["landscape"] = "landscape";
-})(OrientationProps || (OrientationProps = {}));
-
-const modalCss = "@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}:host(.hidden){display:none}.modal{display:flex;position:fixed;justify-content:center;align-items:flex-start;top:0;left:0;opacity:0;margin:0;padding:80px 40px 40px;overflow:hidden;overflow-y:auto;background-color:rgba(0, 0, 0, 0.5);box-sizing:border-box;z-index:-1000;width:100vw;height:100vh;visibility:hidden}.modal.show{visibility:visible;top:0;opacity:1;z-index:10500}.overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0}.card{display:flex;flex-direction:column;width:100%;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.15);border-radius:2px;background-color:#fff;z-index:2}.card.portrait{max-width:312px}.card.landscape{max-width:475px}.card.small{width:576px}.card.medium{width:768px}.card.large{width:992px}.card.x-large{width:1024px}.card.xx-large{width:1200px}.card.xxx-large{width:1700px}.card.full-width{width:100%}.text-content{font-size:14px;line-height:22px;color:var(--bcm-color-grey-8);padding:0}.title{position:relative;display:flex;align-items:center;justify-content:flex-start;padding-right:24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9)}.title bcm-icon{margin-right:8px}p:not(.with-status){margin:0}p.with-status{padding-left:32px}header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9);background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5)}header bcm-icon{cursor:pointer}footer{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-2)}footer bcm-button+bcm-button{margin-left:8px}.footer{display:flex;align-items:flex-start;justify-content:flex-end}.footer bcm-button+bcm-button{margin-left:8px}";
-
-/**
- * @desc
- * @param str
- */
-const lowercase$3 = (str) => str.toLowerCase();
-const BcmModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ok = createEvent(this, "bcm-ok", 7);
-    this.cancel = createEvent(this, "bcm-cancel", 7);
-    this.slotHeader = false;
-    this.slotContent = false;
-    this.slotFooter = false;
-    this.slotHeaderHtml = '';
-    this.slotContentHtml = '';
-    this.slotFooterHtml = '';
-    this.bodyStyleOverflow = '';
-    this.type = TypeProps.modal;
-    this.status = StatusProps.none;
-    this.okText = 'OK';
-    this.cancelText = 'Cancel';
-    this.isShow = false;
-    this.hidden = false;
-    this.size = 'medium';
-    this.fullWidth = false;
-    this.backdrop = true;
-  }
-  /**
-   * @StencilMethod
-   */
-  componentWillLoad() {
-    if (this.type !== TypeProps.modal && this.status === StatusProps.none)
-      this.status = StatusProps.info;
-    // if ( this.el.querySelector('bcm-modal-header')  ) { 
-    //     this.slotHeaderHtml = this.el.querySelector('bcm-modal-header').innerHTML
-    //     this.slotHeader = true 
-    // }
-    // if ( this.el.querySelector('bcm-modal-content') ) { 
-    //     this.slotContentHtml = this.el.querySelector('bcm-modal-content').outerHTML
-    //     this.slotContent = true 
-    // }
-    // if ( this.el.querySelector('bcm-modal-footer')  ) { 
-    //     this.slotFooter = true 
-    // }
-  }
-  componentDidRender() {
-    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
-    slot.map(el => {
-      if (String(el.tagName).toLowerCase() === 'bcm-modal-header') {
-        el.slot = 'header';
-        this.headerArea = true;
-      }
-      if (String(el.tagName).toLowerCase() === 'bcm-modal-footer') {
-        el.slot = 'footer';
-        this.footerArea = true;
-      }
-    });
-  }
-  /**
-   * @desc
-   * @returns {BcmIcon}
-   */
-  getIcon() {
-    switch (this.status) {
-      case StatusProps.info:
-        return h("bcm-icon", { type: "outlined", icon: "info-circle", size: "medium", color: "prime-blue-6" });
-      case StatusProps.error:
-        return h("bcm-icon", { type: "outlined", icon: "close-circle", size: "medium", color: "red-6" });
-      case StatusProps.warning:
-        return h("bcm-icon", { type: "outlined", icon: "exclamation-circle", size: "medium", color: "warmyellow-6" });
-      case StatusProps.success:
-        return h("bcm-icon", { type: "outlined", icon: "check-circle", size: "medium", color: "green-6" });
-    }
-  }
-  /**
-   * @desc
-   */
-  handleOk() {
-    this.ok.emit();
-    this.isShow = false;
-  }
-  /**
-   * @desc
-   */
-  handleCancel() {
-    this.cancel.emit();
-    this.isShow = false;
-  }
-  /**
-   * @desc
-   * @returns {BcmIcon}
-   */
-  getFooterActions() {
-    return ((this.footerArea && (h("footer", null, " ", h("slot", { name: "footer" }), " "))));
-  }
-  handleSubmit(e) {
-    if (lowercase$3(e.target.nodeName) === 'bcm-button') {
-      if (e.target.dataDismiss) {
-        this.dismiss();
-      }
-    }
-  }
-  /**
-   * @desc Removes component itself
-   */
-  dismiss() {
-    this.isShow = false;
-    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
-    // this.el.remove()
-  }
-  handleBackdrop() {
-    if (this.backdrop == true) {
-      this.dismiss();
-    }
-  }
-  /**
-   * @desc
-   */
-  async hide() {
-    this.dismiss();
-  }
-  /**
-   * @desc
-   */
-  async show() {
-    this.isShow = true;
-    if (document.querySelector("body").style.overflow != "hidden") {
-      this.bodyStyleOverflow = document.querySelector("body").style.overflow;
-    }
-    document.querySelector("body").style.overflow = "hidden";
-    // const bcmTabs = this.el.querySelector('bcm-tabs')
-    // if ( bcmTabs ) {
-    //     var getActiveTab = await bcmTabs.getActiveTab()
-    //     bcmTabs.active( getActiveTab )
-    // }
-  }
-  keyboardNavigation(e) {
-    if (this.backdrop == true) {
-      const which = e.which || 0;
-      if (which == 27) {
-        e.preventDefault();
-        this.dismiss();
-      }
-    }
+    this.type = Bcm$1.Status.default;
   }
   render() {
-    const { type, status, headerTitle, isShow, headerArea, size, fullWidth } = this;
-    const cardClasses = classnames('card', status, size, fullWidth ? 'full-width' : null);
-    const modal = classnames('modal', {
-      'show': isShow
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: modal }, h("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h("div", { class: cardClasses }, type === TypeProps.modal && (headerArea && (h("header", null, h("slot", { name: "header" }), " ", h("bcm-icon", { icon: "close", color: "grey-10", onClick: () => this.dismiss() })))), h("div", { class: "text-content" }, type !== TypeProps.modal && (h("span", { class: "title" }, this.getIcon(), headerArea && (h("slot", { name: "header" })), !headerArea && (headerTitle))), h("p", { class: type !== TypeProps.modal ? 'with-status' : '' }, h("slot", null)), type !== TypeProps.modal && this.getFooterActions()), type === TypeProps.modal && (this.getFooterActions())))));
+    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); }
 };
-BcmModal.style = modalCss;
-
-/**
- * '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 radioCss = "@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}:host(.hidden){display:none}input[type=radio]{position:absolute;width:0;height:0;opacity:0}label{user-select:none;display:inline-flex;align-items:center;color:var(--bcm-color-grey-8);cursor:pointer}.radio-container .radio{width:16px;height:16px;min-width:16px;min-height:16px;border:1px solid var(--bcm-color-grey-5);border-radius:100%;background-color:var(--bcm-color-grey-1);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition-duration:0.3s;margin-right:8px}.radio-container .radio .inner{width:8px;height:8px;border-radius:100%;background-color:var(--bcm-color-grey-1)}.radio-container:hover:not(.disabled) .radio{border-color:var(--bcm-color-prime-blue-6);filter:drop-shadow(0px 2px 4px rgba(54, 121, 171, 0.5))}.radio-container.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-container.disabled .radio{border-color:var(--bcm-color-grey-5)}.radio-container.checked .radio{border-color:var(--bcm-color-prime-blue-6)}.radio-container.checked .inner{background-color:var(--bcm-color-prime-blue-6)}.radio-container.checked.disabled .radio{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.radio-container.checked.disabled .inner{background-color:var(--bcm-color-grey-6)}.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}.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 BcmRadio = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "bcm-change", 3);
-    this.focus = createEvent(this, "bcm-focus", 3);
-    this.blur = createEvent(this, "bcm-blur", 3);
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
-    this.size = 'medium';
-    this.hidden = false;
-    this.required = false;
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  /**
-   * @desc
-   * @param name -
-   * @returns {void}
-   */
-  async check(uncheck) {
-    this.radio.checked = uncheck;
-    this.handleChange();
-  }
-  handleChange() {
-    this.checked = this.radio.checked;
-    this.change.emit({
-      value: this.radio.value,
-      checked: this.radio.checked
-    });
-  }
-  connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-  }
-  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 { checked, value, disabled, optionType, buttonStyle, size } = this;
-    const defaultClasses = classnames('radio-container', 'size-2', {
-      'checked': checked,
-      'disabled': disabled
-    });
-    const buttonClasses = classnames('radio-button', buttonStyle, size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-      'checked': checked,
-      'disabled': disabled,
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("label", { class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("input", { type: "radio", value: value, checked: checked, ref: el => (this.radio = el), onChange: this.handleChange, disabled: disabled }), optionType === 'default' && (h("span", { class: "radio" }, h("span", { class: "inner" }))), h("slot", null))));
-  }
-};
-BcmRadio.style = radioCss;
+BcmLabel.style = labelCss;
 
-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;margin:0 0 8px 0}:host(.hidden){display:none}: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}.radio-group{display:flex}.radio-group.horizontal{flex-direction:row;margin-bottom:5px}.radio-group.horizontal ::slotted(bcm-radio:not(:last-of-type)){margin-right:16px}.radio-group.horizontal bcm-radio:not(:last-of-type){margin-right:16px}.radio-group.vertical{flex-direction:column}.radio-group.vertical label{margin-bottom:4px}.radio-group.vertical ::slotted(bcm-radio:not(:last-of-type)){margin-bottom:8px}.radio-group.vertical bcm-radio:not(:last-of-type){margin-bottom:8px}.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}";
+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 BcmRadioGroup = class {
+const BcmSwitch = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "bcm-change", 7);
-    this.childRadios = [];
-    this.direction = 'horizontal';
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
+    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';
-    this.radioOptions = [];
-    this.usingSlots = true;
-  }
-  async setData(_data) {
-    setTimeout(() => {
-      this.options = _data;
-    }, 100);
-    return Promise.resolve(true);
-  }
-  async getValue() {
-    return this.value;
-  }
-  async check(value) {
-    this.defaultValue = value;
-    this.value = value;
-  }
-  async setClear() {
-    this.value = '';
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  parseOptions(newValue) {
-    if (newValue) {
-      typeof newValue === 'string'
-        ? this.radioOptions = JSON.parse(newValue)
-        : this.radioOptions = newValue;
-      if (this.radioOptions.length > 0)
-        this.usingSlots = false;
-    }
-  }
-  // If checked radio changes, emits change event
-  handleChange(newValue) {
-    this.change.emit(newValue);
-  }
-  // Controls radios styles and states
-  controlRadio(elements) {
-    elements.forEach((radio) => {
-      radio.checked = this.value ? radio.value === this.value : this.defaultValue ? radio.value === this.defaultValue : null;
-      radio.disabled = this.disabled;
-      radio.optionType = this.optionType;
-      radio.buttonStyle = this.buttonStyle;
-      radio.size = this.size;
-      radio.addEventListener('bcm-change', (e) => {
-        e.stopPropagation();
-        if (e.detail.checked) {
-          this.value = radio.value;
-        }
-      }, { once: true });
-    });
   }
   connectedCallback() {
     this.captionCache = this.caption;
     this.captionTypeCache = this.captionType;
   }
-  componentWillLoad() {
-    this.parseOptions(this.options);
-  }
-  componentDidRender() {
-    let elements = [];
-    if (this.usingSlots) {
-      elements = this.host.shadowRoot.querySelector('slot').assignedElements();
-      this.childRadios = [];
-      elements.map(el => {
-        String(el.tagName).toLowerCase() == 'bcm-radio' && this.childRadios.push(el);
-      });
-      this.controlRadio(this.childRadios);
-    }
-    else {
-      elements = Array.from(this.host.shadowRoot.querySelectorAll('bcm-radio'));
-      this.controlRadio(elements);
-    }
-  }
-  render() {
-    const { label, required, noCaption, caption, captionError, captionType } = this;
-    const classes = classnames('radio-group', {
-      [this.direction]: this.optionType === 'default'
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
-      'error': captionType == 'error' ? true : false
-    });
-    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    if (this.radioOptions) {
-      return (h(Host, { class: hostClasses }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), "  "), h("div", { class: classes }, this.radioOptions && this.radioOptions.map(radio => (h("bcm-radio", { value: radio.value, disabled: radio.disabled, checked: radio.checked }, " ", radio.label, " "))), h("slot", null)), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-        ? h("span", { class: captionClasses }, " ", captionError, " ")
-        : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
-    }
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "options": ["parseOptions"],
-    "value": ["handleChange"]
-  }; }
-};
-BcmRadioGroup.style = groupCss;
-
-const searchCss = "@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}:host(.hidden){display:none}";
-
-const lowercase$4 = (str) => str.toLowerCase();
-const BcmSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bcmOnSearch = createEvent(this, "bcm-on-search", 7);
-    this.bcmOnSearchValue = createEvent(this, "bcm-on-search-value", 7);
-    this.data = [];
-    this.searchFields = ['text', 'value' /*, ...*/];
-    this.returnField = 'idx';
-    this.searchSub = null;
-    this.hidden = false;
-    this.onlyChild = false;
-    this.clearable = false;
-    this.searchValue = '';
-    this.searchPlaceholder = 'Search';
-    this.disabled = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.results = [];
+  handleClick() {
+    this.checked = this.input.checked;
+    this.value = this.checked;
+    this.change.emit(this.checked);
   }
   componentDidLoad() {
-    this.el.shadowRoot.querySelector('bcm-input').clearable = this.clearable;
+    this.value = this.checked;
   }
-  listenBcmChange(e) {
-    e.stopPropagation();
+  handleFocus() {
+    this.focus.emit();
   }
-  async setValue(value) {
-    const input = this.el.shadowRoot.querySelector('bcm-input');
-    await input.setValue(value);
-    return value;
+  handleBlur() {
+    this.blur.emit();
   }
-  async select() {
-    const input = this.el.shadowRoot.querySelector('bcm-input');
-    await input.select();
-    this.bcmOnSearch.emit(true);
-    return true;
+  componentWillRender() {
+    if (this.pending) {
+      this.disabled = true;
+    }
   }
   async setClear() {
-    const input = this.el.shadowRoot.querySelector('bcm-input');
-    await input.setClear();
-    this.bcmOnSearch.emit(true);
-    return true;
-  }
-  async searchArray(value, idFields = null) {
-    // console.log(this.data)
-    let cacheSearchFields = this.searchFields;
-    let arrayResult = [];
-    if (idFields) {
-      this.searchFields = [idFields];
-    }
-    value.forEach(item => {
-      // item = {[idFields]:item}
-      this.results = [];
-      // console.log(this.data)
-      this.nestedSearch(this.data, item, true);
-      arrayResult.push(...this.results);
-    });
-    this.searchFields = cacheSearchFields;
-    return arrayResult;
-    // const input = this.el.shadowRoot.querySelector("bcm-input");
-    // await input.setValue( value )
-    // return value
-  }
-  nestedSearch(items, value, equal = false) {
-    var result;
-    items.map((item) => {
-      this.searchFields.map(searchField => {
-        if (searchField in item) {
-          // debugger;
-          item[searchField] = lowercase$4(String(item[searchField]));
-          if (this.onlyChild) {
-            if (item[this.searchSub]) {
-              var temp = this.nestedSearch(item[this.searchSub], value, equal);
-              if (temp) {
-                this.results.push((result = String(item[this.returnField])));
-                this.results.push(temp);
-              }
-            }
-            else {
-              if (equal) {
-                // console.log(value)
-                if (item[searchField] == lowercase$4(String(value))) {
-                  // if (item == lowercase(value)) {
-                  this.results.push((result = String(item[this.returnField])));
-                  // this.results.push (result = String(item))
-                }
-              }
-              else {
-                if (item[searchField].indexOf(lowercase$4(value)) !== -1) {
-                  this.results.push((result = String(item[this.returnField])));
-                }
-              }
-            }
-          }
-          else {
-            if (item[this.searchSub]) {
-              var temp = this.nestedSearch(item[this.searchSub], value, equal);
-              if (temp) {
-                this.results.push((result = String(item[this.returnField])));
-                this.results.push(temp);
-              }
-            }
-            if (equal) {
-              // console.log(value)
-              if (item[searchField] == lowercase$4(String(value))) {
-                // if (item == lowercase(value)) {
-                this.results.push((result = String(item[this.returnField])));
-                // this.results.push (result = String(item))
-              }
-            }
-            else {
-              if (item[searchField].indexOf(lowercase$4(value)) !== -1) {
-                this.results.push((result = String(item[this.returnField])));
-              }
-            }
-          }
-        }
-      });
-    });
-    return result;
-  }
-  /**
-   * @desc
-   * @param value
-   */
-  inputChange(value) {
-    this.results = [];
-    // data prop'unda arama yapılacak (searchFields prop'u içerisindeki alanlar ile)
-    // arama sonucunda eşleyen itemların 'idx', index
-    // değerleri, array şeklinde root component'e
-    // event ile gönderilecek
-    // Örneğin value == 'to' olduğunda aşağıdaki
-    // sonuçlar filtrelenmeli
-    // -->
-    //{ text: 'Mateusz Eaton', idx: 2 },
-    //{ text: 'Tony Vickers', idx: 3 },
-    // result array'i eşleşen itemların
-    // index numaralarını tutacak
-    // results = [2, 3]
-    // Örnek arama
-    // #
-    this.nestedSearch(this.data, value);
-    this.results = Array.from(new Set(this.results));
-    (value && ((this.results.length > 0 && this.bcmOnSearch.emit(this.results)) || this.bcmOnSearch.emit([-1]))) || this.bcmOnSearch.emit(true);
-    this.bcmOnSearchValue.emit(value);
-  }
-  render() {
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("bcm-input", { placeholder: this.searchPlaceholder, "no-caption": true, "no-margin": true, "full-width": true, disabled: this.disabled, type: "search", "on-bcm-change": e => this.inputChange(e.detail), value: this.searchValue })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "searchValue": ["inputChange"]
-  }; }
-};
-BcmSearch.style = searchCss;
-
-/**
- * 'size' prop predefined values
- */
-var SizeProps;
-(function (SizeProps) {
-  SizeProps["large"] = "large";
-  SizeProps["medium"] = "medium";
-  SizeProps["small"] = "small";
-})(SizeProps || (SizeProps = {}));
-/**
- * 'type' prop predefined values
- */
-var TypeProps$1;
-(function (TypeProps) {
-  TypeProps["normal"] = "normal";
-  TypeProps["pane"] = "pane";
-  TypeProps["stepper"] = "stepper";
-})(TypeProps$1 || (TypeProps$1 = {}));
-/**
- * 'direction' prop predefined values
- */
-var DirectionProps;
-(function (DirectionProps) {
-  DirectionProps["horizontal"] = "horizontal";
-  DirectionProps["vertical"] = "vertical";
-})(DirectionProps || (DirectionProps = {}));
-
-const tabCss = "@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}:host(.hidden){display:none}slot[name=icon-suffix]::slotted(bcm-icon){margin-left:10px}slot[name=icon-prefix]::slotted(bcm-icon){margin-right:10px}.tab{position:relative;display:flex;justify-content:center;align-items:center;padding:var(--bcm-tab-vertical-space) 14px var(--bcm-tab-vertical-space) 14px;color:var(--bcm-color-grey-8);font-size:var(--bcm-tab-font-size);line-height:var(--bcm-tab-line-height);cursor:pointer;user-select:none}.tab.active{color:var(--bcm-color-prime-blue-6)}.tab.active::before{content:\"\";bottom:-2px;left:0;width:100%;height:2px;background-color:var(--bcm-color-prime-blue-6);position:absolute;z-index:1}.tab:hover{color:var(--bcm-color-prime-blue-5)}.tab:active,.tab:focus{color:var(--bcm-color-prime-blue-7)}.tab[disabled],.tab.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.tab.closable:not(.pane){padding-left:0;padding-right:0}.tab.closable .close{margin-left:34px}.tab.pane{border:1px solid transparent;border-bottom:none;border-color:var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-3);border-radius:2px 2px 0 0}.tab.pane.active{background-color:#ffffff}.badge{padding-left:8px;position:relative}.badge.blink:after{content:\"\";position:absolute;top:8px;left:9px;background:black;border-radius:50%;height:7px;width:7px;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1)}.badge.success:after{animation:pulsesuccess 2s infinite;background-color:#52C41A}.badge.error:after{animation:pulseerror 2s infinite;background-color:#F5222D}.badge.default:after{animation:pulsedefault 2s infinite;background-color:#D9D9D9}.badge.processing:after{animation:pulseprocessing 2s infinite;background-color:#4293CF}.badge.warning:after{animation:pulsewarning 2s infinite;background-color:#FA8C16}@keyframes pulsesuccess{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(82, 196, 26, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseerror{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(245, 34, 45, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsedefault{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(217, 217, 217, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseprocessing{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(66, 147, 207, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsewarning{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(250, 140, 22, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
-
-const BcmTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.click = createEvent(this, "bcm-click", 7);
-    this.close = createEvent(this, "bcm-close", 7);
-    /**
-     * Component Properties
-     */
-    this.type = TypeProps$1.normal;
-    this.active = false;
-    this.disabled = false;
-    this.closable = false;
-    this.tabId = (Math.random() * 4).toString(16).replace('.', '');
-    this.formControl = null;
-    this.hidden = false;
-    this.status = 'default';
-    this.badge = false;
-    this.blink = false;
-  }
-  /**
-   * @desc
-   */
-  handleClose() {
-    if (this.disabled)
-      return;
-    this.close.emit();
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleClick(event) {
-    if (this.disabled)
-      return;
-    const targetElement = event.target;
-    // Detect close icon clicked
-    // #
-    if (String(targetElement.tagName).toLowerCase() == 'bcm-icon' && targetElement.classList.contains('close')) {
-      this.close.emit(event);
+    if (this.input.checked == true) {
+      this.input.checked = false;
+      this.checked = this.input.checked;
+      this.value = this.checked;
+      this.change.emit(this.checked);
     }
-    else {
-      this.click.emit(event);
-    }
-  }
-  render() {
-    const { active, disabled, closable } = this;
-    const classes = classnames('tab', [this.type], {
-      'active': active,
-      'disabled': disabled,
-      'closable': closable
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    const badgeClasses = classnames('badge', this.status, {
-      'blink': this.blink
-    });
-    return (h(Host, { class: hostClasses }, h("div", { class: classes, onClick: (event) => this.handleClick(event) }, h("slot", { name: "icon-prefix" }), h("slot", null), h("slot", { name: "icon-suffix" }), this.closable && (h("bcm-icon", { class: "close", icon: "close", color: "grey-10" })), this.badge && (h("bcm-badge", { class: badgeClasses, size: "small", status: this.status })))));
   }
-  get el() { return getElement(this); }
-};
-BcmTab.style = tabCss;
-
-const tabPaneCss = "@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{width:100%;display:block}:host(.hidden){display:none}:host(:not(.active)){height:0 !important;overflow:hidden;padding:0 !important}:host(.active){display:block}";
-
-/**
- * @desc
- * @param str
- */
-const lowercase$5 = (str) => str.toLowerCase();
-const BcmTabPane = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 'medium';
-    this.hidden = false;
-    this.fullWidth = false;
-    this.tab = (Math.random() * 4).toString(16).replace('.', '');
-    this.active = false;
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  handleActiveTabPane(e) {
-    if (lowercase$5(e.target.nodeName) === 'bcm-tab') {
-      if (e.target.tabId === this.tab) {
-        this.active = true;
-      }
-      else {
-        this.active = false;
-      }
-    }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
   }
   render() {
-    const classes = classnames('tab-pane', this.size);
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.active ? 'active' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
+    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, " ")))));
   }
-  get el() { return getElement(this); }
 };
-BcmTabPane.style = tabPaneCss;
+BcmSwitch.style = switchCss;
 
-const tabsCss = "@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}:host(.hidden){display:none}::slotted(bcm-tab:not(:last-child)){margin-right:32px}.tabs{position:relative;display:flex;flex-wrap:wrap}.tabs.large{--bcm-tab-vertical-space:16px;--bcm-tab-font-size:16px;--bcm-tab-line-height:24px}.tabs.medium{--bcm-tab-vertical-space:11px;--bcm-tab-font-size:14px;--bcm-tab-line-height:22px}.tabs.small{--bcm-tab-vertical-space:7px;--bcm-tab-font-size:14px;--bcm-tab-line-height:22px}.tabs.pane{--bcm-tab-vertical-space:9px;--bcm-tab-font-size:14px;--bcm-tab-line-height:22px}.tabs.full-width{width:100%;display:flex;align-items:center;justify-content:center}.tabs.full-width ::slotted(bcm-tab){flex:1}.tabs.underline:after{content:\"\";margin-top:0;z-index:0;left:0;width:100%;height:2px;background-color:var(--bcm-color-grey-4)}.tabs.animatable:before{transition:all 0.4s ease}.tabs.pane ::slotted(bcm-tab:not(:last-child)){margin-right:2px}.tabs.pane:before{display:none}.tabs.vertical{flex-direction:column;width:fit-content}.tabs.vertical:before{content:\"\";position:absolute;top:var(--bcm-tabs-line-top);left:var(--bcm-tabs-line-left);right:var(--bcm-tabs-line-right);width:var(--bcm-tabs-line-width);height:var(--bcm-tabs-line-height);background-color:var(--bcm-color-prime-blue-6)}.tabs.vertical ::slotted(bcm-tab){margin-right:0}";
+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}";
 
-const BcmTabs = class {
+let id$1 = 0;
+const BcmTextarea = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.click = createEvent(this, "bcm-click", 7);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.clear = createEvent(this, "bcm-clear", 7);
     this.change = createEvent(this, "bcm-change", 7);
-    this.bcmTabsActiveItem = createEvent(this, "bcm-tabs-active-item", 7);
-    /**
-     * Component Private variables
-     */
-    this.tabs = [];
-    this.firstInit = true;
-    this.count = 0;
-    /**
-     * Component Properties
-     */
-    this.size = SizeProps.large;
-    this.type = TypeProps$1.normal;
-    this.direction = DirectionProps.horizontal;
+    this.input = createEvent(this, "bcm-input", 7);
+    this.textareaId = `textarea-${++id$1}`;
+    this.valueLength = 0;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.rows = 1;
+    this.size = 'medium';
+    this.resize = 'vertical';
     this.hidden = false;
-    this.fullWidth = false;
-    this.underline = true;
-    /**
-     * Component States
-     */
-    this.activeChild = 1;
-    this.lineOpts = { top: '0px', left: '0px', right: '0px', width: '0px', height: '0px' };
-    this.prevButton = null;
-    this.nextButton = null;
-    this.completeButton = null;
-    this.prevButtonState = 'disabled';
-    this.nextButtonState = 'disabled';
-    this.completeButtonState = 'disabled';
-  }
-  async config(_config) {
-    if (_config['prevButton']) {
-      if (_config['prevButton']['id']) {
-        var prevButtonId = "#" + _config['prevButton']['id'];
-        this.prevButton = document.querySelector(prevButtonId);
-      }
-      if (_config['prevButton']['state']) {
-        this.prevButtonState = _config['prevButton']['state'];
-      }
-    }
-    if (_config['nextButton']) {
-      if (_config['nextButton']['id']) {
-        var nextButtonId = "#" + _config['nextButton']['id'];
-        this.nextButton = document.querySelector(nextButtonId);
-      }
-      if (_config['nextButton']['state']) {
-        this.nextButtonState = _config['nextButton']['state'];
-      }
-    }
-    if (_config['completeButton']) {
-      if (_config['completeButton']['id']) {
-        var completeButtonId = "#" + _config['completeButton']['id'];
-        this.completeButton = document.querySelector(completeButtonId);
-      }
-      if (_config['completeButton']['state']) {
-        this.completeButtonState = _config['completeButton']['state'];
-      }
-    }
-    this.buttonControl();
-    return true;
-  }
-  async next() {
-    var getFormId = "#" + this.tabs[this.getActive() - 1]["formControl"];
-    var getForm = document.querySelector(getFormId);
-    var formData = null;
-    if (getForm) {
-      formData = await getForm.submit();
-    }
-    if ((getForm && formData.isValid) || !getForm) {
-      this.activeChild = this.getActive() + 1;
-      this.active(this.tabs[this.getActive() - 1]["tabId"]);
-    }
-    return formData;
-  }
-  async prev() {
-    this.activeChild = this.getActive() - 1;
-    this.active(this.tabs[this.getActive() - 1]["tabId"]);
-    return this.activeChild;
-  }
-  async complete() {
-    const tabStatuses = [];
-    var isValid = true;
-    this.tabs.forEach(element => {
-      if (element['formControl']) {
-        const getFormId = "#" + element["formControl"];
-        const getForm = document.querySelector(getFormId);
-        if (getForm) {
-          tabStatuses.push(getForm.submit());
-        }
-      }
-    });
-    const allStatuses = await Promise.all(tabStatuses);
-    allStatuses.forEach(item => {
-      if (item.isValid === false) {
-        isValid = false;
-        if (item.formName) {
-          const formId = this.tabs.filter((input) => input['formControl'] == item.formName)[0]['tabId'];
-          this.active(formId);
-        }
-      }
-    });
-    return { isValid: isValid, Forms: allStatuses };
-  }
-  async active(id) {
-    var i = 0;
-    this.activeChild = -1,
-      await delay(100);
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      i++,
-        items.tabId == id && (items.disabled = false,
-          items.active = true,
-          this.bcmTabsActiveItem.emit(items.tabId),
-          this.activeChild = i);
-      items.tabId != id && (items.active = false);
-    });
+    this.required = false;
+    this.hasFocus = false;
   }
-  async getActiveTab() {
-    return this.tabs[this.getActive() - 1]["tabId"];
+  async setFocus() {
+    this.textarea.focus();
   }
-  async getActiveIndex() {
-    return this.getActive();
+  async removeFocus() {
+    this.textarea.blur();
   }
-  async error(id, blink = false) {
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      items.tabId == id && (items.badge = true,
-        items.blink = blink,
-        items.status = "error");
-    });
+  async select() {
+    return this.textarea.select();
   }
-  async info(id, blink = false) {
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      items.tabId == id && (items.badge = true,
-        items.blink = blink,
-        items.status = "processing");
-    });
+  async setValue(value) {
+    this.textarea.value = value;
+    this.value = value;
+    this.handleChange();
+    return value;
   }
-  async warning(id, blink = false) {
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      items.tabId == id && (items.badge = true,
-        items.blink = blink,
-        items.status = "warning");
-    });
+  async setClear() {
+    this.textarea.value = '';
+    this.value = '';
   }
-  async success(id, blink = false) {
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      items.tabId == id && (items.badge = true,
-        items.blink = blink,
-        items.status = "success");
-    });
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
   }
-  async statusReset(id) {
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      items.tabId == id && (items.badge = false,
-        items.blink = false,
-        items.status = "default");
-    });
+  async getValue() {
+    return this.value;
   }
-  buttonControl() {
-    if (this.prevButton) {
-      if (this.activeChild == 1) {
-        this.prevButton.setAttribute(this.prevButtonState, "true");
-      }
-      else {
-        this.prevButton.removeAttribute(this.prevButtonState);
-      }
-    }
-    if (this.nextButton) {
-      if (this.getActive() == this.count) {
-        this.nextButton.setAttribute(this.nextButtonState, "true");
-      }
-      else {
-        this.nextButton.removeAttribute(this.nextButtonState);
-      }
-    }
-    if (this.completeButton) {
-      if (this.getActive() == this.count) {
-        this.completeButton.removeAttribute(this.completeButtonState);
-      }
-      else {
-        this.completeButton.setAttribute(this.completeButtonState, "true");
-      }
-    }
+  handleFocus() {
+    this.hasFocus = true;
+    this.focus.emit();
   }
-  /**
-   * @ComponentMethod
-   */
-  componentDidRender() {
-    if (!this.firstInit)
-      return;
-    let slotElements;
-    slotElements = this.el.shadowRoot.querySelector('slot').assignedElements();
-    this.tabs = [];
-    this.activeChild = this.getActive();
-    var isActive = false;
-    var firstId = null;
-    var i = 0;
-    // Get only bcm-tab elements from 
-    // slot childs
-    slotElements.map((element) => {
-      i++;
-      this.type == "stepper" && (element.disabled = true);
-      if (!firstId) {
-        firstId = element.tabId;
-      }
-      if (String(element.tagName).toLowerCase() == 'bcm-tab') {
-        element.type = this.type;
-        // Activate default tab
-        // #
-        if (this.tabs.push(element) - 1 == this.activeChild) {
-          this.activateChild(this.activeChild);
-          isActive = true;
-        }
-      }
-      this.count = i;
-    });
-    if (!isActive) {
-      this.active(firstId);
-    }
-    setTimeout(() => {
-      this.el.shadowRoot.querySelector('.tabs').classList.add('animatable');
-    }, 500);
+  handleBlur() {
+    this.hasFocus = false;
+    this.blur.emit();
   }
-  componentDidLoad() {
-    getChilds(this.el, 'bcm-tab').forEach(items => {
-      items.active && (this.bcmTabsActiveItem.emit(items.tabId), items.disabled = false);
-    });
+  handleChange() {
+    this.value = this.textarea.value;
+    this.change.emit(this.value);
   }
-  getActive() {
-    const childs = getChilds(this.el, 'bcm-tab');
-    const childIndex = childs.findIndex(child => child.active);
-    return childIndex >= 0 ? childIndex + 1 : 1;
+  watchValue() {
+    this.handleChange();
   }
-  /**
-   * @desc
-   */
-  getChildIdx(child) {
-    let i = 1;
-    while (child.previousElementSibling) {
-      child = child.previousElementSibling;
-      i++;
-    }
-    return i;
+  handleInput() {
+    this.value = this.textarea.value;
+    this.setTextareaHeight();
+    this.input.emit(this.value);
   }
-  /**
-   * @desc
-   * @param idx
-   */
-  activateChild(idx) {
-    idx = idx - 1;
-    const child = this.tabs[idx];
-    if (child) {
-      this.tabs.forEach((tab) => tab.active = false);
-      child.active = true;
-      child.disabled = false;
-      this.transformLine(idx);
-      this.firstInit && forceUpdate(this.el);
-      this.firstInit = false;
-    }
+  handleClear(e) {
+    this.value = '';
+    this.clear.emit();
+    this.textarea.focus();
+    e.stopPropagation();
   }
-  /**
-   * @desc
-   * @param idx
-   */
-  transformLine(idx) {
-    const tab = this.tabs[idx];
-    if (this.direction == 'horizontal') {
-      this.lineOpts.top = (tab.offsetTop + tab.offsetHeight) + 'px';
-      this.lineOpts.left = tab.offsetLeft + 'px';
-      this.lineOpts.width = tab.offsetWidth + 'px';
-      this.lineOpts.right = 'unset';
-      this.lineOpts.height = '2px';
+  setTextareaHeight() {
+    if (this.resize === 'auto') {
+      this.textarea.style.height = 'auto';
+      this.textarea.style.height = (this.textarea.scrollHeight + 2) + 'px';
     }
     else {
-      this.lineOpts.top = tab.offsetTop + 'px';
-      this.lineOpts.left = 'unset';
-      this.lineOpts.right = '0';
-      this.lineOpts.width = '2px';
-      this.lineOpts.height = tab.offsetHeight + 'px';
-    }
-  }
-  /**
-   * @desc
-   */
-  getLineTransform() {
-    return {
-      '--bcm-tabs-line-top': this.lineOpts.top,
-      '--bcm-tabs-line-left': this.lineOpts.left,
-      '--bcm-tabs-line-width': this.lineOpts.width,
-      '--bcm-tabs-line-right': this.lineOpts.right,
-      '--bcm-tabs-line-height': this.lineOpts.height
-    };
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleTabClick(event) {
-    const targetElement = event.target;
-    const childIdx = this.getChildIdx(targetElement);
-    this.activeChild = null;
-    this.activeChild = childIdx;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  handleTabClose(event) {
-    const targetElement = event.target;
-    const childIdx = this.getChildIdx(targetElement);
-    // Remove element
-    // #
-    targetElement.remove();
-    this.tabs.splice(childIdx - 1, 1);
-    if (childIdx === this.activeChild) {
-      this.activeChild = 1;
-      this.activateChild(1);
+      this.textarea.style.height = undefined;
     }
   }
-  /**
-   * @desc
-   * @param newValue
-   */
-  activeChildChange(newValue) {
-    this.activateChild(newValue);
-    this.change.emit(newValue);
-    this.buttonControl();
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.setTextareaHeight = this.setTextareaHeight.bind(this);
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
   }
-  /**
-   * @desc
-   */
-  windowResize() {
-    this.transformLine(this.activeChild - 1);
-    forceUpdate(this.el);
+  componentWillRender() {
+    this.valueLength = this.value ? this.value.length : 0;
+    // this.fullWidth 
+    //     ? this.el.style.width = '100%'
+    //     : this.el.style.width = 'initial'
   }
   render() {
-    const classes = classnames('tabs', [this.direction], [this.size], [this.type], this.fullWidth ? 'full-width' : null, this.underline ? 'underline' : null);
+    const { fullWidth, size, rows, disabled, clearable, label, hasFocus, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, valueLength, required } = this;
+    const wrapperClasses = classnames('textarea-wrapper', {
+      'full-width': fullWidth,
+      'error': captionType == 'error' ? true : false
+    });
+    const contanerClasses = classnames('textarea-container', 'resize-' + resize, 'textarea-' + size, {
+      'empty': (value === null || value === void 0 ? void 0 : value.length) < 1,
+      'focused': hasFocus,
+      'disabled': disabled,
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    const countClasses = classnames('size-1', 'input-caption', 'caption-default');
+    const textareaClasses = classnames('size-' + size, {
+      'size-3': size === 'large',
+      'size-2': size === 'small' || size === 'medium',
+      'clearable': clearable
+    });
     const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes, style: this.getLineTransform(), "on-bcm-click": (event) => this.handleTabClick(event), "on-bcm-close": (event) => this.handleTabClose(event) }, h("slot", null))));
+    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)));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "activeChild": ["activeChildChange"]
+    "value": ["watchValue"]
   }; }
 };
-BcmTabs.style = tabsCss;
-
-const tabsContentCss = "@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{width:100%;display:block;padding:8px}:host(.pane){border:1px solid transparent;border-top:none;border-color:var(--bcm-color-grey-5);border-radius:0 0 2px 2px}";
-
-const BcmTabsContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 'medium';
-    this.hidden = false;
-    this.fullWidth = false;
-    this.type = TypeProps$1.normal;
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  handleActivePane(e) {
-    getChilds(this.el, 'bcm-tab-pane').forEach(items => {
-      items.tab == e.detail && (items.active = true);
-      items.tab != e.detail && (items.active = false);
-    });
-  }
-  render() {
-    const classes = classnames('tabs-content', this.size);
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.type);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
-BcmTabsContent.style = tabsContentCss;
-
-/**
- * 'color' prop predefined values
- */
-var ColorProps$1;
-(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$1 || (ColorProps$1 = {}));
+BcmTextarea.style = textareaCss;
 
-const tagCss = "@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:fit-content}:host(.hidden){display:none}:host(.maxwidth){max-width:100px}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px}.tag.size-1{padding:calc(8px - 8px) 8px}.tag.size-2{padding:calc(9px - 8px) 9px}.tag.size-3{padding:calc(10px - 8px) 10px}.tag.size-4{padding:calc(11px - 8px) 11px}.tag.size-5{padding:calc(12px - 8px) 12px}.tag.size-6{padding:calc(13px - 8px) 13px}.tag.size-7{padding:calc(14px - 8px) 14px}.tag.size-8{padding:calc(15px - 8px) 15px}.tag.size-9{padding:calc(16px - 8px) 16px}.tag.basic,.tag.closeable,.tag.add,.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.basic:hover,.tag.closeable:hover,.tag.add:hover,.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon{color:var(--bcm-color-grey-10)}.tag.add{border-style:dashed;background-color:var(--bcm-color-grey-1)}.tag.checkable{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border-color:var(--bcm-color-grey-1)}.tag.checkable:hover{color:var(--bcm-color-prime-blue-5);cursor:pointer}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}button{border:none;outline:0;cursor:pointer !important;margin:0}input[type=checkbox]{margin:0;width:0;height:0;visibility:hidden;position:absolute}input[type=checkbox]:checked+label{background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-prime-blue-6)}input[type=checkbox]:checked+label:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}input[type=checkbox]:checked+label:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}";
+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 BcmTag = class {
+const BcmTooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.checkedChange = createEvent(this, "bcm-tag-checked-change", 7);
-    this.tagDissmisable = createEvent(this, "bcm-tag-dissmisable", 7);
-    this.type = 'basic';
-    this.size = 'size-1';
-    this.checked = false;
-    this.value = '';
+    this.onShow = createEvent(this, "bcm-show", 7);
+    this.onHide = createEvent(this, "bcm-hide", 7);
+    this.placement = 'top';
+    this.trigger = 'hover';
     this.hidden = false;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.maxWidth = false;
     this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
   }
-  handleClick() {
-    if (this.type === 'checkable') {
-      this.checked = !this.checked;
+  async show() {
+    // Prevent subsequent calls
+    if (this.open) {
+      return;
     }
+    this.open = true;
+    this.onShow.emit();
   }
-  onCheckedChange(newValue, oldValue) {
-    this.checkedChange.emit({ newValue, oldValue });
+  async hide() {
+    // Prevent subsequent calls
+    if (!this.open) {
+      return;
+    }
+    this.open = false;
+    this.onHide.emit();
   }
-  getColor(color) {
-    if ((this.type == 'basic' || this.type == 'dissmisable') && ColorProps$1[color])
-      return {
-        color: extractColor(ColorPalette, ColorProps$1[color] + '-6'),
-        borderColor: extractColor(ColorPalette, ColorProps$1[color] + '-3'),
-        backgroundColor: extractColor(ColorPalette, ColorProps$1[color] + '-1')
-      };
+  handleClickOutside(e) {
+    if (!this.host.contains(e.target)) {
+      if (this.open) {
+        this.open = false;
+      }
+    }
   }
-  getSize(size, returnNumber = false) {
-    if (Number(size) == size) {
-      size = "size-" + size;
+  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");
     }
-    if (returnNumber) {
-      size = size.split("-");
-      size = size[size.length - 1];
-      var sizeList = { "1": "12", "2": "14", "3": "16", "4": "20", "5": "24", "6": "30", "7": "38", "8": "46", "9": "56" };
-      size = sizeList[size];
+  }
+  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();
     }
-    return size;
   }
-  handleClose() {
-    this.tagDissmisable.emit(this.el);
-    // this.el.remove()
+  handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      this.hide();
+    }
   }
-  render() {
-    const { type, color, value, customStyle, size } = this;
-    const classes = classnames('tag', this.getSize(size), type);
-    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.maxWidth ? 'maxwidth' : null);
-    if (type === 'add') {
-      return (h(Host, { class: hostClasses }, h("button", { class: classes }, h("span", { class: "left" }, h("bcm-icon", { icon: "plus", type: "outlined", color: "grey-8", size: (Number(this.getSize(size, true)) + 2) })), value)));
+  handleClick() {
+    if (this.hasTrigger('click')) {
+      this.open ? this.hide() : this.show();
     }
-    else if (type === 'dissmisable') {
-      return (h(Host, { class: hostClasses }, h("span", { class: classes, style: this.getColor(color) }, h("span", { class: "value", style: customStyle }, value), h("span", { class: "right close-button", onClick: () => this.handleClose(), style: { 'width': (Number(this.getSize(size, true)) + 2) + "px" } }, h("bcm-icon", { id: "close", icon: "close", type: "outlined", size: (Number(this.getSize(size, true)) + 2) })))));
+  }
+  handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
     }
-    else if (type === 'checkable') {
-      return (h(Host, { class: hostClasses }, h("input", { type: "checkbox", checked: this.checked }), h("label", { class: classes }, value)));
+  }
+  handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
     }
-    return (h(Host, { class: hostClasses }, h("span", { class: classes, style: this.getColor(color) }, value)));
   }
-  get el() { return getElement(this); }
+  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 {
-    "checked": ["onCheckedChange"]
+    "open": ["handleOpen"]
   }; }
 };
-BcmTag.style = tagCss;
+BcmTooltip.style = tooltipCss;
 
-const textCss = "@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:block}:host(.hidden){display:none}p{margin:0;padding:0}";
+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 BcmText = class {
+const BcmTooltipBox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.scale = 'size-4';
-    this.weight = 'regular';
-    this.color = 'grey-10';
     this.hidden = false;
   }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  async openBox(open) {
+    this.open = open;
+  }
   render() {
-    const classes = classnames(`weight-${this.weight}`, this.scale);
+    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("p", { class: classes, style: { color: extractColor(ColorPalette, this.color) } }, h("slot", null))));
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: boxClasses, innerHTML: this.message }))));
   }
+  get el() { return getElement(this); }
 };
-BcmText.style = textCss;
+BcmTooltipBox.style = tooltipBoxCss;
 
-export { BcmBadge as bcm_badge, BcmButton as bcm_button, BcmCheckboxLite as bcm_checkbox_lite, BcmBadge$1 as bcm_divider, BcmForm as bcm_form, BcmIcon as bcm_icon, BcmInput as bcm_input, BcmList as bcm_list, BcmListItem as bcm_list_item, BcmListSelect as bcm_list_select, BcmModal as bcm_modal, BcmRadio as bcm_radio, BcmRadioGroup as bcm_radio_group, BcmSearch as bcm_search, BcmTab as bcm_tab, BcmTabPane as bcm_tab_pane, BcmTabs as bcm_tabs, BcmTabsContent as bcm_tabs_content, BcmTag as bcm_tag, BcmText as bcm_text };
+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 };