bromcom-ui 2.3.46 → 2.3.50

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

@@ -1,17 +1,17 @@
-import { Component, h, Element, Prop, Host, Method, Listen, Event } from '@stencil/core';
+import { Component, h, Element, Prop, Host, Method, Listen, Event, Watch, State } from '@stencil/core';
 import cs from 'classnames';
-import { dropInComponent, getChilds } from '../../../utils/utils';
+import { delay, dropInComponent, getChilds } from '../../../utils/utils';
 const lowercase = (str) => str.toLowerCase();
 export class BcmList {
   constructor() {
     this.configObject = [];
-    this.searchData = null;
     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;
@@ -28,6 +28,7 @@ export class BcmList {
     this._list_select_id = null;
     this._list_id = null;
     this.type = 'default';
+    this.processType = 'default';
     this.hidden = false;
     this.items = [];
     this.isShow = true;
@@ -40,16 +41,19 @@ export class BcmList {
     this.width = "100%";
     this.minWidth = null;
     this.maxWidth = null;
+    this.fullWidth = false;
+    this.size = 'medium';
     this.infoFooter = false;
-    this.highlight = false;
     this.searchable = false;
+    this.highlight = false;
     this.searchPlaceholder = "Search";
     this.searchFields = ['text'];
     this.returnField = "id";
+    this.searchData = null;
+    this.searchSub = "items";
+    this.searchText = "";
     this.value = null;
     this.multiSelect = false;
-    this.fullWidth = false;
-    this.size = 'medium';
     /******/
     this.clearable = false;
     this.label = null;
@@ -63,9 +67,11 @@ export class BcmList {
     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._internal_id;
-    if (this.type === 'select') {
+    const elementId = "bcm-list-select-" + this._id;
+    if (this.type === 'select' || this.type === 'autocomplete') {
       this.selectIsInitialize();
       this.linkedComponent = elementId;
     }
@@ -85,17 +91,23 @@ export class BcmList {
   }
   disconnectedCallback() { }
   componentWillLoad() { }
-  componentDidLoad() {
-    setTimeout(() => {
-      const spinner = this.el.shadowRoot.querySelector('.spinner');
-      spinner.classList.remove("first-run");
-    }, 500);
-  }
+  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() { }
@@ -106,10 +118,34 @@ export class BcmList {
     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");
+      if (searchInput) {
+        searchInput.setClear();
+        if (select == true) {
+          searchInput.select();
+        }
+      }
+    }
+  }
   /**
    * @desc
    */
   async show() {
+    if (this.processType == 'deselect') {
+      this.firstRender = true;
+      this.isRendered = false;
+      this.setData(this.otherList);
+    }
     this.isShow = true;
     if (this.items && this.isRendered === false) {
       this.isRendered = true;
@@ -125,10 +161,56 @@ export class BcmList {
   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
    */
   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'];
     }
@@ -154,6 +236,12 @@ export class BcmList {
     this.configObject = _config;
     return _config;
   }
+  /**
+   * @desc
+   */
+  async setDataOther(_data = []) {
+    this.otherList = _data;
+  }
   /**
    * @desc
    */
@@ -162,12 +250,28 @@ export class BcmList {
       typeof _data == 'string'
         ? this.items = JSON.parse(_data)
         : this.items = _data;
-      if (this.items && 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.checked(selectedIDs);
+      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']]);
+              });
+              this.checked(selectedIDs);
+            }
+            break;
+          case 'deselect':
+            var selectedIDs = [];
+            this.items.forEach(element => {
+              // element[ this.objectMapping['selected'] ] = true;
+              selectedIDs.push(element[this.objectMapping['id']]);
+            });
+            this.checked(selectedIDs);
+            break;
+          default:
+            break;
+        }
       }
       this.calculatedTotals({ "total": this.items.length });
       if (this.multiSelect === true) {
@@ -195,48 +299,159 @@ export class BcmList {
   /**
    * @desc
    */
-  async checked(checkedItems) {
-    if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-      this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-        element[this.objectMapping['selected']] = false;
-      });
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  /**
+   * @desc
+   */
+  async toggleChecked(checkedItems = null) {
+    if (checkedItems !== null) {
+      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);
+      }
     }
-    var selectedIDs = [];
-    this.setClear(false);
-    var checkItem = null;
-    if (typeof checkedItems == 'string') {
-      if (this.sendSelectId(String(checkedItems)) !== false) {
-        checkItem = this.sendSelectId(String(checkedItems));
-        selectedIDs.push(checkItem);
+  }
+  /**
+   * @desc
+   */
+  async unChecked(checkedItems = null) {
+    if (checkedItems !== null) {
+      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();
     }
-    else {
-      checkedItems.forEach(item => {
-        if (this.sendSelectId(String(item)) !== false) {
-          checkItem = this.sendSelectId(String(item));
-          selectedIDs.push(checkItem);
+  }
+  /**
+   * @desc
+   */
+  async checked(checkedItems = null, reset = true) {
+    if (checkedItems !== null) {
+      var selectedIDs = [];
+      if (reset === true) {
+        if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
+          this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+            element[this.objectMapping['selected']] = false;
+          });
         }
-      });
-    }
-    if (this.multiSelect === false) {
-      this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems));
+        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));
+        }
+      }
+      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) )
+      // }
+      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.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.el.shadowRoot.querySelectorAll("bcm-list-item").forEach(item => {
-        if (item.shadowRoot.querySelector("bcm-checkbox-lite")) {
-          item.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = false;
-        }
-        item.classList.remove("selected");
-      });
+      this.unChecked(this.items.map(item => { return item[this.objectMapping["id"]]; }));
     }
     this.selectedId = null;
     this.checklist = [];
@@ -252,21 +467,25 @@ export class BcmList {
    */
   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 (item[this.objectMapping['selected']]) {
-          element.select();
+          // element.select()
+          checkedItems.push(String(item[this.objectMapping['id']]));
         }
         // element.setAttribute("item-object", JSON.stringify(item))
         var object = item;
@@ -277,6 +496,13 @@ export class BcmList {
       });
       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.firstRender = false;
       }
@@ -308,22 +534,33 @@ export class BcmList {
    * @desc
    */
   handleClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
     if (!this.el.contains(event.target)
-      || (event["path"]
-        && event["path"].filter((input) => input['_internal_id'] == this._internal_id)[0]
-        && event["path"].filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
+      || (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) {
+      if (this.isShow === true) {
         this.hide();
       }
     }
@@ -353,27 +590,28 @@ export class BcmList {
    * @descc
    
    */
-  listenSearchResult(e) {
-    if (e.isEvent == undefined) {
-      if (e["path"] && e["path"].filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+  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 (e.detail.length > 0) {
-          if (e.detail[0] == -1) {
+        if (event.detail.length > 0) {
+          if (event.detail[0] == -1) {
             this.totalSearch = 0;
             this.empty = true;
           }
           else {
-            this.totalSearch = e.detail.length;
+            this.totalSearch = event.detail.length;
             this.empty = false;
             if (this.dataLength > 0) {
               childs.forEach(element => {
                 if (this.highlight) {
-                  e.target.addEventListener('bcm-on-search-value', async (e) => {
-                    var searchValue = await e.detail;
+                  event.target.addEventListener('bcm-on-search-value', async (event) => {
+                    var searchValue = await event.detail;
                     var inputText = element.shadowRoot.getElementById("text");
                     inputText = inputText.textContent || inputText.innerText || "";
                     if (searchValue) {
@@ -387,14 +625,14 @@ export class BcmList {
                     element.shadowRoot.getElementById("text").innerHTML = inputText;
                   });
                 }
-                if (e.detail.indexOf(element.id) >= 0) {
+                if (event.detail.indexOf(element._id) >= 0) {
                   element.classList.remove("hidden");
                 }
               });
             }
           }
         }
-        else if (e.detail === true) {
+        else if (event.detail === true) {
           this.totalSearch = this.dataLength;
           this.empty = false;
           childs.forEach(element => {
@@ -409,25 +647,30 @@ export class BcmList {
    * @descc
    
    */
-  sendSelectId(id) {
-    // console.log(this.items.find( e => e[ this.objectMapping['id'] ] == id ))
+  sendSelectId(id, status = true) {
     if (this.items && this.items.find(e => e[this.objectMapping['id']] == id)) {
       if (this.isRendered === false) {
-        this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = true;
+        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);
       }
       else {
         var selectedItem = null;
         if (selectedItem = this.el.shadowRoot.getElementById(id)) {
-          selectedItem.classList.add("selected");
+          if (status === true) {
+            selectedItem.classList.add("selected");
+          }
+          else {
+            selectedItem.classList.remove("selected");
+          }
           if (this.multiSelect === true) {
-            this.handleChecklist(selectedItem["itemObject"], true);
+            this.handleChecklist(selectedItem["itemObject"], status);
             // selectedItem.classList.toggle("selected")
-            if (selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")) {
-              selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = true;
+            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']] = true;
+          this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
           return this.items.find(e => e[this.objectMapping['id']] == id);
         }
       }
@@ -438,44 +681,50 @@ export class BcmList {
    * @descc
    */
   jsonDataProcess(id, status) {
-    this.items.find(e => String(e[this.objectMapping['id']]) == String(id))[this.objectMapping['selected']] = status;
+    // console.log(id)
+    var item = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
+    if (item) {
+      item[this.objectMapping['selected']] = status;
+    }
   }
   /**
    * @descc
    */
   handleListSelected(event) {
-    // console.log(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;
       const itemId = this.getItemId(event);
       if (this.multiSelect === false) {
-        if (selectedItem = getChilds(this.el, "bcm-list-item").find(x => x.id === this.selectedId)) {
+        if (selectedItem = getChilds(this.el, "bcm-list-item").find(x => x._id === this.selectedId)) {
           selectedItem.classList.remove("selected");
-          this.jsonDataProcess(this.selectedId, false);
+          status = false;
           // selectedItem.selected = false
         }
       }
       selectedItem = this.el.shadowRoot.getElementById(itemId);
       if (selectedItem) {
-        this.selectedId = this.getItemId(event);
+        this.selectedId = selectedItem["id"];
         // selectedItem.selected = true
         if (this.multiSelect === true) {
           selectedItem.classList.toggle("selected");
           if (selectedItem.classList.contains("selected") === true) {
-            this.jsonDataProcess(this.selectedId, false);
+            status = false;
           }
           else {
-            this.jsonDataProcess(this.selectedId, true);
+            status = true;
           }
         }
         else {
           selectedItem.classList.add("selected");
-          this.jsonDataProcess(this.selectedId, true);
+          status = true;
         }
       }
       if (this.isInternalSlot(event)) {
-        if (selectedItem = event.path[0]) {
-          this.selectedId = event.path[0].id;
+        if (selectedItem = path[0]) {
+          this.selectedId = path[0].id;
           this.value = event.detail;
           return true;
         }
@@ -483,16 +732,28 @@ export class BcmList {
       if (this.multiSelect === true) {
         this.handleChecklist(selectedItem["itemObject"], selectedItem.classList.contains("selected"));
         this.listChecked.emit(this.checklist);
-        if (selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")) {
-          selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = selectedItem.classList.contains("selected");
+        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)
+        }
+      }
     }
   }
   /**
@@ -519,9 +780,9 @@ export class BcmList {
       }
       let sorted = this.checklist.sort(function (a, b) { return a - b; });
       this.checklist = sorted;
-      if (this.firstRender === false) {
-        this.calculatedTotals({ "selected": this.checklist.length });
-      }
+      // if ( this.firstRender === false ){
+      this.calculatedTotals({ "selected": this.checklist.length });
+      // }
     }
   }
   /**
@@ -582,32 +843,35 @@ export class BcmList {
    * @desc
    */
   getItemId(event) {
-    const detect = event.path
-      && event.path[0]
-      && event.path[0].attributes
-      && event.path[0].attributes['id']
-      && event.path[0].attributes['id'].value;
+    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) {
-    const detect = event.path
-      && event.path[0]
-      && lowercase(event.path[0].tagName) === 'bcm-list-item'
-      && this.el.contains(event.path[0]);
+    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) {
-    const detect = event.path
-      && event.path[0]
-      && event.path[0].attributes
-      && event.path[0].attributes['_internal_id']
-      && event.path[0].attributes['_internal_id'].value;
+    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;
   }
   /**
@@ -624,7 +888,7 @@ export class BcmList {
    * @desc
    */
   async selectIsInitialize() {
-    const elementId = "bcm-list-select-" + this._internal_id;
+    const elementId = "bcm-list-select-" + this._id;
     var element;
     if (!document.getElementById(elementId)) {
       element = document.createElement("bcm-list-select");
@@ -635,6 +899,9 @@ export class BcmList {
     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);
     }
@@ -668,6 +935,9 @@ export class BcmList {
     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;
@@ -691,22 +961,42 @@ export class BcmList {
       this.checkStatus = false;
     }
     if (this.items != undefined && this.items.length > 0) {
-      const subItems = this.el.shadowRoot.querySelectorAll("bcm-list-item");
-      subItems.forEach(item => {
-        this.handleChecklist(item["itemObject"], this.checkStatus === true ? true : false);
-        if (item.shadowRoot.querySelector("bcm-checkbox-lite")) {
-          item.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = this.checkStatus;
-        }
-        if (this.checkStatus === true) {
-          item.classList.add("selected");
-        }
-        else {
-          item.classList.remove("selected");
-        }
+      // 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")
+        //     }
+        // }
       });
-      this.listChecked.emit(this.checklist);
-      this.value = this.checklist;
-      this.sendSelectValue();
+      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.handleIndeterminateStatus();
   }
@@ -714,15 +1004,14 @@ export class BcmList {
    * @desc
    */
   sendSelectValue() {
-    if (this.type === 'select') {
-      const select = document.getElementById("bcm-list-select-" + this._internal_id);
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      const select = document.getElementById("bcm-list-select-" + this._id);
       if (select) {
-        // console.log("sendSelectValue")
         if (this.multiSelect === true) {
           select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
         }
         else {
-          select.setValue(this.value[this.value.length - 1][this.objectMapping["text"]]);
+          select.setValue(this.value[this.objectMapping["text"]]);
         }
       }
     }
@@ -733,7 +1022,8 @@ export class BcmList {
       'size-2': this.size === 'small' || this.size === 'medium',
       'size-3': this.size === 'large',
     });
-    const hostClasses = cs(this.hidden ? 'hidden' : null, {
+    const hostClasses = cs(this.hidden ? 'hidden' : null, 'type-' + this.type, {
+      'error': this.captionType == 'error' ? true : false,
       'show': this.isShow,
       'flex': this.minHeight != null || this.maxHeight != null,
       'full-width': this.fullWidth
@@ -742,6 +1032,7 @@ export class BcmList {
       'show': this.searchable,
     });
     const footer = cs('footer');
+    const captionClasses = cs('size-1', 'input-caption', 'caption-' + this.captionType);
     var customStyle = {
       'height': this.minHeight != null || this.maxHeight != null ? 'auto' : this.height,
       'min-height': this.minHeight != null ? this.minHeight : null,
@@ -752,27 +1043,43 @@ export class BcmList {
       'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
     };
     return (h(Host, { class: hostClasses, style: customStyle },
-      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, clearable: true }),
-        h("bcm-divider", null))),
-      this.multiSelect === true && (h("div", { 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("div", { class: classes },
-        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" }))),
-      this.infoFooter == true && (h("div", { class: footer },
-        h("bcm-text", { scale: "size-1", color: "grey-8" },
-          h("span", { id: "selected-item" }),
-          " Total ",
-          h("span", { id: "in-total" }, "0"),
-          " items found.")))));
+      (this.type === 'default' && this.processType === 'default' && this.label) && (h("label", { class: "label size-1" },
+        " ",
+        this.label,
+        " ",
+        this.required && ('*'),
+        "  ")),
+      h("main", { style: customStyle },
+        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" },
+            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" }))),
+        this.infoFooter == true && (h("div", { class: footer },
+          h("bcm-text", { scale: "size-1", color: "grey-8" },
+            h("span", { id: "selected-item" }),
+            " Total ",
+            h("span", { id: "in-total" }, "0"),
+            " items 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"; }
@@ -859,9 +1166,14 @@ export class BcmList {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'default' | 'select'",
-        "resolved": "\"default\" | \"select\"",
-        "references": {}
+        "original": "TypeProp",
+        "resolved": "\"autocomplete\" | \"default\" | \"multiselect\" | \"select\"",
+        "references": {
+          "TypeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -873,6 +1185,29 @@ export class BcmList {
       "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,
@@ -1093,7 +1428,7 @@ export class BcmList {
       "reflect": true,
       "defaultValue": "null"
     },
-    "infoFooter": {
+    "fullWidth": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -1107,17 +1442,22 @@ export class BcmList {
         "tags": [],
         "text": ""
       },
-      "attribute": "infofooter",
+      "attribute": "full-width",
       "reflect": true,
       "defaultValue": "false"
     },
-    "highlight": {
-      "type": "boolean",
+    "size": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "SizeProp",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeProp": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -1125,11 +1465,11 @@ export class BcmList {
         "tags": [],
         "text": ""
       },
-      "attribute": "highlight",
+      "attribute": "size",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "'medium'"
     },
-    "searchable": {
+    "infoFooter": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -1143,54 +1483,16 @@ export class BcmList {
         "tags": [],
         "text": ""
       },
-      "attribute": "searchable",
+      "attribute": "infofooter",
       "reflect": true,
       "defaultValue": "false"
     },
-    "searchPlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "searchplaceholder",
-      "reflect": true,
-      "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",
+    "searchable": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -1199,9 +1501,9 @@ export class BcmList {
         "tags": [],
         "text": ""
       },
-      "attribute": "return-field",
+      "attribute": "searchable",
       "reflect": true,
-      "defaultValue": "\"id\""
+      "defaultValue": "false"
     },
     "value": {
       "type": "any",
@@ -1239,47 +1541,6 @@ export class BcmList {
       "reflect": true,
       "defaultValue": "false"
     },
-    "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'"
-    },
     "clearable": {
       "type": "boolean",
       "mutable": false,
@@ -1392,9 +1653,14 @@ export class BcmList {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'primary' | 'success' | 'warning' | 'error' | 'default'",
+        "original": "captionTypeProp",
         "resolved": "\"default\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
-        "references": {}
+        "references": {
+          "captionTypeProp": {
+            "location": "import",
+            "path": "../../../types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -1461,6 +1727,11 @@ export class BcmList {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "searchText": {},
+    "captionCache": {},
+    "captionTypeCache": {}
+  }; }
   static get events() { return [{
       "method": "listSelected",
       "name": "bcm-list-selected",
@@ -1491,6 +1762,21 @@ export class BcmList {
         "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": {
@@ -1512,6 +1798,44 @@ export class BcmList {
           }]
       }
     },
+    "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>",
@@ -1550,6 +1874,25 @@ export class BcmList {
           }]
       }
     },
+    "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[]>",
@@ -1575,6 +1918,31 @@ export class BcmList {
           }]
       }
     },
+    "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[]>",
@@ -1638,12 +2006,84 @@ export class BcmList {
           }]
       }
     },
+    "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) => Promise<void>",
+        "signature": "(checkedItems?: Array<string> | string, reset?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
+          }, {
+            "tags": [],
+            "text": ""
           }],
         "references": {
           "Promise": {
@@ -1687,12 +2127,25 @@ export class BcmList {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "isShow",
+      "methodName": "handleOpen"
+    }, {
+      "propName": "value",
+      "methodName": "handleChange"
+    }]; }
   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",