bromcom-ui 2.7.37-rc.2 → 2.7.37-rc.4-0

package/dist/components/listbox.js

@@ -0,0 +1,1116 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { b as getChilds, d as delay } from './utils.js';
+import { c as classnames } from './index2.js';
+import { I as IsLoad } from './is-load-decorator.js';
+import { d as defineCustomElement$h } from './avatar.js';
+import { d as defineCustomElement$g } from './badge.js';
+import { d as defineCustomElement$f } from './checkbox.js';
+import { d as defineCustomElement$e } from './checkbox-lite.js';
+import { d as defineCustomElement$d } from './divider.js';
+import { d as defineCustomElement$c } from './empty.js';
+import { d as defineCustomElement$b } from './icon.js';
+import { d as defineCustomElement$a } from './label.js';
+import { d as defineCustomElement$9 } from './listbox-group.js';
+import { d as defineCustomElement$8 } from './listbox-item.js';
+import { d as defineCustomElement$7 } from './old-input.js';
+import { d as defineCustomElement$6 } from './old-search.js';
+import { d as defineCustomElement$5 } from './text.js';
+import { d as defineCustomElement$4 } from './tooltip.js';
+import { d as defineCustomElement$3 } from './treeview.js';
+import { d as defineCustomElement$2 } from './treeview-item.js';
+import { d as defineCustomElement$1 } from './typography.js';
+
+const listboxCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block;width:fit-content;height:fit-content;background-color:#ffffff}:host(.hidden){display:none}:host(.flex){width:100%;height:100%}:host(.flex) .bcm-listbox{max-height:100%;max-width:100%;height:100%;min-width:100%}:host(.full-width){width:100%}:host(.full-width) .bcm-listbox{max-width:100%;min-width:100%}.bcm-listbox{flex:1;background-color:var(--bcm-color-grey-1);width:fit-content;display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;min-height:auto;max-height:300px;box-sizing:border-box;border:1px solid var(--bcm-color-grey-5)}.bcm-listbox-list{flex:1;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;border-bottom:none}.bcm-listbox-list.loading{min-height:150px;position:relative;margin:0 8px 8px 8px}.bcm-listbox-list .loading{display:none;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;background-color:rgba(255, 255, 255, 0.03)}.bcm-listbox-list .loading.show{display:flex}.bcm-listbox-list .list-container.hidden{display:none}.bcm-listbox .search{padding:8px;padding-bottom:0}.bcm-listbox .search.hidden{display:none !important}.bcm-listbox .empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.bcm-listbox .empty.show{display:flex}.bcm-listbox-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.listbox-item{display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1)}.listbox-item.hidden{display:none}.listbox-item .divider{padding:0 8px}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;width:100%}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;width:100%;padding:4px 8px 4px 4px}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.caption-area{margin-bottom:8px;min-height:20px}.input-caption{display:block}.error.label{color:var(--bcm-color-red-6) !important}.error.bcm-listbox{border:1px solid var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.input-large{height:38px}.input-medium{height:30px}.input-small{height:20px}";
+
+var __decorate = (undefined && undefined.__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;
+};
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmListbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.listboxItemSelected = createEvent(this, "bcm-listbox-item-selected", 7);
+    this.listboxClearSelected = createEvent(this, "bcm-listbox-clear-selecteds", 7);
+    this.listboxSendCheck = createEvent(this, "bcm-listbox-send-check", 7);
+    this.listboxSendUncheck = createEvent(this, "bcm-listbox-send-uncheck", 7);
+    this.listboxChecklist = createEvent(this, "bcm-listbox-checklist", 7);
+    this.listboxChange = createEvent(this, "bcm-listbox-change", 7);
+    this.listboxChecked = createEvent(this, "bcm-listbox-checked", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'icon': "icon",
+      'avatar': "avatar",
+      'avatarName': "avatarName",
+      'avatarImage': "avatarImage",
+      'secondaryText': "secondaryText",
+      'tooltipText': "tooltipText",
+      'selected': "selected",
+      'checked': "checked",
+      'disabled': "disabled",
+    };
+    this.checkedObjectList = [];
+    this.cacheCheckedObjectList = [];
+    this.allChilds = [];
+    this.onlyChilds = [];
+    this.firstRun = true;
+    this.firstCheck = false;
+    this.onFocus = false;
+    this.isSetData = false;
+    this.isGroupArray = [];
+    this.intersection = [];
+    /**
+     * Component Properties
+     */
+    this.innerComponent = false;
+    this.checkboxes = false;
+    this.required = false;
+    this.value = null;
+    this.search = false;
+    this.infoFooter = false;
+    this.showIcon = false;
+    this.size = 'medium';
+    this.checkedList = [];
+    this.updateCheckedList = [];
+    this._items = [];
+    this.fullWidth = false;
+    this.searchFields = ['text', 'secondaryText', 'tooltipText'];
+    this.hidden = false;
+    this.returnField = "id";
+    this.searchSub = "items";
+    this.searchText = "";
+    this.treeview = false;
+    this.searchPlaceholder = "Search";
+    this.numberOfColumns = 1;
+    this.height = null;
+    this.maxHeight = null;
+    this.template = null;
+    this.highlight = false;
+    this.loading = true;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    /**
+     * Component States
+     */
+    this.searchResults = [];
+    this.totalSearch = 0;
+    this.showSearch = true;
+    this.empty = false;
+    this.runClearAndSelect = false;
+    this.total = 0;
+    this.items = [];
+    this.checklist = [];
+    this.sortedChecklist = [];
+    this.indeterminateState = 'uncheck';
+    this.checked = false;
+    this.checklistSorted = [];
+  }
+  async setClear() {
+    this.listboxChecklist.emit([]);
+    this.value = null;
+    this.selectedId = null;
+    this.listboxClearSelected.emit([]);
+    // this.checkedObjectList.forEach(item => {
+    //     this.listboxUncheckedMethod(String(item[this.objectMapping['id']]), this._internal_id)
+    // });
+    let isItem = getChilds(this.el, 'bcm-listbox-item');
+    let elementStatuses = [];
+    if (isItem) {
+      isItem.map(element => {
+        elementStatuses.push(element.checked = false);
+      });
+    }
+    // console.log("uncheck")
+    await Promise.all(elementStatuses);
+    // if ( allStatuses ){
+    //     console.log("bitti")
+    // }
+    this.checklist = [];
+    this.sortedChecklist = [];
+    this.checklistSorted = [];
+    this.checkedObjectList = [];
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  async getValue() {
+    if (this.checkboxes) {
+      return this.checkedObjectList;
+    }
+    else {
+      return this.value;
+    }
+  }
+  async getChecklist() {
+    return this.checkedObjectList;
+  }
+  async showSearchMethod(val = true) {
+    if (this.treeview == false && this.search == true) {
+      this.showSearch = val;
+      var search = null;
+      if (search = this.el.shadowRoot.getElementById("search")) {
+        if (val) {
+          search.classList.remove('hidden');
+        }
+        else {
+          search.classList.add('hidden');
+        }
+      }
+    }
+  }
+  async selected(id) {
+    this.selectedId = String(id);
+    if (this.treeview === true) {
+      setTimeout(async () => {
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.selected(this.selectedId);
+        }
+      }, 100);
+    }
+  }
+  async clearAndSelectSearch(select = true) {
+    this.runClearAndSelect = true;
+    if (this.search == true) {
+      setTimeout(() => {
+        var searchInput = null;
+        searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
+        if (searchInput) {
+          searchInput.setClear();
+          if (select == true) {
+            searchInput.select();
+          }
+        }
+      }, 100);
+    }
+  }
+  async addChecked(items) {
+    await this.setClear();
+    if (items) {
+      if (typeof items != 'string') {
+        await delay(50);
+        if (sessionStorage.getItem(this._internal_id + "-config")) {
+          this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+        }
+        this.checkedList = items;
+        this.checkedList.forEach((item) => {
+          this.handleListboxChecked({ detail: String(item) }, this._internal_id);
+        });
+        this.updateCheckedList = [];
+        if (this.treeview === true) {
+          setTimeout(async () => {
+            await customElements.whenDefined("bcm-treeview");
+            const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+            if (bcmTreeview) {
+              await bcmTreeview.addChecked(items);
+            }
+          }, 50);
+        }
+      }
+    }
+  }
+  async updateChecked(items) {
+    this.setClear();
+    this.checkedList = [];
+    this.updateCheckedList = items;
+    this.updateCheckedList.forEach((item) => {
+      this.handleListboxChecked({ detail: item });
+    });
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        await customElements.whenDefined("bcm-treeview");
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.updateChecked(items);
+        }
+      }
+    }, 100);
+  }
+  async config(_config) {
+    if (_config['treeview'] && _config['treeview'] === true) {
+      typeof _config['treeview'] == 'boolean'
+        ? this.treeview = _config['treeview']
+        : this.treeview = false;
+    }
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        await customElements.whenDefined("bcm-treeview");
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.config(_config);
+          if (this.selectedId) {
+            await bcmTreeview.selected(this.selectedId);
+          }
+        }
+      }
+    }, 300);
+    if (_config['searchFields']) {
+      if (Array.isArray(_config['searchFields'])) {
+        this.searchFields = _config['searchFields'];
+      }
+    }
+    if (_config['searchPlaceholder']) {
+      typeof _config['searchPlaceholder'] == 'string'
+        ? this.searchPlaceholder = _config['searchPlaceholder']
+        : this.searchPlaceholder = null;
+    }
+    if (_config['maxHeight']) {
+      typeof _config['maxHeight'] == 'string'
+        ? this.maxHeight = _config['maxHeight']
+        : this.maxHeight = "100%";
+    }
+    if (_config['height']) {
+      typeof _config['height'] == 'string'
+        ? this.height = _config['height']
+        : this.height = "100%";
+    }
+    if (_config['template']) {
+      typeof _config['template'] == 'string'
+        ? this.template = _config['template']
+        : this.template = null;
+    }
+    if (_config['searchable']) {
+      typeof _config['searchable'] == 'boolean'
+        ? this.search = _config['searchable']
+        : this.search = false;
+    }
+    if (_config['highlight']) {
+      typeof _config['highlight'] == 'boolean'
+        ? this.highlight = _config['highlight']
+        : this.highlight = false;
+    }
+    if (_config['fullWidth']) {
+      typeof _config['fullWidth'] == 'boolean'
+        ? this.fullWidth = _config['fullWidth']
+        : this.fullWidth = false;
+    }
+    if (_config['numberOfColumns']) {
+      typeof _config['numberOfColumns'] == 'number'
+        ? this.numberOfColumns = _config['numberOfColumns']
+        : this.numberOfColumns = 1;
+    }
+    if (_config['infoFooter']) {
+      typeof _config['infoFooter'] == 'boolean'
+        ? this.infoFooter = _config['infoFooter']
+        : this.infoFooter = false;
+    }
+    if (_config['checkable']) {
+      typeof _config['checkable'] == 'boolean'
+        ? this.checkboxes = _config['checkable']
+        : this.checkboxes = false;
+    }
+    if (_config['showIcon']) {
+      typeof _config['showIcon'] == 'boolean'
+        ? this.showIcon = _config['showIcon']
+        : this.showIcon = false;
+    }
+    if (_config['size']) {
+      (["small", "medium", "large"].indexOf(_config['size']) >= 0)
+        ? this.size = _config['size']
+        : this.size = 'medium';
+    }
+    this.searchSub = this.objectMapping['items'];
+    if (_config['mapping']) {
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = String(_config['mapping']['id']);
+        this.returnField = this.objectMapping['id'];
+      }
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['icon']) {
+        this.objectMapping['icon'] = _config['mapping']['icon'];
+      }
+      if (_config['mapping']['avatar']) {
+        this.objectMapping['avatar'] = _config['mapping']['avatar'];
+      }
+      if (_config['mapping']['avatarName']) {
+        this.objectMapping['avatarName'] = _config['mapping']['avatarName'];
+      }
+      if (_config['mapping']['avatarImage']) {
+        this.objectMapping['avatarImage'] = _config['mapping']['avatarImage'];
+      }
+      if (_config['mapping']['secondaryText']) {
+        this.objectMapping['secondaryText'] = _config['mapping']['secondaryText'];
+      }
+      if (_config['mapping']['tooltipText']) {
+        this.objectMapping['tooltipText'] = _config['mapping']['tooltipText'];
+      }
+      if (_config['mapping']['disabled']) {
+        this.objectMapping['disabled'] = _config['mapping']['disabled'];
+      }
+      if (_config['mapping']['checked']) {
+        this.objectMapping['checked'] = _config['mapping']['checked'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
+        this.searchSub = this.objectMapping['items'];
+      }
+      // if ( this.treeview ) {
+      // }else{
+      //     this.searchSub = this.objectMapping['items']
+      // }
+    }
+    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
+    // forceUpdate(this.el)
+    return Promise.resolve(true);
+  }
+  async setData(_data = []) {
+    this.clearAndSelectSearch(false);
+    this.isLoading(true);
+    this._items = _data;
+    this.searchData = JSON.parse(_data);
+    this.isSetData = true;
+    // this.isEmpty(false)
+    setTimeout(async () => {
+      if (this.treeview === true) {
+        const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+        if (bcmTreeview) {
+          await bcmTreeview.setData(_data);
+          if (this.searchData.length > 0) {
+            this.isEmpty(false);
+            this.isLoading(false);
+          }
+        }
+      }
+    }, 100);
+  }
+  // componentDidLoad(){
+  //     console.log("kilitle")
+  //     setTimeout(() => {
+  //         if(this.isSetData) {
+  //             this.isLoading(true)
+  //             this.isEmpty(false)
+  //         }else{
+  //             this.isLoading(false)
+  //             this.isEmpty(true)
+  //         }
+  //     }, 100);
+  // }
+  componentWillRender() {
+    if (this.isSetData) {
+      this.onlyChilds = this.getAllGroup(this.el, true);
+      this.allChilds = this.getAllGroup();
+      if (this.onlyChilds.length != this.total) {
+        this.total = this.onlyChilds.length;
+      }
+      if (this.checkboxes === true) {
+        this.setIndeterminateState();
+        if (this.checklistSorted.length > 0) {
+          this.checkedObjectList = [];
+          this.getAllGroup(this.el).forEach(element => {
+            element.checked == true && (this.firstCheck = true,
+              this.checkedObjectList.indexOf(element.itemObject) == -1 && (this.checkedObjectList.push(element.itemObject)));
+          });
+          if (JSON.stringify(this.cacheCheckedObjectList) !== JSON.stringify(this.checkedObjectList)) {
+            this.listboxChecklist.emit(this.checkedObjectList);
+            this.cacheCheckedObjectList = this.checkedObjectList;
+            this.value = this.checkedObjectList;
+          }
+        }
+        else {
+          if (this.firstCheck) {
+            this.listboxChecklist.emit([]);
+            this.cacheCheckedObjectList = [];
+            if (this.value != null) {
+              this.value = null;
+            }
+          }
+        }
+      }
+    }
+  }
+  componentDidRender() {
+    // this.isEmpty(true)
+    // this.isLoading(true)
+    // if(this.total > 0) {
+    //     this.isLoading(false)
+    //     this.isEmpty(false)
+    // }
+    // this.isEmpty(true)
+    if (this.isSetData) {
+      if (this.total > 0) {
+        this.isEmpty(false);
+        this.isLoading(false);
+      }
+      else {
+        this.isEmpty(true);
+      }
+    }
+  }
+  /**
+   * @desc
+   * @returns {void}
+   */
+  setIndeterminateState() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    this.getAllGroup(this.el, true).map((item) => {
+      item.checked && (allUnchecked = false);
+      !item.checked && (allChecked = false);
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    this.indeterminateState = state;
+    this.checked = state == 'determinate' ? true : false;
+    // this.listboxChecklist.emit(this.sortedChecklist)
+  }
+  getAllGroup(element = this.el, onlyItem = false) {
+    let returnAllItems = [];
+    let isGroup = getChilds(element, 'bcm-listbox-group');
+    let isItem = getChilds(element, 'bcm-listbox-item');
+    if (isGroup.length > 0) {
+      isGroup.forEach(group => {
+        if (this.isGroupArray.indexOf(Number(group.id)) === -1) {
+          this.isGroupArray.push(Number(group.id));
+        }
+        if (onlyItem == false) {
+          returnAllItems = [...returnAllItems,
+            group
+          ];
+        }
+        getChilds(group, 'bcm-listbox-item').forEach(items => {
+          if (!(returnAllItems.indexOf(items) >= 0)) {
+            returnAllItems = [...returnAllItems,
+              items
+            ];
+          }
+        });
+      });
+    }
+    if (isItem.length > 0) {
+      isItem.forEach(items => {
+        if (!(returnAllItems.indexOf(items) >= 0)) {
+          returnAllItems = [...returnAllItems,
+            items
+          ];
+        }
+      });
+    }
+    return returnAllItems;
+  }
+  getAllChilds(element = this.el, type = null) {
+    let returnAllItems = [];
+    let oldItems = [];
+    if (!this._items || type === "slot") {
+      getChilds(element, 'bcm-listbox-item').forEach(items => {
+        returnAllItems = [...returnAllItems,
+          items
+        ];
+      });
+    }
+    else if (this._items && this._items.length > 0) {
+      oldItems = JSON.parse(this._items);
+      oldItems.map((item) => (((item.type === 'group') ? (item.items.map((item) => ((returnAllItems = [...returnAllItems, item])))) :
+        (returnAllItems = [...returnAllItems, item]))));
+    }
+    return returnAllItems;
+  }
+  /**
+   * @desc
+   */
+  handleCheckList(process = 'add', checkId) {
+    checkId = String(checkId);
+    if (this.checkboxes) {
+      if (this.items && this.items.find(e => e[this.objectMapping['id']] == checkId)) {
+        // checkId = Number(checkId)
+        switch (process) {
+          case 'add':
+            if (this.checklist.length > 0) {
+              if (!this.checklist.includes(checkId)) {
+                this.checklist = [...this.checklist, checkId];
+              }
+            }
+            else {
+              this.checklist = [checkId];
+            }
+            break;
+          case 'remove':
+            this.checklist = this.checklist.filter(item => item !== checkId);
+            break;
+        }
+        let sorted = this.checklist.sort(function (a, b) { return a - b; });
+        this.sortedChecklist = this.checklist;
+        this.checklistSorted = sorted;
+        // forceUpdate(this.el)
+      }
+    }
+  }
+  handleIndeterminateClick() {
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    let visibleItem = [];
+    this.getAllGroup(this.el, true).map((item) => {
+      if (item.hidden === false) {
+        visibleItem.push(item);
+        item.checked && (allUnchecked = false);
+        !item.checked && (allChecked = false);
+      }
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    visibleItem.map((item) => {
+      if (state !== 'uncheck') {
+        item.checked = false;
+        this.handleCheckList('remove', String(item.id));
+      }
+      else {
+        item.checked = true;
+        this.handleCheckList('add', String(item.id));
+      }
+    });
+    this.setIndeterminateState();
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  /**
+   * @desc
+   * @param item
+   */
+  itemRenderer(item) {
+    if (item[this.objectMapping['id']] && String(this.selectedId) == String(item[this.objectMapping['id']])) {
+      this.listboxItemSelected.emit(item);
+    }
+    // if(item[this.objectMapping['selected']] && item[this.objectMapping['selected']] === true){
+    //     this.listboxItemSelected.emit(item)
+    // }
+    // var checkedListCache = this.checkedList;
+    // if(checkedListCache && checkedListCache.find(e => e == item[this.objectMapping['id']])){
+    //     this.handleListboxChecked({detail: item[this.objectMapping['id']]})
+    // }
+    // const index = checkedListCache.indexOf(item[this.objectMapping['id']]);
+    // if (index > -1) {
+    //     checkedListCache.splice(index, 1);
+    // }
+    // if(this.updateCheckedList.length > 0 ){
+    //     if( this.updateCheckedList.find(e => e == item[this.objectMapping['id']]) ){
+    //         const index = this.updateCheckedList.indexOf(item[this.objectMapping['id']]);
+    //         if (index > -1) {
+    //             this.updateCheckedList.splice(index, 1);
+    //         }
+    //         this.listboxChecked.emit(item[this.objectMapping['id']])
+    //     }
+    // }
+    return (h("bcm-listbox-item", Object.assign({ _internal_id: this._internal_id, id: String(item[this.objectMapping['id']]), text: item[this.objectMapping['text']] }, (item[this.objectMapping['icon']] && { icon: item[this.objectMapping['icon']] }), (item[this.objectMapping['avatar']] && { avatar: item[this.objectMapping['avatar']] }), (item[this.objectMapping['avatarName']] && { avatarName: item[this.objectMapping['avatarName']] }), (item[this.objectMapping['avatarImage']] && { avatarImage: item[this.objectMapping['avatarImage']] }), (item[this.objectMapping['secondaryText']] && { secondaryText: item[this.objectMapping['secondaryText']] }), (item[this.objectMapping['tooltipText']] && { tooltipText: item[this.objectMapping['tooltipText']] }), (Boolean(item[this.objectMapping['checked']]) === Boolean(true) && { checked: Boolean(item[this.objectMapping['checked']]) }), (item[this.objectMapping['disabled']] === true && { disabled: true }), (Boolean(item[this.objectMapping['selected']]) === Boolean(true) && this.checkboxes == false && { selected: Boolean(item[this.objectMapping['selected']]) }), (this.template && { template: this.template }), (this.checkboxes && { checkboxes: true }), (this.size && { size: this.size }), { itemObject: item, objectMapping: this.objectMapping })));
+  }
+  /**
+   * @desc
+   * @param group
+   */
+  recursiveGroupRenderer(group) {
+    return (h("bcm-listbox-group", { id: group[this.objectMapping['id']], text: group[this.objectMapping['text']] }, group.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item))))));
+  }
+  async searchResultMethod(items = []) {
+    if (this.treeview == true) {
+      const bcmtreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+      // await bcmListbox.config(this._config)   
+      if (bcmtreeview) {
+        bcmtreeview.searchResultMethod({ detail: (items.length > 0 ? items : true) });
+      }
+    }
+    else {
+      this.listenSearchResult({ detail: (items.length > 0 ? items : true), isEvent: true });
+    }
+    // return true
+  }
+  handleListboxSelected(event) {
+    this.listboxItemSelected.emit(event.detail);
+  }
+  /**
+   * @desc
+   */
+  // @Listen('bcm-treeview-checklist')
+  // handleListboxCheckedList(e) {
+  //    this.listboxChecklist.emit(e.detail)
+  // }
+  isLoading(val) {
+    var listContainer = this.el.shadowRoot.getElementById("bcm-listbox-list");
+    var loading = this.el.shadowRoot.getElementById("loading");
+    var searchInput = this.el.shadowRoot.querySelector("bcm-old-search");
+    // var listcontainer = this.el.shadowRoot.getElementById("list-container")
+    if (val) {
+      if (searchInput) {
+        searchInput.disabled = true;
+      }
+      listContainer && listContainer.classList.add('loading');
+      loading && loading.classList.add('show');
+      // listcontainer && listcontainer.classList.add('hidden')
+    }
+    else {
+      if (searchInput) {
+        searchInput.disabled = false;
+      }
+      listContainer && listContainer.classList.remove('loading');
+      loading && loading.classList.remove('show');
+      // listcontainer && listcontainer.classList.remove('hidden')
+    }
+  }
+  isEmpty(val) {
+    var empty = this.el.shadowRoot.getElementById("empty");
+    var listcontainer = this.el.shadowRoot.getElementById("list-container");
+    var checkall = this.el.shadowRoot.getElementById("checkall");
+    if (val) {
+      empty && empty.classList.add('show');
+      listcontainer && listcontainer.classList.add('hidden');
+      checkall && checkall.classList.add('hidden');
+    }
+    else {
+      empty && empty.classList.remove('show');
+      listcontainer && listcontainer.classList.remove('hidden');
+      checkall && checkall.classList.remove('hidden');
+    }
+  }
+  isSearchCount(val = false) {
+    if (this.infoFooter) {
+      var inSearch = this.el.shadowRoot.getElementById("in-search");
+      var inTotal = this.el.shadowRoot.getElementById("in-total");
+      if (val !== false && val >= 0 && val != null && inSearch && inTotal) {
+        inSearch.innerHTML = val;
+        inTotal.style.display = "none";
+      }
+      else {
+        inTotal.style.display = "inline";
+        inSearch.innerHTML = "";
+      }
+    }
+  }
+  listenSearchResult(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (event.isEvent == undefined) {
+      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+        var searchValue = '';
+        if (this.treeview == false) {
+          // var checkall = null
+          // this.checkboxes && (checkall = this.el.shadowRoot.getElementById("checkall"))
+          var totalSearch = event.detail.length;
+          // this.empty = false
+          this.isEmpty(false);
+          this.intersection = [];
+          if (event.detail.length > 0) {
+            if (event.detail[0] == -1) {
+              totalSearch = 0;
+              this.empty = true;
+              this.isEmpty(true);
+            }
+            if (this.allChilds.length > 0) {
+              // this.checkboxes && ( checkall && checkall.classList.add('hidden') )
+              this.allChilds.map((item) => {
+                if (this.highlight) {
+                  event.target.addEventListener('bcm-on-search-value', async (e) => {
+                    var inputText = item.shadowRoot.getElementById("text");
+                    if (inputText) {
+                      searchValue = await e.detail;
+                      inputText = (inputText === null || inputText === void 0 ? void 0 : inputText.textContent) || (inputText === null || inputText === void 0 ? void 0 : inputText.innerText) || "";
+                      if (searchValue) {
+                        var cacheInputText = lowercase(inputText);
+                        var cacheSearchValue = lowercase(searchValue);
+                        var index = cacheInputText.indexOf(cacheSearchValue);
+                        if (index >= 0) {
+                          inputText = inputText.substring(0, index) + "<span class='highlight'>" + inputText.substring(index, index + searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
+                        }
+                      }
+                      item.shadowRoot.getElementById("text").innerHTML = inputText;
+                    }
+                  });
+                }
+                item.hidden = true;
+                var _ids = String(item.id);
+                if (event.detail.indexOf(_ids) >= 0) {
+                  item.hidden = false;
+                }
+                else {
+                  item.hidden = true;
+                }
+              });
+            }
+            this.intersection = event.detail[0] == -1 ? [0] : event.detail.filter(x => this.isGroupArray.includes(x));
+          }
+          else {
+            if (this.allChilds.length > 0) {
+              this.allChilds.map((item) => {
+                item.hidden = false;
+              });
+              // this.checkboxes && ( checkall && checkall.classList.remove('hidden') )
+            }
+            // this.isEmpty(true)
+          }
+          if (this.search || this.checkboxes) {
+            setTimeout(() => {
+              if (totalSearch >= 0) {
+                var totals = totalSearch;
+                this.isSearchCount(totals);
+              }
+              else {
+                this.isSearchCount(0);
+              }
+              if (event.detail[0] === -1) {
+                this.isSearchCount(0);
+              }
+              if (event.detail === true) {
+                this.isSearchCount();
+              }
+            }, 100);
+          }
+          if (event.detail === true) {
+            this.isEmpty(false);
+          }
+          if (this.runClearAndSelect) {
+            this.runClearAndSelect = false;
+            this.isSearchCount(true);
+          }
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   * @param newValue
+   * @returns {void}
+   */
+  parseItems(newValue) {
+    if (newValue) {
+      typeof newValue == 'string'
+        ? this.items = JSON.parse(newValue)
+        : this.items = newValue;
+    }
+    this.handleChildProcess();
+  }
+  handleChange(newValue) {
+    this.change.emit(newValue);
+    this.listboxChange.emit(newValue);
+  }
+  handleChildProcess() {
+    setTimeout(() => {
+      this.onlyChilds = this.getAllGroup(this.el, true);
+      this.total = this.onlyChilds.length;
+      // console.log(this.total)
+      // this.allChilds = this.getAllChilds()
+      // this.total = this.allChilds.filter((v, i, a) => a.indexOf(v) === i).length
+      if (this.total > 0) {
+        // setTimeout(() => {
+        this.isLoading(false);
+        // }, 100);
+        this.isEmpty(false);
+      }
+      else {
+        // setTimeout(() => {
+        this.isLoading(false);
+        this.isEmpty(true);
+        // }, 100);
+      }
+    }, 100);
+  }
+  /**
+   * @desc
+   */
+  handleListboxClearSelected(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (this.checkboxes == false && path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+      this.value = event.detail;
+      this.selectedId = String(event.detail[this.objectMapping['id']]);
+      this.listboxClearSelected.emit(event.detail);
+    }
+  }
+  /**
+   * @desc
+   */
+  handleListboxChecked(event, _internal_id = this._internal_id) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if ((path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) || _internal_id == this._internal_id) {
+      this.listboxSendCheck.emit(event.detail);
+      this.handleCheckList('add', event.detail);
+      this.setIndeterminateState();
+    }
+  }
+  /**
+   * @desc
+   */
+  handleListboxUnchecked(event, _internal_id = this._internal_id) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if ((path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) || _internal_id == this._internal_id) {
+      this.listboxSendUncheck.emit(event.detail);
+      this.handleCheckList('remove', event.detail);
+      this.setIndeterminateState();
+    }
+  }
+  async listboxUncheckedMethod(item, internal_id = this._internal_id) {
+    if (this.treeview) {
+      await customElements.whenDefined("bcm-treeview");
+      const bcmTreeview = this.el.shadowRoot.querySelector("bcm-treeview");
+      if (bcmTreeview) {
+        await bcmTreeview.treeviewUncheckedMethod(item);
+      }
+    }
+    else {
+      this.handleListboxUnchecked({ "detail": item }, internal_id);
+    }
+  }
+  handleFocus(focusEvent = false) {
+    this.onFocus = focusEvent;
+  }
+  render() {
+    const { innerComponent, label, required, treeview, searchText, checkboxes, search, size, fullWidth, total, indeterminateState, checked, checklist, searchData, searchFields, _flex, returnField, searchSub, infoFooter, showSearch, noCaption, caption, captionError, captionType } = this;
+    const bcmListbox = classnames('bcm-listbox', {
+      'error': captionType == 'error' ? true : false,
+      'full-width': fullWidth,
+      'flex': _flex
+    });
+    const classes = classnames('listbox-item', {
+      'hidden': this.totalSearch > 0
+    });
+    const classesContainer = classnames('listbox-item-container');
+    const textContent = classnames('listbox-item-container-text-content', size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const listContainer = classnames('list-container', {
+      'column-1': this.numberOfColumns <= 1,
+      'column-2': this.numberOfColumns == 2,
+      'column-3': this.numberOfColumns >= 3,
+    });
+    const listContainerStyle = {
+      'grid-template-columns': this.numberOfColumns <= 1 ? '1fr' : 'repeat(' + this.numberOfColumns + ', ' + (210 - (this.numberOfColumns * 10)) + 'px)'
+    };
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, 
+    // this.totalSearch > 0 ? 'hidden' : null,
+    {
+      'flex': _flex,
+      'full-width': fullWidth
+    });
+    var customStyles = {
+      'max-height': this.maxHeight
+    };
+    const customStylesList = {
+      'min-height': this.height ? "inherit" : this.maxHeight ? "auto" : "200px"
+    };
+    if (this.height) {
+      customStyles = Object.assign(Object.assign({}, customStyles), { 'height': this.height });
+    }
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    return (h(Host, { class: hostClasses, style: customStyles, "bcm-internal-id": this._internal_id }, !innerComponent && label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), treeview === true && (h("bcm-treeview", { _internal_id: this._internal_id })), treeview == false && (h("div", { class: bcmListbox, style: customStyles }, search && (h("div", { class: "search", id: "search", style: { 'display': String(showSearch) == 'false' ? 'none' : 'block' } }, h("bcm-old-search", { _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, searchValue: searchText, "on-bcm-focus": () => this.handleFocus(true), "on-bcm-blur": () => this.handleFocus(false), data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true }), h("bcm-divider", null))), h("div", { id: "bcm-listbox-list", class: "bcm-listbox-list loading", style: customStylesList }, checkboxes && (h("div", { class: classes, id: "checkall" }, h("div", { class: classesContainer, onClick: () => this.handleIndeterminateClick() }, h("div", { class: "check-content" }, indeterminateState == 'indeterminate' && (h("span", { class: "indeterminate" })) || (h("bcm-checkbox-lite", { onClick: (e) => this.handleCheckboxClick(e), checked: checked, "no-caption": true }))), h("div", { class: textContent }, "Select All")), h("div", { class: "divider" }, h("bcm-divider", null)))), 
+    // this.empty == false && (
+    h("div", { id: "list-container", class: listContainer, style: listContainerStyle }, this.items.length !== 0 && this.items.map((item) => ((item.type === 'group' ? this.recursiveGroupRenderer(item) : this.itemRenderer(item)))))
+    // )
+    , 
+    // this.loading && (
+    h("div", { id: "loading", class: "loading show" }, h("bcm-icon", { class: "prefix", icon: "far fa-spinner-third fa-spin" }))
+    // )
+    , 
+    // ( this.empty || total == 0 ) && (
+    h("div", { id: "empty", class: "empty" }, h("bcm-empty", null, "No Data"))
+    // )
+    ), infoFooter == true && (h("div", { class: "bcm-listbox-footer" }, h("bcm-text", { scale: "size-1", color: "grey-8" }, checklist.length > 0 && (' ( ' + checklist.length + ' selected ) '), "Total ", h("span", { id: "in-search" }), " ", h("span", { id: "in-total" }, total), " items found."))))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " ")))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "_items": ["parseItems"],
+    "value": ["handleChange"]
+  }; }
+  static get style() { return listboxCss; }
+}, [1, "bcm-listbox", {
+    "innerComponent": [1028, "inner-component"],
+    "checkboxes": [1028],
+    "label": [1025],
+    "required": [1028],
+    "value": [1032],
+    "search": [1028],
+    "infoFooter": [1028, "info-footer"],
+    "showIcon": [1028, "show-icon"],
+    "size": [1025],
+    "selectedId": [1025, "selected-id"],
+    "checkedList": [1040],
+    "updateCheckedList": [1040],
+    "_items": [1025, "data"],
+    "fullWidth": [1028, "full-width"],
+    "searchFields": [1040],
+    "_flex": [1025, "flex"],
+    "hidden": [1028],
+    "returnField": [1025, "return-field"],
+    "searchSub": [1025, "search-sub"],
+    "searchText": [1025, "searchtext"],
+    "treeview": [1028],
+    "searchPlaceholder": [1025, "searchplaceholder"],
+    "numberOfColumns": [1026, "number-of-columns"],
+    "height": [1025],
+    "maxHeight": [1025, "max-height"],
+    "template": [1025],
+    "highlight": [1028],
+    "loading": [1028],
+    "noCaption": [1028, "no-caption"],
+    "caption": [1025],
+    "captionError": [1025, "caption-error"],
+    "captionType": [1025, "caption-type"],
+    "_internal_id": [1537],
+    "tooltip": [1025],
+    "total": [32],
+    "items": [32],
+    "checklist": [32],
+    "sortedChecklist": [32],
+    "indeterminateState": [32],
+    "checked": [32],
+    "jsonItem": [32],
+    "searchData": [32],
+    "captionCache": [32],
+    "captionTypeCache": [32],
+    "checklistSorted": [32],
+    "setClear": [64],
+    "resetCaption": [64],
+    "getValue": [64],
+    "getChecklist": [64],
+    "showSearchMethod": [64],
+    "selected": [64],
+    "clearAndSelectSearch": [64],
+    "addChecked": [64],
+    "updateChecked": [64],
+    "config": [64],
+    "setData": [64],
+    "searchResultMethod": [64],
+    "listboxUncheckedMethod": [64]
+  }, [[2, "bcm-treeview-item-selected", "handleListboxSelected"], [0, "bcm-on-search", "listenSearchResult"], [0, "bcm-listbox-item-selected", "handleListboxClearSelected"], [0, "bcm-listbox-checked", "handleListboxChecked"], [0, "bcm-listbox-unchecked", "handleListboxUnchecked"]]]);
+__decorate([
+  IsLoad()
+], BcmListbox.prototype, "el", void 0);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-listbox", "bcm-avatar", "bcm-badge", "bcm-checkbox", "bcm-checkbox-lite", "bcm-divider", "bcm-empty", "bcm-icon", "bcm-label", "bcm-listbox-group", "bcm-listbox-item", "bcm-old-input", "bcm-old-search", "bcm-text", "bcm-tooltip", "bcm-treeview", "bcm-treeview-item", "bcm-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-listbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmListbox);
+      }
+      break;
+    case "bcm-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "bcm-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "bcm-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "bcm-checkbox-lite":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "bcm-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "bcm-empty":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "bcm-listbox-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "bcm-listbox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "bcm-old-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "bcm-old-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bcm-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-treeview":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-treeview-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "bcm-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { BcmListbox as B, defineCustomElement as d };