bromcom-ui 2.3.56 → 2.3.60

package/dist/{collection/components/molecules/list/list.js → bromcom-ui/bcm-list.entry.js}

@@ -1,9 +1,16 @@
-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 { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { d as delay, b as dropInComponent, a as getChilds, p as pluralize } from './utils-1feb01eb.js';
+
+const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;position:relative;user-select:none;width:fit-content;height:fit-content}:host main{width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;padding-top:8px}:host(.full-width){width:100%}:host(.full-width) main{width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;visibility:hidden !important;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;visibility:visible !important;z-index:100000}:host(.flex){width:100%;height:100%}:host(.flex) main{width:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}:host(.error) .label{color:var(--bcm-color-red-6) !important}:host(.error) main{border:1px solid var(--bcm-color-red-6) !important}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.check-container{display:block}.check-container.hidden{display:none}.empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.empty.show{display:flex}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.8}.spinner.first-run{visibility:visible;opacity:0.9}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;margin:0 8px}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
+
 const lowercase = (str) => str.toLowerCase();
-export class BcmList {
-  constructor() {
+const BcmList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listSelected = createEvent(this, "bcm-list-selected", 7);
+    this.listChecked = createEvent(this, "bcm-list-checklist", 7);
+    this.change = createEvent(this, "bcm-change", 7);
     this.configObject = [];
     this.isRendered = false;
     this.firstRender = true;
@@ -16,6 +23,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 +53,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 +63,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 +87,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 +139,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,11 +154,14 @@ 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
@@ -198,6 +212,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
    */
@@ -252,7 +279,9 @@ export class BcmList {
    * @desc
    */
   async setData(_data = []) {
-    this.selectIsInitialize();
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+    }
     if (this.value !== null) {
       this.setClear();
     }
@@ -480,7 +509,7 @@ export class BcmList {
           selectedIDs.push(item);
         });
       }
-      this.value = this.multiSelect === true ? selectedIDs : selectedIDs[0];
+      this.value = selectedIDs;
       this.listChecked.emit(this.value);
       this.handleIndeterminateStatus();
       this.sendSelectValue();
@@ -493,7 +522,7 @@ export class BcmList {
     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);
+        selectedIDs.push(element[this.objectMapping['id']]);
       });
       this.unChecked(selectedIDs);
     }
@@ -501,8 +530,8 @@ export class BcmList {
     this.checklist = [];
     if (eventEmit === true) {
       this.listChecked.emit(this.checklist);
+      this.value = null;
     }
-    this.value = null;
     this.handleIndeterminateStatus();
     this.calculatedTotals({ "selected": this.checklist.length });
   }
@@ -527,16 +556,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 (this.type !== "autocomplete") {
-          if (String(item[this.objectMapping['selected']]) === "true") {
-            // element.select()
-            checkedItems.push(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;
+        element.multiSelect = this.multiSelect === true ? true : false;
         list.appendChild(element);
         elementStatuses.push(element.componentOnReady());
       });
@@ -550,6 +577,7 @@ export class BcmList {
           });
         }
         this.handleLoading(false);
+        this.handleIndeterminateStatus();
         this.firstRender = false;
         return true;
       }
@@ -581,6 +609,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]
@@ -634,7 +674,6 @@ export class BcmList {
   }
   /**
    * @descc
-   
    */
   listenSearchResult(event) {
     var path = event.path || (event.composedPath && event.composedPath());
@@ -685,7 +724,8 @@ export class BcmList {
             element.classList.remove("hidden");
           });
         }
-        this.calculatedTotals({ "total": this.totalSearch });
+        this.handleIndeterminateStatus();
+        this.calculatedTotals({ "searchResult": this.totalSearch });
       }
     }
   }
@@ -772,7 +812,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;
         }
       }
@@ -785,7 +825,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);
@@ -840,29 +880,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;
         }
+        // }
       }
     }
   }
@@ -870,19 +941,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");
       }
     }
   }
@@ -955,6 +1058,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);
     }
@@ -1000,50 +1106,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();
   }
@@ -1054,42 +1137,49 @@ export class BcmList {
     if (this.type === 'select' || this.type === 'autocomplete') {
       const select = document.getElementById("bcm-list-select-" + this._id);
       if (select) {
-        select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
         // if ( this.multiSelect === true ){
+        select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
         // } else {
         //     var val = null;
-        //     if ( typeof this.value === 'string'){
-        //         val = this.value[this.objectMapping["text"]]
-        //     }else{
-        //         if ( this.value.length === 1 ){
-        //             val = this.value[0][this.objectMapping["text"]]
+        //     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)
+        //     select.setValue(val, this.objectMapping["id"], this.objectMapping["text"])
         // }
       }
     }
   }
   render() {
-    const classes = cs('list-container', this.size);
-    const listItem = cs('list-item', this.size, {
+    const classes = classnames('list-container', this.size);
+    const listItem = classnames('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, {
+    const hostClasses = classnames(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', {
+    const searchContainer = classnames('search-container', {
       'show': this.searchable,
     });
-    const footer = cs('footer');
-    const captionClasses = cs('size-1', 'input-caption', 'caption-' + this.captionType);
+    const footer = classnames('footer');
+    const captionClasses = classnames('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' :
@@ -1097,1158 +1187,19 @@ 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 },
-        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,
-          " ")))));
+    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"
-    },
-    "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"
-    },
-    "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"
-    }
-  }; }
-  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
-          }]
-      }
-    }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "isShow": ["handleOpen"],
+    "value": ["handleChange"],
+    "captionType": ["handleCaptionType"]
   }; }
-  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",
-      "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
-    }]; }
-}
+};
+BcmList.style = listCss;
+
+export { BcmList as bcm_list };