bromcom-ui 2.3.68 → 2.3.69

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

@@ -0,0 +1,2253 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ce8878ec.js');
+const index$1 = require('./index-2f62bdaf.js');
+const utils = require('./utils-60414768.js');
+
+const listboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;width:fit-content;height:fit-content;background-color:#ffffff}:host(.hidden){display:none}:host(.flex){width:100%;height:100%}:host(.flex) .bcm-listbox{max-height:100%;max-width:100%;height:100%;min-width:100%}:host(.full-width){width:100%}:host(.full-width) .bcm-listbox{max-width:100%;min-width:100%}.bcm-listbox{flex:1;background-color:var(--bcm-color-grey-1);width:fit-content;display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;min-height:auto;max-height:300px;box-sizing:border-box;border:1px solid var(--bcm-color-grey-5)}.bcm-listbox-list{flex:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;border-bottom:none}.bcm-listbox-list.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.bcm-listbox-list .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.bcm-listbox-list .loading.show{display:flex}.bcm-listbox-list .list-container.hidden{display:none}.bcm-listbox .search{padding:8px;padding-bottom:0}.bcm-listbox .search.hidden{display:none !important}.bcm-listbox .empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.bcm-listbox .empty.show{display:flex}.bcm-listbox-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.listbox-item{display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1)}.listbox-item.hidden{display:none}.listbox-item .divider{padding:0 8px}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;width:100%}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;width:100%;padding:4px 8px 4px 4px}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.caption-area{margin-bottom:8px;min-height:20px}.input-caption{display:block}.error.label{color:var(--bcm-color-red-6) !important}.error.bcm-listbox{border:1px solid var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmListbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.listboxItemSelected = index.createEvent(this, "bcm-listbox-item-selected", 7);
+    this.listboxClearSelected = index.createEvent(this, "bcm-listbox-clear-selecteds", 7);
+    this.listboxSendCheck = index.createEvent(this, "bcm-listbox-send-check", 7);
+    this.listboxSendUncheck = index.createEvent(this, "bcm-listbox-send-uncheck", 7);
+    this.listboxChecklist = index.createEvent(this, "bcm-listbox-checklist", 7);
+    this.listboxChange = index.createEvent(this, "bcm-listbox-change", 7);
+    this.listboxChecked = index.createEvent(this, "bcm-listbox-checked", 7);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    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 = utils.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 = [];
+    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;
+  }
+  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);
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        await customElements.whenDefined("bcm-treeview");
+        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-search");
+        if (searchInput) {
+          searchInput.setClear();
+          if (select == true) {
+            searchInput.select();
+          }
+        }
+      }, 100);
+    }
+  }
+  async addChecked(items) {
+    this.setClear();
+    if (items) {
+      if (typeof items != 'string') {
+        await utils.delay(100);
+        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 = [];
+        setTimeout(async () => {
+          if (this.treeview === true) {
+            await customElements.whenDefined("bcm-treeview");
+            const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+            if (bcmTreeview) {
+              await bcmTreeview.addChecked(items);
+            }
+          }
+        }, 100);
+      }
+    }
+  }
+  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)
+    await utils.delay(500);
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        await customElements.whenDefined("bcm-treeview");
+        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);
+  // }
+  componentDidRender() {
+    // this.isEmpty(true)
+    // this.isLoading(true)
+    // if(this.total > 0) {
+    //     this.isLoading(false)
+    //     this.isEmpty(false)
+    // }
+    // this.isEmpty(true)
+    if (this.isSetData) {
+      this.onlyChilds = this.getAllGroup(this.el, true);
+      this.allChilds = this.getAllGroup();
+      this.total = this.onlyChilds.length;
+      if (this.total > 0) {
+        this.isEmpty(false);
+        this.isLoading(false);
+      }
+      else {
+        this.isEmpty(true);
+      }
+      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;
+            }
+          }
+        }
+      }
+    }
+  }
+  /**
+   * @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 = utils.getChilds(element, 'bcm-listbox-group');
+    let isItem = utils.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
+          ];
+        }
+        utils.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") {
+      utils.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;
+        }
+        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 (index.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 (index.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) {
+      await customElements.whenDefined("bcm-treeview");
+      const bcmtreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+      // await bcmListbox.config(this._config)   
+      if (bcmtreeview) {
+        await 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-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) => {
+                    searchValue = await e.detail;
+                    var inputText = item.shadowRoot.getElementById("text");
+                    inputText = inputText.textContent || inputText.innerText || "";
+                    if (searchValue) {
+                      var cacheInputText = lowercase(inputText);
+                      var cacheSearchValue = lowercase(searchValue);
+                      var index = cacheInputText.indexOf(cacheSearchValue);
+                      if (index >= 0) {
+                        inputText = inputText.substring(0, index) + "<span class='highlight'>" + inputText.substring(index, index + searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
+                      }
+                    }
+                    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 = index$1.classnames('bcm-listbox', {
+      'error': captionType == 'error' ? true : false,
+      'full-width': fullWidth,
+      'flex': _flex
+    });
+    const classes = index$1.classnames('listbox-item', {
+      'hidden': this.totalSearch > 0
+    });
+    const classesContainer = index$1.classnames('listbox-item-container');
+    const textContent = index$1.classnames('listbox-item-container-text-content', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const listContainer = index$1.classnames('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 = index$1.classnames(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 = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
+    return (index.h(index.Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (index.h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (index.h("div", { class: bcmListbox, style: customStyles }, search && (index.h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, index.h("bcm-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 }), index.h("bcm-divider", null))), index.h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (index.h("div", { class: classes, id: "checkall" }, index.h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, index.h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (index.h("span", { class: "indeterminate" })) || (index.h("bcm-checkbox", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, noCaption: true }))), index.h("div", { class: textContent }, "Select All")), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), 
+    // this.empty == false && (
+    index.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 && (
+    index.h("div", { id: "loading", class: "loading show" }, index.h("bcm-icon", { type: "animated", color: "prime-blue-6", class: "prefix", icon: "loading", size: "medium" }))
+    // )
+    , 
+    // ( this.empty || total == 0 ) && (
+    index.h("div", { id: "empty", class: "empty" }, index.h("bcm-empty", { size: "small", text: "No Data" }))
+    // )
+    ), infoFooter == true && (index.h("div", { class: "bcm-listbox-footer" }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, checklist.length > 0 && (' ( ' + checklist.length + ' selected ) '), "Total ", index.h("span", { id: "in-search" }), " ", index.h("span", { id: "in-total" }, total), " items found."))))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
+      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "_items": ["parseItems"],
+    "value": ["handleChange"]
+  }; }
+};
+BcmListbox.style = listboxCss;
+
+const listboxGroupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block}:host(.hidden){display:none}.listbox-group-title{padding:4px 16px;background-color:var(--bcm-color-grey-7);position:sticky;top:0;z-index:1}";
+
+const uppercase = (str) => str.toUpperCase();
+const BcmListboxGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+  }
+  componentWillLoad() {
+    this.text = uppercase(this.text);
+  }
+  render() {
+    const { text } = this;
+    const classes = index$1.classnames('listbox-group');
+    const classesTitle = index$1.classnames('listbox-group-title');
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: classesTitle }, index.h("bcm-text", { scale: "size-2", color: "grey-1" }, " ", text, " ")), index.h("slot", null))));
+  }
+};
+BcmListboxGroup.style = listboxGroupCss;
+
+const iconSizes = {
+  default: {
+    large: 16,
+    medium: 14,
+    small: 14,
+  }
+};
+
+const listboxItemCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:flex;flex:1}:host(.hidden){display:none}.listbox-item{display:flex;flex:1;align-items:stretch;justify-content:flex-start;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1);display:none}.listbox-item.display{display:flex}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;flex:1}.listbox-item-container .avatar{margin-right:4px}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-html-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;flex:1}.listbox-item-container-html-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-html-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-html-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-html-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:space-between;flex-direction:row;cursor:pointer;width:100%}.listbox-item-container-text-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-text-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-text-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-text-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content .icon{text-align:center;margin-right:8px}.listbox-item-container-text-content>div{display:flex;align-items:center;flex-direction:row;word-wrap:break-word}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}";
+
+const BcmListboxItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.listboxItemSelected = index.createEvent(this, "bcm-listbox-item-selected", 7);
+    this.listboxUnchecked = index.createEvent(this, "bcm-listbox-unchecked", 7);
+    this.listboxChecked = index.createEvent(this, "bcm-listbox-checked", 7);
+    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.display = true;
+    this.avatar = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.size = 'medium';
+    this.icon = 'bug';
+    this.open = false;
+    this.selected = false;
+    this.checkboxes = false;
+    this.showIcon = false;
+    this.checked = false;
+    this.focused = false;
+    this.hidden = false;
+    this.disabled = false;
+    this._internal_id = "";
+    this.template = null;
+  }
+  componentDidLoad() {
+    if (!this.disabled) {
+      if (this.selected === true) {
+        this.listboxItemSelected.emit(this.itemObject);
+      }
+      this.checkboxes === true && (this.checked === true && (this.listboxChecked.emit(this._id)));
+    }
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    if (!this.disabled) {
+      this.checkboxes === true && (this.checked === true && (this.listboxUnchecked.emit(this._id)) || (this.listboxChecked.emit(this._id)));
+      this.checkboxes === false && (this.selected = true,
+        this.listboxItemSelected.emit(this.itemObject));
+    }
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  isInternal(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['bcm-internal-id']
+      && path[0].attributes['bcm-internal-id'].value;
+    return detect == this._internal_id;
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListenListboxCheck(event) {
+    if (this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail && event.detail === this._id) {
+          this.checked = true;
+        }
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListenListboxUncheck(event) {
+    if (this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail && event.detail === this._id) {
+          this.checked = false;
+        }
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  handleListboxClearSelecteds(event) {
+    if (this.checkboxes == false && this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail) {
+          if (event.detail !== this.itemObject) {
+            this.selected = false;
+          }
+          else {
+            this.selected = true;
+          }
+        }
+      }
+    }
+  }
+  templateParser(template) {
+    var rxp = /{{([^}]+)}}/g, str = template, curMatch;
+    while (curMatch = rxp.exec(str)) {
+      template = template.replace("{{" + curMatch[1] + "}}", this.itemObject[curMatch[1]]);
+    }
+    return template;
+  }
+  render() {
+    const { display, focused, selected, size, showIcon, icon, checkboxes, _id, checked, text, avatarName, avatarImage, avatar, secondaryText, tooltipText } = this;
+    const iconSize = iconSizes.default[size];
+    const classes = index$1.classnames('listbox-item', {
+      'disabled': this.disabled,
+      'display': display
+    });
+    const classesContainer = index$1.classnames('listbox-item-container', {
+      'disabled': this.disabled,
+      'focus': focused,
+      'selected': selected
+    });
+    const textContent = index$1.classnames('listbox-item-container-text-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    const htmlContent = index$1.classnames('listbox-item-container-html-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-' + _id, name: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (index.h("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (index.h("div", { class: textContent, title: tooltipText }, index.h("div", null, (avatar || avatarName || avatarImage) && (index.h("div", { class: "avatar" }, index.h("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (index.h("bcm-icon", { type: "fill", class: "icon", icon: icon, size: iconSize })), text && (index.h("span", { id: "text" }, text)) || (index.h("slot", null))), index.h("div", null, (secondaryText) && (index.h("div", { class: "secondaryText size-1" }, secondaryText)))))))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmListboxItem.style = listboxItemCss;
+
+const treeviewCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:flex;flex-direction:column;height:100%;max-height:100%;border:1px solid var(--bcm-color-grey-5);box-sizing:border-box;background-color:#ffffff}:host(.empty) .treeview{display:flex;align-items:center;justify-content:center}.search{padding:8px;padding-bottom:0;margin-bottom:4px}.treeview{height:100%;max-height:100%;overflow:auto;background-color:var(--bcm-color-grey-1);padding:0 8px 8px 0}.treeview.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.treeview .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.treeview .loading.show{display:flex}.treeview .empty{display:none;align-items:center;justify-content:center;height:100%}.treeview .empty bcm-empty{width:fit-content;margin:auto}.treeview .empty.show{display:flex}footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3);user-select:none}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase$1 = (str) => str.toLowerCase();
+const Bcmtreeview = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.treeviewChange = index.createEvent(this, "bcm-treeview-change", 7);
+    this.treeviewSendCheck = index.createEvent(this, "bcm-treeview-send-check", 7);
+    this.treeviewSendUncheck = index.createEvent(this, "bcm-treeview-send-uncheck", 7);
+    this.treeviewChecklist = index.createEvent(this, "bcm-treeview-checklist", 7);
+    this.treeviewItemSelected = index.createEvent(this, "bcm-treeview-item-selected", 7);
+    this.treeviewClearSelecteds = index.createEvent(this, "bcm-treeview-clear-selecteds", 7);
+    this.treeviewShowContext = index.createEvent(this, "bcm-treeview-show-context", 7);
+    this.treeviewUnchecked = index.createEvent(this, "bcm-treeview-unchecked", 7);
+    this.treeviewChecked = index.createEvent(this, "bcm-treeview-checked", 7);
+    this.objectMapping = {
+      'text': 'text',
+      'icon': 'icon',
+      'id': 'id',
+      'items': 'items',
+      'open': 'open',
+      'selected': 'selected',
+      'checked': 'checked',
+      'tooltipText': 'tooltipText',
+      'disabled': "disabled",
+      'favorite': "favorite",
+    };
+    this.checkedObjectList = [];
+    this.allChilds = [];
+    this.onFocus = false;
+    this.minHeight = 200;
+    this.minWidth = 200;
+    this.allOpenCache = false;
+    this.allOpenOnSearch = false;
+    this.parentLength = [{}];
+    this.isSetData = false;
+    this.runClearAndSelect = false;
+    this.checkboxes = false;
+    this.showIcon = false;
+    this.size = 'medium';
+    this.checkedList = [];
+    this.updateCheckedList = [];
+    this.hidden = false;
+    this.search = false;
+    this.searchOnlyChild = false;
+    this.keydown = false;
+    this.allOpen = false;
+    this.fullWidth = false;
+    this.infoFooter = false;
+    this.searchFields = ['text', 'secondaryText', 'tooltipText'];
+    this.searchSub = "items";
+    this.returnField = "id";
+    this._items = [];
+    this.searchPlaceholder = "Search";
+    this.maxHeight = null;
+    this.highlight = false;
+    this.loading = true;
+    this.favIcon = false;
+    this.favIconOnlyChilds = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    /**
+     * Component States
+     */
+    this.empty = false;
+    this.showSearch = true;
+    this.items = [];
+    this.total = 0;
+    this.checkCount = 0;
+    this.keyMapForFocus = { 18: false, 87: false };
+    this.checklist = [];
+    this.favoriteList = [];
+    this.checklistSorted = [];
+    this.searchResults = [];
+  }
+  async setData(_data = []) {
+    this.clearAndSelectSearch(false);
+    this.isLoading(true);
+    this.isSetData = true;
+    this.checkedObjectList = [];
+    this.selectedId = null;
+    setTimeout(() => {
+      this._items = _data;
+      this.searchData = JSON.parse(_data);
+      this.calculateMinSizes();
+      this.handleChildProcess();
+    }, 100);
+    return Promise.resolve(true);
+  }
+  async getChecklist() {
+    return this.checkedObjectList;
+  }
+  async getFavorites() {
+    this.getChildItem(this.el).forEach(element => {
+      element[this.objectMapping['favorite']] == true && (this.favIconOnlyChilds && element[this.objectMapping['items']].length == 0 && (this.favoriteList.indexOf(element.itemObject) < 0 && (this.favoriteList.push(element.itemObject))),
+        !this.favIconOnlyChilds && (this.favoriteList.indexOf(element.itemObject) < 0 && (this.favoriteList.push(element.itemObject))));
+    });
+    return this.favoriteList;
+  }
+  async selected(id) {
+    this.selectedId = id;
+  }
+  async clearAndSelectSearch(select = true) {
+    this.runClearAndSelect = true;
+    if (this.search === true) {
+      setTimeout(() => {
+        var searchInput = null;
+        searchInput = this.el.shadowRoot.querySelector("bcm-search");
+        if (searchInput) {
+          searchInput.setClear();
+          if (select == true) {
+            searchInput.select();
+          }
+        }
+      }, 100);
+    }
+  }
+  async addChecked(items = []) {
+    this.checkedList = items;
+  }
+  async updateChecked(items = []) {
+    this.updateCheckedList = items;
+  }
+  async config(_config) {
+    if (_config['maxHeight']) {
+      typeof _config['maxHeight'] == 'string'
+        ? this.maxHeight = _config['maxHeight']
+        : this.maxHeight = "100%";
+    }
+    if (_config['searchFields']) {
+      if (Array.isArray(_config['searchFields'])) {
+        this.searchFields = _config['searchFields'];
+      }
+    }
+    if (_config['searchable']) {
+      typeof _config['searchable'] == 'boolean'
+        ? this.search = _config['searchable']
+        : this.search = false;
+    }
+    if (_config['searchOnlyChild']) {
+      typeof _config['searchOnlyChild'] == 'boolean'
+        ? this.searchOnlyChild = _config['searchOnlyChild']
+        : this.searchOnlyChild = false;
+    }
+    if (_config['searchPlaceholder']) {
+      typeof _config['searchPlaceholder'] == 'string'
+        ? this.searchPlaceholder = _config['searchPlaceholder']
+        : this.searchPlaceholder = null;
+    }
+    if (_config['fullWidth']) {
+      typeof _config['fullWidth'] == 'boolean'
+        ? this.fullWidth = _config['fullWidth']
+        : this.fullWidth = false;
+    }
+    if (_config['infoFooter']) {
+      typeof _config['infoFooter'] == 'boolean'
+        ? this.infoFooter = _config['infoFooter']
+        : this.infoFooter = false;
+    }
+    if (_config['highlight']) {
+      typeof _config['highlight'] == 'boolean'
+        ? this.highlight = _config['highlight']
+        : this.highlight = 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['favIcon']) {
+      typeof _config['favIcon'] == 'boolean'
+        ? this.favIcon = _config['favIcon']
+        : this.favIcon = false;
+    }
+    if (_config['favIconOnlyChilds']) {
+      typeof _config['favIconOnlyChilds'] == 'boolean'
+        ? this.favIconOnlyChilds = _config['favIconOnlyChilds']
+        : this.favIconOnlyChilds = false;
+    }
+    if (_config['allOpen']) {
+      typeof _config['allOpen'] == 'boolean'
+        ? this.allOpen = _config['allOpen']
+        : this.allOpen = false;
+    }
+    this.allOpenCache = this.allOpen;
+    if (_config['size']) {
+      (["small", "medium", "large"].indexOf(_config['size']) >= 0)
+        ? this.size = _config['size']
+        : this.size = 'medium';
+    }
+    if (_config['mapping']) {
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['icon']) {
+        this.objectMapping['icon'] = _config['mapping']['icon'];
+      }
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = _config['mapping']['id'];
+        this.returnField = this.objectMapping['id'];
+      }
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
+        this.searchSub = this.objectMapping['items'];
+      }
+      if (_config['mapping']['open']) {
+        this.objectMapping['open'] = _config['mapping']['open'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+      if (_config['mapping']['checked']) {
+        this.objectMapping['checked'] = _config['mapping']['checked'];
+      }
+      if (_config['mapping']['tooltipText']) {
+        this.objectMapping['tooltipText'] = _config['mapping']['tooltipText'];
+      }
+      if (_config['mapping']['disabled']) {
+        this.objectMapping['disabled'] = _config['mapping']['disabled'];
+      }
+      if (_config['mapping']['favorite']) {
+        this.objectMapping['favorite'] = _config['mapping']['favorite'];
+      }
+    }
+    // sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
+    return Promise.resolve(true);
+  }
+  calculateMinSizes() {
+    if (this.minHeight < this.el.clientHeight) {
+      this.minHeight = this.el.clientHeight;
+    }
+  }
+  connectedCallback() { }
+  componentWillLoad() { }
+  componentWillRender() {
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
+  }
+  componentDidRender() {
+    // this.isEmpty(true)
+    // if(this.total > 0) {
+    //     this.isEmpty(false)
+    // }
+  }
+  // componentDidLoad(){
+  //     this.handleChildProcess()
+  //     setTimeout(() => {
+  //         if(this.isSetData) {
+  //             this.isLoading(true)
+  //             this.isEmpty(false)
+  //         }else{
+  //             this.isLoading(false)
+  //             this.isEmpty(true)
+  //         }
+  //     }, 1000);
+  //     // this.isEmpty(true)
+  // }
+  componentWillUpdate() { }
+  // componentWillRender(){}
+  // componentDidRender(){}
+  componentDidUpdate() {
+    if (this.checkboxes === true) {
+      this.checkedObjectList = [];
+      if (this.checklistSorted.length > 0) {
+        this.getChildItem(this.el).forEach(element => {
+          element.checked == true && (this.checkedObjectList.indexOf(element.itemObject) < 0 && (this.checkedObjectList.push(element.itemObject)));
+        });
+        this.treeviewChecklist.emit(this.checkedObjectList);
+      }
+      else {
+        this.treeviewChecklist.emit([]);
+      }
+    }
+  }
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.items = JSON.parse(newValue)
+        : this.items = newValue;
+    }
+    this.handleChildProcess();
+  }
+  handleChildProcess() {
+    setTimeout(() => {
+      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
+   * @param group
+   */
+  recursiveItemRenderer(group, parentGroup) {
+    // if(String(this.selectedId) === String(group[this.objectMapping['id']])){
+    //     this.treeviewItemSelected.emit(group)
+    // }
+    if (String(this.selectedId) === String(group[this.objectMapping['id']]) || String(group[this.objectMapping['selected']]) === "true") {
+      this.treeviewItemSelected.emit(group);
+    }
+    return (index.h("bcm-treeview-item", Object.assign({ _internal_id: this._internal_id, text: group[this.objectMapping['text']], icon: group[this.objectMapping['icon']], id: group[this.objectMapping['id']], size: this.size, "has-child": !!group[this.objectMapping['items']] }, (parentGroup && { 'parent-id': parentGroup[this.objectMapping['id']] }), (group[this.objectMapping['tooltipText']] && { tooltipText: group[this.objectMapping['tooltipText']] }), (String(group[this.objectMapping['checked']]) === "true" && { checkTrigger: true }), (String(group[this.objectMapping['open']]) === "true" && { open: true }), (String(group[this.objectMapping['selected']]) === "true" && { selected: true }), (String(group[this.objectMapping['disabled']]) === "true" && { disabled: true }), (group[this.objectMapping['items']] && { items: group[this.objectMapping['items']] }), (this.favIcon && !this.favIconOnlyChilds && { favicon: true }), (this.favIcon && this.favIconOnlyChilds && group[this.objectMapping['items']].length == 0 && { favicon: true }), (this.favIcon && group.rightSlot && { favorite: group.rightSlot[this.objectMapping['favorite']] }), (this.showIcon && { showIcon: true }), (String(this.checkboxes) === "true" && { checkboxes: true }), ((this.allOpen || this.allOpenOnSearch) && { open: true }), { itemObject: group }, ((this.checkedList && this.checkedList.find(e => e == group[this.objectMapping['id']]))) && { checkTrigger: true }, (this.updateCheckedList.length > 0 &&
+      ((this.updateCheckedList.find(e => e == group[this.objectMapping['id']])) && { checkTrigger: true }))), group[this.objectMapping['items']] && group[this.objectMapping['items']].map((item) => (this.recursiveItemRenderer(item, group)))));
+  }
+  /**
+   * @desc
+   */
+  handleCheckList(process = 'add', checkId) {
+    //  console.log(checkId)
+    if (this.checkboxes === true) {
+      // const { checklist } = this
+      // checkId = Number(checkId)
+      switch (process) {
+        case 'add':
+          if (this.checklist.length > 0) {
+            this.checklist.indexOf(checkId) < 0 && (this.checklist = [...this.checklist, checkId]);
+          }
+          else {
+            this.checklist = [checkId];
+          }
+          break;
+        case 'remove':
+          this.checklist = this.checklist.filter(item => item !== checkId);
+          break;
+      }
+      let sorted = this.checklist.sort(function (a, b) { return a - b; });
+      this.checklistSorted = sorted;
+      // console.log('sorted: ', sorted)
+      this.checkCount = this.checklistSorted.length;
+    }
+  }
+  async showSearchMethod(val = true) {
+    this.showSearch = val;
+    // return val
+  }
+  async searchResultMethod(items = []) {
+    // this.listenSearchResult({ detail: items })
+    await customElements.whenDefined("bcm-search");
+    const search = this.el.shadowRoot.querySelector("bcm-search");
+    const detail = await search.searchArray(items, this.objectMapping['id']);
+    await this.listenSearchResult({ detail: detail });
+    // return true
+  }
+  isLoading(val) {
+    var treeview = this.el.shadowRoot.getElementById("treeview");
+    var loading = this.el.shadowRoot.getElementById("loading");
+    var searchInput = this.el.shadowRoot.querySelector("bcm-search");
+    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
+    if (val === true) {
+      treeview && treeview.classList.add('loading');
+      loading && loading.classList.add('show');
+      if (searchInput) {
+        searchInput.disabled = true;
+      }
+      // listcontainer && listcontainer.classList.add('hidden')
+    }
+    else {
+      treeview && treeview.classList.remove('loading');
+      loading && loading.classList.remove('show');
+      if (searchInput) {
+        searchInput.disabled = false;
+      }
+      // listcontainer && listcontainer.classList.remove('hidden')
+    }
+    return false;
+  }
+  isEmpty(val) {
+    var empty = this.el.shadowRoot.getElementById("empty");
+    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
+    if (val === true) {
+      empty && empty.classList.add('show');
+      // listcontainer && listcontainer.classList.add('hidden')
+    }
+    else {
+      empty && empty.classList.remove('show');
+      // listcontainer && listcontainer.classList.remove('hidden')
+    }
+  }
+  isSearchCount(val = null) {
+    if (this.infoFooter === true) {
+      var inSearch = this.el.shadowRoot.getElementById("in-search");
+      var inTotal = this.el.shadowRoot.getElementById("in-total");
+      if (val >= 0 && val != null && inSearch && inTotal) {
+        inSearch.innerHTML = val;
+        inTotal.style.display = "none";
+      }
+      else {
+        inTotal.style.display = "inline";
+        inSearch.innerHTML = "";
+      }
+    }
+    // if (val > 0){
+    //     this.isEmpty(false)
+    // }
+  }
+  listenSearchResult(e) {
+    this.parentLength = [];
+    var searchValue = '';
+    // this.searchResults = e.detail
+    var totalSearch = e.detail.length;
+    this.empty = false;
+    var getAllChilds = this.getAllChilds();
+    this.isEmpty(false);
+    if (e.detail.length > 0) {
+      // this.allOpenOnSearch = true
+      if (e.detail[0] == -1) {
+        totalSearch = 0;
+        this.empty = true;
+        this.isEmpty(true);
+      }
+      if (getAllChilds.length > 0) {
+        getAllChilds.map((item) => {
+          var isParent = false;
+          if (this.searchOnlyChild && item.items && item.items.length > 0) {
+            isParent = true;
+          }
+          e.target.addEventListener('bcm-on-search-value', async (e) => {
+            searchValue = await e.detail;
+            var inputText = item.shadowRoot.getElementById("text");
+            inputText = inputText.textContent || inputText.innerText || "";
+            if (searchValue) {
+              var cacheInputText = lowercase$1(inputText);
+              var cacheSearchValue = lowercase$1(searchValue);
+              var index = cacheInputText.indexOf(cacheSearchValue);
+              if (index >= 0) {
+                if (isParent == false) {
+                  if (this.parentLength.indexOf(item.id) === -1) {
+                    this.parentLength.push(item.id);
+                  }
+                  if (this.highlight) {
+                    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 = item.id;
+          if (e.detail.indexOf(_ids) >= 0) {
+            item.hidden = false;
+            item.open = true;
+            setTimeout(() => {
+              if (this.parentLength.indexOf(item.id) !== -1 && item.items && item.items.length > 0 && this.searchOnlyChild == false) {
+                const getChilds = (item) => {
+                  this.getAllChilds(item).map(element => {
+                    element.hidden = false;
+                    element.open = true;
+                    getChilds(element);
+                  });
+                };
+                getChilds(item);
+              }
+            }, 1);
+          }
+          else {
+            item.hidden = true;
+          }
+        });
+      }
+    }
+    else {
+      // this.allOpenOnSearch = this.allOpenCache
+      if (getAllChilds.length > 0) {
+        getAllChilds.map((item) => {
+          item.hidden = false;
+        });
+      }
+      // this.isEmpty(true)
+    }
+    // if ( this.searchOnlyChild ) {
+    // this.isSearchCount(highlightLength)
+    // }else{
+    setTimeout(() => {
+      if (totalSearch >= 0) {
+        var totals = totalSearch - Number(totalSearch - this.parentLength.length);
+        this.isSearchCount(totals > 0 ? totals : 0);
+      }
+      else {
+        this.isSearchCount();
+      }
+      if (e.detail[0] === -1) {
+        this.isSearchCount(0);
+      }
+      if (e.detail === true) {
+        this.isSearchCount();
+      }
+    }, 100);
+    // }
+    if (e.detail === true) {
+      this.isEmpty(false);
+    }
+  }
+  getAllChilds(element = this.el) {
+    let returnAllItems = [];
+    utils.getChilds(element, 'bcm-treeview-item').forEach(items => {
+      this.getAllChilds(items) && (returnAllItems.indexOf(items) < 0 && (returnAllItems.push(items))
+      // returnAllItems = [...returnAllItems, ...this.getAllChilds(items)]
+      );
+      returnAllItems.indexOf(items) < 0 && (returnAllItems.push(items));
+      // returnAllItems = [...returnAllItems,
+      //     items
+      // ]
+    });
+    return returnAllItems;
+  }
+  /**
+   * @desc
+   */
+  handletreeviewItemSelected(event) {
+    this.treeviewClearSelecteds.emit(event.detail);
+  }
+  /**
+   * @desc
+   */
+  handletreeviewChecked(event) {
+    //  this.treeviewSendCheck.emit(event.detail)
+    this.handleCheckList('add', event.detail);
+    //  this.treeviewChange.emit(event.detail)
+  }
+  /**
+   * @desc
+   */
+  //  @Listen('bcm-treeview-check-group-check')
+  //  bcmTreeviewCheckGroupChecked(event: any) {
+  //  console.log(event)
+  //  this.treeviewSendCheck.emit(event.detail)
+  //  this.handleCheckList('add',event.detail)
+  //  this.treeviewChange.emit(event.detail)
+  //  }
+  /**
+   * @desc
+   */
+  handletreeviewUnchecked(event) {
+    // this.treeviewSendUncheck.emit(event.detail)
+    this.handleCheckList('remove', event.detail);
+    // this.treeviewChange.emit(event.detail)
+  }
+  /**
+   * @desc
+   */
+  handletreeviewIndeterminateChecked(event) {
+    this.handleCheckList('add', event.detail);
+  }
+  /**
+   * @desc
+   */
+  handletreeviewIndeterminateUnchecked(event) {
+    this.handleCheckList('remove', event.detail);
+  }
+  treeviewUncheckedMethod(item) {
+    this.handletreeviewUnchecked({ "detail": item });
+    this.componentDidUpdate();
+    return Promise.resolve(true);
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getIndex(item) {
+    return Array.from(item.parentNode.children).indexOf(item);
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getNext(item) {
+    let returnItem = this.getChildItem(item.parentElement)[this.getIndex(item) + 1];
+    if (returnItem)
+      return returnItem;
+    return false;
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getPrev(item) {
+    let returnItem = this.getChildItem(item.parentElement)[this.getIndex(item) - 1];
+    if (returnItem)
+      return returnItem;
+    return false;
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getParent(item) {
+    if (lowercase$1(item.parentElement.tagName) == 'bcm-treeview') {
+      return false;
+    }
+    else {
+      return this.getChildItem(item.parentElement.parentElement)[this.getIndex(item.parentElement)];
+    }
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getNextParent(item) {
+    let getParent = this.getParent(item);
+    let getNext;
+    if (getParent) {
+      getNext = this.getNext(getParent);
+      if (getNext) {
+        return getNext;
+      }
+      else {
+        return this.getNextParent(getParent);
+      }
+    }
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getFirstItem(el = this.el) {
+    return this.getChildItem(el)[0];
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getLastItem(el = this.el) {
+    let childLength = this.getChildItem(el).length;
+    let lastChild = this.getChildItem(el)[childLength - 1];
+    if (this.getChildItem(lastChild).length > 0 && lastChild.open == true) {
+      return this.getLastItem(lastChild);
+    }
+    else {
+      return lastChild;
+    }
+  }
+  /**
+   * @desc
+   * Keyboard Navigation
+   */
+  getChildItem(element = this.el) {
+    let returnItems = utils.getChilds(element, 'bcm-treeview-item');
+    if (returnItems)
+      return returnItems;
+    return 0;
+  }
+  /**
+   * @desc
+   */
+  handleRightClick(e) {
+    this.treeviewShowContext.emit([e.target.id, e.clientY, e.clientX]);
+    e.preventDefault();
+  }
+  /**
+   * @desc
+   */
+  keyboardNavigationUp(e) {
+    let { keyMapForFocus } = this;
+    if (e.keyCode in keyMapForFocus) {
+      keyMapForFocus[e.keyCode] = false;
+    }
+  }
+  /**
+   * @desc
+   */
+  keyboardNavigation(e) {
+    if (this.keydown) {
+      const { keyMapForFocus, focusedElement, el } = this;
+      this.focusedElement = !focusedElement ? el : focusedElement;
+      const which = e.which || 0;
+      if (this.getChildItem(el).length > 0) {
+        if (e.keyCode in keyMapForFocus) {
+          keyMapForFocus[e.keyCode] = true;
+          if (keyMapForFocus[18] && keyMapForFocus[87]) {
+            e.preventDefault();
+            this.focusedElement = this.getFirstItem(this.focusedElement);
+          }
+        }
+        if (which == 9 || //tab
+          which == 13 || //enter
+          which == 18 || //alt
+          which == 32 || //space
+          which == 35 || // end
+          which == 36 || // home
+          (which >= 35 && which <= 40) //end, home, left arrow, up arrow, right arrow, down arrow
+        ) {
+          e.preventDefault();
+          if (!focusedElement) {
+            this.focusedElement = this.getFirstItem(this.focusedElement);
+          }
+          else {
+            this.focusedElement.focused = false;
+            switch (which) {
+              case 13: // enter
+                this.focusedElement.selected = true;
+                break;
+              case 32: // space
+                this.focusedElement.checked && (this.treeviewUnchecked.emit(this.focusedElement.id)) || (this.treeviewChecked.emit(this.focusedElement.id));
+                break;
+              case 35: // end
+                this.focusedElement = this.getLastItem(this.focusedElement.parentElement);
+                break;
+              case 36: // home
+                this.focusedElement = this.getFirstItem(this.focusedElement.parentElement);
+                break;
+              case 37: // left arrow
+                if (this.getChildItem(this.focusedElement).length > 0 && this.focusedElement.open == true) {
+                  this.focusedElement.open = false;
+                }
+                else {
+                  if (this.getParent(this.focusedElement)) {
+                    this.focusedElement = this.getParent(this.focusedElement);
+                  }
+                }
+                break;
+              case 38: // up arrow
+                if (this.getPrev(this.focusedElement)) {
+                  this.focusedElement = this.getPrev(this.focusedElement);
+                  if (this.getChildItem(this.focusedElement).length > 0 && this.focusedElement.open == true) {
+                    this.focusedElement = this.getLastItem(this.focusedElement);
+                  }
+                }
+                else if (this.getParent(this.focusedElement)) {
+                  this.focusedElement = this.getParent(this.focusedElement);
+                }
+                break;
+              case 39: // right arrow
+                if (this.getChildItem(this.focusedElement).length > 0) {
+                  if (this.focusedElement.open == true) {
+                    this.focusedElement = this.getFirstItem(this.focusedElement);
+                  }
+                  else {
+                    this.focusedElement.open = true;
+                  }
+                }
+                break;
+              case 40: // down arrow
+                if (this.getChildItem(this.focusedElement).length > 0 && this.focusedElement.open == true) {
+                  this.focusedElement = this.getFirstItem(this.focusedElement);
+                }
+                else if (this.getNext(this.focusedElement)) {
+                  this.focusedElement = this.getNext(this.focusedElement);
+                }
+                else if (this.getNextParent(this.focusedElement)) {
+                  this.focusedElement = this.getNextParent(this.focusedElement);
+                }
+                break;
+            }
+          }
+        }
+        if (this.focusedElement)
+          this.focusedElement.focused = true;
+      }
+    }
+  }
+  handleFocus(focusEvent = false) {
+    this.onFocus = focusEvent;
+  }
+  render() {
+    const { searchOnlyChild, searchPlaceholder, search, checkCount, searchData, searchFields, searchSub, returnField, total, fullWidth, infoFooter, showSearch } = this;
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
+      'empty': this.empty,
+      'full-width': fullWidth
+    });
+    const customStyles = {
+      // 'min-height': this.minHeight + 'px',
+      'min-width': this.minWidth + 'px',
+      'max-height': this.maxHeight
+    };
+    return (index.h(index.Host, { class: hostClasses, style: customStyles }, search && (index.h("div", { class: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, index.h("bcm-search", { onlyChild: searchOnlyChild, searchPlaceholder: searchPlaceholder, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), index.h("bcm-divider", null))), index.h("div", { id: "treeview", class: "treeview loading" }, 
+    // this.loading && (
+    index.h("div", { id: "loading", class: "loading show" }, index.h("bcm-icon", { type: "animated", color: "prime-blue-6", class: "prefix", icon: "loading", size: "medium" }))
+    // )
+    , 
+    // this.empty && (
+    index.h("div", { id: "empty", class: "empty" }, index.h("bcm-empty", { size: "small", text: "No Data" }))
+    // )
+    , !this.empty && this.items.length !== 0 && this.items.map((item) => (this.recursiveItemRenderer(item, null)))), infoFooter == true && (index.h("footer", null, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, checkCount > 0 && ('( ' + checkCount + ' items selected ) '), "Total ", index.h("span", { id: "in-search" }), " ", index.h("span", { id: "in-total" }, total), " items found.")))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "_items": ["parseItems"]
+  }; }
+};
+Bcmtreeview.style = treeviewCss;
+
+const iconSizes$1 = {
+  default: {
+    large: 16,
+    medium: 14,
+    small: 14,
+  }
+};
+
+const treeviewItemCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host(.hidden){display:none}.treeview-item{display:flex;align-items:stretch;justify-content:flex-start;color:var(--bcm-color-grey-8);padding-left:8px;user-select:none;background-color:var(--bcm-color-grey-1)}.treeview-item-context-menu{display:none;position:absolute;height:auto;background-color:#ffffff;align-items:center;justify-content:center;flex-direction:column;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}.treeview-item-context-menu.show{display:flex}.treeview-item-context-menu span{text-align:left;min-width:100px;padding:5px 8px;font-size:14px;line-height:22px;color:var(--bcm-color-grey-8)}.treeview-item-context-menu span:hover{cursor:pointer;color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.treeview-item.focus .treeview-item-container{border:2px solid var(--bcm-color-prime-blue-2)}.treeview-item-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.treeview-item-container.disabled{color:var(--bcm-color-grey-6)}.treeview-item-container.disabled .text-content{cursor:not-allowed}.treeview-item-container.selected:not(.disabled){color:var(--bcm-color-prime-blue-6)}.treeview-item-container.selected:not(.disabled):hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.treeview-item-container:hover:not(.disabled),.treeview-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.treeview-item-container>section:not(.favicon){display:flex;align-items:stretch;justify-content:flex-start;border:2px solid transparent;flex:1}.treeview-item-container>section.favicon{display:flex;align-items:center;justify-content:center;padding:0 5px;height:100%;cursor:pointer}.treeview-item-container>section.favicon:not(.favorite){display:none}.treeview-item-container:hover:not(.disabled) .favicon{display:flex}.treeview-inner{display:none}.treeview-inner.open{display:block}.collapse-content{display:flex;align-items:center;justify-content:center;width:16px;min-width:16px}.collapse-content.child{cursor:pointer}.check-content{display:flex;align-items:center;justify-content:flex-start;width:24px;min-width:24px;padding-left:8px}.check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.check-content .indeterminate:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.check-content .indeterminate.disabled{cursor:not-allowed;background:linear-gradient(90deg, var(--bcm-color-grey-3) 18px, transparent 0px);border-color:var(--bcm-color-grey-3)}.check-content .indeterminate.disabled:after{background-color:var(--bcm-color-grey-6)}.check-content .indeterminate.disabled bcm-icon{filter:brightness(0);opacity:0.3}.text-content{display:flex;align-items:center;justify-content:space-between;cursor:pointer;width:100%;flex:1}.text-content .favicon{display:flex;flex-direction:row;align-items:center;grid-gap:4px}.text-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.text-content.small{padding:0 8px 0 4px}.text-content.medium{padding:4px 8px 4px 4px}.text-content.large{padding:8px 8px 8px 4px}.text-content .icon{text-align:center;margin-right:8px}";
+
+const BcmtreeviewItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.treeviewItemSelected = index.createEvent(this, "bcm-treeview-item-selected", 7);
+    this.treeviewUnchecked = index.createEvent(this, "bcm-treeview-unchecked", 7);
+    this.treeviewChecked = index.createEvent(this, "bcm-treeview-checked", 7);
+    this.treeviewChange = index.createEvent(this, "bcm-treeview-change", 7);
+    this.treeviewIndeterminateUnchecked = index.createEvent(this, "bcm-treeview-indeterminate-unchecked", 7);
+    this.treeviewIndeterminateChecked = index.createEvent(this, "bcm-treeview-indeterminate-checked", 7);
+    this.itemChecked = index.createEvent(this, "bcm-treeview-check-item-checked", 7);
+    this.itemUnchecked = index.createEvent(this, "bcm-treeview-check-item-unchecked", 7);
+    this.groupCheck = index.createEvent(this, "bcm-treeview-check-group-check", 7);
+    this.favoriteStatus = index.createEvent(this, "bcm-favorite-status", 7);
+    this.firstRun = true;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hasChild = false;
+    this.size = 'medium';
+    this.icon = 'bug';
+    this.open = false;
+    this.selected = false;
+    this.checkboxes = false;
+    this.showIcon = false;
+    this.favicon = false;
+    this.favorite = false;
+    this.checked = false;
+    this.checkTrigger = false;
+    this.focused = false;
+    this.disabled = false;
+    this.contextMenuShow = false;
+    this._contextMenu = [];
+    this.indeterminateState = 'uncheck';
+    this._internal_id = "";
+    this.menuPadding = 0;
+    this.childLength = 0;
+    this.indeterminate = false;
+    // @State() checkTrigger: boolean = false
+    this.hidden = false;
+    this.contextMenu = [];
+    this.contextOffsetLeft = 0;
+    this.contextOffsetTop = 0;
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    this.menuPadding = 24;
+    this.childLength = this.el.children.length;
+    this.parseItems(this._contextMenu);
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentDidLoad() {
+    // if (!this.disabled){
+    //     // if (this.selected) this.treeviewItemSelected.emit(this.itemObject)
+    //     if (this.checked){ 
+    //         // this.treeviewChecked.emit(this._id)
+    //         this.handleCheckMouseUp()
+    //     }
+    // }
+    if (!this.disabled && this.firstRun && this.checkTrigger) {
+      this.firstRun = false;
+      this.handleCheckMouseUp();
+    }
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  /*  setIndeterminateState() {
+       if(this.getAllChilds().length > 0) {
+           
+           let state: string = 'uncheck'
+           let allChecked: boolean = true
+           let allUnchecked: boolean = true
+
+           this.getAllChilds().map((item) => {
+               item.checked && (allUnchecked = false)
+               !item.checked && (allChecked = false)
+           });
+           
+           !allChecked && !allUnchecked
+           ? state = 'indeterminate'
+           : allChecked
+           ? state = 'determinate'
+           : state = 'uncheck'
+           
+           this.indeterminateState = state as any;
+           
+       }
+   } */
+  /* @Watch('indeterminateState')
+  onCheckedChange() {
+      if (this.indeterminateState == 'determinate') {
+          this.treeviewChecked.emit(this._id)
+      }else if (this.indeterminateState == 'uncheck') {
+          this.treeviewIndeterminateUnchecked.emit(this._id)
+          this.checked = false
+      }else{
+          this.treeviewIndeterminateUnchecked.emit(this._id)
+          this.checked = false
+      }
+  } */
+  /**
+   * @descc
+   * @param event
+   */
+  handletreeviewClearSelecteds(event) {
+    if (!this.disabled) {
+      if (event.detail && event.detail !== this.itemObject)
+        this.selected = false;
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListentreeviewChange() {
+    //this.setIndeterminateState();
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListentreeviewShowContext(event) {
+    this.contextOffsetTop = event.detail[1];
+    this.contextOffsetLeft = event.detail[2];
+    if (event.detail[0] && event.detail[0] === this._id) {
+      this.contextMenuShow = true;
+    }
+    else {
+      this.contextMenuShow = false;
+    }
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWindowClick(event) {
+    const target = event.target;
+    if (target === this.el)
+      return;
+    this.contextMenuShow = false;
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    if (!this.disabled) {
+      this.selected = true;
+      this.treeviewItemSelected.emit(this.itemObject);
+    }
+  }
+  /**
+   * @desc
+   */
+  handleFavClick(e) {
+    if (!this.disabled) {
+      this.favorite = !this.favorite;
+      if (!this.itemObject["rightSlot"]) {
+        this.itemObject["rightSlot"] = {};
+      }
+      this.itemObject["rightSlot"]["favorite"] = this.favorite;
+      this.favoriteStatus.emit(this.itemObject);
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+  /**
+   * @desc
+   */
+  handleOpen() {
+    this.open = !this.open;
+  }
+  getRootChilds(element = this.el) {
+    return utils.getChilds(element, 'bcm-treeview-item');
+  }
+  getAllChilds(element = this.el) {
+    let returnAllItems = [];
+    utils.getChilds(element, 'bcm-treeview-item').forEach(items => {
+      this.getAllChilds(items) && (returnAllItems = [...returnAllItems, ...this.getAllChilds(items)]);
+      returnAllItems = [...returnAllItems,
+        items
+      ];
+    });
+    return returnAllItems;
+  }
+  /**
+   * @desc
+   * -
+   */
+  checkGroupState() {
+    // debugger;
+    const childsRoot = this.getRootChilds();
+    let [state, allChecked, allUnchecked] = ['uncheck', true, true];
+    if (childsRoot.length > 0) {
+      childsRoot.forEach(checkbox => {
+        (checkbox.checked || checkbox.indeterminateState === 'indeterminate') && (allUnchecked = false);
+        !checkbox.checked && (allChecked = false);
+      });
+      !allChecked && !allUnchecked
+        ? state = 'indeterminate'
+        : allChecked
+          ? state = 'determinate'
+          : state = 'uncheck';
+      this.indeterminateState = state;
+      if (state === 'determinate') {
+        this.checked = true;
+        // if(this.checked) {
+        this.treeviewChecked.emit(this._id);
+        // }
+      }
+      else {
+        this.checked = false;
+        this.treeviewUnchecked.emit(this._id);
+      }
+    }
+    else {
+      if (this.checked) {
+        this.checked = false;
+        this.treeviewUnchecked.emit(this._id);
+      }
+      else {
+        this.checked = true;
+        this.treeviewChecked.emit(this._id);
+      }
+    }
+  }
+  /**
+   * @Event
+   * @desc
+   * -
+   */
+  handleCheckMouseUp() {
+    const checked = this.checked;
+    const state = this.indeterminateState;
+    if (!this.hasChild) {
+      !checked
+        ? this.checked = true
+        : this.checked = false;
+      if (this.checked) {
+        this.treeviewChecked.emit(this._id);
+      }
+      else {
+        this.treeviewUnchecked.emit(this._id);
+      }
+      this.groupCheck.emit(this.parentId);
+      return;
+    }
+    const childs = this.getAllChilds();
+    if (state === 'indeterminate' || state === 'uncheck') {
+      childs.forEach(child => {
+        child.checked = true;
+        // if(this.checked) {
+        this.treeviewChecked.emit(child._id);
+        // }
+        child.indeterminateState = 'determined';
+      });
+    }
+    else {
+      childs.forEach(child => {
+        child.checked = false;
+        this.treeviewUnchecked.emit(child._id);
+        child.indeterminateState = 'uncheck';
+      });
+    }
+    this.checkGroupState();
+    this.groupCheck.emit(this.parentId);
+  }
+  checkGroup(e) {
+    const { detail: groupId } = e;
+    if (!groupId || this._id !== groupId)
+      return;
+    this.checkGroupState();
+    this.groupCheck.emit(this.parentId);
+  }
+  /**
+   * @desc
+   * @param item
+   */
+  contextItemRenderer(item) {
+    return (index.h("span", null, item.title));
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.contextMenu = JSON.parse(newValue)
+        : this.contextMenu = newValue;
+    }
+  }
+  render() {
+    const { _id, text, tooltipText, size, icon, open, childLength, checkboxes, showIcon, checked, indeterminateState, focused, contextMenuShow } = this;
+    const menuPadding = this.menuPadding + 'px';
+    const iconSize = iconSizes$1.default[size];
+    const textContent = index$1.classnames('text-content', size, 'size-2'
+    // {
+    //     'size-2': size === 'small' || size === 'medium',
+    //     'size-3': size === 'large',
+    // }
+    );
+    const classes = index$1.classnames('treeview-item', {
+      'focus': focused,
+      'open': open,
+      'selected': this.selected
+    });
+    const treeviewContextMenu = index$1.classnames('treeview-item-context-menu', {
+      'show': contextMenuShow
+    });
+    const treeviewInner = index$1.classnames('treeview-inner', {
+      'open': open,
+    });
+    const indeterminate = index$1.classnames('indeterminate', {
+      'disabled': this.disabled,
+    });
+    const treeviewItemContainer = index$1.classnames('treeview-item-container', {
+      'selected': this.selected,
+      'disabled': this.disabled
+    });
+    const collapseContent = index$1.classnames('collapse-content', {
+      'child': childLength > 0,
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    const faviconClass = index$1.classnames("favicon", {
+      "favorite": this.favorite
+    });
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: collapseContent, id: "collapse-button", onClick: () => childLength > 0 && this.handleOpen() }, childLength > 0 && (index.h("bcm-icon", { class: "collapse-icon", size: 8, icon: open ? 'caret-down' : 'caret-right', type: "fill", color: "grey-10" }))), index.h("div", { class: treeviewItemContainer }, index.h("section", { onMouseUp: () => this.handleCheckMouseUp() }, checkboxes && (index.h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (index.h("span", { class: indeterminate })) || (index.h("bcm-checkbox", { id: 'check-' + _id, name: 'check-' + _id, checked: checked, disabled: this.disabled, noCaption: true })))), index.h("div", { class: textContent, onClick: () => this.handleClick(), title: tooltipText }, showIcon && icon && (index.h("bcm-icon", { type: "fill", class: "icon", icon: icon, size: iconSize })), index.h("span", { id: "text" }, text))), this.favicon && (index.h("section", { class: faviconClass, onClick: (e) => this.handleFavClick(e) }, index.h("bcm-icon", { title: this.favorite ? "Click to remove from favorite list" : "Click to add to your favourites list", size: iconSize, type: (this.favorite ? "fill" : "outlined"), icon: "star" })))), !checkboxes && (index.h("div", { class: treeviewContextMenu, style: { top: this.contextOffsetTop + 'px', left: this.contextOffsetLeft + 'px' } }, this.contextMenu.length !== 0 && this.contextMenu.map((item) => (this.contextItemRenderer(item)))))), index.h("div", { class: treeviewInner, style: { paddingLeft: menuPadding } }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "_contextMenu": ["parseItems"]
+  }; }
+};
+BcmtreeviewItem.style = treeviewItemCss;
+
+exports.bcm_listbox = BcmListbox;
+exports.bcm_listbox_group = BcmListboxGroup;
+exports.bcm_listbox_item = BcmListboxItem;
+exports.bcm_treeview = Bcmtreeview;
+exports.bcm_treeview_item = BcmtreeviewItem;