bromcom-ui 2.3.58 → 2.3.59

package/dist/cjs/bcm-list.cjs.entry.js

@@ -1,1204 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-const utils = require('./utils-60414768.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();
-const BcmList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listSelected = index.createEvent(this, "bcm-list-selected", 7);
-    this.listChecked = index.createEvent(this, "bcm-list-checklist", 7);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    this.configObject = [];
-    this.isRendered = false;
-    this.firstRender = true;
-    this.linkedElementWidth = "100%";
-    this.bodyStyleOverflow = '';
-    this.dataLength = 0;
-    this.checklist = [];
-    this.otherList = [];
-    this.configured = false;
-    this.checkStatus = false;
-    this.resetSelected = false;
-    this.indeterminateStatus = false;
-    this.total = 0;
-    this.totalSearch = 0;
-    this.empty = false;
-    this.objectMapping = {
-      'id': "id",
-      'text': "text",
-      'selected': "selected",
-    };
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-    this._list_select_id = null;
-    this._list_id = null;
-    this.type = 'default';
-    this.processType = 'default';
-    this.hidden = false;
-    this.items = [];
-    this.isShow = true;
-    this.linkedComponent = null;
-    this.selectedId = null;
-    this.flex = false;
-    this.height = "256px";
-    this.minHeight = null;
-    this.maxHeight = null;
-    this.width = "100%";
-    this.minWidth = null;
-    this.maxWidth = null;
-    this.fullWidth = false;
-    this.size = 'medium';
-    this.infoFooter = false;
-    this.searchable = false;
-    this.highlight = true;
-    this.searchPlaceholder = "Search";
-    this.searchFields = ['text'];
-    this.returnField = "id";
-    this.searchData = null;
-    this.searchSub = "items";
-    this.searchText = "";
-    this.value = null;
-    this.multiSelect = false;
-    /******/
-    this.variableText = 'item';
-    this.clearable = false;
-    this.label = null;
-    this.placeholder = "Choose an option";
-    this.noCaption = false;
-    this.caption = null;
-    this.captionError = null;
-    this.captionType = 'default';
-    this.disabled = false;
-    this.name = null;
-    this.required = false;
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-    this.bodyStyleOverflow = document.querySelector("body").style.overflow;
-    const elementId = "bcm-list-select-" + this._id;
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      this.selectIsInitialize();
-      this.linkedComponent = elementId;
-    }
-    if (this.type !== 'default' || this.linkedComponent !== null) {
-      this.isShow = false;
-      this.el.classList.add("linked");
-      this.el.classList.remove("show");
-      this.handleLinkedComponent();
-    }
-    const slot = this.el.shadowRoot.querySelectorAll('bcm-list-item');
-    if (slot) {
-      slot.forEach(el => {
-        if (lowercase(el.tagName) === 'bcm-list-item') {
-          el.setAttribute("_internal_id", this._internal_id);
-        }
-      });
-    }
-  }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() {
-    const elementId = "bcm-list-select-" + this._id;
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      this.selectIsInitialize();
-      this.linkedComponent = elementId;
-    }
-    if (sessionStorage.getItem(this._internal_id + "-config")) {
-      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
-    }
-    setTimeout(() => {
-      const spinner = this.el.shadowRoot.querySelector('.spinner');
-      if (spinner) {
-        spinner.classList.remove("first-run");
-      }
-    }, 500);
-  }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  /**
-   * @desc
-   */
-  async hide() {
-    this.isShow = false;
-    document.querySelector("body").style.overflow = this.bodyStyleOverflow;
-  }
-  async setSearch(text) {
-    const searchInput = this.el.shadowRoot.querySelector("bcm-search");
-    if (searchInput) {
-      searchInput.setValue(text);
-      // searchInput.select()
-    }
-  }
-  async clearAndSelectSearch(select = true) {
-    if (this.searchable == true) {
-      // var searchInput = null
-      const searchInput = this.el.shadowRoot.querySelector("bcm-search");
-      // console.log(searchInput)
-      if (searchInput) {
-        searchInput.setClear();
-        if (select == true) {
-          searchInput.select();
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async show() {
-    if (this.processType == 'deselect') {
-      this.firstRender = true;
-      if (this.items != this.otherList) {
-        this.isRendered = false;
-        this.setData(this.otherList);
-      }
-    }
-    this.isShow = true;
-    this.renderList();
-    this.clearAndSelectSearch(true);
-  }
-  /**
-   * @desc
-   */
-  async renderList() {
-    if (this.items && this.isRendered === false) {
-      this.isRendered = true;
-      this.processData(this.items);
-    }
-    if (this.linkedComponent !== null) {
-      this.handleLinkedComponent();
-    }
-  }
-  /**
-   * @desc
-   */
-  async toggle() {
-    this.isShow = !this.isShow;
-  }
-  /**
-   * @desc
-   */
-  async openStatus() {
-    return this.isShow;
-  }
-  /**
-   * @desc
-   */
-  handleOpen(value) {
-    if (this.processType === "deselect") {
-      const listSelect = document.getElementById(this._list_select_id);
-      if (listSelect) {
-        const otherTag = listSelect.shadowRoot.querySelector("#other-tag");
-        if (otherTag) {
-          if (value === true) {
-            otherTag.setAttribute("color", "prime-blue");
-          }
-          else {
-            otherTag.removeAttribute("color");
-          }
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleChange(newValue) {
-    this.change.emit(newValue);
-  }
-  /**
-   * @desc
-   */
-  handleCaptionType() {
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      const element = document.getElementById("bcm-list-select-" + this._id);
-      if (element) {
-        element.caption = this.caption;
-        element.captionError = this.captionError;
-        element.captionType = this.captionType;
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async config(_config) {
-    if (_config['type']) {
-      this.type = _config['type'];
-    }
-    if (_config['searchPlaceholder']) {
-      this.searchPlaceholder = _config['searchPlaceholder'];
-    }
-    if (_config['searchFields']) {
-      this.searchFields = _config['searchFields'];
-    }
-    if (_config['returnField']) {
-      this.returnField = _config['returnField'];
-    }
-    if (_config['highlight']) {
-      this.highlight = _config['highlight'];
-    }
-    if (_config['linkedComponent'] && typeof _config['linkedComponent'] == 'string') {
-      this.linkedComponent = _config['linkedComponent'];
-    }
-    if (_config['searchable'] && typeof _config['searchable'] == 'boolean') {
-      this.searchable = _config['searchable'];
-    }
-    if (_config['infoFooter'] && typeof _config['infoFooter'] == 'boolean') {
-      this.infoFooter = _config['infoFooter'];
-    }
-    if (_config['mapping']) {
-      if (_config['mapping']['id']) {
-        this.objectMapping['id'] = _config['mapping']['id'];
-      }
-      if (_config['mapping']['text']) {
-        this.objectMapping['text'] = _config['mapping']['text'];
-      }
-      if (_config['mapping']['selected']) {
-        this.objectMapping['selected'] = _config['mapping']['selected'];
-      }
-    }
-    sessionStorage.setItem(this._internal_id + "-config", JSON.stringify(_config));
-    this.configured = true;
-    this.configObject = _config;
-    return _config;
-  }
-  /**
-   * @desc
-   */
-  async setDataOther(_data = []) {
-    this.otherList = _data;
-  }
-  /**
-   * @desc
-   */
-  async setData(_data = []) {
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      this.selectIsInitialize();
-    }
-    if (this.value !== null) {
-      this.setClear();
-    }
-    if (_data) {
-      typeof _data == 'string'
-        ? this.items = JSON.parse(_data)
-        : this.items = _data;
-      if (this.items) {
-        switch (this.processType) {
-          case 'default':
-            if (this.items.find(e => e[this.objectMapping['selected']])) {
-              var selectedIDs = [];
-              this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-                selectedIDs.push(element[this.objectMapping['id']]);
-              });
-              // if ( selectedIDs.length > 0 ) {
-              this.checked(selectedIDs);
-              // }
-            }
-            break;
-          case 'deselect':
-            var selectedIDs = [];
-            this.items.forEach(element => {
-              // element[ this.objectMapping['selected'] ] = true;
-              selectedIDs.push(element[this.objectMapping['id']]);
-            });
-            // if ( selectedIDs.length > 0 ) {
-            this.checked(selectedIDs);
-            // }
-            break;
-        }
-      }
-      this.calculatedTotals({ "total": this.items.length });
-      if (this.multiSelect === true) {
-        this.calculatedTotals({ "selected": selectedIDs ? selectedIDs.length : 0 });
-      }
-      this.isRendered = false;
-      if (this.linkedComponent === null) {
-        this.show();
-      }
-    }
-    if (this.type === 'autocomplete') {
-      this.renderList();
-    }
-    return _data;
-  }
-  /**
-   * @desc
-   */
-  async getValue() {
-    return this.value;
-  }
-  /**
-   * @desc
-   */
-  async getChecklist() {
-    return this.checklist;
-  }
-  /**
-   * @desc
-   */
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-    if (this.type === 'autocomplete' || this.type === 'select') {
-      const elementId = "bcm-list-select-" + this._id;
-      const element = document.getElementById(elementId);
-      if (element) {
-        element.resetCaption();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async toggleChecked(checkedItems = null) {
-    if (checkedItems !== null && checkedItems !== []) {
-      if (typeof checkedItems !== 'string') {
-        if (checkedItems.length == 1) {
-          checkedItems = String(checkedItems[0]);
-        }
-      }
-      var checkStatus = false;
-      if (typeof checkedItems == 'string') {
-        checkStatus = this.items.find(e => e[this.objectMapping['id']] == checkedItems)[this.objectMapping['selected']];
-      }
-      else {
-        let state = 'uncheck';
-        let allChecked = true;
-        let allUnchecked = true;
-        checkedItems.forEach((item) => {
-          if (String(this.items.find(e => e[this.objectMapping['id']] == item)[this.objectMapping['selected']]) === 'true') {
-            allUnchecked = false;
-          }
-          else {
-            allChecked = false;
-          }
-        });
-        !allChecked && !allUnchecked
-          ? state = 'determinate'
-          : allChecked
-            ? state = 'determinate'
-            : state = 'uncheck';
-        checkStatus = state == 'determinate' ? false : true;
-      }
-      // let state: string = 'uncheck'
-      // let allChecked: boolean = true
-      // let allUnchecked: boolean = true
-      // checkedItems.map((item) => {
-      //     item[ this.objectMapping['selected'] ] === true && (allUnchecked = false)
-      //     !item[ this.objectMapping['selected'] ] === true && (allChecked = false)
-      // });
-      // !allChecked && !allUnchecked 
-      // ? state = 'determinate'
-      // : allChecked
-      // ? state = 'determinate'
-      // : state = 'uncheck'
-      // const checkStatus = state == 'determinate' ? true : false
-      // const checkStatus = this.items.find( e => e[ this.objectMapping['id'] ] == checkedItems )[ this.objectMapping['selected'] ]
-      if (checkStatus === true) {
-        this.unChecked(checkedItems);
-      }
-      else {
-        // this.checked(checkedItems, false)
-        var selectedIDs = [];
-        // var checkItem = null
-        if (typeof checkedItems == 'string') {
-          // checkItem = this.sendSelectId( String(checkedItems), true)
-          selectedIDs.push(checkedItems);
-        }
-        else {
-          checkedItems.forEach((item) => {
-            selectedIDs.push(item);
-            // String(item[ this.objectMapping['selected'] ]) === 'true' && (allUnchecked = false),
-            // String(item[ this.objectMapping['selected'] ]) !== 'true' && (allChecked = false)
-          });
-          // this.sendSelectId( String(checkedItems), true)
-          // var selectedIDs = []
-          // if( this.items && this.items.find( e => e[ this.objectMapping['selected'] ] ) ){
-          //     this.items.filter( e => String( e[ this.objectMapping['selected'] ] ) === "true" ).forEach(element => {
-          //         selectedIDs.push( element )
-          //     });
-          // }
-          // this.value = selectedIDs
-          // this.listChecked.emit( this.value )
-          // this.handleIndeterminateStatus()
-          // this.sendSelectValue()
-        }
-        this.checked(selectedIDs, false);
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  async unChecked(checkedItems = null) {
-    if (checkedItems !== null && checkedItems !== []) {
-      if (typeof checkedItems !== 'string') {
-        if (checkedItems.length == 1) {
-          checkedItems = String(checkedItems[0]);
-        }
-      }
-      var selectedIDs = [];
-      this.selectedId = null;
-      if (typeof checkedItems == 'string') {
-        this.sendSelectId(String(checkedItems), false);
-      }
-      else {
-        checkedItems.forEach(item => {
-          this.sendSelectId(String(item), false);
-        });
-      }
-      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-          selectedIDs.push(element);
-        });
-      }
-      this.value = selectedIDs;
-      this.listChecked.emit(this.value);
-      this.handleIndeterminateStatus();
-      this.sendSelectValue();
-    }
-  }
-  /**
-   * @desc
-   */
-  async checked(checkedItems = null, reset = true) {
-    if (checkedItems !== null && checkedItems !== []) {
-      if (typeof checkedItems !== 'string') {
-        if (checkedItems.length == 1) {
-          checkedItems = String(checkedItems[0]);
-        }
-      }
-      var selectedIDs = [];
-      if (reset === true) {
-        if (this.items && this.items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
-          this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-            this.jsonDataProcess(element[this.objectMapping['id']], false);
-            this.sendSelectId(String(element[this.objectMapping['id']]), false);
-          });
-        }
-        this.setClear(false);
-      }
-      if (typeof checkedItems == 'string') {
-        this.sendSelectId(String(checkedItems));
-        if (this.multiSelect === false) {
-          this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
-        }
-      }
-      else {
-        if (this.multiSelect === true) {
-          checkedItems.forEach(item => {
-            this.sendSelectId(String(item));
-          });
-        }
-      }
-      // if ( this.multiSelect === false ){
-      //     this.selectedId = this.items.find( e => String(e[ this.objectMapping['id'] ]) === String(checkedItems) )[ this.objectMapping['id'] ]
-      // }
-      if (this.items && this.items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
-        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(item => {
-          selectedIDs.push(item);
-        });
-      }
-      this.value = selectedIDs;
-      this.listChecked.emit(this.value);
-      this.handleIndeterminateStatus();
-      this.sendSelectValue();
-    }
-  }
-  /**
-   * @desc
-   */
-  async setClear(eventEmit = true) {
-    if (this.items != undefined && this.items.length > 0 && this.items.find(e => e[this.objectMapping['selected']])) {
-      var selectedIDs = [];
-      this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-        selectedIDs.push(element[this.objectMapping['id']]);
-      });
-      this.unChecked(selectedIDs);
-    }
-    this.selectedId = null;
-    this.checklist = [];
-    if (eventEmit === true) {
-      this.listChecked.emit(this.checklist);
-      this.value = null;
-    }
-    this.handleIndeterminateStatus();
-    this.calculatedTotals({ "selected": this.checklist.length });
-  }
-  /**
-   * @desc
-   */
-  async processData(_data) {
-    this.handleLoading(true);
-    await utils.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 utils.delay(100);
-      _data.map(item => {
-        const element = document.createElement("bcm-list-item");
-        element.setAttribute("_internal_id", this._internal_id);
-        element.setAttribute("text", item[this.objectMapping['text']]);
-        element.setAttribute("id", String(item[this.objectMapping['id']]));
-        if (String(item[this.objectMapping['selected']]) === "true") {
-          // element.select()
-          checkedItems.push(String(item[this.objectMapping['id']]));
-        }
-        // element.setAttribute("item-object", JSON.stringify(item))
-        var object = item;
-        element.itemObject = object;
-        element.multiSelect = this.multiSelect === true ? true : false;
-        list.appendChild(element);
-        elementStatuses.push(element.componentOnReady());
-      });
-      const allStatuses = await Promise.all(elementStatuses);
-      if (allStatuses) {
-        if (checkedItems != []) {
-          checkedItems.forEach(item => {
-            // if ( this.sendSelectId( String(item) ) !== false ){
-            this.sendSelectId(String(item));
-            // }
-          });
-        }
-        this.handleLoading(false);
-        this.handleIndeterminateStatus();
-        this.firstRender = false;
-        return true;
-      }
-    }
-    else {
-      this.handleLoading(false);
-    }
-  }
-  /**
-   * @desc
-   */
-  handleLoading(show = false) {
-    const spinner = this.el.shadowRoot.querySelector('.spinner');
-    // const searchInput = this.el.shadowRoot.querySelector('#search');
-    if (show == true) {
-      spinner.classList.add("show");
-      // searchInput.setAttribute('readonly', 'true')
-    }
-    else {
-      spinner.classList.remove("show");
-      // searchInput.setAttribute('readonly', 'false')
-    }
-    if (this.linkedComponent !== null) {
-      this.handleLinkedComponent();
-    }
-  }
-  /**
-   * @desc
-   */
-  handleClick(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    // const elementId = "bcm-list-select-" + this._id
-    // console.log ( 
-    //     !!(
-    //         path 
-    //         && path.filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] 
-    //         && ( 
-    //             path.filter((input: HTMLElement) => input['id'] == "clear-button")[0] !== undefined 
-    //             || path.filter((input: HTMLElement) => input['id'] == "close-button")[0] !== undefined 
-    //             || path.filter((input: HTMLElement) => input['id'] == "close")[0] !== undefined 
-    //         )
-    //     )
-    // )
-    if (!this.el.contains(event.target)
-      || (path
-        && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
-        && path.filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
-        && this.multiSelect === false)) {
-      if (this.isShow === true) {
-        this.hide();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  wheelEvent(event) {
-    if (!this.el.contains(event.target)) {
-      if (this.isShow === true) {
-        this.hide();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  scrollEvent(event) {
-    if (!this.el.contains(event.target)) {
-      if (this.isShow === true) {
-        this.hide();
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  resizeEvent() {
-    utils.dropInComponent(this.el, "#" + this.linkedComponent);
-  }
-  /**
-   * @descc
-   */
-  onmousemove(e) {
-    if (this.el.contains(e.target)) {
-      if (document.querySelector("body").style.overflow != "hidden") {
-        document.querySelector("body").style.overflow = "hidden";
-      }
-    }
-    else {
-      if (document.querySelector("body").style.overflow != this.bodyStyleOverflow) {
-        document.querySelector("body").style.overflow = this.bodyStyleOverflow;
-      }
-    }
-  }
-  /**
-   * @descc
-   */
-  listenSearchResult(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (event.isEvent == undefined) {
-      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
-        // var childs: any[] = getChilds(this.el, 'bcm-list-item')
-        var childs = this.el.shadowRoot.querySelectorAll("bcm-list-item");
-        childs.forEach(element => {
-          element.classList.add("hidden");
-        });
-        if (event.detail.length > 0) {
-          if (event.detail[0] == -1) {
-            this.totalSearch = 0;
-            this.empty = true;
-          }
-          else {
-            this.totalSearch = event.detail.length;
-            this.empty = false;
-            if (this.dataLength > 0) {
-              childs.forEach(element => {
-                // if ( this.highlight ){
-                //     event.target.addEventListener('bcm-on-search-value', async(event: CustomEvent) => {
-                //         var searchValue = await event.detail
-                //         var inputText = element.shadowRoot.getElementById("text")
-                //         inputText = inputText.textContent || inputText.innerText || ""
-                //         if (searchValue) {
-                //             var cacheInputText = lowercase(inputText)
-                //             var cacheSearchValue = lowercase(searchValue)
-                //             var index = cacheInputText.indexOf(cacheSearchValue);
-                //             if (index >= 0) { 
-                //                 inputText = inputText.substring(0,index) + "<span class='highlight'>" + inputText.substring(index,index+searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
-                //             }
-                //         }
-                //         element.shadowRoot.getElementById("text").innerHTML = inputText;
-                //     })
-                // }
-                if (event.detail.indexOf(element._id) >= 0) {
-                  element.classList.remove("hidden");
-                }
-              });
-            }
-          }
-        }
-        else if (event.detail === true) {
-          this.totalSearch = this.dataLength;
-          this.empty = false;
-          childs.forEach(element => {
-            element.classList.remove("hidden");
-          });
-        }
-        this.handleIndeterminateStatus();
-        this.calculatedTotals({ "searchResult": this.totalSearch });
-      }
-    }
-  }
-  /**
-   * @descc
-   
-   */
-  sendSelectId(id, status = true) {
-    id = String(id);
-    if (this.items && this.items.find(e => String(e[this.objectMapping['id']]) == id)) {
-      this.selectedId = id;
-      if (this.isRendered === false) {
-        const findItem = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
-        findItem[this.objectMapping['selected']] = status;
-        this.handleChecklist(findItem, status);
-        return findItem;
-      }
-      else {
-        var selectedItem = null;
-        if (selectedItem = this.el.shadowRoot.getElementById(id)) {
-          if (status === true) {
-            selectedItem.classList.add("selected");
-          }
-          else {
-            selectedItem.classList.remove("selected");
-          }
-          if (this.multiSelect === true) {
-            this.handleChecklist(selectedItem["itemObject"], status);
-            // selectedItem.classList.toggle("selected")
-            if (selectedItem.shadowRoot.querySelector(".checkbox")) {
-              selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = status;
-            }
-          }
-          this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
-          return this.items.find(e => e[this.objectMapping['id']] == id);
-        }
-      }
-    }
-    return false;
-  }
-  /**
-   * @descc
-   */
-  jsonDataProcess(id, status) {
-    var item = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
-    if (item) {
-      item[this.objectMapping['selected']] = status;
-    }
-  }
-  /**
-   * @descc
-   */
-  handleListSelected(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
-      var status = false;
-      var selectedItem = null;
-      const itemId = this.getItemId(event);
-      if (this.multiSelect === false) {
-        if (selectedItem = utils.getChilds(this.el, "bcm-list-item").find(x => x._id === this.selectedId)) {
-          selectedItem.classList.remove("selected");
-          status = false;
-          // selectedItem.selected = false
-        }
-      }
-      selectedItem = this.el.shadowRoot.getElementById(itemId);
-      if (selectedItem) {
-        this.selectedId = selectedItem["id"];
-        // selectedItem.selected = true
-        if (this.multiSelect === true) {
-          selectedItem.classList.toggle("selected");
-          if (selectedItem.classList.contains("selected") === true) {
-            status = false;
-          }
-          else {
-            status = true;
-          }
-        }
-        else {
-          selectedItem.classList.add("selected");
-          status = true;
-        }
-      }
-      if (this.isInternalSlot(event)) {
-        if (selectedItem = path[0]) {
-          this.selectedId = path[0].id;
-          this.value = [event.detail];
-          return true;
-        }
-      }
-      if (this.multiSelect === true) {
-        this.handleChecklist(selectedItem["itemObject"], selectedItem.classList.contains("selected"));
-        this.listChecked.emit(this.checklist);
-        if (selectedItem.shadowRoot.querySelector(".checkbox")) {
-          selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = selectedItem.classList.contains("selected");
-        }
-        this.value = this.checklist;
-      }
-      else {
-        this.value = [event.detail];
-      }
-      if (this.processType === 'default') {
-        this.jsonDataProcess(this.selectedId, status);
-      }
-      this.handleIndeterminateStatus();
-      this.sendSelectValue();
-      if (this.processType === 'deselect') {
-        var element = document.querySelector("#" + this._list_id);
-        if (element) {
-          if (this.firstRender === false) {
-            element.toggleChecked(this.selectedId);
-          }
-          // element.unChecked(this.selectedId)
-        }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleChecklist(checkItem, process = true) {
-    if (this.items && this.items.find(e => e[this.objectMapping['id']] == checkItem[this.objectMapping['id']])) {
-      switch (process) {
-        case true:
-          if (this.checklist.length > 0) {
-            if (!this.checklist.includes(checkItem)) {
-              this.checklist = [...this.checklist, checkItem];
-            }
-          }
-          else {
-            this.checklist = [checkItem];
-          }
-          break;
-        case false:
-          this.checklist = this.checklist.filter(item => item[this.objectMapping['id']] !== checkItem[this.objectMapping['id']]);
-          break;
-      }
-      let sorted = this.checklist.sort(function (a, b) { return a - b; });
-      this.checklist = sorted;
-      // if ( this.firstRender === false ){
-      this.calculatedTotals({ "selected": this.checklist.length });
-      // }
-    }
-  }
-  /**
-   * @desc
-   */
-  handleIndeterminateStatus() {
-    if (this.multiSelect === true) {
-      this.checkStatus = false;
-      this.indeterminateStatus = false;
-      if (this.items != undefined && this.checklist != undefined) {
-        let state = 'uncheck';
-        let allChecked = true;
-        let allUnchecked = true;
-        utils.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;
-        }
-        var indeterminateCheckbox;
-        if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {
-          indeterminateCheckbox["checked"] = this.checkStatus;
-          indeterminateCheckbox["indeterminate"] = this.indeterminateStatus;
-        }
-        // if ( this.checklist.length == 0 ) {
-        //     this.checkStatus = false
-        //     this.indeterminateStatus = false
-        // } else if ( this.checklist.length == this.items.length ){
-        //     this.checkStatus = true
-        //     this.indeterminateStatus = false
-        // } else if ( this.checklist.length < this.items.length ){
-        //     this.checkStatus = false
-        //     this.indeterminateStatus = true
-        // } else {
-        //     this.checkStatus = false
-        //     this.indeterminateStatus = false
-        // }
-        // if ( this.multiSelect === true ){
-        var indeterminateCheckbox;
-        if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {
-          indeterminateCheckbox["checked"] = this.checkStatus;
-          indeterminateCheckbox["indeterminate"] = this.indeterminateStatus;
-        }
-        // }
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  calculatedTotals(calcObject) {
-    var searchResult = -1;
-    if (calcObject["selected"] != undefined) {
-      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#selected-item")) {
-        if (calcObject["selected"] > 0) {
-          this.el.shadowRoot.querySelector("#selected-item").innerHTML = "( " + calcObject["selected"] + " selected ) ";
-        }
-        else {
-          this.el.shadowRoot.querySelector("#selected-item").innerHTML = " ";
-        }
-      }
-    }
-    if (calcObject["searchResult"] != undefined) {
-      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#search-result")) {
-        if (calcObject["searchResult"] == this.total) {
-          this.el.shadowRoot.querySelector("#search-result").innerHTML = "";
-        }
-        else {
-          this.el.shadowRoot.querySelector("#search-result").innerHTML = calcObject["searchResult"] + " / ";
-        }
-        searchResult = calcObject["searchResult"];
-      }
-    }
-    if (calcObject["total"] != undefined) {
-      if (this.infoFooter == true && this.el.shadowRoot.querySelector("#in-total")) {
-        this.el.shadowRoot.querySelector("#in-total").innerHTML = calcObject["total"];
-        this.total = calcObject["total"];
-        this.el.shadowRoot.querySelector("#variable-text").innerHTML = utils.pluralize(this.variableText, calcObject["total"]);
-      }
-    }
-    const empty = this.el.shadowRoot.querySelector("#empty");
-    const selectAll = this.el.shadowRoot.querySelector("#check-container");
-    if (searchResult == 0 || this.total == 0) {
-      if (empty) {
-        empty.classList.add("show");
-      }
-      if (selectAll) {
-        selectAll.classList.add("hidden");
-      }
-    }
-    else {
-      if (empty) {
-        empty.classList.remove("show");
-      }
-      if (selectAll) {
-        selectAll.classList.remove("hidden");
-      }
-    }
-  }
-  /**
-   * @desc
-   */
-  getItemId(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && path[0].attributes
-      && path[0].attributes['id']
-      && path[0].attributes['id'].value;
-    return detect;
-  }
-  /**
-   * @desc
-   */
-  isInternalSlot(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && lowercase(path[0].tagName) === 'bcm-list-item'
-      && this.el.contains(path[0]);
-    return detect;
-  }
-  /**
-   * @desc
-   */
-  isInternal(event) {
-    var path = event.path || (event.composedPath && event.composedPath());
-    const detect = path
-      && path[0]
-      && path[0].attributes
-      && path[0].attributes['_internal_id']
-      && path[0].attributes['_internal_id'].value;
-    return detect == this._internal_id;
-  }
-  /**
-   * @desc
-   */
-  handleLinkedComponent() {
-    utils.dropInComponent(this.el, "#" + this.linkedComponent);
-    var element = null;
-    if (this.width == "100%" && (element = document.querySelector("#" + this.linkedComponent))) {
-      this.linkedElementWidth = element.clientWidth + "px";
-    }
-  }
-  /**
-   * @desc
-   */
-  async selectIsInitialize() {
-    const elementId = "bcm-list-select-" + this._id;
-    var element;
-    if (!document.getElementById(elementId)) {
-      element = document.createElement("bcm-list-select");
-    }
-    else {
-      element = document.getElementById(elementId);
-    }
-    element.setAttribute("id", elementId);
-    element.setAttribute("_list_id", this._id);
-    element.setAttribute("_internal_id", this._internal_id);
-    if (this.type) {
-      element.setAttribute("type", this.type);
-    }
-    if (this.clearable) {
-      element.setAttribute("clearable", this.clearable);
-    }
-    if (this.label) {
-      element.setAttribute("label", this.label);
-    }
-    if (this.variableText) {
-      element.setAttribute("variable-text", this.variableText);
-    }
-    if (this.placeholder) {
-      element.setAttribute("placeholder", this.placeholder);
-    }
-    if (this.noCaption) {
-      element.setAttribute("no-naption", this.noCaption);
-    }
-    if (this.caption) {
-      element.setAttribute("caption", this.caption);
-    }
-    if (this.captionError) {
-      element.setAttribute("caption-error", this.captionError);
-    }
-    if (this.captionType) {
-      element.setAttribute("caption-type", this.captionType);
-    }
-    if (this.disabled) {
-      element.setAttribute("disabled", this.disabled);
-    }
-    if (this.name) {
-      element.setAttribute("name", this.name);
-    }
-    if (this.required) {
-      element.setAttribute("required", this.required);
-    }
-    if (this.fullWidth) {
-      element.setAttribute("full-width", this.fullWidth);
-    }
-    if (this.multiSelect) {
-      element.setAttribute("multiselect", this.multiSelect);
-    }
-    const parentNode = this.el.parentNode;
-    parentNode.insertBefore(element, this.el);
-    return elementId;
-  }
-  /**
-   * @desc
-   */
-  handleCheckboxClick(e) {
-    e.preventDefault();
-  }
-  /**
-   * @desc
-   */
-  async handleIndeterminateClick(e) {
-    e.preventDefault();
-    let state = 'uncheck';
-    let allChecked = true;
-    let allUnchecked = true;
-    let visibleItem = [];
-    utils.getChilds(this.el, "bcm-list-item").map((item) => {
-      if (item.classList.contains("hidden") === false) {
-        visibleItem.push(item.id);
-        item.classList.contains("selected") === true && (allUnchecked = false);
-        !item.classList.contains("selected") === true && (allChecked = false);
-      }
-    });
-    !allChecked && !allUnchecked
-      ? state = 'indeterminate'
-      : allChecked
-        ? state = 'determinate'
-        : state = 'uncheck';
-    if (state === 'determinate') {
-      this.unChecked(visibleItem);
-    }
-    else {
-      this.checked(visibleItem, false);
-    }
-    this.handleIndeterminateStatus();
-  }
-  /**
-   * @desc
-   */
-  sendSelectValue() {
-    if (this.type === 'select' || this.type === 'autocomplete') {
-      const select = document.getElementById("bcm-list-select-" + this._id);
-      if (select) {
-        // if ( this.multiSelect === true ){
-        select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
-        // } else {
-        //     var val = null;
-        //     if ( this.value ){
-        //         debugger;
-        //         if ( typeof this.value === 'object'){
-        //             val = this.value
-        //         }else{
-        //             if ( this.value.length > 0 ){
-        //                 val = this.value[0]
-        //             }
-        //         }
-        //     }
-        //     // val = this.value[this.objectMapping["text"]]
-        //     select.setValue(val, this.objectMapping["id"], this.objectMapping["text"])
-        // }
-      }
-    }
-  }
-  render() {
-    const classes = index$1.classnames('list-container', this.size);
-    const listItem = index$1.classnames('list-item', this.size, {
-      'size-2': this.size === 'small' || this.size === 'medium',
-      'size-3': this.size === 'large',
-    });
-    const hostClasses = index$1.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 = index$1.classnames('search-container', {
-      'show': this.searchable,
-    });
-    const footer = index$1.classnames('footer');
-    const captionClasses = index$1.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 = {
-      'min-height': this.minHeight != null ? this.minHeight : null,
-      'max-height': this.maxHeight != null ? this.maxHeight : null,
-      'width': this.minWidth != null || this.maxWidth != null ? 'max-content' :
-        this.width != "100%" ? this.width : this.linkedElementWidth,
-      'min-width': this.minWidth != null ? this.minWidth == "100%" || this.minWidth == "auto" ? this.linkedElementWidth : this.minWidth : null,
-      'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
-    };
-    var mainStyle = Object.assign({ 'height': styleHeight }, customStyle);
-    var hostStyle = Object.assign({ 'height': styleHeight + labelAreaHeight }, customStyle);
-    return (index.h(index.Host, { class: hostClasses, style: hostStyle }, (this.type === 'default' && this.processType === 'default' && this.label) && (index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, type: this.captionType, value: this.label, required: this.required }))), index.h("main", { style: mainStyle }, this.searchable === true && (index.h("div", { class: searchContainer }, index.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 }), index.h("bcm-divider", null))), index.h("div", { class: classes }, this.multiSelect === true && (index.h("div", { id: "check-container", class: "check-container" }, index.h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, index.h("div", { class: "check-content" }, index.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"), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), index.h("slot", null), index.h("div", { class: "list" }), index.h("div", { class: "spinner first-run" }, index.h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" })), index.h("div", { id: "empty", class: "empty" }, index.h("bcm-empty", { size: "small", text: "No Data" }))), this.infoFooter == true && (index.h("div", { class: footer }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, this.multiSelect === true && (index.h("span", { id: "selected-item" })), "Total ", index.h("span", { id: "search-result" }), " ", index.h("span", { id: "in-total" }, "0"), " ", index.h("span", { id: "variable-text" }, " ", utils.pluralize(this.variableText)), " found.")))), (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (index.h("div", { class: "caption-area" }, this.captionType == "error"
-      ? index.h("span", { class: captionClasses }, " ", this.captionError, " ")
-      : this.caption && index.h("span", { class: captionClasses }, " ", this.caption, " ")))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "isShow": ["handleOpen"],
-    "value": ["handleChange"],
-    "captionType": ["handleCaptionType"]
-  }; }
-};
-BcmList.style = listCss;
-
-exports.bcm_list = BcmList;