bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.2

package/dist/collection/components/other_deprecated/listbox/listbox.js

@@ -0,0 +1,1999 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h, Host, Listen, Event, Prop, Element, State, Watch, Method } from '@stencil/core';
+import { delay, getChilds } from '../../../utils/utils';
+import cs from 'classnames';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+export class BcmListbox {
+  constructor() {
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'icon': "icon",
+      'avatar': "avatar",
+      'avatarName': "avatarName",
+      'avatarImage': "avatarImage",
+      'secondaryText': "secondaryText",
+      'tooltipText': "tooltipText",
+      'selected': "selected",
+      'checked': "checked",
+      'disabled': "disabled",
+    };
+    this.checkedObjectList = [];
+    this.cacheCheckedObjectList = [];
+    this.allChilds = [];
+    this.onlyChilds = [];
+    this.firstRun = true;
+    this.firstCheck = false;
+    this.onFocus = false;
+    this.isSetData = false;
+    this.isGroupArray = [];
+    this.intersection = [];
+    /**
+     * Component Properties
+     */
+    this.innerComponent = false;
+    this.checkboxes = false;
+    this.required = false;
+    this.value = null;
+    this.search = false;
+    this.infoFooter = false;
+    this.showIcon = false;
+    this.size = 'medium';
+    this.checkedList = [];
+    this.updateCheckedList = [];
+    this._items = [];
+    this.fullWidth = false;
+    this.searchFields = ['text', 'secondaryText', 'tooltipText'];
+    this.hidden = false;
+    this.returnField = "id";
+    this.searchSub = "items";
+    this.searchText = "";
+    this.treeview = false;
+    this.searchPlaceholder = "Search";
+    this.numberOfColumns = 1;
+    this.height = null;
+    this.maxHeight = null;
+    this.template = null;
+    this.highlight = false;
+    this.loading = true;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    /**
+     * Component States
+     */
+    this.searchResults = [];
+    this.totalSearch = 0;
+    this.showSearch = true;
+    this.empty = false;
+    this.runClearAndSelect = false;
+    this.total = 0;
+    this.items = [];
+    this.checklist = [];
+    this.sortedChecklist = [];
+    this.indeterminateState = 'uncheck';
+    this.checked = false;
+    this.checklistSorted = [];
+  }
+  async setClear() {
+    this.listboxChecklist.emit([]);
+    this.value = null;
+    this.selectedId = null;
+    this.listboxClearSelected.emit([]);
+    // this.checkedObjectList.forEach(item => {
+    //     this.listboxUncheckedMethod(String(item[this.objectMapping['id']]), this._internal_id)
+    // });
+    let isItem = getChilds(this.el, 'bcm-listbox-item');
+    let elementStatuses = [];
+    if (isItem) {
+      isItem.map(element => {
+        elementStatuses.push(element.checked = false);
+      });
+    }
+    // console.log("uncheck")
+    await Promise.all(elementStatuses);
+    // if ( allStatuses ){
+    //     console.log("bitti")
+    // }
+    this.checklist = [];
+    this.sortedChecklist = [];
+    this.checklistSorted = [];
+    this.checkedObjectList = [];
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  async getValue() {
+    if (this.checkboxes) {
+      return this.checkedObjectList;
+    }
+    else {
+      return this.value;
+    }
+  }
+  async getChecklist() {
+    return this.checkedObjectList;
+  }
+  async showSearchMethod(val = true) {
+    if (this.treeview == false && this.search == true) {
+      this.showSearch = val;
+      var search = null;
+      if (search = this.el.shadowRoot.getElementById("search")) {
+        if (val) {
+          search.classList.remove('hidden');
+        }
+        else {
+          search.classList.add('hidden');
+        }
+      }
+    }
+  }
+  async selected(id) {
+    this.selectedId = String(id);
+    if (this.treeview === true) {
+      setTimeout(async () => {
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.selected(this.selectedId);
+        }
+      }, 100);
+    }
+  }
+  async clearAndSelectSearch(select = true) {
+    this.runClearAndSelect = true;
+    if (this.search == true) {
+      setTimeout(() => {
+        var searchInput = null;
+        searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
+        if (searchInput) {
+          searchInput.setClear();
+          if (select == true) {
+            searchInput.select();
+          }
+        }
+      }, 100);
+    }
+  }
+  async addChecked(items) {
+    await this.setClear();
+    if (items) {
+      if (typeof items != 'string') {
+        await delay(50);
+        if (sessionStorage.getItem(this._internal_id + "-config")) {
+          this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+        }
+        this.checkedList = items;
+        this.checkedList.forEach((item) => {
+          this.handleListboxChecked({ detail: String(item) }, this._internal_id);
+        });
+        this.updateCheckedList = [];
+        if (this.treeview === true) {
+          setTimeout(async () => {
+            await customElements.whenDefined("bcm-treeview");
+            const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+            if (bcmTreeview) {
+              await bcmTreeview.addChecked(items);
+            }
+          }, 50);
+        }
+      }
+    }
+  }
+  async updateChecked(items) {
+    this.setClear();
+    this.checkedList = [];
+    this.updateCheckedList = items;
+    this.updateCheckedList.forEach((item) => {
+      this.handleListboxChecked({ detail: item });
+    });
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        await customElements.whenDefined("bcm-treeview");
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.updateChecked(items);
+        }
+      }
+    }, 100);
+  }
+  async config(_config) {
+    if (_config['treeview'] && _config['treeview'] === true) {
+      typeof _config['treeview'] == 'boolean'
+        ? this.treeview = _config['treeview']
+        : this.treeview = false;
+    }
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        await customElements.whenDefined("bcm-treeview");
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.config(_config);
+          if (this.selectedId) {
+            await bcmTreeview.selected(this.selectedId);
+          }
+        }
+      }
+    }, 300);
+    if (_config['searchFields']) {
+      if (Array.isArray(_config['searchFields'])) {
+        this.searchFields = _config['searchFields'];
+      }
+    }
+    if (_config['searchPlaceholder']) {
+      typeof _config['searchPlaceholder'] == 'string'
+        ? this.searchPlaceholder = _config['searchPlaceholder']
+        : this.searchPlaceholder = null;
+    }
+    if (_config['maxHeight']) {
+      typeof _config['maxHeight'] == 'string'
+        ? this.maxHeight = _config['maxHeight']
+        : this.maxHeight = "100%";
+    }
+    if (_config['height']) {
+      typeof _config['height'] == 'string'
+        ? this.height = _config['height']
+        : this.height = "100%";
+    }
+    if (_config['template']) {
+      typeof _config['template'] == 'string'
+        ? this.template = _config['template']
+        : this.template = null;
+    }
+    if (_config['searchable']) {
+      typeof _config['searchable'] == 'boolean'
+        ? this.search = _config['searchable']
+        : this.search = false;
+    }
+    if (_config['highlight']) {
+      typeof _config['highlight'] == 'boolean'
+        ? this.highlight = _config['highlight']
+        : this.highlight = false;
+    }
+    if (_config['fullWidth']) {
+      typeof _config['fullWidth'] == 'boolean'
+        ? this.fullWidth = _config['fullWidth']
+        : this.fullWidth = false;
+    }
+    if (_config['numberOfColumns']) {
+      typeof _config['numberOfColumns'] == 'number'
+        ? this.numberOfColumns = _config['numberOfColumns']
+        : this.numberOfColumns = 1;
+    }
+    if (_config['infoFooter']) {
+      typeof _config['infoFooter'] == 'boolean'
+        ? this.infoFooter = _config['infoFooter']
+        : this.infoFooter = false;
+    }
+    if (_config['checkable']) {
+      typeof _config['checkable'] == 'boolean'
+        ? this.checkboxes = _config['checkable']
+        : this.checkboxes = false;
+    }
+    if (_config['showIcon']) {
+      typeof _config['showIcon'] == 'boolean'
+        ? this.showIcon = _config['showIcon']
+        : this.showIcon = false;
+    }
+    if (_config['size']) {
+      (["small", "medium", "large"].indexOf(_config['size']) >= 0)
+        ? this.size = _config['size']
+        : this.size = 'medium';
+    }
+    this.searchSub = this.objectMapping['items'];
+    if (_config['mapping']) {
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = String(_config['mapping']['id']);
+        this.returnField = this.objectMapping['id'];
+      }
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['icon']) {
+        this.objectMapping['icon'] = _config['mapping']['icon'];
+      }
+      if (_config['mapping']['avatar']) {
+        this.objectMapping['avatar'] = _config['mapping']['avatar'];
+      }
+      if (_config['mapping']['avatarName']) {
+        this.objectMapping['avatarName'] = _config['mapping']['avatarName'];
+      }
+      if (_config['mapping']['avatarImage']) {
+        this.objectMapping['avatarImage'] = _config['mapping']['avatarImage'];
+      }
+      if (_config['mapping']['secondaryText']) {
+        this.objectMapping['secondaryText'] = _config['mapping']['secondaryText'];
+      }
+      if (_config['mapping']['tooltipText']) {
+        this.objectMapping['tooltipText'] = _config['mapping']['tooltipText'];
+      }
+      if (_config['mapping']['disabled']) {
+        this.objectMapping['disabled'] = _config['mapping']['disabled'];
+      }
+      if (_config['mapping']['checked']) {
+        this.objectMapping['checked'] = _config['mapping']['checked'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
+        this.searchSub = this.objectMapping['items'];
+      }
+      // if ( this.treeview ) {
+      // }else{
+      //     this.searchSub = this.objectMapping['items']
+      // }
+    }
+    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
+    // forceUpdate(this.el)
+    return Promise.resolve(true);
+  }
+  async setData(_data = []) {
+    this.clearAndSelectSearch(false);
+    this.isLoading(true);
+    this._items = _data;
+    this.searchData = JSON.parse(_data);
+    this.isSetData = true;
+    // this.isEmpty(false)
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.setData(_data);
+          if (this.searchData.length > 0) {
+            this.isEmpty(false);
+            this.isLoading(false);
+          }
+        }
+      }
+    }, 100);
+  }
+  // componentDidLoad(){
+  //     console.log("kilitle")
+  //     setTimeout(() => {
+  //         if(this.isSetData) {
+  //             this.isLoading(true)
+  //             this.isEmpty(false)
+  //         }else{
+  //             this.isLoading(false)
+  //             this.isEmpty(true)
+  //         }
+  //     }, 100);
+  // }
+  componentWillRender() {
+    if (this.isSetData) {
+      this.onlyChilds = this.getAllGroup(this.el, true);
+      this.allChilds = this.getAllGroup();
+      if (this.onlyChilds.length != this.total) {
+        this.total = this.onlyChilds.length;
+      }
+      if (this.checkboxes === true) {
+        this.setIndeterminateState();
+        if (this.checklistSorted.length > 0) {
+          this.checkedObjectList = [];
+          this.getAllGroup(this.el).forEach(element => {
+            element.checked == true && (this.firstCheck = true,
+              this.checkedObjectList.indexOf(element.itemObject) == -1 && (this.checkedObjectList.push(element.itemObject)));
+          });
+          if (JSON.stringify(this.cacheCheckedObjectList) !== JSON.stringify(this.checkedObjectList)) {
+            this.listboxChecklist.emit(this.checkedObjectList);
+            this.cacheCheckedObjectList = this.checkedObjectList;
+            this.value = this.checkedObjectList;
+          }
+        }
+        else {
+          if (this.firstCheck) {
+            this.listboxChecklist.emit([]);
+            this.cacheCheckedObjectList = [];
+            if (this.value != null) {
+              this.value = null;
+            }
+          }
+        }
+      }
+    }
+  }
+  componentDidRender() {
+    // this.isEmpty(true)
+    // this.isLoading(true)
+    // if(this.total > 0) {
+    //     this.isLoading(false)
+    //     this.isEmpty(false)
+    // }
+    // this.isEmpty(true)
+    if (this.isSetData) {
+      if (this.total > 0) {
+        this.isEmpty(false);
+        this.isLoading(false);
+      }
+      else {
+        this.isEmpty(true);
+      }
+    }
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  setIndeterminateState() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    this.getAllGroup(this.el, true).map((item) => {
+      item.checked && (allUnchecked = false);
+      !item.checked && (allChecked = false);
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    this.indeterminateState = state;
+    this.checked = state == 'determinate' ? true : false;
+    // this.listboxChecklist.emit(this.sortedChecklist)
+  }
+  getAllGroup(element = this.el, onlyItem = false) {
+    let returnAllItems = [];
+    let isGroup = getChilds(element, 'bcm-listbox-group');
+    let isItem = getChilds(element, 'bcm-listbox-item');
+    if (isGroup.length > 0) {
+      isGroup.forEach(group => {
+        if (this.isGroupArray.indexOf(Number(group.id)) === -1) {
+          this.isGroupArray.push(Number(group.id));
+        }
+        if (onlyItem == false) {
+          returnAllItems = [...returnAllItems,
+            group
+          ];
+        }
+        getChilds(group, 'bcm-listbox-item').forEach(items => {
+          if (!(returnAllItems.indexOf(items) >= 0)) {
+            returnAllItems = [...returnAllItems,
+              items
+            ];
+          }
+        });
+      });
+    }
+    if (isItem.length > 0) {
+      isItem.forEach(items => {
+        if (!(returnAllItems.indexOf(items) >= 0)) {
+          returnAllItems = [...returnAllItems,
+            items
+          ];
+        }
+      });
+    }
+    return returnAllItems;
+  }
+  getAllChilds(element = this.el, type = null) {
+    let returnAllItems = [];
+    let oldItems = [];
+    if (!this._items || type === "slot") {
+      getChilds(element, 'bcm-listbox-item').forEach(items => {
+        returnAllItems = [...returnAllItems,
+          items
+        ];
+      });
+    }
+    else if (this._items && this._items.length > 0) {
+      oldItems = JSON.parse(this._items);
+      oldItems.map((item) => (((item.type === 'group') ? (item.items.map((item) => ((returnAllItems = [...returnAllItems, item])))) :
+        (returnAllItems = [...returnAllItems, item]))));
+    }
+    return returnAllItems;
+  }
+  /**
+   * @desc
+   */
+  handleCheckList(process = 'add', checkId) {
+    checkId = String(checkId);
+    if (this.checkboxes) {
+      if (this.items && this.items.find(e => e[this.objectMapping['id']] == checkId)) {
+        // checkId = Number(checkId)
+        switch (process) {
+          case 'add':
+            if (this.checklist.length > 0) {
+              if (!this.checklist.includes(checkId)) {
+                this.checklist = [...this.checklist, checkId];
+              }
+            }
+            else {
+              this.checklist = [checkId];
+            }
+            break;
+          case 'remove':
+            this.checklist = this.checklist.filter(item => item !== checkId);
+            break;
+          default:
+            break;
+        }
+        let sorted = this.checklist.sort(function (a, b) { return a - b; });
+        this.sortedChecklist = this.checklist;
+        this.checklistSorted = sorted;
+        // forceUpdate(this.el)
+      }
+    }
+  }
+  handleIndeterminateClick() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    let visibleItem = [];
+    this.getAllGroup(this.el, true).map((item) => {
+      if (item.hidden === false) {
+        visibleItem.push(item);
+        item.checked && (allUnchecked = false);
+        !item.checked && (allChecked = false);
+      }
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    visibleItem.map((item) => {
+      if (state !== 'uncheck') {
+        item.checked = false;
+        this.handleCheckList('remove', String(item.id));
+      }
+      else {
+        item.checked = true;
+        this.handleCheckList('add', String(item.id));
+      }
+    });
+    this.setIndeterminateState();
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  /**
+   * @desc
+   * @param item
+   */
+  itemRenderer(item) {
+    if (item[this.objectMapping['id']] && String(this.selectedId) == String(item[this.objectMapping['id']])) {
+      this.listboxItemSelected.emit(item);
+    }
+    // if(item[this.objectMapping['selected']] && item[this.objectMapping['selected']] === true){
+    //     this.listboxItemSelected.emit(item)
+    // }
+    // var checkedListCache = this.checkedList;
+    // if(checkedListCache && checkedListCache.find(e => e == item[this.objectMapping['id']])){
+    //     this.handleListboxChecked({detail: item[this.objectMapping['id']]})
+    // }
+    // const index = checkedListCache.indexOf(item[this.objectMapping['id']]);
+    // if (index > -1) {
+    //     checkedListCache.splice(index, 1);
+    // }
+    // if(this.updateCheckedList.length > 0 ){
+    //     if( this.updateCheckedList.find(e => e == item[this.objectMapping['id']]) ){
+    //         const index = this.updateCheckedList.indexOf(item[this.objectMapping['id']]);
+    //         if (index > -1) {
+    //             this.updateCheckedList.splice(index, 1);
+    //         }
+    //         this.listboxChecked.emit(item[this.objectMapping['id']])
+    //     }
+    // }
+    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (Boolean(item[this.objectMapping['checked']]) === Boolean(true) && { checked: Boolean(item[this.objectMapping['checked']]) }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (Boolean(item[this.objectMapping['selected']]) === Boolean(true) && this.checkboxes == false && { selected: Boolean(item[this.objectMapping['selected']]) }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
+  }
+  /**
+   * @desc
+   * @param group
+   */
+  recursiveGroupRenderer(group) {
+    return (h("bcm-listbox-group", { id: group[this.objectMapping['id']], text: group[this.objectMapping['text']] }, group.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item))))));
+  }
+  async searchResultMethod(items = []) {
+    if (this.treeview == true) {
+      const bcmtreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+      // await bcmListbox.config(this._config)   
+      if (bcmtreeview) {
+        bcmtreeview.searchResultMethod({ detail: (items.length > 0 ? items : true) });
+      }
+    }
+    else {
+      this.listenSearchResult({ detail: (items.length > 0 ? items : true), isEvent: true });
+    }
+    // return true
+  }
+  handleListboxSelected(event) {
+    this.listboxItemSelected.emit(event.detail);
+  }
+  /**
+   * @desc
+   */
+  // @Listen('bcm-treeview-checklist')
+  // handleListboxCheckedList(e) {
+  //    this.listboxChecklist.emit(e.detail)
+  // }
+  isLoading(val) {
+    var listContainer = this.el.shadowRoot.getElementById("bcm-listbox-list");
+    var loading = this.el.shadowRoot.getElementById("loading");
+    var searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
+    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
+    if (val) {
+      if (searchInput) {
+        searchInput.disabled = true;
+      }
+      listContainer && listContainer.classList.add('loading');
+      loading && loading.classList.add('show');
+      // listcontainer && listcontainer.classList.add('hidden')
+    }
+    else {
+      if (searchInput) {
+        searchInput.disabled = false;
+      }
+      listContainer && listContainer.classList.remove('loading');
+      loading && loading.classList.remove('show');
+      // listcontainer && listcontainer.classList.remove('hidden')
+    }
+  }
+  isEmpty(val) {
+    var empty = this.el.shadowRoot.getElementById("empty");
+    var listcontainer = this.el.shadowRoot.getElementById("list-container");
+    var checkall = this.el.shadowRoot.getElementById("checkall");
+    if (val) {
+      empty && empty.classList.add('show');
+      listcontainer && listcontainer.classList.add('hidden');
+      checkall && checkall.classList.add('hidden');
+    }
+    else {
+      empty && empty.classList.remove('show');
+      listcontainer && listcontainer.classList.remove('hidden');
+      checkall && checkall.classList.remove('hidden');
+    }
+  }
+  isSearchCount(val = false) {
+    if (this.infoFooter) {
+      var inSearch = this.el.shadowRoot.getElementById("in-search");
+      var inTotal = this.el.shadowRoot.getElementById("in-total");
+      if (val !== false && val >= 0 && val != null && inSearch && inTotal) {
+        inSearch.innerHTML = val;
+        inTotal.style.display = "none";
+      }
+      else {
+        inTotal.style.display = "inline";
+        inSearch.innerHTML = "";
+      }
+    }
+  }
+  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 searchValue = '';
+        if (this.treeview == false) {
+          // var checkall = null
+          // this.checkboxes && (checkall = this.el.shadowRoot.getElementById("checkall"))
+          var totalSearch = event.detail.length;
+          // this.empty = false
+          this.isEmpty(false);
+          this.intersection = [];
+          if (event.detail.length > 0) {
+            if (event.detail[0] == -1) {
+              totalSearch = 0;
+              this.empty = true;
+              this.isEmpty(true);
+            }
+            if (this.allChilds.length > 0) {
+              // this.checkboxes && ( checkall && checkall.classList.add('hidden') )
+              this.allChilds.map((item) => {
+                if (this.highlight) {
+                  event.target.addEventListener('bcm-on-search-value', async (e) => {
+                    var inputText = item.shadowRoot.getElementById("text");
+                    if (inputText) {
+                      searchValue = await e.detail;
+                      inputText = (inputText === null || inputText === void 0 ? void 0 : inputText.textContent) || (inputText === null || inputText === void 0 ? void 0 : 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);
+                        }
+                      }
+                      item.shadowRoot.getElementById("text").innerHTML = inputText;
+                    }
+                  });
+                }
+                item.hidden = true;
+                var _ids = String(item.id);
+                if (event.detail.indexOf(_ids) >= 0) {
+                  item.hidden = false;
+                }
+                else {
+                  item.hidden = true;
+                }
+              });
+            }
+            this.intersection = event.detail[0] == -1 ? [0] : event.detail.filter(x => this.isGroupArray.includes(x));
+          }
+          else {
+            if (this.allChilds.length > 0) {
+              this.allChilds.map((item) => {
+                item.hidden = false;
+              });
+              // this.checkboxes && ( checkall && checkall.classList.remove('hidden') )
+            }
+            // this.isEmpty(true)
+          }
+          if (this.search || this.checkboxes) {
+            setTimeout(() => {
+              if (totalSearch >= 0) {
+                var totals = totalSearch;
+                this.isSearchCount(totals);
+              }
+              else {
+                this.isSearchCount(0);
+              }
+              if (event.detail[0] === -1) {
+                this.isSearchCount(0);
+              }
+              if (event.detail === true) {
+                this.isSearchCount();
+              }
+            }, 100);
+          }
+          if (event.detail === true) {
+            this.isEmpty(false);
+          }
+          if (this.runClearAndSelect) {
+            this.runClearAndSelect = false;
+            this.isSearchCount(true);
+          }
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.items = JSON.parse(newValue)
+        : this.items = newValue;
+    }
+    this.handleChildProcess();
+  }
+  handleChange(newValue) {
+    this.change.emit(newValue);
+    this.listboxChange.emit(newValue);
+  }
+  handleChildProcess() {
+    setTimeout(() => {
+      this.onlyChilds = this.getAllGroup(this.el, true);
+      this.total = this.onlyChilds.length;
+      // console.log(this.total)
+      // this.allChilds = this.getAllChilds()
+      // this.total = this.allChilds.filter((v, i, a) => a.indexOf(v) === i).length
+      if (this.total > 0) {
+        // setTimeout(() => {
+        this.isLoading(false);
+        // }, 100);
+        this.isEmpty(false);
+      }
+      else {
+        // setTimeout(() => {
+        this.isLoading(false);
+        this.isEmpty(true);
+        // }, 100);
+      }
+    }, 100);
+  }
+  /**
+   * @desc
+   */
+  handleListboxClearSelected(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (this.checkboxes == false && path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+      this.value = event.detail;
+      this.selectedId = String(event.detail[this.objectMapping['id']]);
+      this.listboxClearSelected.emit(event.detail);
+    }
+  }
+  /**
+   * @desc
+   */
+  handleListboxChecked(event, _internal_id = this._internal_id) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if ((path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) || _internal_id == this._internal_id) {
+      this.listboxSendCheck.emit(event.detail);
+      this.handleCheckList('add', event.detail);
+      this.setIndeterminateState();
+    }
+  }
+  /**
+   * @desc
+   */
+  handleListboxUnchecked(event, _internal_id = this._internal_id) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if ((path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) || _internal_id == this._internal_id) {
+      this.listboxSendUncheck.emit(event.detail);
+      this.handleCheckList('remove', event.detail);
+      this.setIndeterminateState();
+    }
+  }
+  async listboxUncheckedMethod(item, internal_id = this._internal_id) {
+    if (this.treeview) {
+      await customElements.whenDefined("bcm-treeview");
+      const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+      if (bcmTreeview) {
+        await bcmTreeview.treeviewUncheckedMethod(item);
+      }
+    }
+    else {
+      this.handleListboxUnchecked({ "detail": item }, internal_id);
+    }
+  }
+  handleFocus(focusEvent = false) {
+    this.onFocus = focusEvent;
+  }
+  render() {
+    const { innerComponent, label, required, treeview, searchText, checkboxes, search, size, fullWidth, total, indeterminateState, checked, checklist, searchData, searchFields, _flex, returnField, searchSub, infoFooter, showSearch, noCaption, caption, captionError, captionType } = this;
+    const bcmListbox = cs('bcm-listbox', {
+      'error': captionType == 'error' ? true : false,
+      'full-width': fullWidth,
+      'flex': _flex
+    });
+    const classes = cs('listbox-item', {
+      'hidden': this.totalSearch > 0
+    });
+    const classesContainer = cs('listbox-item-container');
+    const textContent = cs('listbox-item-container-text-content', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const listContainer = cs('list-container', {
+      'column-1': this.numberOfColumns <= 1,
+      'column-2': this.numberOfColumns == 2,
+      'column-3': this.numberOfColumns >= 3,
+    });
+    const listContainerStyle = {
+      'grid-template-columns': this.numberOfColumns <= 1 ? '1fr' : 'repeat(' + this.numberOfColumns + ', ' + (210 - (this.numberOfColumns * 10)) + 'px)'
+    };
+    const hostClasses = cs(this.hidden ? 'hidden' : null, 
+    // this.totalSearch > 0 ? 'hidden' : null,
+    {
+      'flex': _flex,
+      'full-width': fullWidth
+    });
+    var customStyles = {
+      'max-height': this.maxHeight
+    };
+    const customStylesList = {
+      'min-height': this.height ? "inherit" : this.maxHeight ? "auto" : "200px"
+    };
+    if (this.height) {
+      customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
+    }
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + captionType);
+    return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id },
+      !innerComponent && label && h("div", null,
+        h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })),
+      treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })),
+      treeview == false && (h("div", { class: bcmListbox, style: customStyles },
+        search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } },
+          h("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }),
+          h("bcm-divider", null))),
+        h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList },
+          checkboxes && (h("div", { class: classes, id: "checkall" },
+            h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() },
+              h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: "indeterminate" })) || (h("bcm-checkbox-lite", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))),
+              h("div", { class: textContent }, "Select All")),
+            h("div", { class: "divider" },
+              h("bcm-divider", null)))),
+          // this.empty == false && (
+          h("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
+        // )
+        ,
+          // this.loading && (
+          h("div", { id: "loading", class: "loading show" },
+            h("bcm-icon", { class: "prefix", icon: "far fa-spinner-third fa-spin" }))
+        // )
+        ,
+          // ( this.empty || total == 0 ) && (
+          h("div", { id: "empty", class: "empty" },
+            h("bcm-empty", null, "No Data"))
+        // )
+        ),
+        infoFooter == true && (h("div", { class: "bcm-listbox-footer" },
+          h("bcm-text", { scale: "size-1", color: "grey-8" },
+            checklist.length > 0 && (' ( ' + checklist.length + ' selected ) '),
+            "Total ",
+            h("span", { id: "in-search" }),
+            " ",
+            h("span", { id: "in-total" }, total),
+            " items found."))))),
+      !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+        ? h("span", { class: captionClasses },
+          " ",
+          captionError,
+          " ")
+        : caption && h("span", { class: captionClasses },
+          " ",
+          caption,
+          " ")))));
+  }
+  static get is() { return "bcm-listbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["listbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["listbox.css"]
+  }; }
+  static get properties() { return {
+    "innerComponent": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Component Properties"
+      },
+      "attribute": "inner-component",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checkboxes": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checkboxes",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "search": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "infoFooter": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "info-footer",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showIcon": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SizeProp",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "selectedId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-id",
+      "reflect": false
+    },
+    "checkedList": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<any>",
+        "resolved": "any[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "updateCheckedList": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<any>",
+        "resolved": "any[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "_items": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<object> | string",
+        "resolved": "object[] | string",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data",
+      "reflect": false,
+      "defaultValue": "[]"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "searchFields": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "['text', 'secondaryText', 'tooltipText']"
+    },
+    "_flex": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flex",
+      "reflect": false
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "returnField": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "return-field",
+      "reflect": false,
+      "defaultValue": "\"id\""
+    },
+    "searchSub": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-sub",
+      "reflect": false,
+      "defaultValue": "\"items\""
+    },
+    "searchText": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "searchtext",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "treeview": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "treeview",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "searchPlaceholder": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "searchplaceholder",
+      "reflect": false,
+      "defaultValue": "\"Search\""
+    },
+    "numberOfColumns": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "number-of-columns",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "height": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "maxHeight": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-height",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "template": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "template",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "highlight": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": false
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": true,
+      "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'"
+    },
+    "_internal_id": {
+      "type": "string",
+      "mutable": true,
+      "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('.', '')"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "total": {},
+    "items": {},
+    "checklist": {},
+    "sortedChecklist": {},
+    "indeterminateState": {},
+    "checked": {},
+    "jsonItem": {},
+    "searchData": {},
+    "captionCache": {},
+    "captionTypeCache": {},
+    "checklistSorted": {}
+  }; }
+  static get events() { return [{
+      "method": "listboxItemSelected",
+      "name": "bcm-listbox-item-selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Component Events"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listboxClearSelected",
+      "name": "bcm-listbox-clear-selecteds",
+      "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": {}
+      }
+    }, {
+      "method": "listboxSendUncheck",
+      "name": "bcm-listbox-send-uncheck",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listboxChecklist",
+      "name": "bcm-listbox-checklist",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listboxChange",
+      "name": "bcm-listbox-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listboxChecked",
+      "name": "bcm-listbox-checked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "bcm-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "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": []
+      }
+    },
+    "getValue": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "getChecklist": {
+      "complexType": {
+        "signature": "() => Promise<object[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<object[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "showSearchMethod": {
+      "complexType": {
+        "signature": "(val?: 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": []
+      }
+    },
+    "clearAndSelectSearch": {
+      "complexType": {
+        "signature": "(select?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "addChecked": {
+      "complexType": {
+        "signature": "(items: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "updateChecked": {
+      "complexType": {
+        "signature": "(items: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "config": {
+      "complexType": {
+        "signature": "(_config: Array<object>) => Promise<boolean>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "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": []
+      }
+    },
+    "searchResultMethod": {
+      "complexType": {
+        "signature": "(items?: any[]) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "listboxUncheckedMethod": {
+      "complexType": {
+        "signature": "(item: any, internal_id?: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "_items",
+      "methodName": "parseItems"
+    }, {
+      "propName": "value",
+      "methodName": "handleChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "bcm-treeview-item-selected",
+      "method": "handleListboxSelected",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "bcm-on-search",
+      "method": "listenSearchResult",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-listbox-item-selected",
+      "method": "handleListboxClearSelected",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-listbox-checked",
+      "method": "handleListboxChecked",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-listbox-unchecked",
+      "method": "handleListboxUnchecked",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+__decorate([
+  IsLoad()
+], BcmListbox.prototype, "el", void 0);