bromcom-ui 2.3.63 → 2.3.64

package/dist/collection/components/molecules/select/select.js

@@ -1,2166 +0,0 @@
-import { Component, Element, h, Prop, State, Listen, Event, Watch, Host, Method } from '@stencil/core';
-import cs from 'classnames';
-import { dropInComponent } from '../../../utils/utils';
-/**
- * @desc
- * @param str
- */
-const lowercase = (str) => str.toLowerCase();
-const delay = ms => new Promise(res => setTimeout(res, ms));
-export class BcmSelect {
-  constructor() {
-    this.isRendered = false;
-    this.cleaned = false;
-    this.objectMapping = {
-      'value': "value",
-      'id': "id",
-      'text': "text",
-      'icon': "icon",
-      'avatar': "avatar",
-      'avatarName': "avatarName",
-      'avatarImage': "avatarImage",
-      'secondaryText': "secondaryText",
-      'tooltipText': "tooltipText",
-      'selected': "selected",
-      'checked': "checked",
-      'disabled': "disabled",
-    };
-    this.firstRun = true;
-    this.currentItemWidth = 0;
-    this.otherTagsWidth = 0;
-    this.areaWidth = 0;
-    this.itemsWidth = [];
-    this.itemsWidthArray = [];
-    this.checklist = [];
-    this.pastItem = [];
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.value = null;
-    this.value2 = null;
-    this.size = 'medium';
-    this.scrollable = 'vertical';
-    this.placeholder = "Choose an option";
-    this.search = false;
-    this.noCaption = false;
-    this.captionType = 'default';
-    this.searchFields = ['value', 'text'];
-    this.fullWidth = false;
-    this.hidden = false;
-    this.checkboxes = false;
-    this.searchable = false;
-    this.required = false;
-    this.treeview = false;
-    this.numberOfColumns = 1;
-    this.viewportWidth = "100%";
-    this.viewportMinWidth = null;
-    this.viewportMaxWidth = null;
-    this.template = null;
-    this.maxHeight = "200px";
-    this.infoFooter = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this.alignment = 'left';
-    this._items = null;
-    this._data = null;
-    this.placement = 'bottom-start';
-    this.otherTagStatus = false;
-    this.firstSetData = true;
-    this.visibleTags = [];
-    this.hiddenTags = [];
-    this.onShowVisibleTags = [];
-    this.onShowHiddenTags = [];
-    this.hiddenTagsString = "";
-    this.clientWidth = 0;
-    this.tagLabel = [];
-    this.selectText = null;
-    this.isOpen = false;
-    this.searchResults = [];
-    this.optionViewportStyleAlignment = {};
-  }
-  async componentWillLoad() {
-    // this.createElement()
-    await this.createElement();
-    await delay(100);
-  }
-  disconnectedCallback() {
-    if (document.getElementById("select-box" + this._internal_id)) {
-      document.getElementById("select-box" + this._internal_id).remove();
-    }
-  }
-  componentWillRender() {
-    var selectedTextArea = this.el.shadowRoot.getElementById("selected-container");
-    if (selectedTextArea && this.el.clientWidth > 200) {
-      selectedTextArea.style.maxWidth = (this.el.clientWidth) + "px";
-    }
-    // if( sessionStorage.getItem(this._internal_id + "-config") ){
-    //     this.config( JSON.parse( sessionStorage.getItem( this._internal_id + "-config" ) ) )
-    // }
-  }
-  async config(_config) {
-    this._config = _config;
-    this.maxHeight && (_config['maxHeight'] = this.maxHeight);
-    if (this.template) {
-      _config['template'] = this.template;
-    }
-    if (_config['treeview']) {
-      typeof _config['treeview'] == 'boolean'
-        ? this.treeview = _config['treeview']
-        : this.treeview = false;
-    }
-    if (_config['checkable']) {
-      typeof _config['checkable'] == 'boolean'
-        ? this.checkboxes = true
-        : this.checkboxes = false;
-    }
-    if (_config['numberOfColumns']) {
-      typeof _config['numberOfColumns'] == 'number'
-        ? this.numberOfColumns = _config['numberOfColumns']
-        : this.numberOfColumns = 1;
-    }
-    if (_config['viewportWidth']) {
-      typeof _config['viewportWidth'] == 'string'
-        ? this.viewportWidth = _config['viewportWidth']
-        : this.viewportWidth = "100%";
-    }
-    if (_config['viewportMinWidth']) {
-      typeof _config['viewportMinWidth'] == 'string'
-        ? this.viewportMinWidth = _config['viewportMinWidth']
-        : this.viewportMinWidth = null;
-    }
-    if (_config['viewportMaxWidth']) {
-      typeof _config['viewportMaxWidth'] == 'string'
-        ? this.viewportMaxWidth = _config['viewportMaxWidth']
-        : this.viewportMaxWidth = null;
-    }
-    // if ( _config['maxHeight'] ) {
-    //     typeof _config['maxHeight'] == 'string'
-    //         ? this.maxHeight = _config['maxHeight']
-    //         : this.maxHeight = this.maxHeight
-    // } 
-    if (_config['clearable']) {
-      typeof _config['clearable'] == 'boolean'
-        ? this.clearable = _config['clearable']
-        : this.clearable = false;
-    }
-    if (_config['searchable']) {
-      typeof _config['searchable'] == 'boolean'
-        ? this.searchable = _config['searchable']
-        : this.searchable = false;
-    }
-    if (_config['fullWidth']) {
-      typeof _config['fullWidth'] == 'boolean'
-        ? this.fullWidth = _config['fullWidth']
-        : this.fullWidth = false;
-    }
-    if (_config['label']) {
-      typeof _config['label'] == 'string'
-        ? this.label = _config['label']
-        : this.label = null;
-    }
-    if (_config['placeholder']) {
-      typeof _config['placeholder'] == 'string'
-        ? this.placeholder = _config['placeholder']
-        : this.placeholder = "Choose an option";
-    }
-    if (_config['infoFooter']) {
-      typeof _config['infoFooter'] == 'boolean'
-        ? this.infoFooter = _config['infoFooter']
-        : this.infoFooter = false;
-    }
-    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']['value']) {
-        this.objectMapping['value'] = _config['mapping']['value'];
-      }
-    }
-    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
-    await this.createElement();
-    await delay(100);
-    var element;
-    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-      element = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-      if (sessionStorage.getItem(this._internal_id + "-config")) {
-        await element.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-      }
-      // await element.config(_config)
-    }
-  }
-  async renderListbox() {
-    if (this.isRendered == false) {
-      this.isRendered = true;
-      var element = null;
-      if (this.cleaned) {
-        this._items.forEach(item => {
-          if (this.checkboxes === true) {
-            if (item[this.objectMapping['checked']]) {
-              item[this.objectMapping['checked']] = false;
-            }
-          }
-          else {
-            if (item[this.objectMapping['selected']]) {
-              item[this.objectMapping['selected']] = false;
-            }
-          }
-        });
-        this._data = JSON.stringify(this._items);
-      }
-      if (element = document.getElementById("select-box" + this._internal_id)) {
-        if (element = element.shadowRoot.querySelector("bcm-listbox")) {
-          if (sessionStorage.getItem(this._internal_id + "-config")) {
-            await element.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-          }
-          await element.setData(this._data);
-        }
-      }
-      return await element;
-    }
-  }
-  async setData(_data = []) {
-    if (this.firstSetData === true) {
-      this.firstSetData = false;
-    }
-    else {
-      this.itemsWidth = [];
-      if (this.value != null) {
-        this.value = null;
-      }
-      this.checklist = [];
-    }
-    this._data = _data;
-    this.isRendered = true;
-    typeof _data == 'string'
-      ? this._items = JSON.parse(_data)
-      : this._items = _data;
-    if (this._items.length > 0) { }
-    else {
-      this.handleClear();
-      this.isRendered = false;
-    }
-    var element = null;
-    if (element = document.getElementById("select-box" + this._internal_id)) {
-      if (element = element.shadowRoot.querySelector("bcm-listbox")) {
-        await element.setData(_data);
-      }
-    }
-  }
-  async setDataAsync(_data = []) {
-    if (this.isRendered == true) {
-      await this.setData(_data);
-    }
-    else {
-      this._data = _data;
-      typeof _data == 'string'
-        ? this._items = JSON.parse(_data)
-        : this._items = _data;
-      var _checkedItems = [];
-      if (this._items.length > 0) {
-        this._items.forEach(item => {
-          if (this.checkboxes === true) {
-            if (item[this.objectMapping['checked']] === true) {
-              // this.value = item
-              // this.selectText = item[this.objectMapping['text']]
-              _checkedItems.push(item);
-            }
-          }
-          else {
-            if (item[this.objectMapping['selected']] === true) {
-              this.value = item;
-              this.selectText = item[this.objectMapping['text']];
-            }
-          }
-        });
-      }
-      else {
-        this.handleClear();
-        this.isRendered = false;
-      }
-      this.itemsWidth = [];
-      if (this.checkboxes == true) {
-        // this.value = String(_checkedItems)
-        this.handleTagControl2(_checkedItems);
-        this.checklist = _checkedItems;
-      }
-      else {
-        if (this.value != null) {
-          this.value = null;
-        }
-        this.checklist = [];
-      }
-    }
-  }
-  async clearAndSelectSearch(select = true) {
-    this.renderListbox();
-    if (this.searchable === true) {
-      // await this.createElement()
-      setTimeout(() => {
-        var searchInput = null;
-        if (document.getElementById("select-box" + this._internal_id)
-          && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-          if (this.treeview) {
-            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox").shadowRoot.querySelector("bcm-treeview");
-          }
-          else {
-            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-          }
-          if (searchInput) {
-            searchInput.clearAndSelectSearch();
-            if (select == true) {
-              searchInput.clearAndSelectSearch(true);
-            }
-          }
-        }
-      }, 100);
-    }
-  }
-  async selected(id) {
-    this.renderListbox();
-    await this.createElement();
-    await delay(100);
-    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-      this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-      await this.bcmListbox.selected(id);
-    }
-  }
-  async addChecked(id = []) {
-    if (this.isRendered == true) {
-      this.renderListbox();
-      await this.createElement();
-      await delay(100);
-      if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-        this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-        await this.bcmListbox.addChecked(id);
-      }
-    }
-    else {
-      var checkedItems = id;
-      var _checkedItems = [];
-      if (this._items && this._items.length > 0) {
-        if (this.checkboxes === true) {
-          if (this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
-            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(element => {
-              element[this.objectMapping['checked']] = false;
-            });
-          }
-        }
-        else {
-          if (this._items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
-            this._items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-              element[this.objectMapping['selected']] = false;
-            });
-          }
-        }
-        if (typeof checkedItems == 'string') {
-          if (this.checkboxes === false) {
-            const item = this._items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
-            this.value = item;
-            this.selectText = item[this.objectMapping['text']];
-          }
-        }
-        else {
-          if (this.checkboxes === true) {
-            checkedItems.forEach(id => {
-              var findItem = this._items.find(e => String(e[this.objectMapping['id']]) == String(id));
-              if (findItem) {
-                findItem[this.objectMapping['checked']] = "true";
-              }
-            });
-          }
-          if (this._items && this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
-            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(item => {
-              _checkedItems.push(item);
-            });
-          }
-        }
-      }
-      else {
-        this.handleClear();
-      }
-      this._data = JSON.stringify(this._items);
-      this.itemsWidth = [];
-      if (this.checkboxes == true) {
-        this.value = String(_checkedItems);
-        this.handleTagControl2(_checkedItems);
-        this.checklist = _checkedItems;
-      }
-      else {
-        if (this.value != null) {
-          this.value = null;
-        }
-        this.checklist = [];
-      }
-    }
-  }
-  async updateChecked(id = []) {
-    this.renderListbox();
-    await this.createElement();
-    await delay(100);
-    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-      this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-      await this.bcmListbox.updateChecked(id);
-    }
-  }
-  async getValue() {
-    return this.value;
-  }
-  async getChecklist() {
-    return this.checklist;
-  }
-  async setClear() {
-    await this.handleClear();
-    return Promise.resolve();
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  handleChange(newValue) {
-    this.change.emit(newValue);
-    // if(this.checkboxes){
-    //     this.calculateContainer()
-    // }
-  }
-  async handleOpenState() {
-    if (this.isOpen == false) {
-      this.searchResults = [];
-      // this.otherTagStatus = false
-    }
-    await this.createElement(this.isOpen);
-    await delay(100);
-    this.viewportCoordinateUpdater();
-  }
-  async handleOpen(event, otherTag = false) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['id'] == "close")[0] != undefined) {
-      this.isOpen = this.isOpen;
-    }
-    else if (event == false) {
-      this.isOpen = false;
-    }
-    else {
-      if (!this.disabled) {
-        if (lowercase(event.target.nodeName) !== 'bcm-tag') {
-          this.isOpen = !this.isOpen;
-        }
-        else if (!this.isOpen) {
-          this.isOpen = true;
-        }
-      }
-    }
-    if (this.isOpen && this.searchable && !otherTag) {
-      // await this.createElement()
-      setTimeout(() => {
-        var searchInput = null;
-        if (document.getElementById("select-box" + this._internal_id)
-          && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-          if (this.treeview) {
-            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox").shadowRoot.querySelector("bcm-treeview");
-          }
-          else {
-            searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-          }
-          if (searchInput) {
-            searchInput.clearAndSelectSearch();
-          }
-        }
-      }, 100);
-    }
-    if (this.isOpen == true && this.isRendered == false) {
-      this.renderListbox();
-    }
-  }
-  onwheelEvent(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path
-      && (path.filter((input) => input['_internal_id'] == this._internal_id)[0] == undefined
-        || path.filter((input) => input['nodeName'] == "BCM-SELECT")[0] !== undefined)) {
-      if (this.isOpen === true) {
-        this.isOpen = false;
-        var element;
-        if (document.getElementById("select-box" + this._internal_id)) {
-          element = document.getElementById("select-box" + this._internal_id);
-          element.classList.remove("show");
-        }
-      }
-    }
-  }
-  async scrollEvent(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['nodeName'] == "BCM-MODAL")[0] == undefined) {
-      if (this.isOpen === true) {
-        this.viewportCoordinateUpdater();
-      }
-    }
-    else {
-      if (this.isOpen === true) {
-        this.isOpen = false;
-        var element;
-        if (document.getElementById("select-box" + this._internal_id)) {
-          element = document.getElementById("select-box" + this._internal_id);
-          element.classList.remove("show");
-        }
-      }
-    }
-  }
-  viewportCoordinateUpdater() {
-    if (document.getElementById("select-box" + this._internal_id)) {
-      var element;
-      element = document.getElementById("select-box" + this._internal_id);
-      dropInComponent(element, "#" + this._id);
-    }
-  }
-  async createElement(isOpen = false) {
-    var element;
-    if (!document.getElementById("select-box" + this._internal_id)) {
-      element = document.createElement("bcm-select-box");
-      element.setAttribute("id", "select-box" + this._internal_id);
-      element.setAttribute("_internal_id", this._internal_id);
-      await delay(150);
-    }
-    else {
-      element = document.getElementById("select-box" + this._internal_id);
-    }
-    document.body.appendChild(element);
-    dropInComponent(element, "#" + this._id);
-    element.style.width = this.el.clientWidth + "px";
-    if (this.viewportMinWidth != null || this.viewportMaxWidth != null) {
-      element.style.width = "100%";
-    }
-    else if (this.viewportWidth != "100%") {
-      element.style.width = this.viewportWidth;
-    }
-    else if (this.numberOfColumns > 1) {
-      element.style.width = "auto";
-    }
-    else {
-      element.style.width = this.el.clientWidth + "px";
-    }
-    if (this.viewportMinWidth != null) {
-      if (this.viewportMaxWidth == null) {
-        element.style.maxWidth = this.el.clientWidth + "px";
-      }
-      element.style.minWidth = this.viewportMinWidth;
-    }
-    if (this.viewportMaxWidth != null) {
-      if (this.viewportMinWidth == null) {
-        element.style.minWidth = this.el.clientWidth + "px";
-      }
-      element.style.maxWidth = this.viewportMaxWidth;
-    }
-    element.style.maxHeight = this.maxHeight;
-    if (isOpen === true) {
-      element.classList.add("show");
-    }
-    else {
-      element.classList.remove("show");
-    }
-  }
-  getPlacement() {
-    const placements = this.placement.split('-');
-    if (placements.length === 1) {
-      placements.push('center');
-    }
-    return placements;
-  }
-  clickClear(e) {
-    this.handleClear();
-    this.cleaned = true;
-    e.stopPropagation();
-  }
-  async handleClear() {
-    this.value = null;
-    this.selectText = null;
-    // const allitem:any = [...this.onShowVisibleTags, ...this.onShowHiddenTags]
-    // if ( allitem.length > 0 ) {
-    //     allitem.map(item => {
-    //         this.bcmTagDissmisable({detail: {id: String(item[this.objectMapping['id']])}}, this._internal_id) 
-    //     })
-    // }
-    var subComponent = null;
-    if (document.getElementById("select-box" + this._internal_id)
-      && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box")) {
-      if (this.treeview === true) {
-        subComponent = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box").shadowRoot.querySelector("bcm-treeview");
-      }
-      else {
-        subComponent = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box");
-      }
-    }
-    if (subComponent) {
-      await subComponent.setClear();
-    }
-    this.onShowVisibleTags = [];
-    this.onShowHiddenTags = [];
-    this.searchResults = [];
-    this.watchSearchResults();
-    var searchInput = null;
-    // await this.createElement()
-    if (document.getElementById("select-box" + this._internal_id)
-      && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box")) {
-      if (this.treeview) {
-        searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box").shadowRoot.querySelector("bcm-treeview");
-      }
-      else {
-        searchInput = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box");
-      }
-    }
-    if (searchInput) {
-      searchInput.clearAndSelectSearch();
-    }
-    this.clear.emit();
-    return Promise.resolve();
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  handleScreenResize() {
-    if (this.isOpen === true) {
-      this.createElement(true);
-    }
-  }
-  handleClickOutside(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['id'] == "other-tag")[0] == undefined
-      && path && path.filter((input) => input['id'] == "listbox")[0] == undefined) {
-      this.otherTagStatus = false;
-      setTimeout(() => {
-        if (this.otherTag) {
-          this.otherTag.setAttribute('color', 'grey-9');
-        }
-      }, 100);
-    }
-    if (this.el.contains(event.target)
-      || path && path.filter((input) => input['id'] == "select-box" + this._internal_id)[0] != undefined) {
-      // this.searchResults = []
-      // this.watchSearchResults()
-      this.optionViewportStyleAlignment = {};
-      var targetId = event.target["id"];
-      if (document.querySelector('#' + targetId)) {
-        var paddingBottom = 8;
-        var offsetTop = document.querySelector('#' + targetId).getBoundingClientRect().top;
-        var einnerHeight = event.view.innerHeight;
-        var eclientHeight = event.target["clientHeight"];
-        var enoCaption = event.target["noCaption"];
-        // var elementTop = einnerHeight - offsetTop
-        var elementBottom = einnerHeight - offsetTop - (enoCaption ? eclientHeight : eclientHeight - 20) + paddingBottom;
-        if (Number(this.maxHeight.replace("px", "")) > elementBottom) {
-          this.optionViewportStyleAlignment = {
-            'bottom': (this.infoFooter ? 30 : 0) + 50 + "px",
-            'box-shadow': '0px -2px 8px rgb(0 0 0 / 15%)'
-          };
-        }
-      }
-      if (this.checkboxes == false
-        && path
-        && path.filter((input) => input['id'] == "collapse-button")[0] == undefined
-        && (path.filter((input) => input['nodeName'] == "BCM-LISTBOX-ITEM")[0]
-          || path.filter((input) => input['nodeName'] == "BCM-TREEVIEW-ITEM")[0])) {
-        this.isOpen = false;
-      }
-    }
-    else {
-      if (this.isOpen) {
-        this.isOpen = false;
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleTreeviewUnchecked(event) {
-    this.handleListboxUnchecked(event);
-  }
-  handleListboxUnchecked(event) {
-    const index = this.searchResults.indexOf(event.detail);
-    if (index > -1) {
-      this.searchResults.splice(index, 1);
-      if (this.onShowHiddenTags.length <= 2) {
-        this.searchResults = [];
-        this.otherTagStatus = false;
-      }
-      this.watchSearchResults();
-    }
-  }
-  async bcmTagDissmisable(event, internal_id = null) {
-    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])
-      || internal_id == this._internal_id)) {
-      if (this.isRendered == false) {
-        await this.renderListbox();
-        await delay(100);
-      }
-      await this.createElement();
-      await delay(100);
-      const bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector(".listbox-box");
-      if (event.detail.id == "other-tag") {
-        this.onShowHiddenTags.map(async (item) => {
-          await bcmListbox.listboxUncheckedMethod(String(item[this.objectMapping['id']]), this._internal_id);
-        });
-        this.onShowHiddenTags = [];
-      }
-      else {
-        await bcmListbox.listboxUncheckedMethod(event.detail.id, this._internal_id);
-      }
-      this.watchSearchResults();
-    }
-  }
-  /**
-   * @desc
-   */
-  handleListboxSelected(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-      setTimeout(() => {
-        if (this.checkboxes !== true) {
-          const optionValue = event.detail;
-          this.value = optionValue;
-          this.selectText = optionValue[this.objectMapping['text']];
-        }
-      }, 100);
-    }
-  }
-  /**
-   * @desc
-   */
-  handleListboxCheckedList(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-      setTimeout(() => {
-        // console.log(e.detail)
-        if (JSON.stringify(this.checklist) !== JSON.stringify(event.detail)) {
-          // this.handleTagControl(e.detail)
-          this.handleTagControl2(event.detail);
-          this.checklist = event.detail;
-        }
-      }, 100);
-    }
-  }
-  handleTreeviewCheckedList(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-      // console.log(e.detail)
-      // setTimeout(() => {
-      // console.log(e.detail)
-      // if(JSON.stringify(this.checklist) !== JSON.stringify(e.detail)){
-      // this.handleTagControl(e.detail)
-      this.handleTagControl2(event.detail);
-      this.checklist = event.detail;
-      // }
-      // }, 50);
-    }
-  }
-  async handleTagControl2(value) {
-    this.visibleTags = [];
-    this.hiddenTags = [];
-    // this.itemsWidth = []
-    this.onShowVisibleTags = [];
-    this.onShowHiddenTags = [];
-    if (value.length > 0) {
-      value.map(async (item) => {
-        this.visibleTags.push(item);
-      });
-    }
-    this.visibleTags = [...new Set(this.visibleTags)];
-    this.hiddenTags = [...new Set(this.hiddenTags)];
-    this.onShowVisibleTags = this.visibleTags;
-    this.onShowHiddenTags = this.hiddenTags;
-    if (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) {
-      var cacheValue = JSON.parse(JSON.stringify([...this.onShowVisibleTags, ...this.onShowHiddenTags]));
-      if (this.value2 !== cacheValue) {
-        this.value2 = cacheValue;
-      }
-    }
-    else {
-      if (this.value2 !== null) {
-        this.value2 = null;
-      }
-    }
-    await this.calculateContainer();
-    // console.log(this.onShowVisibleTags)
-    // console.log(this.onShowHiddenTags)
-  }
-  async calculateContainer() {
-    // await delay(10)
-    const container = this.el.shadowRoot.querySelector(".selected-text");
-    this.otherTagsWidth = 135;
-    await delay(100);
-    this.areaWidth = container.clientWidth;
-    if (this.clearable === true) {
-      this.areaWidth = this.areaWidth - 22;
-    }
-    this.itemsWidth = 0;
-    this.itemsWidthArray = [];
-    const bcmtags = container.querySelectorAll("bcm-tag");
-    await delay(50);
-    bcmtags.forEach((item) => {
-      this.itemsWidthArray.push({ "id": String(item.id), "clientWidth": item.clientWidth });
-      this.itemsWidth += item.clientWidth + 4;
-      if (this.itemsWidth > this.areaWidth) {
-        const tagitem = this.visibleTags[this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id))];
-        if (String(item.id) == String(tagitem[this.objectMapping['id']])) {
-          this.visibleTags.splice(this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id)), 1);
-          this.hiddenTags.push(tagitem);
-        }
-      }
-    });
-    this.visibleTags = [...new Set(this.visibleTags)];
-    this.hiddenTags = [...new Set(this.hiddenTags)];
-    if (this.hiddenTags.length > 0) {
-      if (this.hiddenTags.length > 10) {
-        this.otherTagsWidth += 20;
-      }
-      else if (this.hiddenTags.length > 100) {
-        this.otherTagsWidth += 20;
-      }
-      var bcmtags2 = Array.prototype.slice.call(container.querySelectorAll("bcm-tag"));
-      this.itemsWidth = 0;
-      bcmtags2.forEach((item) => {
-        if (item.id != "other-tag") {
-          var tagitem = this.visibleTags[this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id))];
-          if (tagitem) {
-            if (String(item.id) == String(tagitem[this.objectMapping['id']])) {
-              this.itemsWidth += (item.clientWidth + 4);
-              if (this.itemsWidth + this.otherTagsWidth > this.areaWidth) {
-                this.visibleTags.splice(this.visibleTags.findIndex(x => String(x[this.objectMapping['id']]) === String(item.id)), 1);
-                this.hiddenTags.push(tagitem);
-              }
-            }
-          }
-        }
-      });
-    }
-    this.visibleTags = [...new Set(this.visibleTags)];
-    this.hiddenTags = [...new Set(this.hiddenTags)];
-    this.onShowVisibleTags = this.visibleTags;
-    this.onShowHiddenTags = this.hiddenTags;
-    if (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) {
-      var cacheValue = JSON.parse(JSON.stringify([...this.onShowVisibleTags, ...this.onShowHiddenTags]));
-      if (this.value !== cacheValue) {
-        this.value = cacheValue;
-      }
-    }
-    else {
-      if (this.value !== null) {
-        this.value = null;
-      }
-    }
-    if (this.otherTagStatus) {
-      this.searchResults = this.onShowHiddenTags.map(item => {
-        return String(item[this.objectMapping['id']]);
-      });
-      if (this.onShowHiddenTags.length <= 2) {
-        this.searchResults = [];
-        this.otherTagStatus = false;
-      }
-      this.watchSearchResults();
-    }
-  }
-  async handleTagControl(value) {
-    if (value.length > 0) {
-      const container = this.el.shadowRoot.querySelector(".selected-text");
-      this.visibleTags = [];
-      this.hiddenTags = [];
-      this.itemsWidth = [];
-      this.onShowVisibleTags = [];
-      this.onShowHiddenTags = [];
-      this.areaWidth = container.clientWidth - 16;
-      this.otherTagsWidth = 130;
-      this.currentItemWidth = 0;
-      value.map(async (item) => {
-        const newTag = document.createElement("bcm-tag");
-        newTag.setAttribute("id", String(item[this.objectMapping['id']]));
-        newTag.setAttribute("value", item[this.objectMapping['text']]);
-        newTag.setAttribute("type", "dissmisable");
-        newTag.setAttribute("_internal_id", this._internal_id);
-        newTag.style.visibility = "hidden";
-        document.body.appendChild(newTag);
-        await delay(50);
-        var visible = true;
-        var tagwidth = newTag.clientWidth >= 200 ? 200 : newTag.clientWidth;
-        this.currentItemWidth = this.currentItemWidth + tagwidth,
-          this.itemsWidth.push({ "id": String(item[this.objectMapping['id']]), "clientWidth": tagwidth });
-        // item = {...item, "clientWidth": newTag.clientWidth}
-        if (this.areaWidth > this.currentItemWidth) {
-          visible = true;
-        }
-        else {
-          visible = false;
-        }
-        if (visible) {
-          this.visibleTags.push(item);
-        }
-        else {
-          this.hiddenTags.push(item);
-        }
-        newTag.remove();
-      });
-      await delay(100);
-      if (this.visibleTags.length > 1) {
-        const lastItem = this.itemsWidth[this.itemsWidth.findIndex(x => x.id === String(this.visibleTags[this.visibleTags.length - 1][this.objectMapping['id']]))];
-        if (this.areaWidth <= (this.currentItemWidth + this.otherTagsWidth) - lastItem["clientWidth"]) {
-          this.hiddenTags.push(this.visibleTags[this.visibleTags.length - 1]);
-          this.visibleTags.splice(-1, 1);
-        }
-      }
-    }
-    else {
-      this.visibleTags = [];
-      this.hiddenTags = [];
-    }
-    this.visibleTags.forEach((item) => {
-      const index = this.hiddenTags.indexOf(item);
-      if (index > -1) {
-        this.hiddenTags.splice(index, 1);
-      }
-    });
-    if (this.hiddenTags.length > 0) {
-      this.hiddenTags = [...new Set(this.hiddenTags), ...new Set(this.visibleTags)];
-      this.visibleTags = [];
-    }
-    this.visibleTags = [...new Set(this.visibleTags)];
-    this.hiddenTags = [...new Set(this.hiddenTags)];
-    this.onShowVisibleTags = this.visibleTags;
-    this.onShowHiddenTags = this.hiddenTags;
-    // console.log(this.onShowHiddenTags.toString().split(',').join("\r\n"));
-    // if(this.firstRun){
-    if (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) {
-      var cacheValue = JSON.parse(JSON.stringify([...this.onShowVisibleTags, ...this.onShowHiddenTags]));
-      if (this.value !== cacheValue) {
-        this.value = cacheValue;
-      }
-    }
-    else {
-      if (this.value !== null) {
-        this.value = null;
-      }
-    }
-    // this.firstRun = false
-    // }
-    var result = Object.keys(this.onShowHiddenTags).map((key) => this.onShowHiddenTags[key][this.objectMapping['text']]);
-    this.hiddenTagsString = result.toString().split(',').join("\r\n");
-  }
-  handleClickTag() {
-    this.searchResults = [];
-    this.otherTagStatus = false;
-    setTimeout(() => {
-      if (this.otherTag) {
-        this.otherTag.setAttribute('color', 'grey-9');
-        // this.isOpen = false
-      }
-    }, 100);
-    this.watchSearchResults();
-  }
-  showHiddenTags(e) {
-    e.stopPropagation();
-    this.handleOpen(e, true);
-    this.otherTag = e.target;
-    if (this.otherTagStatus) {
-      this.searchResults = [];
-      this.otherTagStatus = false;
-    }
-    else {
-      this.otherTagStatus = true;
-      this.searchResults = this.onShowHiddenTags.map(item => {
-        return String(item[this.objectMapping['id']]);
-      });
-    }
-    this.watchSearchResults();
-  }
-  async watchSearchResults() {
-    var element = null;
-    // await this.createElement()
-    if (this.treeview == true) {
-      if (element = document.getElementById("select-box" + this._internal_id)) {
-        if (element = element.shadowRoot.querySelector(".listbox-box")) {
-          if (element = element.shadowRoot.querySelector("bcm-treeview")) {
-            await element.searchResultMethod(this.searchResults);
-          }
-        }
-      }
-    }
-    else {
-      if (element = document.getElementById("select-box" + this._internal_id)) {
-        if (element = element.shadowRoot.querySelector(".listbox-box")) {
-          await element.searchResultMethod(this.searchResults);
-        }
-      }
-    }
-    if (this.searchResults.length > 0) {
-      setTimeout(() => {
-        if (this.otherTag) {
-          this.otherTag.setAttribute('color', 'prime-blue');
-          // this.isOpen = true
-        }
-      }, 100);
-      if (this._config['searchable'] == true) {
-        if (element) {
-          await element.showSearchMethod(false);
-        }
-      }
-    }
-    else {
-      setTimeout(() => {
-        if (this.otherTag) {
-          this.otherTag.setAttribute('color', 'grey-9');
-          // this.isOpen = false
-        }
-      }, 100);
-      if (element) {
-        await element.showSearchMethod(this.searchable);
-      }
-    }
-  }
-  render() {
-    const { size, clearable, value, label, caption, captionError, captionType, disabled, flex, placeholder, noCaption, fullWidth, required } = this;
-    const selected = cs('selected', 'selected-' + this.size, {
-      'size-3': size === 'large',
-      'size-2': size === 'small' || size === 'medium',
-      'disabled': disabled
-    });
-    const menu = cs('option-container', 'alignment-' + this.alignment, {
-      'hidden': !this.isOpen,
-    }, {
-      'column-1': this.numberOfColumns <= 1,
-      'column-2': this.numberOfColumns == 2,
-      'column-3': this.numberOfColumns >= 3,
-    });
-    const optionsViewport = cs('options-viewport', {
-      'hidden': !this.isOpen,
-      [this.scrollable]: this.scrollable === 'horizontal' || this.scrollable === 'vertical',
-      'horizontal vertical': this.scrollable === 'both',
-      'flex': flex,
-    });
-    const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
-    const container = cs('container', {
-      'error': captionType == 'error' ? true : false,
-      'full-width': fullWidth
-    });
-    const selectedText = cs('selected-text', {
-      'selected-tags': this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0
-    });
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    var optionViewportStyle = {
-      'width': this.viewportMinWidth != null || this.viewportMaxWidth != null ? 'max-content' :
-        this.viewportWidth != "100%" ? this.viewportWidth :
-          this.numberOfColumns > 1 ? 'auto' : '100%',
-      'min-width': this.viewportMinWidth != null ? this.viewportMinWidth : null,
-      'max-width': this.viewportMaxWidth != null ? this.viewportMaxWidth : null,
-    };
-    if (this.optionViewportStyleAlignment != {}) {
-      optionViewportStyle = Object.assign(Object.assign({}, optionViewportStyle), this.optionViewportStyleAlignment);
-    }
-    // if(this.viewportWidth != "100%" ){
-    //     optionViewportStyle = {...{'width': 'max-content', 'min-width': this.viewportWidth}}
-    // }
-    const customStyleOtherTag = {
-      'cursor': 'pointer',
-      'white-space': 'nowrap',
-    };
-    const customStyleTag = {
-      'cursor': 'pointer',
-      'max-width': '164px',
-      // 'display': '-webkit-box',
-      // '-webkit-line-clamp': '1',
-      // '-webkit-box-orient': 'vertical',
-      // 'overflow': 'hidden'
-      // 'display': '-webkit-box',
-      // 'overflow': 'hidden',
-      // '-webkit-line-clamp': '1',
-      // '-webkit-box-orient': 'vertical'
-      'text-overflow': 'ellipsis',
-      'white-space': 'nowrap',
-      'overflow': 'hidden',
-      'display': 'block'
-    };
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() },
-      h("div", { class: container },
-        label && h("div", null,
-          h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required })),
-        h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 },
-          h("span", { class: selectedText, title: this.selectText && (this.selectText) },
-            (this.selectText && (this.selectText)),
-            ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" },
-              h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))),
-              h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))),
-            (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" },
-              " ",
-              placeholder,
-              " ")))),
-          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: this.isOpen ? 'open' : 'close' },
-              h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" })))),
-        h("div", { class: menu, style: optionViewportStyle },
-          h("div", { class: optionsViewport })),
-        !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
-          ? h("span", { class: captionClasses },
-            " ",
-            captionError,
-            " ")
-          : caption && h("span", { class: captionClasses },
-            " ",
-            caption,
-            " "))))));
-  }
-  static get is() { return "bcm-select"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["select.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["select.css"]
-  }; }
-  static get properties() { return {
-    "_id": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "id",
-      "reflect": true,
-      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "value2": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value2",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "scrollable": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'none' | 'vertical' | 'horizontal' | 'both'",
-        "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "scrollable",
-      "reflect": false,
-      "defaultValue": "'vertical'"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "clearable",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "\"Choose an option\""
-    },
-    "search": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "search",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "noCaption": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "no-caption",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption",
-      "reflect": false
-    },
-    "captionError": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-error",
-      "reflect": false
-    },
-    "captionType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
-        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "caption-type",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "flex": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "flex",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "searchFields": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<string>",
-        "resolved": "string[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "['value', 'text']"
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "defaultValue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "default-value",
-      "reflect": false
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "checkboxes": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "checkboxes",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "searchable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "searchable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "treeview": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "treeview",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "numberOfColumns": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "number-of-columns",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "viewportWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "viewport-width",
-      "reflect": false,
-      "defaultValue": "\"100%\""
-    },
-    "viewportMinWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "viewport-min-width",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "viewportMaxWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "viewport-max-width",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "template": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "template",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "maxHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-height",
-      "reflect": false,
-      "defaultValue": "\"200px\""
-    },
-    "infoFooter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "info-footer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "_internal_id": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "_internal_id",
-      "reflect": true,
-      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
-    },
-    "alignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'right' | 'default'",
-        "resolved": "\"default\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "alignment",
-      "reflect": false,
-      "defaultValue": "'left'"
-    },
-    "_items": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "_items",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "_data": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "_data",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "placementType",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "placementType": {
-            "location": "import",
-            "path": "../tooltip/tooltip"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placement",
-      "reflect": true,
-      "defaultValue": "'bottom-start'"
-    },
-    "tooltip": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "tooltip",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "selectText": {},
-    "isOpen": {},
-    "captionCache": {},
-    "captionTypeCache": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "bcm-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "clear",
-      "name": "bcm-clear",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "focus",
-      "name": "bcm-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "blur",
-      "name": "bcm-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "listboxUnchecked",
-      "name": "bcm-listbox-unchecked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "listboxSendCheck",
-      "name": "bcm-listbox-send-check",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "config": {
-      "complexType": {
-        "signature": "(_config: Array<object>) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setData": {
-      "complexType": {
-        "signature": "(_data?: Array<object> | string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setDataAsync": {
-      "complexType": {
-        "signature": "(_data?: Array<object> | string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "clearAndSelectSearch": {
-      "complexType": {
-        "signature": "(select?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "selected": {
-      "complexType": {
-        "signature": "(id: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "addChecked": {
-      "complexType": {
-        "signature": "(id?: any[]) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "updateChecked": {
-      "complexType": {
-        "signature": "(id?: any[]) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getValue": {
-      "complexType": {
-        "signature": "() => Promise<string>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<string>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getChecklist": {
-      "complexType": {
-        "signature": "() => Promise<any[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<any[]>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setClear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "resetCaption": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "handleChange"
-    }, {
-      "propName": "isOpen",
-      "methodName": "handleOpenState"
-    }]; }
-  static get listeners() { return [{
-      "name": "wheel",
-      "method": "onwheelEvent",
-      "target": "window",
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "scroll",
-      "method": "scrollEvent",
-      "target": "document",
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "resize",
-      "method": "handleScreenResize",
-      "target": "window",
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "click",
-      "method": "handleClickOutside",
-      "target": "window",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-unchecked",
-      "method": "handleTreeviewUnchecked",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "bcm-listbox-unchecked",
-      "method": "handleListboxUnchecked",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "bcm-tag-dissmisable",
-      "method": "bcmTagDissmisable",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "bcm-listbox-item-selected",
-      "method": "handleListboxSelected",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-checklist",
-      "method": "handleListboxCheckedList",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-listbox-checklist",
-      "method": "handleTreeviewCheckedList",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}