bromcom-ui 2.3.62 → 2.3.63

package/dist/collection/components/molecules/list/list.js

@@ -0,0 +1,2455 @@
+import { Component, h, Element, Prop, Host, Method, Listen, Event, Watch, State } from '@stencil/core';
+import cs from 'classnames';
+import { delay, dropInComponent, getChilds, pluralize } from '../../../utils/utils';
+const lowercase = (str) => str.toLowerCase();
+export class BcmList {
+  constructor() {
+    this.configObject = [];
+    this.isRendered = false;
+    this.firstRender = true;
+    this.linkedElementWidth = "100%";
+    this.bodyStyleOverflow = '';
+    this.dataLength = 0;
+    this.checklist = [];
+    this.otherList = [];
+    this.configured = false;
+    this.checkStatus = false;
+    this.resetSelected = false;
+    this.indeterminateStatus = false;
+    this.total = 0;
+    this.totalSearch = 0;
+    this.empty = false;
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'selected': "selected",
+    };
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this._list_select_id = null;
+    this._list_id = null;
+    this.type = 'default';
+    this.processType = 'default';
+    this.hidden = false;
+    this.items = [];
+    this.isShow = true;
+    this.linkedComponent = null;
+    this.selectedId = null;
+    this.flex = false;
+    this.height = "256px";
+    this.minHeight = null;
+    this.maxHeight = null;
+    this.width = "100%";
+    this.minWidth = null;
+    this.maxWidth = null;
+    this.fullWidth = false;
+    this.size = 'medium';
+    this.infoFooter = false;
+    this.searchable = false;
+    this.highlight = true;
+    this.searchPlaceholder = "Search";
+    this.searchFields = ['text'];
+    this.returnField = "id";
+    this.searchData = null;
+    this.searchSub = "items";
+    this.searchText = "";
+    this.value = null;
+    this.multiSelect = false;
+    /******/
+    this.variableText = 'item';
+    this.clearable = false;
+    this.label = null;
+    this.placeholder = "Choose an option";
+    this.noCaption = false;
+    this.caption = null;
+    this.captionError = null;
+    this.captionType = 'default';
+    this.disabled = false;
+    this.name = null;
+    this.required = false;
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+    this.bodyStyleOverflow = document.querySelector("body").style.overflow;
+    const elementId = "bcm-list-select-" + this._id;
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+      this.linkedComponent = elementId;
+    }
+    if (this.type !== 'default' || this.linkedComponent !== null) {
+      this.isShow = false;
+      this.el.classList.add("linked");
+      this.el.classList.remove("show");
+      this.handleLinkedComponent();
+    }
+    const slot = this.el.shadowRoot.querySelectorAll('bcm-list-item');
+    if (slot) {
+      slot.forEach(el => {
+        if (lowercase(el.tagName) === 'bcm-list-item') {
+          el.setAttribute("_internal_id", this._internal_id);
+        }
+      });
+    }
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() {
+    const elementId = "bcm-list-select-" + this._id;
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+      this.linkedComponent = elementId;
+    }
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
+    setTimeout(() => {
+      const spinner = this.el.shadowRoot.querySelector('.spinner');
+      if (spinner) {
+        spinner.classList.remove("first-run");
+      }
+    }, 500);
+  }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @desc
+   */
+  async hide() {
+    this.isShow = false;
+    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
+  }
+  async setSearch(text) {
+    const searchInput = this.el.shadowRoot.querySelector("bcm-search");
+    if (searchInput) {
+      searchInput.setValue(text);
+      // searchInput.select()
+    }
+  }
+  async clearAndSelectSearch(select = true) {
+    if (this.searchable == true) {
+      // var searchInput = null
+      const searchInput = this.el.shadowRoot.querySelector("bcm-search");
+      // console.log(searchInput)
+      if (searchInput) {
+        searchInput.setClear();
+        if (select == true) {
+          searchInput.select();
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  async show() {
+    if (this.processType == 'deselect') {
+      this.firstRender = true;
+      if (this.items != this.otherList) {
+        this.isRendered = false;
+        this.setData(this.otherList);
+      }
+    }
+    this.isShow = true;
+    this.renderList();
+    this.clearAndSelectSearch(true);
+  }
+  /**
+   * @desc
+   */
+  async renderList() {
+    if (this.items && this.isRendered === false) {
+      this.isRendered = true;
+      this.processData(this.items);
+    }
+    if (this.linkedComponent !== null) {
+      this.handleLinkedComponent();
+    }
+  }
+  /**
+   * @desc
+   */
+  async toggle() {
+    this.isShow = !this.isShow;
+  }
+  /**
+   * @desc
+   */
+  async openStatus() {
+    return this.isShow;
+  }
+  /**
+   * @desc
+   */
+  handleOpen(value) {
+    if (this.processType === "deselect") {
+      const listSelect = document.getElementById(this._list_select_id);
+      if (listSelect) {
+        const otherTag = listSelect.shadowRoot.querySelector("#other-tag");
+        if (otherTag) {
+          if (value === true) {
+            otherTag.setAttribute("color", "prime-blue");
+          }
+          else {
+            otherTag.removeAttribute("color");
+          }
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
+  /**
+   * @desc
+   */
+  handleCaptionType() {
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      const element = document.getElementById("bcm-list-select-" + this._id);
+      if (element) {
+        element.caption = this.caption;
+        element.captionError = this.captionError;
+        element.captionType = this.captionType;
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  async config(_config) {
+    if (_config['type']) {
+      this.type = _config['type'];
+    }
+    if (_config['searchPlaceholder']) {
+      this.searchPlaceholder = _config['searchPlaceholder'];
+    }
+    if (_config['searchFields']) {
+      this.searchFields = _config['searchFields'];
+    }
+    if (_config['returnField']) {
+      this.returnField = _config['returnField'];
+    }
+    if (_config['highlight']) {
+      this.highlight = _config['highlight'];
+    }
+    if (_config['linkedComponent'] && typeof _config['linkedComponent'] == 'string') {
+      this.linkedComponent = _config['linkedComponent'];
+    }
+    if (_config['searchable'] && typeof _config['searchable'] == 'boolean') {
+      this.searchable = _config['searchable'];
+    }
+    if (_config['infoFooter'] && typeof _config['infoFooter'] == 'boolean') {
+      this.infoFooter = _config['infoFooter'];
+    }
+    if (_config['mapping']) {
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = _config['mapping']['id'];
+      }
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['selected']) {
+        this.objectMapping['selected'] = _config['mapping']['selected'];
+      }
+    }
+    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
+    this.configured = true;
+    this.configObject = _config;
+    return _config;
+  }
+  /**
+   * @desc
+   */
+  async setDataOther(_data = []) {
+    this.otherList = _data;
+  }
+  /**
+   * @desc
+   */
+  async setData(_data = []) {
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+    }
+    if (this.value !== null) {
+      this.setClear();
+    }
+    if (_data) {
+      typeof _data == 'string'
+        ? this.items = JSON.parse(_data)
+        : this.items = _data;
+      if (this.items) {
+        switch (this.processType) {
+          case 'default':
+            if (this.items.find(e => e[this.objectMapping['selected']])) {
+              var selectedIDs = [];
+              this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+                selectedIDs.push(element[this.objectMapping['id']]);
+              });
+              // if ( selectedIDs.length > 0 ) {
+              this.checked(selectedIDs);
+              // }
+            }
+            break;
+          case 'deselect':
+            var selectedIDs = [];
+            this.items.forEach(element => {
+              // element[ this.objectMapping['selected'] ] = true;
+              selectedIDs.push(element[this.objectMapping['id']]);
+            });
+            // if ( selectedIDs.length > 0 ) {
+            this.checked(selectedIDs);
+            // }
+            break;
+          default:
+            break;
+        }
+      }
+      this.calculatedTotals({ "total": this.items.length });
+      if (this.multiSelect === true) {
+        this.calculatedTotals({ "selected": selectedIDs ? selectedIDs.length : 0 });
+      }
+      this.isRendered = false;
+      if (this.linkedComponent === null) {
+        this.show();
+      }
+    }
+    if (this.type === 'autocomplete') {
+      this.renderList();
+    }
+    return _data;
+  }
+  /**
+   * @desc
+   */
+  async getValue() {
+    return this.value;
+  }
+  /**
+   * @desc
+   */
+  async getChecklist() {
+    return this.checklist;
+  }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    if (this.type === 'autocomplete' || this.type === 'select') {
+      const elementId = "bcm-list-select-" + this._id;
+      const element = document.getElementById(elementId);
+      if (element) {
+        element.resetCaption();
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  async toggleChecked(checkedItems = null) {
+    if (checkedItems !== null && checkedItems !== []) {
+      if (typeof checkedItems !== 'string') {
+        if (checkedItems.length == 1) {
+          checkedItems = String(checkedItems[0]);
+        }
+      }
+      var checkStatus = false;
+      if (typeof checkedItems == 'string') {
+        checkStatus = this.items.find(e => e[this.objectMapping['id']] == checkedItems)[this.objectMapping['selected']];
+      }
+      else {
+        let state = 'uncheck';
+        let allChecked = true;
+        let allUnchecked = true;
+        checkedItems.forEach((item) => {
+          if (String(this.items.find(e => e[this.objectMapping['id']] == item)[this.objectMapping['selected']]) === 'true') {
+            allUnchecked = false;
+          }
+          else {
+            allChecked = false;
+          }
+        });
+        !allChecked && !allUnchecked
+          ? state = 'determinate'
+          : allChecked
+            ? state = 'determinate'
+            : state = 'uncheck';
+        checkStatus = state == 'determinate' ? false : true;
+      }
+      // let state: string = 'uncheck'
+      // let allChecked: boolean = true
+      // let allUnchecked: boolean = true
+      // checkedItems.map((item) => {
+      //     item[ this.objectMapping['selected'] ] === true && (allUnchecked = false)
+      //     !item[ this.objectMapping['selected'] ] === true && (allChecked = false)
+      // });
+      // !allChecked && !allUnchecked 
+      // ? state = 'determinate'
+      // : allChecked
+      // ? state = 'determinate'
+      // : state = 'uncheck'
+      // const checkStatus = state == 'determinate' ? true : false
+      // const checkStatus = this.items.find( e => e[ this.objectMapping['id'] ] == checkedItems )[ this.objectMapping['selected'] ]
+      if (checkStatus === true) {
+        this.unChecked(checkedItems);
+      }
+      else {
+        // this.checked(checkedItems, false)
+        var selectedIDs = [];
+        // var checkItem = null
+        if (typeof checkedItems == 'string') {
+          // checkItem = this.sendSelectId( String(checkedItems), true)
+          selectedIDs.push(checkedItems);
+        }
+        else {
+          checkedItems.forEach((item) => {
+            selectedIDs.push(item);
+            // String(item[ this.objectMapping['selected'] ]) === 'true' && (allUnchecked = false),
+            // String(item[ this.objectMapping['selected'] ]) !== 'true' && (allChecked = false)
+          });
+          // this.sendSelectId( String(checkedItems), true)
+          // var selectedIDs = []
+          // if( this.items && this.items.find( e => e[ this.objectMapping['selected'] ] ) ){
+          //     this.items.filter( e => String( e[ this.objectMapping['selected'] ] ) === "true" ).forEach(element => {
+          //         selectedIDs.push( element )
+          //     });
+          // }
+          // this.value = selectedIDs
+          // this.listChecked.emit( this.value )
+          // this.handleIndeterminateStatus()
+          // this.sendSelectValue()
+        }
+        this.checked(selectedIDs, false);
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  async unChecked(checkedItems = null) {
+    if (checkedItems !== null && checkedItems !== []) {
+      if (typeof checkedItems !== 'string') {
+        if (checkedItems.length == 1) {
+          checkedItems = String(checkedItems[0]);
+        }
+      }
+      var selectedIDs = [];
+      this.selectedId = null;
+      if (typeof checkedItems == 'string') {
+        this.sendSelectId(String(checkedItems), false);
+      }
+      else {
+        checkedItems.forEach(item => {
+          this.sendSelectId(String(item), false);
+        });
+      }
+      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
+        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+          selectedIDs.push(element);
+        });
+      }
+      this.value = selectedIDs;
+      this.listChecked.emit(this.value);
+      this.handleIndeterminateStatus();
+      this.sendSelectValue();
+    }
+  }
+  /**
+   * @desc
+   */
+  async checked(checkedItems = null, reset = true) {
+    if (checkedItems !== null && checkedItems !== []) {
+      if (typeof checkedItems !== 'string') {
+        if (checkedItems.length == 1) {
+          checkedItems = String(checkedItems[0]);
+        }
+      }
+      var selectedIDs = [];
+      if (reset === true) {
+        if (this.items && this.items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
+          this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+            this.jsonDataProcess(element[this.objectMapping['id']], false);
+            this.sendSelectId(String(element[this.objectMapping['id']]), false);
+          });
+        }
+        this.setClear(false);
+      }
+      if (typeof checkedItems == 'string') {
+        this.sendSelectId(String(checkedItems));
+        if (this.multiSelect === false) {
+          this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
+        }
+      }
+      else {
+        if (this.multiSelect === true) {
+          checkedItems.forEach(item => {
+            this.sendSelectId(String(item));
+          });
+        }
+      }
+      // if ( this.multiSelect === false ){
+      //     this.selectedId = this.items.find( e => String(e[ this.objectMapping['id'] ]) === String(checkedItems) )[ this.objectMapping['id'] ]
+      // }
+      if (this.items && this.items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
+        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(item => {
+          selectedIDs.push(item);
+        });
+      }
+      this.value = selectedIDs;
+      this.listChecked.emit(this.value);
+      this.handleIndeterminateStatus();
+      this.sendSelectValue();
+    }
+  }
+  /**
+   * @desc
+   */
+  async setClear(eventEmit = true) {
+    if (this.items != undefined && this.items.length > 0 && this.items.find(e => e[this.objectMapping['selected']])) {
+      var selectedIDs = [];
+      this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+        selectedIDs.push(element[this.objectMapping['id']]);
+      });
+      this.unChecked(selectedIDs);
+    }
+    this.selectedId = null;
+    this.checklist = [];
+    if (eventEmit === true) {
+      this.listChecked.emit(this.checklist);
+      this.value = null;
+    }
+    this.handleIndeterminateStatus();
+    this.calculatedTotals({ "selected": this.checklist.length });
+  }
+  /**
+   * @desc
+   */
+  async processData(_data) {
+    this.handleLoading(true);
+    await delay(100);
+    const list = this.el.shadowRoot.querySelector('.list');
+    list.innerHTML = "";
+    // this.selectedId = null
+    // this.value = null
+    const elementStatuses = [];
+    var checkedItems = [];
+    if (_data.length > 0) {
+      this.dataLength = _data.length;
+      this.searchData = _data;
+      await delay(100);
+      _data.map(item => {
+        const element = document.createElement("bcm-list-item");
+        element.setAttribute("_internal_id", this._internal_id);
+        element.setAttribute("text", item[this.objectMapping['text']]);
+        element.setAttribute("id", String(item[this.objectMapping['id']]));
+        if (String(item[this.objectMapping['selected']]) === "true") {
+          // element.select()
+          checkedItems.push(String(item[this.objectMapping['id']]));
+        }
+        // element.setAttribute("item-object", JSON.stringify(item))
+        var object = item;
+        element.itemObject = object;
+        element.multiSelect = this.multiSelect === true ? true : false;
+        list.appendChild(element);
+        elementStatuses.push(element.componentOnReady());
+      });
+      const allStatuses = await Promise.all(elementStatuses);
+      if (allStatuses) {
+        if (checkedItems != []) {
+          checkedItems.forEach(item => {
+            // if ( this.sendSelectId( String(item) ) !== false ){
+            this.sendSelectId(String(item));
+            // }
+          });
+        }
+        this.handleLoading(false);
+        this.handleIndeterminateStatus();
+        this.firstRender = false;
+        return true;
+      }
+    }
+    else {
+      this.handleLoading(false);
+    }
+  }
+  /**
+   * @desc
+   */
+  handleLoading(show = false) {
+    const spinner = this.el.shadowRoot.querySelector('.spinner');
+    // const searchInput = this.el.shadowRoot.querySelector('#search');
+    if (show == true) {
+      spinner.classList.add("show");
+      // searchInput.setAttribute('readonly', 'true')
+    }
+    else {
+      spinner.classList.remove("show");
+      // searchInput.setAttribute('readonly', 'false')
+    }
+    if (this.linkedComponent !== null) {
+      this.handleLinkedComponent();
+    }
+  }
+  /**
+   * @desc
+   */
+  handleClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    // const elementId = "bcm-list-select-" + this._id
+    // console.log ( 
+    //     !!(
+    //         path 
+    //         && path.filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] 
+    //         && ( 
+    //             path.filter((input: HTMLElement) => input['id'] == "clear-button")[0] !== undefined 
+    //             || path.filter((input: HTMLElement) => input['id'] == "close-button")[0] !== undefined 
+    //             || path.filter((input: HTMLElement) => input['id'] == "close")[0] !== undefined 
+    //         )
+    //     )
+    // )
+    if (!this.el.contains(event.target)
+      || (path
+        && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+        && path.filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
+        && this.multiSelect === false)) {
+      if (this.isShow === true) {
+        this.hide();
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  wheelEvent(event) {
+    if (!this.el.contains(event.target)) {
+      if (this.isShow === true) {
+        this.hide();
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  scrollEvent(event) {
+    if (!this.el.contains(event.target)) {
+      if (this.isShow === true) {
+        this.hide();
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  resizeEvent() {
+    dropInComponent(this.el, "#" + this.linkedComponent);
+  }
+  /**
+   * @descc
+   */
+  onmousemove(e) {
+    if (this.el.contains(e.target)) {
+      if (document.querySelector("body").style.overflow != "hidden") {
+        document.querySelector("body").style.overflow = "hidden";
+      }
+    }
+    else {
+      if (document.querySelector("body").style.overflow != this.bodyStyleOverflow) {
+        document.querySelector("body").style.overflow = this.bodyStyleOverflow;
+      }
+    }
+  }
+  /**
+   * @descc
+   */
+  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 childs: any[] = getChilds(this.el, 'bcm-list-item')
+        var childs = this.el.shadowRoot.querySelectorAll("bcm-list-item");
+        childs.forEach(element => {
+          element.classList.add("hidden");
+        });
+        if (event.detail.length > 0) {
+          if (event.detail[0] == -1) {
+            this.totalSearch = 0;
+            this.empty = true;
+          }
+          else {
+            this.totalSearch = event.detail.length;
+            this.empty = false;
+            if (this.dataLength > 0) {
+              childs.forEach(element => {
+                // if ( this.highlight ){
+                //     event.target.addEventListener('bcm-on-search-value', async(event: CustomEvent) => {
+                //         var searchValue = await event.detail
+                //         var inputText = element.shadowRoot.getElementById("text")
+                //         inputText = inputText.textContent || inputText.innerText || ""
+                //         if (searchValue) {
+                //             var cacheInputText = lowercase(inputText)
+                //             var cacheSearchValue = lowercase(searchValue)
+                //             var index = cacheInputText.indexOf(cacheSearchValue);
+                //             if (index >= 0) { 
+                //                 inputText = inputText.substring(0,index) + "<span class='highlight'>" + inputText.substring(index,index+searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
+                //             }
+                //         }
+                //         element.shadowRoot.getElementById("text").innerHTML = inputText;
+                //     })
+                // }
+                if (event.detail.indexOf(element._id) >= 0) {
+                  element.classList.remove("hidden");
+                }
+              });
+            }
+          }
+        }
+        else if (event.detail === true) {
+          this.totalSearch = this.dataLength;
+          this.empty = false;
+          childs.forEach(element => {
+            element.classList.remove("hidden");
+          });
+        }
+        this.handleIndeterminateStatus();
+        this.calculatedTotals({ "searchResult": this.totalSearch });
+      }
+    }
+  }
+  /**
+   * @descc
+   
+   */
+  sendSelectId(id, status = true) {
+    id = String(id);
+    if (this.items && this.items.find(e => String(e[this.objectMapping['id']]) == id)) {
+      this.selectedId = id;
+      if (this.isRendered === false) {
+        const findItem = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
+        findItem[this.objectMapping['selected']] = status;
+        this.handleChecklist(findItem, status);
+        return findItem;
+      }
+      else {
+        var selectedItem = null;
+        if (selectedItem = this.el.shadowRoot.getElementById(id)) {
+          if (status === true) {
+            selectedItem.classList.add("selected");
+          }
+          else {
+            selectedItem.classList.remove("selected");
+          }
+          if (this.multiSelect === true) {
+            this.handleChecklist(selectedItem["itemObject"], status);
+            // selectedItem.classList.toggle("selected")
+            if (selectedItem.shadowRoot.querySelector(".checkbox")) {
+              selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = status;
+            }
+          }
+          this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
+          return this.items.find(e => e[this.objectMapping['id']] == id);
+        }
+      }
+    }
+    return false;
+  }
+  /**
+   * @descc
+   */
+  jsonDataProcess(id, status) {
+    var item = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
+    if (item) {
+      item[this.objectMapping['selected']] = status;
+    }
+  }
+  /**
+   * @descc
+   */
+  handleListSelected(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
+      var status = false;
+      var selectedItem = null;
+      const itemId = this.getItemId(event);
+      if (this.multiSelect === false) {
+        if (selectedItem = getChilds(this.el, "bcm-list-item").find(x => x._id === this.selectedId)) {
+          selectedItem.classList.remove("selected");
+          status = false;
+          // selectedItem.selected = false
+        }
+      }
+      selectedItem = this.el.shadowRoot.getElementById(itemId);
+      if (selectedItem) {
+        this.selectedId = selectedItem["id"];
+        // selectedItem.selected = true
+        if (this.multiSelect === true) {
+          selectedItem.classList.toggle("selected");
+          if (selectedItem.classList.contains("selected") === true) {
+            status = false;
+          }
+          else {
+            status = true;
+          }
+        }
+        else {
+          selectedItem.classList.add("selected");
+          status = true;
+        }
+      }
+      if (this.isInternalSlot(event)) {
+        if (selectedItem = path[0]) {
+          this.selectedId = path[0].id;
+          this.value = [event.detail];
+          return true;
+        }
+      }
+      if (this.multiSelect === true) {
+        this.handleChecklist(selectedItem["itemObject"], selectedItem.classList.contains("selected"));
+        this.listChecked.emit(this.checklist);
+        if (selectedItem.shadowRoot.querySelector(".checkbox")) {
+          selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = selectedItem.classList.contains("selected");
+        }
+        this.value = this.checklist;
+      }
+      else {
+        this.value = [event.detail];
+      }
+      if (this.processType === 'default') {
+        this.jsonDataProcess(this.selectedId, status);
+      }
+      this.handleIndeterminateStatus();
+      this.sendSelectValue();
+      if (this.processType === 'deselect') {
+        var element = document.querySelector("#" + this._list_id);
+        if (element) {
+          if (this.firstRender === false) {
+            element.toggleChecked(this.selectedId);
+          }
+          // element.unChecked(this.selectedId)
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleChecklist(checkItem, process = true) {
+    if (this.items && this.items.find(e => e[this.objectMapping['id']] == checkItem[this.objectMapping['id']])) {
+      switch (process) {
+        case true:
+          if (this.checklist.length > 0) {
+            if (!this.checklist.includes(checkItem)) {
+              this.checklist = [...this.checklist, checkItem];
+            }
+          }
+          else {
+            this.checklist = [checkItem];
+          }
+          break;
+        case false:
+          this.checklist = this.checklist.filter(item => item[this.objectMapping['id']] !== checkItem[this.objectMapping['id']]);
+          break;
+        default:
+          break;
+      }
+      let sorted = this.checklist.sort(function (a, b) { return a - b; });
+      this.checklist = sorted;
+      // if ( this.firstRender === false ){
+      this.calculatedTotals({ "selected": this.checklist.length });
+      // }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleIndeterminateStatus() {
+    if (this.multiSelect === true) {
+      this.checkStatus = false;
+      this.indeterminateStatus = false;
+      if (this.items != undefined && this.checklist != undefined) {
+        let state = 'uncheck';
+        let allChecked = true;
+        let allUnchecked = true;
+        getChilds(this.el, "bcm-list-item").map((item) => {
+          if (item.classList.contains("hidden") === false) {
+            item.classList.contains("selected") === true && (allUnchecked = false);
+            !item.classList.contains("selected") === true && (allChecked = false);
+          }
+        });
+        !allChecked && !allUnchecked
+          ? state = 'indeterminate'
+          : allChecked
+            ? state = 'determinate'
+            : state = 'uncheck';
+        switch (state) {
+          case 'indeterminate':
+            this.checkStatus = false;
+            this.indeterminateStatus = true;
+            break;
+          case 'determinate':
+            this.checkStatus = true;
+            this.indeterminateStatus = false;
+            break;
+          case 'uncheck':
+            this.checkStatus = false;
+            this.indeterminateStatus = false;
+            break;
+          default: break;
+        }
+        var indeterminateCheckbox;
+        if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {
+          indeterminateCheckbox["checked"] = this.checkStatus;
+          indeterminateCheckbox["indeterminate"] = this.indeterminateStatus;
+        }
+        // if ( this.checklist.length == 0 ) {
+        //     this.checkStatus = false
+        //     this.indeterminateStatus = false
+        // } else if ( this.checklist.length == this.items.length ){
+        //     this.checkStatus = true
+        //     this.indeterminateStatus = false
+        // } else if ( this.checklist.length < this.items.length ){
+        //     this.checkStatus = false
+        //     this.indeterminateStatus = true
+        // } else {
+        //     this.checkStatus = false
+        //     this.indeterminateStatus = false
+        // }
+        // if ( this.multiSelect === true ){
+        var indeterminateCheckbox;
+        if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {
+          indeterminateCheckbox["checked"] = this.checkStatus;
+          indeterminateCheckbox["indeterminate"] = this.indeterminateStatus;
+        }
+        // }
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  calculatedTotals(calcObject) {
+    var searchResult = -1;
+    if (calcObject["selected"] != undefined) {
+      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#selected-item")) {
+        if (calcObject["selected"] > 0) {
+          this.el.shadowRoot.querySelector("#selected-item").innerHTML = "( " + calcObject["selected"] + " selected ) ";
+        }
+        else {
+          this.el.shadowRoot.querySelector("#selected-item").innerHTML = " ";
+        }
+      }
+    }
+    if (calcObject["searchResult"] != undefined) {
+      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#search-result")) {
+        if (calcObject["searchResult"] == this.total) {
+          this.el.shadowRoot.querySelector("#search-result").innerHTML = "";
+        }
+        else {
+          this.el.shadowRoot.querySelector("#search-result").innerHTML = calcObject["searchResult"] + " / ";
+        }
+        searchResult = calcObject["searchResult"];
+      }
+    }
+    if (calcObject["total"] != undefined) {
+      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#in-total")) {
+        this.el.shadowRoot.querySelector("#in-total").innerHTML = calcObject["total"];
+        this.total = calcObject["total"];
+        this.el.shadowRoot.querySelector("#variable-text").innerHTML = pluralize(this.variableText, calcObject["total"]);
+      }
+    }
+    const empty = this.el.shadowRoot.querySelector("#empty");
+    const selectAll = this.el.shadowRoot.querySelector("#check-container");
+    if (searchResult == 0 || this.total == 0) {
+      if (empty) {
+        empty.classList.add("show");
+      }
+      if (selectAll) {
+        selectAll.classList.add("hidden");
+      }
+    }
+    else {
+      if (empty) {
+        empty.classList.remove("show");
+      }
+      if (selectAll) {
+        selectAll.classList.remove("hidden");
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  getItemId(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['id']
+      && path[0].attributes['id'].value;
+    return detect;
+  }
+  /**
+   * @desc
+   */
+  isInternalSlot(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && lowercase(path[0].tagName) === 'bcm-list-item'
+      && this.el.contains(path[0]);
+    return detect;
+  }
+  /**
+   * @desc
+   */
+  isInternal(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['_internal_id']
+      && path[0].attributes['_internal_id'].value;
+    return detect == this._internal_id;
+  }
+  /**
+   * @desc
+   */
+  handleLinkedComponent() {
+    dropInComponent(this.el, "#" + this.linkedComponent);
+    var element = null;
+    if (this.width == "100%" && (element = document.querySelector("#" + this.linkedComponent))) {
+      this.linkedElementWidth = element.clientWidth + "px";
+    }
+  }
+  /**
+   * @desc
+   */
+  async selectIsInitialize() {
+    const elementId = "bcm-list-select-" + this._id;
+    var element;
+    if (!document.getElementById(elementId)) {
+      element = document.createElement("bcm-list-select");
+    }
+    else {
+      element = document.getElementById(elementId);
+    }
+    element.setAttribute("id", elementId);
+    element.setAttribute("_list_id", this._id);
+    element.setAttribute("_internal_id", this._internal_id);
+    if (this.type) {
+      element.setAttribute("type", this.type);
+    }
+    if (this.clearable) {
+      element.setAttribute("clearable", this.clearable);
+    }
+    if (this.label) {
+      element.setAttribute("label", this.label);
+    }
+    if (this.variableText) {
+      element.setAttribute("variable-text", this.variableText);
+    }
+    if (this.placeholder) {
+      element.setAttribute("placeholder", this.placeholder);
+    }
+    if (this.noCaption) {
+      element.setAttribute("no-naption", this.noCaption);
+    }
+    if (this.caption) {
+      element.setAttribute("caption", this.caption);
+    }
+    if (this.captionError) {
+      element.setAttribute("caption-error", this.captionError);
+    }
+    if (this.captionType) {
+      element.setAttribute("caption-type", this.captionType);
+    }
+    if (this.disabled) {
+      element.setAttribute("disabled", this.disabled);
+    }
+    if (this.name) {
+      element.setAttribute("name", this.name);
+    }
+    if (this.required) {
+      element.setAttribute("required", this.required);
+    }
+    if (this.fullWidth) {
+      element.setAttribute("full-width", this.fullWidth);
+    }
+    if (this.multiSelect) {
+      element.setAttribute("multiselect", this.multiSelect);
+    }
+    const parentNode = this.el.parentNode;
+    parentNode.insertBefore(element, this.el);
+    return elementId;
+  }
+  /**
+   * @desc
+   */
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  /**
+   * @desc
+   */
+  async handleIndeterminateClick(e) {
+    e.preventDefault();
+    let state = 'uncheck';
+    let allChecked = true;
+    let allUnchecked = true;
+    let visibleItem = [];
+    getChilds(this.el, "bcm-list-item").map((item) => {
+      if (item.classList.contains("hidden") === false) {
+        visibleItem.push(item.id);
+        item.classList.contains("selected") === true && (allUnchecked = false);
+        !item.classList.contains("selected") === true && (allChecked = false);
+      }
+    });
+    !allChecked && !allUnchecked
+      ? state = 'indeterminate'
+      : allChecked
+        ? state = 'determinate'
+        : state = 'uncheck';
+    if (state === 'determinate') {
+      this.unChecked(visibleItem);
+    }
+    else {
+      this.checked(visibleItem, false);
+    }
+    this.handleIndeterminateStatus();
+  }
+  /**
+   * @desc
+   */
+  sendSelectValue() {
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      const select = document.getElementById("bcm-list-select-" + this._id);
+      if (select) {
+        // if ( this.multiSelect === true ){
+        select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
+        // } else {
+        //     var val = null;
+        //     if ( this.value ){
+        //         debugger;
+        //         if ( typeof this.value === 'object'){
+        //             val = this.value
+        //         }else{
+        //             if ( this.value.length > 0 ){
+        //                 val = this.value[0]
+        //             }
+        //         }
+        //     }
+        //     // val = this.value[this.objectMapping["text"]]
+        //     select.setValue(val, this.objectMapping["id"], this.objectMapping["text"])
+        // }
+      }
+    }
+  }
+  render() {
+    const classes = cs('list-container', this.size);
+    const listItem = cs('list-item', this.size, {
+      'size-2': this.size === 'small' || this.size === 'medium',
+      'size-3': this.size === 'large',
+    });
+    const hostClasses = cs(this.hidden ? 'hidden' : null, 'type-' + this.type, {
+      'error': this.type == "default" && this.captionType == 'error' ? true : false,
+      'show': this.isShow,
+      'flex': this.minHeight != null || this.maxHeight != null,
+      'full-width': this.fullWidth
+    });
+    const searchContainer = cs('search-container', {
+      'show': this.searchable,
+    });
+    const footer = cs('footer');
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + this.captionType);
+    var labelAreaHeight = 0;
+    if (this.el.shadowRoot && this.el.shadowRoot.querySelector(".label") && this.el.shadowRoot.querySelector(".label").clientHeight) {
+      labelAreaHeight = this.el.shadowRoot.querySelector(".label").clientHeight + 2;
+    }
+    var styleHeight = this.minHeight != null || this.maxHeight != null ? 'auto' : this.height;
+    var customStyle = {
+      'min-height': this.minHeight != null ? this.minHeight : null,
+      'max-height': this.maxHeight != null ? this.maxHeight : null,
+      'width': this.minWidth != null || this.maxWidth != null ? 'max-content' :
+        this.width != "100%" ? this.width : this.linkedElementWidth,
+      'min-width': this.minWidth != null ? this.minWidth == "100%" || this.minWidth == "auto" ? this.linkedElementWidth : this.minWidth : null,
+      'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
+    };
+    var mainStyle = Object.assign({ 'height': styleHeight }, customStyle);
+    var hostStyle = Object.assign({ 'height': styleHeight + labelAreaHeight }, customStyle);
+    return (h(Host, { class: hostClasses, style: hostStyle },
+      (this.type === 'default' && this.processType === 'default' && this.label) && (h("div", null,
+        h("bcm-label", { tooltip: this.tooltip, type: this.captionType, value: this.label, required: this.required }))),
+      h("main", { style: mainStyle },
+        this.searchable === true && (h("div", { class: searchContainer },
+          h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, searchValue: this.searchText, clearable: true }),
+          h("bcm-divider", null))),
+        h("div", { class: classes },
+          this.multiSelect === true && (h("div", { id: "check-container", class: "check-container" },
+            h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) },
+              h("div", { class: "check-content" },
+                h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })),
+              "Select All"),
+            h("div", { class: "divider" },
+              h("bcm-divider", null)))),
+          h("slot", null),
+          h("div", { class: "list" }),
+          h("div", { class: "spinner first-run" },
+            h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" })),
+          h("div", { id: "empty", class: "empty" },
+            h("bcm-empty", { size: "small", text: "No Data" }))),
+        this.infoFooter == true && (h("div", { class: footer },
+          h("bcm-text", { scale: "size-1", color: "grey-8" },
+            this.multiSelect === true && (h("span", { id: "selected-item" })),
+            "Total ",
+            h("span", { id: "search-result" }),
+            " ",
+            h("span", { id: "in-total" }, "0"),
+            " ",
+            h("span", { id: "variable-text" },
+              " ",
+              pluralize(this.variableText)),
+            " found.")))),
+      (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (h("div", { class: "caption-area" }, this.captionType == "error"
+        ? h("span", { class: captionClasses },
+          " ",
+          this.captionError,
+          " ")
+        : this.caption && h("span", { class: captionClasses },
+          " ",
+          this.caption,
+          " ")))));
+  }
+  static get is() { return "bcm-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["list.css"]
+  }; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "(Math.random() * 4).toString(16).replace('.', '')"
+    },
+    "_internal_id": {
+      "type": "string",
+      "mutable": false,
+      "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('.', '')"
+    },
+    "_list_select_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_list_select_id",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "_list_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_list_id",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TypeProp",
+        "resolved": "\"autocomplete\" | \"default\" | \"multiselect\" | \"select\"",
+        "references": {
+          "TypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "processType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ProcessTypeProp",
+        "resolved": "\"default\" | \"deselect\"",
+        "references": {
+          "ProcessTypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "process-type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "items": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any |\u00A0Array<object> | string",
+        "resolved": "any",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data",
+      "reflect": false,
+      "defaultValue": "[]"
+    },
+    "isShow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "linkedComponent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "linked-component",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "selectedId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected-id",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "flex": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flex",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": true,
+      "defaultValue": "\"256px\""
+    },
+    "minHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "maxHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-height",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": true,
+      "defaultValue": "\"100%\""
+    },
+    "minWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-width",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "maxWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SizeProp",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'medium'"
+    },
+    "infoFooter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "infofooter",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "searchable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "searchable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "searchPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-placeholder",
+      "reflect": false,
+      "defaultValue": "\"Search\""
+    },
+    "searchFields": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "['text']"
+    },
+    "returnField": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "return-field",
+      "reflect": false,
+      "defaultValue": "\"id\""
+    },
+    "searchData": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-data",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "multiSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiselect",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "variableText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "***"
+      },
+      "attribute": "variable-text",
+      "reflect": false,
+      "defaultValue": "'item'"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"Choose an option\""
+    },
+    "noCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "no-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "captionError": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-error",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "captionType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "captionTypeProp",
+        "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {
+          "captionTypeProp": {
+            "location": "import",
+            "path": "../../../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "caption-type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "***"
+      },
+      "attribute": "tooltip",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "searchText": {},
+    "captionCache": {},
+    "captionTypeCache": {}
+  }; }
+  static get events() { return [{
+      "method": "listSelected",
+      "name": "bcm-list-selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "listChecked",
+      "name": "bcm-list-checklist",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "bcm-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "setSearch": {
+      "complexType": {
+        "signature": "(text: string) => 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": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "renderList": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "openStatus": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "config": {
+      "complexType": {
+        "signature": "(_config: Array<object>) => Promise<object[]>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<object[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "setDataOther": {
+      "complexType": {
+        "signature": "(_data?: Array<object> | string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "setData": {
+      "complexType": {
+        "signature": "(_data?: Array<object> | string) => Promise<string | object[]>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string | object[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "getValue": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "getChecklist": {
+      "complexType": {
+        "signature": "() => Promise<any[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any[]>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "resetCaption": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "toggleChecked": {
+      "complexType": {
+        "signature": "(checkedItems?: Array<string> | string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "unChecked": {
+      "complexType": {
+        "signature": "(checkedItems?: Array<string> | string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "checked": {
+      "complexType": {
+        "signature": "(checkedItems?: Array<string> | string, reset?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    },
+    "setClear": {
+      "complexType": {
+        "signature": "(eventEmit?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": [{
+            "name": "desc",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "isShow",
+      "methodName": "handleOpen"
+    }, {
+      "propName": "value",
+      "methodName": "handleChange"
+    }, {
+      "propName": "captionType",
+      "methodName": "handleCaptionType"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleClick",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "wheel",
+      "method": "wheelEvent",
+      "target": "window",
+      "capture": true,
+      "passive": true
+    }, {
+      "name": "scroll",
+      "method": "scrollEvent",
+      "target": "document",
+      "capture": true,
+      "passive": true
+    }, {
+      "name": "resize",
+      "method": "resizeEvent",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mousemove",
+      "method": "onmousemove",
+      "target": "document",
+      "capture": true,
+      "passive": true
+    }, {
+      "name": "bcm-on-search",
+      "method": "listenSearchResult",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-list-selected",
+      "method": "handleListSelected",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}