bromcom-ui 2.7.23-0 → 2.7.23-3

package/dist/collection/components/organism/treeview/treeview.js

@@ -1,1689 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { Component, h, Host, Listen, Event, Element, Prop, State, Watch, Method } from '@stencil/core';
-import { getChilds } from '../../../utils/utils';
-import cs from 'classnames';
-/**
- * @desc
- * @param str
- */
-const lowercase = (str) => str.toLowerCase();
-export class Bcmtreeview {
-  constructor() {
-    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) {
-    const sId = String(this.selectedId);
-    const gId = String(group[this.objectMapping['id']]);
-    const isSelected = String(group[this.objectMapping['selected']]) === 'true' ? true : false;
-    if (sId === gId || isSelected) {
-      this.treeviewItemSelected.emit(group);
-    }
-    return (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;
-        default:
-          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(inputText);
-              var cacheSearchValue = lowercase(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 = [];
-    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(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 = 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;
-              default:
-                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 = cs(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 (h(Host, { class: hostClasses, style: customStyles },
-      search && (h("div", { class: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } },
-        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 }),
-        h("bcm-divider", null))),
-      h("div", { id: "treeview", class: "treeview loading" },
-        // this.loading && (
-        h("div", { id: "loading", class: "loading show" },
-          h("bcm-icon", { class: "prefix", icon: "far fa-spinner-third fa-spin" }))
-      // )
-      ,
-        // this.empty && (
-        h("div", { id: "empty", class: "empty" },
-          h("bcm-empty", { size: "small", text: "No Data" }))
-      // )
-      ,
-        !this.empty && this.items.length !== 0 && this.items.map((item) => (this.recursiveItemRenderer(item, null)))),
-      infoFooter == true && (h("footer", null,
-        h("bcm-text", { scale: "size-1", color: "grey-8" },
-          checkCount > 0 && ('( ' + checkCount + ' items selected ) '),
-          "Total ",
-          h("span", { id: "in-search" }),
-          " ",
-          h("span", { id: "in-total" }, total),
-          " items found.")))));
-  }
-  static get is() { return "bcm-treeview"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["treeview.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["treeview.css"]
-  }; }
-  static get properties() { return {
-    "checkboxes": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "checkboxes",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showIcon": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-icon",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "SizeProp",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "SizeProp": {
-            "location": "import",
-            "path": "./types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "selectedId": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-id",
-      "reflect": false
-    },
-    "checkedList": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<any>",
-        "resolved": "any[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "updateCheckedList": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<any>",
-        "resolved": "any[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "search": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "search",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "searchOnlyChild": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "search-only-child",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "keydown": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "keydown",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "allOpen": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "all-open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "infoFooter": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "info-footer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "searchFields": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<string>",
-        "resolved": "string[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "['text', 'secondaryText', 'tooltipText']"
-    },
-    "searchSub": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "search-sub",
-      "reflect": false,
-      "defaultValue": "\"items\""
-    },
-    "returnField": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "return-field",
-      "reflect": false,
-      "defaultValue": "\"id\""
-    },
-    "_items": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<object> | string",
-        "resolved": "object[] | string",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data",
-      "reflect": false,
-      "defaultValue": "[]"
-    },
-    "searchPlaceholder": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "searchplaceholder",
-      "reflect": false,
-      "defaultValue": "\"Search\""
-    },
-    "maxHeight": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-height",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "highlight": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "highlight",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "favIcon": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "fav-icon",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "favIconOnlyChilds": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "fav-icon-only-childs",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "_internal_id": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "_internal_id",
-      "reflect": true,
-      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
-    }
-  }; }
-  static get states() { return {
-    "showSearch": {},
-    "items": {},
-    "total": {},
-    "checkCount": {},
-    "focusedElement": {},
-    "keyMapForFocus": {},
-    "checklist": {},
-    "favoriteList": {},
-    "checklistSorted": {},
-    "searchData": {},
-    "searchResults": {}
-  }; }
-  static get events() { return [{
-      "method": "treeviewChange",
-      "name": "bcm-treeview-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Component Events"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewSendCheck",
-      "name": "bcm-treeview-send-check",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewSendUncheck",
-      "name": "bcm-treeview-send-uncheck",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewChecklist",
-      "name": "bcm-treeview-checklist",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewItemSelected",
-      "name": "bcm-treeview-item-selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewClearSelecteds",
-      "name": "bcm-treeview-clear-selecteds",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewShowContext",
-      "name": "bcm-treeview-show-context",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewUnchecked",
-      "name": "bcm-treeview-unchecked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "treeviewChecked",
-      "name": "bcm-treeview-checked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setData": {
-      "complexType": {
-        "signature": "(_data?: Array<object> | string) => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getChecklist": {
-      "complexType": {
-        "signature": "() => Promise<object[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<object[]>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "getFavorites": {
-      "complexType": {
-        "signature": "() => Promise<number[]>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<number[]>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "selected": {
-      "complexType": {
-        "signature": "(id: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "clearAndSelectSearch": {
-      "complexType": {
-        "signature": "(select?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "addChecked": {
-      "complexType": {
-        "signature": "(items?: any[]) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "updateChecked": {
-      "complexType": {
-        "signature": "(items?: any[]) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "config": {
-      "complexType": {
-        "signature": "(_config: Array<object>) => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "showSearchMethod": {
-      "complexType": {
-        "signature": "(val?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "searchResultMethod": {
-      "complexType": {
-        "signature": "(items?: any) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "treeviewUncheckedMethod": {
-      "complexType": {
-        "signature": "(item: any) => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "_items",
-      "methodName": "parseItems"
-    }]; }
-  static get listeners() { return [{
-      "name": "bcm-on-search",
-      "method": "listenSearchResult",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-item-selected",
-      "method": "handletreeviewItemSelected",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-checked",
-      "method": "handletreeviewChecked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-unchecked",
-      "method": "handletreeviewUnchecked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-indeterminate-checked",
-      "method": "handletreeviewIndeterminateChecked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "bcm-treeview-indeterminate-unchecked",
-      "method": "handletreeviewIndeterminateUnchecked",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "contextmenu",
-      "method": "handleRightClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keyup",
-      "method": "keyboardNavigationUp",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "keyboardNavigation",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
-}