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

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

@@ -0,0 +1,1699 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h, Host, Listen, Event, Element, Prop, State, Watch, Method } from '@stencil/core';
+import { getChilds } from '../../../utils/utils';
+import cs from 'classnames';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+export class 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-old-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-old-search");
+    const search = this.el.shadowRoot.querySelector("bcm-old-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-old-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-old-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", null, "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
+    }]; }
+}
+__decorate([
+  IsLoad()
+], Bcmtreeview.prototype, "el", void 0);