bromcom-ui 2.3.54 → 2.3.58

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

@@ -1,6 +1,6 @@
 import { Component, h, Element, Prop, Host, Method, Listen, Event, Watch, State } from '@stencil/core';
 import cs from 'classnames';
-import { delay, dropInComponent, getChilds } from '../../../utils/utils';
+import { delay, dropInComponent, getChilds, pluralize } from '../../../utils/utils';
 const lowercase = (str) => str.toLowerCase();
 export class BcmList {
   constructor() {
@@ -16,6 +16,7 @@ export class BcmList {
     this.checkStatus = false;
     this.resetSelected = false;
     this.indeterminateStatus = false;
+    this.total = 0;
     this.totalSearch = 0;
     this.empty = false;
     this.objectMapping = {
@@ -45,7 +46,7 @@ export class BcmList {
     this.size = 'medium';
     this.infoFooter = false;
     this.searchable = false;
-    this.highlight = false;
+    this.highlight = true;
     this.searchPlaceholder = "Search";
     this.searchFields = ['text'];
     this.returnField = "id";
@@ -55,6 +56,7 @@ export class BcmList {
     this.value = null;
     this.multiSelect = false;
     /******/
+    this.variableText = 'item';
     this.clearable = false;
     this.label = null;
     this.placeholder = "Choose an option";
@@ -78,6 +80,7 @@ export class BcmList {
     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');
@@ -129,6 +132,7 @@ export class BcmList {
     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) {
@@ -143,10 +147,19 @@ export class BcmList {
   async show() {
     if (this.processType == 'deselect') {
       this.firstRender = true;
-      this.isRendered = false;
-      this.setData(this.otherList);
+      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);
@@ -192,6 +205,19 @@ export class BcmList {
   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
    */
@@ -246,7 +272,10 @@ export class BcmList {
    * @desc
    */
   async setData(_data = []) {
-    if (this.value) {
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+    }
+    if (this.value !== null) {
       this.setClear();
     }
     if (_data) {
@@ -261,7 +290,9 @@ export class BcmList {
               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':
@@ -270,7 +301,9 @@ export class BcmList {
               // element[ this.objectMapping['selected'] ] = true;
               selectedIDs.push(element[this.objectMapping['id']]);
             });
+            // if ( selectedIDs.length > 0 ) {
             this.checked(selectedIDs);
+            // }
             break;
           default:
             break;
@@ -285,6 +318,9 @@ export class BcmList {
         this.show();
       }
     }
+    if (this.type === 'autocomplete') {
+      this.renderList();
+    }
     return _data;
   }
   /**
@@ -306,12 +342,24 @@ export class BcmList {
     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) {
+    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']];
@@ -386,7 +434,12 @@ export class BcmList {
    * @desc
    */
   async unChecked(checkedItems = null) {
-    if (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') {
@@ -412,12 +465,18 @@ export class BcmList {
    * @desc
    */
   async checked(checkedItems = null, reset = true) {
-    if (checkedItems !== null) {
+    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 => e[this.objectMapping['selected']])) {
+        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 => {
-            element[this.objectMapping['selected']] = false;
+            this.jsonDataProcess(element[this.objectMapping['id']], false);
+            this.sendSelectId(String(element[this.objectMapping['id']]), false);
           });
         }
         this.setClear(false);
@@ -425,7 +484,7 @@ export class BcmList {
       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.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
         }
       }
       else {
@@ -436,11 +495,11 @@ export class BcmList {
         }
       }
       // if ( this.multiSelect === false ){
-      //     this.selectedId = this.items.find( e => String(e[ this.objectMapping['id'] ]) === String(checkedItems) )
+      //     this.selectedId = this.items.find( e => String(e[ this.objectMapping['id'] ]) === String(checkedItems) )[ this.objectMapping['id'] ]
       // }
-      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);
+      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;
@@ -453,15 +512,19 @@ export class BcmList {
    * @desc
    */
   async setClear(eventEmit = true) {
-    if (this.items != undefined && this.items.length > 0) {
-      this.unChecked(this.items.map(item => { return item[this.objectMapping["id"]]; }));
+    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.value = null;
     this.handleIndeterminateStatus();
     this.calculatedTotals({ "selected": this.checklist.length });
   }
@@ -473,8 +536,8 @@ export class BcmList {
     await delay(100);
     const list = this.el.shadowRoot.querySelector('.list');
     list.innerHTML = "";
-    this.selectedId = null;
-    this.value = null;
+    // this.selectedId = null
+    // this.value = null
     const elementStatuses = [];
     var checkedItems = [];
     if (_data.length > 0) {
@@ -486,14 +549,14 @@ export class BcmList {
         element.setAttribute("_internal_id", this._internal_id);
         element.setAttribute("text", item[this.objectMapping['text']]);
         element.setAttribute("id", String(item[this.objectMapping['id']]));
-        if (item[this.objectMapping['selected']]) {
+        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;
+        element.multiSelect = this.multiSelect === true ? true : false;
         list.appendChild(element);
         elementStatuses.push(element.componentOnReady());
       });
@@ -507,12 +570,13 @@ export class BcmList {
           });
         }
         this.handleLoading(false);
+        this.handleIndeterminateStatus();
         this.firstRender = false;
+        return true;
       }
     }
     else {
       this.handleLoading(false);
-      // console.log("no data")
     }
   }
   /**
@@ -538,6 +602,18 @@ export class BcmList {
    */
   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]
@@ -591,7 +667,6 @@ export class BcmList {
   }
   /**
    * @descc
-   
    */
   listenSearchResult(event) {
     var path = event.path || (event.composedPath && event.composedPath());
@@ -642,7 +717,8 @@ export class BcmList {
             element.classList.remove("hidden");
           });
         }
-        this.calculatedTotals({ "total": this.totalSearch });
+        this.handleIndeterminateStatus();
+        this.calculatedTotals({ "searchResult": this.totalSearch });
       }
     }
   }
@@ -651,11 +727,14 @@ export class BcmList {
    
    */
   sendSelectId(id, status = true) {
-    if (this.items && this.items.find(e => e[this.objectMapping['id']] == id)) {
+    id = String(id);
+    if (this.items && this.items.find(e => String(e[this.objectMapping['id']]) == id)) {
+      this.selectedId = id;
       if (this.isRendered === false) {
-        this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
-        this.handleChecklist(this.items.find(e => e[this.objectMapping['id']] == id), status);
-        return this.items.find(e => e[this.objectMapping['id']] == id);
+        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;
@@ -684,7 +763,6 @@ export class BcmList {
    * @descc
    */
   jsonDataProcess(id, status) {
-    // console.log(id)
     var item = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
     if (item) {
       item[this.objectMapping['selected']] = status;
@@ -695,7 +773,6 @@ export class BcmList {
    */
   handleListSelected(event) {
     var path = event.path || (event.composedPath && event.composedPath());
-    // console.log(path);
     if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
       var status = false;
       var selectedItem = null;
@@ -728,7 +805,7 @@ export class BcmList {
       if (this.isInternalSlot(event)) {
         if (selectedItem = path[0]) {
           this.selectedId = path[0].id;
-          this.value = event.detail;
+          this.value = [event.detail];
           return true;
         }
       }
@@ -741,7 +818,7 @@ export class BcmList {
         this.value = this.checklist;
       }
       else {
-        this.value = event.detail;
+        this.value = [event.detail];
       }
       if (this.processType === 'default') {
         this.jsonDataProcess(this.selectedId, status);
@@ -796,29 +873,60 @@ export class BcmList {
       this.checkStatus = false;
       this.indeterminateStatus = false;
       if (this.items != undefined && this.checklist != undefined) {
-        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;
+        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;
         }
-        else {
-          this.checkStatus = false;
-          this.indeterminateStatus = false;
+        var indeterminateCheckbox;
+        if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {
+          indeterminateCheckbox["checked"] = this.checkStatus;
+          indeterminateCheckbox["indeterminate"] = this.indeterminateStatus;
         }
-        if (this.multiSelect === true) {
-          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;
         }
+        // }
       }
     }
   }
@@ -826,19 +934,51 @@ export class BcmList {
    * @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 )";
+          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");
       }
     }
   }
@@ -911,6 +1051,9 @@ export class BcmList {
     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);
     }
@@ -956,50 +1099,27 @@ export class BcmList {
    */
   async handleIndeterminateClick(e) {
     e.preventDefault();
-    this.indeterminateStatus = false;
-    if (this.checkStatus === false) {
-      this.checkStatus = true;
+    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.checkStatus = false;
-    }
-    if (this.items != undefined && this.items.length > 0) {
-      // const subItems = this.el.shadowRoot.querySelectorAll("bcm-list-item")
-      var selectedIDs = [];
-      this.items.forEach(item => {
-        selectedIDs.push(item[this.objectMapping['id']]);
-        // this.jsonDataProcess( item[ this.objectMapping['id'] ], this.checkStatus === true ? true : false)
-        // this.handleChecklist( item, this.checkStatus === true ? true : false)
-        // var element:any = this.el.shadowRoot.getElementById( item[ this.objectMapping['id'] ] )
-        // if ( element ) {
-        //     if ( element.shadowRoot.querySelector(".checkbox") ){
-        //         element.shadowRoot.querySelector(".checkbox").querySelector("input").checked = this.checkStatus
-        //     }
-        //     if ( this.checkStatus === true ){
-        //         element.classList.add("selected")
-        //     } else {
-        //         element.classList.remove("selected")
-        //     }
-        // }
-      });
-      if (this.checkStatus === true) {
-        this.checked(selectedIDs, false);
-      }
-      else {
-        this.unChecked(selectedIDs);
-      }
-      if (this.processType === 'deselect') {
-        var element = document.querySelector("#" + this._list_id);
-        if (element) {
-          // if ( this.firstRender === false ){
-          element.toggleChecked(selectedIDs);
-          // }
-          // element.unChecked(this.selectedId)
-        }
-      }
-      // this.listChecked.emit( this.checklist )
-      // this.value = this.checklist
-      // this.sendSelectValue()
+      this.checked(visibleItem, false);
     }
     this.handleIndeterminateStatus();
   }
@@ -1010,12 +1130,23 @@ export class BcmList {
     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 {
-          select.setValue(this.value[this.objectMapping["text"]]);
-        }
+        // 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"])
+        // }
       }
     }
   }
@@ -1026,7 +1157,7 @@ export class BcmList {
       'size-3': this.size === 'large',
     });
     const hostClasses = cs(this.hidden ? 'hidden' : null, 'type-' + this.type, {
-      'error': this.captionType == 'error' ? true : false,
+      'error': this.type == "default" && this.captionType == 'error' ? true : false,
       'show': this.isShow,
       'flex': this.minHeight != null || this.maxHeight != null,
       'full-width': this.fullWidth
@@ -1036,8 +1167,12 @@ export class BcmList {
     });
     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 = {
-      'height': this.minHeight != null || this.maxHeight != null ? 'auto' : this.height,
       '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' :
@@ -1045,19 +1180,17 @@ export class BcmList {
       '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,
     };
-    return (h(Host, { class: hostClasses, style: customStyle },
-      (this.type === 'default' && this.processType === 'default' && this.label) && (h("label", { class: "label size-1" },
-        " ",
-        this.label,
-        " ",
-        this.required && ('*'),
-        "  ")),
-      h("main", { style: customStyle },
+    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", { class: "check-container" },
+          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) })),
@@ -1067,13 +1200,21 @@ export class BcmList {
           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("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" },
-            h("span", { id: "selected-item" }),
-            " Total ",
+            this.multiSelect === true && (h("span", { id: "selected-item" })),
+            "Total ",
+            h("span", { id: "search-result" }),
+            " ",
             h("span", { id: "in-total" }, "0"),
-            " items found.")))),
+            " ",
+            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 },
           " ",
@@ -1508,6 +1649,80 @@ export class BcmList {
       "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,
@@ -1544,6 +1759,24 @@ export class BcmList {
       "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,
@@ -1556,7 +1789,7 @@ export class BcmList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "***"
+        "text": ""
       },
       "attribute": "clearable",
       "reflect": false,
@@ -1728,6 +1961,23 @@ export class BcmList {
       "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 {
@@ -1743,7 +1993,7 @@ export class BcmList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "***"
+        "text": ""
       },
       "complexType": {
         "original": "any",
@@ -1858,6 +2108,25 @@ export class BcmList {
           }]
       }
     },
+    "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>",
@@ -2136,6 +2405,9 @@ export class BcmList {
     }, {
       "propName": "value",
       "methodName": "handleChange"
+    }, {
+      "propName": "captionType",
+      "methodName": "handleCaptionType"
     }]; }
   static get listeners() { return [{
       "name": "click",