bromcom-ui 2.3.54 → 2.3.58

package/dist/esm/bcm-list-select.entry.js

@@ -0,0 +1,654 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+import { d as delay, p as pluralize } from './utils-de9aee67.js';
+
+const listSelectCss = "@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}.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:inline-block;width:256px;margin:0 0 8px 0;overflow:hidden;max-width:100%}:host(.hidden){display:none}:host(.full-width){width:100%}:host(.type-autocomplete) #selected-container{border:none}:host(.type-autocomplete) #selected-container .selected-text{padding:0;border:none}:host(.type-autocomplete) #selected-container .selected-text bcm-input{display:contents}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer;border-radius:2px;position:relative}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center;overflow:hidden}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-text .text-content.autocomplete{position:absolute;z-index:1;padding-left:7px;background-color:#ffffff;margin-left:2px}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}.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.9}.spinner.first-run{visibility:visible;opacity:1}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px;height:20px}.tag[hidden]{opacity:0 !important;position:absolute !important;z-index:-1}.tag .value{cursor:pointer;max-width:164px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.tag.size-large{padding:calc(40px - 8px) 40px}.tag.size-medium{padding:calc(32px - 8px) 32px}.tag.size-small{padding:calc(24px - 8px) 24px}.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer;fill:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover{fill:var(--bcm-color-grey-10)}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}";
+
+const BcmListSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.clear = createEvent(this, "bcm-clear", 7);
+    this.focus = createEvent(this, "bcm-focus", 7);
+    this.blur = createEvent(this, "bcm-blur", 7);
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'selected': "selected",
+    };
+    this.hidden = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this._list_id = null;
+    this.value = null;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.type = 'default';
+    this.variableText = 'item';
+    this.size = 'medium';
+    this.placeholder = "Choose an option";
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.fullWidth = false;
+    this.required = false;
+    this.multiSelect = false;
+    // search variables 
+    this.searchData = null;
+    this.searchPlaceholder = "Search";
+    this.searchFields = ['text'];
+    this.returnField = "id";
+    this.searchSub = "items";
+    this.searchText = "";
+    this.captionCache = null;
+    this.captionTypeCache = null;
+    this.isOpen = false;
+    this.firstRun = true;
+    this.selectArea = null;
+    this.selectAreaWidth = 0;
+    this.selectHiddenData = [];
+    this.otherList = [];
+    this.selectText = null;
+    this.selectData = [];
+    this.focusInput = false;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() {
+    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+    this.selectAreaWidth = this.selectArea.clientWidth;
+    setTimeout(() => {
+      const spinner = this.el.shadowRoot.querySelector('.spinner');
+      spinner.classList.remove("first-run");
+    }, 100);
+  }
+  componentWillRender() { }
+  componentDidRender() {
+    if (this.selectAreaWidth === 0) {
+      this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+      this.selectAreaWidth = this.selectArea.clientWidth;
+    }
+    this.selectArea.style.width = "100%";
+    this.handleTagControl();
+    if (sessionStorage.getItem(this._internal_id + "-config")) {
+      this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+    }
+  }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @descc
+   */
+  handleFocus() {
+    this.focus.emit();
+  }
+  /**
+   * @descc
+   */
+  handleBlur(type = "host") {
+    type === "input" && (this.focusInput = false);
+    this.blur.emit();
+  }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  /**
+   * @desc
+   */
+  async setClear() {
+    this.selectText = null;
+    this.value = null;
+    this.selectData = [];
+  }
+  /**
+   * @descc
+   */
+  async handleOpen(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      if (element.classList.contains("show") === true) {
+        element.hide();
+      }
+      else {
+        element.show();
+      }
+    }
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         // var inputValue = await autocompleteInput.getValue()
+    //         // if ( inputValue && inputValue.length > 0 ) {
+    //             if ( element != null ){
+    //                 // this.setClear()
+    //                 // autocompleteInput.setFocus()
+    //                 // await delay(100)
+    //                 autocompleteInput.select()
+    //                 // if( element.classList.contains("show") === true ) {
+    //                 //     this.setClear()
+    //                 //     autocompleteInput.setFocus()
+    //                 //     autocompleteInput.select()
+    //                 // }
+    //             }
+    //         // }
+    //     }
+    // }
+  }
+  /**
+   * @desc
+   */
+  async hide(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      element.hide();
+    }
+  }
+  /**
+   * @desc
+   */
+  async show(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      element.show();
+    }
+  }
+  /**
+   * @desc
+   */
+  async toggle(list = "default") {
+    this.handleOpen(list);
+  }
+  /**
+   * @descc
+   */
+  handleChange(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+      && path.filter((input) => input['id'] == "autocomplete") != undefined) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  /**
+   * @descc
+   */
+  handleClear(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path
+      && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+      && path.filter((input) => input['id'] == "autocomplete") != undefined) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.clickClear();
+    }
+  }
+  /**
+   * @descc
+   */
+  clickClear(event = null) {
+    const element = document.querySelector("#" + this._list_id);
+    if (element) {
+      element.setClear(false);
+    }
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  /**
+   * @desc
+   */
+  async config(_config) {
+    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+    this.selectArea.style.width = "100%";
+    this.selectAreaWidth = this.selectArea.clientWidth;
+    this.handleTagControl();
+    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
+    if (_config['searchPlaceholder']) {
+      this.searchPlaceholder = _config['searchPlaceholder'];
+    }
+    if (_config['searchFields']) {
+      this.searchFields = _config['searchFields'];
+    }
+    if (_config['returnField']) {
+      this.returnField = _config['returnField'];
+    }
+    if (_config['searchSub']) {
+      this.searchSub = _config['searchSub'];
+    }
+    if (_config['searchText']) {
+      this.searchText = _config['searchText'];
+    }
+    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'];
+      }
+    }
+    return _config;
+  }
+  /**
+   * @descc
+   */
+  async setValue(value, _id = "id", _text = "text") {
+    // debugger;
+    // if ( !value || value.length == 0 ) {
+    //     this.selectText = null; 
+    //     this.value = null; 
+    //     this.selectData = []
+    //     this.otherList = []
+    //     return false;
+    // }
+    let val = "";
+    if (this.multiSelect === false) {
+      if (value && value.length > 0) {
+        val = value[0][_text];
+      }
+      value = val;
+    }
+    var newValue = value;
+    const autocompleteInput = this.el.shadowRoot.querySelector("#autocomplete");
+    if (autocompleteInput) {
+      autocompleteInput.setValue(value);
+      this.searchText = value;
+      this.search("", false);
+    }
+    // this.selectText = newValue
+    // this.searchData = JSON.parse(value as string)
+    this.handleLoading(true);
+    this.selectData = [];
+    this.otherList = [];
+    if (typeof value == 'string') {
+      if (this.value !== value) {
+        this.selectText = String(val);
+        this.value = this.selectText;
+      }
+      this.handleLoading(false);
+    }
+    else {
+      if (value) {
+        value.forEach(item => {
+          // console.log(item[id] + " " + item[text])
+          this.selectData.push({ id: item[_id], text: item[_text], selected: true });
+        });
+      }
+      if (this.value !== this.selectData) {
+        this.value = this.selectData;
+        if (value) {
+          newValue.forEach(element => {
+            // element[this.objectMapping['id']] = element[this.objectMapping['id']]
+            element[this.objectMapping['selected']] = true;
+          });
+        }
+        this.otherList = newValue;
+        var visibleTags = this.el.shadowRoot.getElementById("visible-tags");
+        if (visibleTags) {
+          visibleTags.innerHTML = " ";
+          const maxTags = Math.ceil((this.selectAreaWidth - 16) / 40);
+          const visibleSelectData = this.selectData.slice(0, maxTags);
+          visibleSelectData.map((item) => {
+            const newTag = document.createElement("span");
+            newTag.setAttribute("id", String(item["id"]));
+            newTag.setAttribute("value", item["text"]);
+            newTag.setAttribute("title", item["text"]);
+            newTag.setAttribute("_internal_id", this._internal_id);
+            // newTag.customStyle = customStyleTag
+            newTag.style.opacity = "0";
+            newTag.style.position = "absolute";
+            newTag.classList.add("tag");
+            newTag.classList.add("dissmisable");
+            newTag.classList.add("size-1");
+            newTag.setAttribute("_internal_id", this._internal_id);
+            newTag.innerHTML = '<span class="value"> ' + item["text"] + ' </span>'
+              + '<span id="close-button" ' + '_internal_id="' + this._internal_id + '" class="right close-button"> '
+              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> '
+              + '<g id="icon/outlined/suggested/close">'
+              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" />'
+              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" />'
+              + '</g>'
+              + '</svg>'
+              + '</span>';
+            visibleTags.appendChild(newTag);
+          });
+        }
+      }
+      // this.selectHiddenData = this.value
+    }
+    // console.log('this.otherList: ', this.otherList)
+    // this.resetCaption()
+    // console.log('this.value: ', this.value)
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         autocompleteInput.setValue(this.value)
+    //         // autocompleteInput.select()
+    //     }
+    // }
+    return this.value;
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  handleLoading(show = false) {
+    const spinner = this.el.shadowRoot.querySelector('.spinner');
+    if (show == true) {
+      spinner.classList.add("show");
+    }
+    else {
+      spinner.classList.remove("show");
+    }
+  }
+  /**
+   * @descc
+   */
+  resizeEvent() {
+    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+    this.selectArea.style.width = "100%";
+    this.selectAreaWidth = this.selectArea.clientWidth;
+    this.handleTagControl();
+    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
+  }
+  /**
+   * @descc
+   */
+  async handleTagControl() {
+    this.selectHiddenData = [];
+    const tagcontainer = this.el.shadowRoot.getElementById("tagcontainer");
+    if (tagcontainer) {
+      var tags = tagcontainer.querySelectorAll(".tag");
+      var tagsWidth = 0;
+      // var otherStatus = false
+      var otherTagWidth = 135 + 2;
+      var padding = 16;
+      var visibleTags = [];
+      tags.forEach(element => {
+        element["hidden"] = false;
+        element["style"]["opacity"] = "0";
+        element["style"]["position"] = "absolute";
+      });
+      tags.forEach(element => {
+        var clientWidth = element.clientWidth <= 200 ? element.clientWidth : 200;
+        if ((this.selectAreaWidth - padding) > (clientWidth + 2 + tagsWidth)) {
+          tagsWidth += clientWidth + 2;
+          element["style"]["opacity"] = "1";
+          element["style"]["position"] = "relative";
+        }
+        else {
+          element["hidden"] = true;
+          // otherStatus = true
+        }
+      });
+      const removeTag = (calcOther = false) => {
+        if ((this.selectAreaWidth - padding) < (calcOther === true ? tagsWidth + otherTagWidth : tagsWidth)) {
+          visibleTags = Array.from(tags).filter(e => e["hidden"] === false);
+          if (visibleTags[visibleTags.length - 1]) {
+            var clientWidth = visibleTags[visibleTags.length - 1].clientWidth <= 200 ? visibleTags[visibleTags.length - 1].clientWidth : 200;
+            tagsWidth -= clientWidth + 2;
+            visibleTags[visibleTags.length - 1]["hidden"] = true;
+            removeTag(calcOther);
+          }
+        }
+      };
+      removeTag();
+      await delay(100);
+      tags = tagcontainer.querySelectorAll(".tag");
+      var hiddenData = Array.from(tags).filter(e => e["hidden"] === true);
+      const otherTagcontainer = this.el.shadowRoot.getElementById("other-container");
+      if (Number(hiddenData.length) > 0) {
+        removeTag(true);
+        if (otherTagcontainer) {
+          otherTagcontainer.style.display = "flex";
+          const otherTag = otherTagcontainer.querySelector("bcm-tag");
+          if (otherTag) {
+            this.selectHiddenData = this.otherList;
+            Array.from(tags).filter(e => e["hidden"] === false).forEach(element => {
+              this.selectHiddenData = this.selectHiddenData.filter(e => String(e[this.objectMapping['id']]) !== String(element.id));
+            });
+            otherTag.setAttribute("value", this.selectHiddenData.length + " " + pluralize(this.variableText, this.selectHiddenData.length) + " selected");
+            var result = Object.keys(this.selectHiddenData).map((key) => (this.selectHiddenData[key][this.objectMapping['text']]).substring(0, 15) + "...").slice(0, 10) + "\r\n...";
+            const hiddenTagsString = result.toString().split(',').join("\r\n");
+            otherTag.setAttribute("title", hiddenTagsString);
+          }
+        }
+        const cloneList = this.listIsInitialize();
+        if (cloneList) {
+          if (sessionStorage.getItem(this._internal_id + "-config")) {
+            cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
+          }
+          // console.log('selectHiddenData: ',    this.selectHiddenData )
+          cloneList.setDataOther(this.selectHiddenData);
+          // cloneList.show()
+        }
+      }
+      else {
+        if (otherTagcontainer) {
+          otherTagcontainer.style.display = "none";
+        }
+      }
+    }
+    // await delay(100)
+    this.handleLoading(false);
+  }
+  /**
+   * @desc
+   */
+  valueWatch(newValue) {
+    if (Array.isArray(newValue) && newValue.length == 0) {
+      this.value = "";
+    }
+  }
+  /**
+  * @desc
+  */
+  listIsInitialize() {
+    // console.log("olusturuldu")
+    var element;
+    const elementId = "bcm-clone-list-" + this._internal_id;
+    const otherListInternalId = (Math.random() * 4).toString(16).replace('.', '');
+    if (!document.getElementById(elementId)) {
+      element = document.createElement("bcm-list");
+      var el = document.getElementById(this._list_id);
+      for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
+        element.setAttribute(atts[i].nodeName, atts[i].nodeValue);
+      }
+      element.setAttribute("id", elementId);
+      element.setAttribute("_list_id", this._list_id);
+      element.setAttribute("_list_select_id", this._id);
+      element.setAttribute("_internal_id", otherListInternalId);
+      element.searchable = true;
+      element.infoFooter = false;
+      element.type = "default";
+      element.processType = "deselect";
+      element.setAttribute("linked-component", this._id);
+      element.linkedComponent = this._id;
+      element.multiSelect = true;
+      const parentNode = this.el.parentNode;
+      parentNode.insertBefore(element, this.el);
+    }
+    else {
+      element = document.getElementById(elementId);
+    }
+    // 
+    return element;
+  }
+  /**
+   * @descc
+   */
+  inputChange(e) {
+    if (this.searchText !== e) {
+      this.searchText = e;
+      this.search(e);
+    }
+  }
+  search(value, show = true) {
+    const element = document.getElementById(this._list_id);
+    if (element != null) {
+      element.setSearch(value);
+      if (show) {
+        this.show();
+      }
+    }
+    // if ( this.type === "autocomplete" ) {
+    //     const autocompleteInput:any = this.el.shadowRoot.querySelector("#autocomplete")
+    //     if ( autocompleteInput ) {
+    //         autocompleteInput.setFocus()
+    //         // autocompleteInput.select()
+    //     }
+    // }
+  }
+  /**
+   * @desc
+   */
+  async handleClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0]) {
+      const cloneElementId = "bcm-clone-list-" + this._internal_id;
+      const cloneElement = document.querySelector("#" + cloneElementId);
+      const element = document.querySelector("#" + this._list_id);
+      if (path.filter((input) => input['id'] == "close-button")[0]
+        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]
+        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"]) {
+        event.preventDefault();
+        event.stopPropagation();
+        const selectedID = path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"];
+        if (element) {
+          element.unChecked(selectedID);
+        }
+      }
+      if (path.filter((input) => input['id'] == "other-tag")[0]) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (path.filter((input) => input['id'] == "close")[0]) {
+          if (cloneElement) {
+            if (await cloneElement.openStatus() === true) {
+              if (element) {
+                element.show();
+              }
+            }
+          }
+          var selectedIDs = [];
+          this.selectHiddenData.forEach(item => {
+            selectedIDs.push(item[this.objectMapping['id']]);
+          });
+          if (element) {
+            element.unChecked(selectedIDs);
+          }
+        }
+        else {
+          if (cloneElement) {
+            setTimeout(() => {
+              cloneElement.show();
+            }, 100);
+          }
+        }
+      }
+      if (this.type === "autocomplete") {
+        if (path.filter((input) => input['id'] == this._id)[0] !== undefined) {
+          // if ( path.filter((input: HTMLElement) => input['id'] == "autocomplete")[0] 
+          //   || path.filter((input: HTMLElement) => input['id'] == "autocomplete-text")[0]  ) { 
+          const autocompleteInput = this.el.shadowRoot.querySelector("#autocomplete");
+          if (autocompleteInput) {
+            // autocompleteInput.setClear()
+            // if ( element ) {
+            //     element.setClear()
+            // }      
+            // this.setClear()
+            // await delay(100)
+            // autocompleteInput.setFocus()
+            await delay(100);
+            autocompleteInput.select();
+            // this.focusInput = true
+          }
+        }
+      }
+    }
+  }
+  render() {
+    const { label, fullWidth, required, selectText, selectData, placeholder, clearable, value, isOpen, noCaption, captionType, captionError, caption, size, disabled } = this;
+    // const classes = cs(
+    //     'card',
+    //     this.size
+    // )
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, 'type-' + this.type, {
+      'full-width': fullWidth
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    const container = classnames('container', {
+      'error': captionType == 'error' ? true : false,
+      'full-width': fullWidth
+    });
+    const selectedText = classnames('selected-text');
+    const selected = classnames('selected', 'selected-' + size, {
+      'size-3': size === 'large',
+      'size-2': size === 'small' || size === 'medium',
+      'disabled': disabled
+    });
+    // const customStyleTag = {
+    //     'cursor': 'pointer',
+    //     'max-width': '164px',
+    //     'text-overflow': 'ellipsis',
+    //     'white-space': 'nowrap',
+    //     'overflow': 'hidden',
+    //     'display': 'block'
+    // }
+    const customStyleOtherTag = {
+      'cursor': 'pointer',
+      'white-space': 'nowrap'
+    };
+    return (
+    // <Host class={hostClasses}>
+    //     <div class={classes}>
+    //       <slot />
+    //     </div>
+    // </Host>
+    h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("div", null, h("bcm-label", { onClick: () => this.handleOpen(), tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 }, h("span", { class: selectedText, title: selectText !== null && (selectText) }, h("div", { class: "spinner first-run" }), this.type === 'select' && (selectText !== null && (h("div", { class: "text-content" }, selectText))), (this.type === 'select' || this.type === 'autocomplete' && this.multiSelect === true) && (selectText === null && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", { id: "visible-tags" }), h("span", { id: "other-container" }, h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))), this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (h("span", { class: "placeholder" }, " ", placeholder, " "))), this.type === 'autocomplete' && (h("bcm-input", { _internal_id: this._internal_id, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur("input"), "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (h("div", { class: "buttons" }, clearable && value && (h("button", { id: "clear-button", class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), h("span", { class: isOpen ? 'open' : 'close' }, h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))), noCaption === false && (h("div", { class: "caption-area" }, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueWatch"]
+  }; }
+};
+BcmListSelect.style = listSelectCss;
+
+export { BcmListSelect as bcm_list_select };