bromcom-ui 2.3.57 → 2.3.61

package/dist/bromcom-ui/bcm-treeview.entry.js

@@ -0,0 +1,814 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { a as getChilds } from './utils-1feb01eb.js';
+
+const treeviewCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:flex;flex-direction:column;height:100%;max-height:100%;border:1px solid var(--bcm-color-grey-5);box-sizing:border-box;background-color:#ffffff}:host(.empty) .treeview{display:flex;align-items:center;justify-content:center}.search{padding:8px;padding-bottom:0;margin-bottom:4px}.treeview{height:100%;max-height:100%;overflow:auto;background-color:var(--bcm-color-grey-1);padding:0 8px 8px 0}.treeview.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.treeview .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.treeview .loading.show{display:flex}.treeview .empty{display:none;align-items:center;justify-content:center;height:100%}.treeview .empty bcm-empty{width:fit-content;margin:auto}.treeview .empty.show{display:flex}footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3);user-select:none}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const Bcmtreeview = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.treeviewChange = createEvent(this, "bcm-treeview-change", 7);
+    this.treeviewSendCheck = createEvent(this, "bcm-treeview-send-check", 7);
+    this.treeviewSendUncheck = createEvent(this, "bcm-treeview-send-uncheck", 7);
+    this.treeviewChecklist = createEvent(this, "bcm-treeview-checklist", 7);
+    this.treeviewItemSelected = createEvent(this, "bcm-treeview-item-selected", 7);
+    this.treeviewClearSelecteds = createEvent(this, "bcm-treeview-clear-selecteds", 7);
+    this.treeviewShowContext = createEvent(this, "bcm-treeview-show-context", 7);
+    this.treeviewUnchecked = createEvent(this, "bcm-treeview-unchecked", 7);
+    this.treeviewChecked = createEvent(this, "bcm-treeview-checked", 7);
+    this.objectMapping = {
+      'text': 'text',
+      'icon': 'icon',
+      'id': 'id',
+      'items': 'items',
+      'open': 'open',
+      'selected': 'selected',
+      'checked': 'checked',
+      'tooltipText': 'tooltipText',
+      'disabled': "disabled",
+      'favorite': "favorite",
+    };
+    this.checkedObjectList = [];
+    this.allChilds = [];
+    this.onFocus = false;
+    this.minHeight = 200;
+    this.minWidth = 200;
+    this.allOpenCache = false;
+    this.allOpenOnSearch = false;
+    this.parentLength = [{}];
+    this.isSetData = false;
+    this.runClearAndSelect = false;
+    this.checkboxes = false;
+    this.showIcon = false;
+    this.size = 'medium';
+    this.checkedList = [];
+    this.updateCheckedList = [];
+    this.hidden = false;
+    this.search = false;
+    this.searchOnlyChild = false;
+    this.keydown = false;
+    this.allOpen = false;
+    this.fullWidth = false;
+    this.infoFooter = false;
+    this.searchFields = ['text', 'secondaryText', 'tooltipText'];
+    this.searchSub = "items";
+    this.returnField = "id";
+    this._items = [];
+    this.searchPlaceholder = "Search";
+    this.maxHeight = null;
+    this.highlight = false;
+    this.loading = true;
+    this.favIcon = false;
+    this.favIconOnlyChilds = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    /**
+     * Component States
+     */
+    this.empty = false;
+    this.showSearch = true;
+    this.items = [];
+    this.total = 0;
+    this.checkCount = 0;
+    this.keyMapForFocus = { 18: false, 87: false };
+    this.checklist = [];
+    this.favoriteList = [];
+    this.checklistSorted = [];
+    this.searchResults = [];
+  }
+  async setData(_data = []) {
+    this.clearAndSelectSearch(false);
+    this.isLoading(true);
+    this.isSetData = true;
+    this.checkedObjectList = [];
+    this.selectedId = null;
+    setTimeout(() => {
+      this._items = _data;
+      this.searchData = JSON.parse(_data);
+      this.calculateMinSizes();
+      this.handleChildProcess();
+    }, 100);
+    return Promise.resolve(true);
+  }
+  async getChecklist() {
+    return this.checkedObjectList;
+  }
+  async getFavorites() {
+    this.getChildItem(this.el).forEach(element => {
+      element[this.objectMapping['favorite']] == true && (this.favIconOnlyChilds && element[this.objectMapping['items']].length == 0 && (this.favoriteList.indexOf(element.itemObject) < 0 && (this.favoriteList.push(element.itemObject))),
+        !this.favIconOnlyChilds && (this.favoriteList.indexOf(element.itemObject) < 0 && (this.favoriteList.push(element.itemObject))));
+    });
+    return this.favoriteList;
+  }
+  async selected(id) {
+    this.selectedId = id;
+  }
+  async clearAndSelectSearch(select = true) {
+    this.runClearAndSelect = true;
+    if (this.search === true) {
+      setTimeout(() => {
+        var searchInput = null;
+        searchInput = this.el.shadowRoot.querySelector("bcm-search");
+        if (searchInput) {
+          searchInput.setClear();
+          if (select == true) {
+            searchInput.select();
+          }
+        }
+      }, 100);
+    }
+  }
+  async addChecked(items = []) {
+    this.checkedList = items;
+  }
+  async updateChecked(items = []) {
+    this.updateCheckedList = items;
+  }
+  async config(_config) {
+    if (_config['maxHeight']) {
+      typeof _config['maxHeight'] == 'string'
+        ? this.maxHeight = _config['maxHeight']
+        : this.maxHeight = "100%";
+    }
+    if (_config['searchFields']) {
+      if (Array.isArray(_config['searchFields'])) {
+        this.searchFields = _config['searchFields'];
+      }
+    }
+    if (_config['searchable']) {
+      typeof _config['searchable'] == 'boolean'
+        ? this.search = _config['searchable']
+        : this.search = false;
+    }
+    if (_config['searchOnlyChild']) {
+      typeof _config['searchOnlyChild'] == 'boolean'
+        ? this.searchOnlyChild = _config['searchOnlyChild']
+        : this.searchOnlyChild = false;
+    }
+    if (_config['searchPlaceholder']) {
+      typeof _config['searchPlaceholder'] == 'string'
+        ? this.searchPlaceholder = _config['searchPlaceholder']
+        : this.searchPlaceholder = null;
+    }
+    if (_config['fullWidth']) {
+      typeof _config['fullWidth'] == 'boolean'
+        ? this.fullWidth = _config['fullWidth']
+        : this.fullWidth = false;
+    }
+    if (_config['infoFooter']) {
+      typeof _config['infoFooter'] == 'boolean'
+        ? this.infoFooter = _config['infoFooter']
+        : this.infoFooter = false;
+    }
+    if (_config['highlight']) {
+      typeof _config['highlight'] == 'boolean'
+        ? this.highlight = _config['highlight']
+        : this.highlight = false;
+    }
+    if (_config['checkable']) {
+      typeof _config['checkable'] == 'boolean'
+        ? this.checkboxes = _config['checkable']
+        : this.checkboxes = false;
+    }
+    if (_config['showIcon']) {
+      typeof _config['showIcon'] == 'boolean'
+        ? this.showIcon = _config['showIcon']
+        : this.showIcon = false;
+    }
+    if (_config['favIcon']) {
+      typeof _config['favIcon'] == 'boolean'
+        ? this.favIcon = _config['favIcon']
+        : this.favIcon = false;
+    }
+    if (_config['favIconOnlyChilds']) {
+      typeof _config['favIconOnlyChilds'] == 'boolean'
+        ? this.favIconOnlyChilds = _config['favIconOnlyChilds']
+        : this.favIconOnlyChilds = false;
+    }
+    if (_config['allOpen']) {
+      typeof _config['allOpen'] == 'boolean'
+        ? this.allOpen = _config['allOpen']
+        : this.allOpen = false;
+    }
+    this.allOpenCache = this.allOpen;
+    if (_config['size']) {
+      (["small", "medium", "large"].indexOf(_config['size']) >= 0)
+        ? this.size = _config['size']
+        : this.size = 'medium';
+    }
+    if (_config['mapping']) {
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['icon']) {
+        this.objectMapping['icon'] = _config['mapping']['icon'];
+      }
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = _config['mapping']['id'];
+        this.returnField = this.objectMapping['id'];
+      }
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
+        this.searchSub = this.objectMapping['items'];
+      }
+      if (_config['mapping']['open']) {
+        this.objectMapping['open'] = _config['mapping']['open'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+      if (_config['mapping']['checked']) {
+        this.objectMapping['checked'] = _config['mapping']['checked'];
+      }
+      if (_config['mapping']['tooltipText']) {
+        this.objectMapping['tooltipText'] = _config['mapping']['tooltipText'];
+      }
+      if (_config['mapping']['disabled']) {
+        this.objectMapping['disabled'] = _config['mapping']['disabled'];
+      }
+      if (_config['mapping']['favorite']) {
+        this.objectMapping['favorite'] = _config['mapping']['favorite'];
+      }
+    }
+    // sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
+    return Promise.resolve(true);
+  }
+  calculateMinSizes() {
+    if (this.minHeight < this.el.clientHeight) {
+      this.minHeight = this.el.clientHeight;
+    }
+  }
+  connectedCallback() { }
+  componentWillLoad() { }
+  componentWillRender() {
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
+  }
+  componentDidRender() {
+    // this.isEmpty(true)
+    // if(this.total > 0) {
+    //     this.isEmpty(false)
+    // }
+  }
+  // componentDidLoad(){
+  //     this.handleChildProcess()
+  //     setTimeout(() => {
+  //         if(this.isSetData) {
+  //             this.isLoading(true)
+  //             this.isEmpty(false)
+  //         }else{
+  //             this.isLoading(false)
+  //             this.isEmpty(true)
+  //         }
+  //     }, 1000);
+  //     // this.isEmpty(true)
+  // }
+  componentWillUpdate() { }
+  // componentWillRender(){}
+  // componentDidRender(){}
+  componentDidUpdate() {
+    if (this.checkboxes === true) {
+      this.checkedObjectList = [];
+      if (this.checklistSorted.length > 0) {
+        this.getChildItem(this.el).forEach(element => {
+          element.checked == true && (this.checkedObjectList.indexOf(element.itemObject) < 0 && (this.checkedObjectList.push(element.itemObject)));
+        });
+        this.treeviewChecklist.emit(this.checkedObjectList);
+      }
+      else {
+        this.treeviewChecklist.emit([]);
+      }
+    }
+  }
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.items = JSON.parse(newValue)
+        : this.items = newValue;
+    }
+    this.handleChildProcess();
+  }
+  handleChildProcess() {
+    setTimeout(() => {
+      this.allChilds = this.getAllChilds();
+      this.total = this.allChilds.filter((v, i, a) => a.indexOf(v) === i).length;
+      if (this.total > 0) {
+        // setTimeout(() => {
+        this.isLoading(false);
+        // }, 100);
+        this.isEmpty(false);
+      }
+      else {
+        // setTimeout(() => {
+        this.isLoading(false);
+        this.isEmpty(true);
+        // }, 100);
+      }
+    }, 100);
+  }
+  /**
+   * @desc
+   * @param group
+   */
+  recursiveItemRenderer(group, parentGroup) {
+    // if(String(this.selectedId) === String(group[this.objectMapping['id']])){
+    //     this.treeviewItemSelected.emit(group)
+    // }
+    if (String(this.selectedId) === String(group[this.objectMapping['id']]) || String(group[this.objectMapping['selected']]) === "true") {
+      this.treeviewItemSelected.emit(group);
+    }
+    return (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 = classnames(this.hidden ? 'hidden' : null, {
+      'empty': this.empty,
+      'full-width': fullWidth
+    });
+    const customStyles = {
+      // 'min-height': this.minHeight + 'px',
+      'min-width': this.minWidth + 'px',
+      'max-height': this.maxHeight
+    };
+    return (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", { type: "animated", color: "prime-blue-6", class: "prefix", icon: "loading", size: "medium" }))
+    // )
+    , 
+    // 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.")))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_items": ["parseItems"]
+  }; }
+};
+Bcmtreeview.style = treeviewCss;
+
+export { Bcmtreeview as bcm_treeview };