bromcom-ui 2.3.49 → 2.3.50

package/dist/esm/bcm-badge_20.entry.js

@@ -6436,7 +6436,7 @@ const BcmInput = class {
 };
 BcmInput.style = inputCss;
 
-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;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;user-select:none;opacity:0}:host(.full-width){width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;z-index:100000}:host(.flex){width:100%;height:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.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}.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}.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 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:256px}: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: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;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;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}.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}.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$2 = (str) => str.toLowerCase();
 const BcmList = class {
@@ -6444,6 +6444,7 @@ const BcmList = class {
     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;
@@ -6507,6 +6508,8 @@ const BcmList = class {
     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') {
@@ -6532,6 +6535,11 @@ const BcmList = class {
   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")));
     }
@@ -6619,6 +6627,12 @@ const BcmList = class {
       }
     }
   }
+  /**
+   * @desc
+   */
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
   /**
    * @desc
    */
@@ -6721,6 +6735,14 @@ const BcmList = class {
   async getChecklist() {
     return this.checklist;
   }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
   /**
    * @desc
    */
@@ -6792,7 +6814,6 @@ const BcmList = class {
           // this.handleIndeterminateStatus()
           // this.sendSelectValue()
         }
-        // console.log("selectedIDs: ", selectedIDs)
         this.checked(selectedIDs, false);
       }
     }
@@ -6838,10 +6859,7 @@ const BcmList = class {
         this.setClear(false);
       }
       if (typeof checkedItems == 'string') {
-        if (this.sendSelectId(String(checkedItems)) !== false) {
-          this.sendSelectId(String(checkedItems));
-          // selectedIDs.push( checkItem )
-        }
+        this.sendSelectId(String(checkedItems));
         if (this.multiSelect === false) {
           this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems));
         }
@@ -6849,10 +6867,7 @@ const BcmList = class {
       else {
         if (this.multiSelect === true) {
           checkedItems.forEach(item => {
-            if (this.sendSelectId(String(item)) !== false) {
-              this.sendSelectId(String(item));
-              // selectedIDs.push( checkItem )
-            }
+            this.sendSelectId(String(item));
           });
         }
       }
@@ -6875,13 +6890,7 @@ const BcmList = class {
    */
   async setClear(eventEmit = true) {
     if (this.items != undefined && this.items.length > 0) {
-      // this.el.shadowRoot.querySelectorAll("bcm-list-item").forEach( item => {
-      //     if ( item.shadowRoot.querySelector(".checkbox") ){
-      //         item.shadowRoot.querySelector(".checkbox").querySelector("input").checked = false
-      //     }
-      //     item.classList.remove("selected")
-      // })
-      this.unChecked(Object.keys(this.items));
+      this.unChecked(this.items.map(item => { return item[this.objectMapping["id"]]; }));
     }
     this.selectedId = null;
     this.checklist = [];
@@ -6909,7 +6918,6 @@ const BcmList = class {
       this.searchData = _data;
       await delay(100);
       _data.map(item => {
-        // console.log(item)
         const element = document.createElement("bcm-list-item");
         element.setAttribute("_internal_id", this._internal_id);
         element.setAttribute("text", item[this.objectMapping['text']]);
@@ -6965,44 +6973,33 @@ const BcmList = class {
    * @desc
    */
   handleClick(event) {
-    // console.log(this.el.contains(event.target as HTMLElement) )
-    // console.log( 
-    //     event["path"] 
-    //     && event["path"].filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] 
-    //     && event["path"].filter((input: HTMLElement) => input['nodeName'] == "BCM-LIST-ITEM")[0]
-    //     && this.multiSelect === false
-    // )
+    var path = event.path || (event.composedPath && event.composedPath());
     if (!this.el.contains(event.target)
-      || (event["path"]
-        && event["path"].filter((input) => input['_internal_id'] == this._internal_id)[0]
-        && event["path"].filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
+      || (path
+        && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+        && path.filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
         && this.multiSelect === false)) {
       if (this.isShow === true) {
         this.hide();
       }
     }
-    // if ( event["path"]
-    // && event["path"].filter((input: HTMLElement) => input['id'] == "other-tag")[0]
-    // && event["path"].filter((input: HTMLElement) => input['_internal_id'] == this._internal_id)[0] ){
-    //     event.preventDefault();
-    //     event.stopPropagation();
-    //     console.log("clone aç")
-    //     // this.show("other")
-    //     const elementId = "bcm-clone-list-" + this._internal_id
-    //     var element:any = document.getElementById(elementId)
-    //     console.log(element)
-    //     // setTimeout(() => {
-    //         // this.hide()
-    //         element.show();
-    //     // }, 100);
-    // }
+  }
+  /**
+   * @desc
+   */
+  wheelEvent(event) {
+    if (!this.el.contains(event.target)) {
+      if (this.isShow === true) {
+        this.hide();
+      }
+    }
   }
   /**
    * @desc
    */
   scrollEvent(event) {
     if (!this.el.contains(event.target)) {
-      if (this.isShow) {
+      if (this.isShow === true) {
         this.hide();
       }
     }
@@ -7032,27 +7029,28 @@ const BcmList = class {
    * @descc
    
    */
-  listenSearchResult(e) {
-    if (e.isEvent == undefined) {
-      if (e["path"] && e["path"].filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+  listenSearchResult(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (event.isEvent == undefined) {
+      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
         // var childs: any[] = getChilds(this.el, 'bcm-list-item')
         var childs = this.el.shadowRoot.querySelectorAll("bcm-list-item");
         childs.forEach(element => {
           element.classList.add("hidden");
         });
-        if (e.detail.length > 0) {
-          if (e.detail[0] == -1) {
+        if (event.detail.length > 0) {
+          if (event.detail[0] == -1) {
             this.totalSearch = 0;
             this.empty = true;
           }
           else {
-            this.totalSearch = e.detail.length;
+            this.totalSearch = event.detail.length;
             this.empty = false;
             if (this.dataLength > 0) {
               childs.forEach(element => {
                 if (this.highlight) {
-                  e.target.addEventListener('bcm-on-search-value', async (e) => {
-                    var searchValue = await e.detail;
+                  event.target.addEventListener('bcm-on-search-value', async (event) => {
+                    var searchValue = await event.detail;
                     var inputText = element.shadowRoot.getElementById("text");
                     inputText = inputText.textContent || inputText.innerText || "";
                     if (searchValue) {
@@ -7066,14 +7064,14 @@ const BcmList = class {
                     element.shadowRoot.getElementById("text").innerHTML = inputText;
                   });
                 }
-                if (e.detail.indexOf(element._id) >= 0) {
+                if (event.detail.indexOf(element._id) >= 0) {
                   element.classList.remove("hidden");
                 }
               });
             }
           }
         }
-        else if (e.detail === true) {
+        else if (event.detail === true) {
           this.totalSearch = this.dataLength;
           this.empty = false;
           childs.forEach(element => {
@@ -7089,7 +7087,6 @@ const BcmList = class {
    
    */
   sendSelectId(id, status = true) {
-    // console.log(this.items.find( e => e[ this.objectMapping['id'] ] == id ))
     if (this.items && this.items.find(e => e[this.objectMapping['id']] == id)) {
       if (this.isRendered === false) {
         this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
@@ -7133,7 +7130,7 @@ const BcmList = class {
    * @descc
    */
   handleListSelected(event) {
-    // var path = event.path || (event.composedPath && event.composedPath());
+    var path = event.path || (event.composedPath && event.composedPath());
     // console.log(path);
     if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
       var status = false;
@@ -7165,8 +7162,8 @@ const BcmList = class {
         }
       }
       if (this.isInternalSlot(event)) {
-        if (selectedItem = event.path[0]) {
-          this.selectedId = event.path[0].id;
+        if (selectedItem = path[0]) {
+          this.selectedId = path[0].id;
           this.value = event.detail;
           return true;
         }
@@ -7283,32 +7280,35 @@ const BcmList = class {
    * @desc
    */
   getItemId(event) {
-    const detect = event.path
-      && event.path[0]
-      && event.path[0].attributes
-      && event.path[0].attributes['id']
-      && event.path[0].attributes['id'].value;
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['id']
+      && path[0].attributes['id'].value;
     return detect;
   }
   /**
    * @desc
    */
   isInternalSlot(event) {
-    const detect = event.path
-      && event.path[0]
-      && lowercase$2(event.path[0].tagName) === 'bcm-list-item'
-      && this.el.contains(event.path[0]);
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && lowercase$2(path[0].tagName) === 'bcm-list-item'
+      && this.el.contains(path[0]);
     return detect;
   }
   /**
    * @desc
    */
   isInternal(event) {
-    const detect = event.path
-      && event.path[0]
-      && event.path[0].attributes
-      && event.path[0].attributes['_internal_id']
-      && event.path[0].attributes['_internal_id'].value;
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['_internal_id']
+      && path[0].attributes['_internal_id'].value;
     return detect == this._internal_id;
   }
   /**
@@ -7417,7 +7417,7 @@ const BcmList = class {
         // }
       });
       if (this.checkStatus === true) {
-        this.checked(selectedIDs);
+        this.checked(selectedIDs, false);
       }
       else {
         this.unChecked(selectedIDs);
@@ -7431,9 +7431,9 @@ const BcmList = class {
           // element.unChecked(this.selectedId)
         }
       }
-      this.listChecked.emit(this.checklist);
-      this.value = this.checklist;
-      this.sendSelectValue();
+      // this.listChecked.emit( this.checklist )
+      // this.value = this.checklist
+      // this.sendSelectValue()
     }
     this.handleIndeterminateStatus();
   }
@@ -7442,7 +7442,6 @@ const BcmList = class {
    */
   sendSelectValue() {
     if (this.type === 'select' || this.type === 'autocomplete') {
-      // console.log(this.value)
       const select = document.getElementById("bcm-list-select-" + this._id);
       if (select) {
         if (this.multiSelect === true) {
@@ -7461,6 +7460,7 @@ const BcmList = class {
       'size-3': this.size === 'large',
     });
     const hostClasses = classnames(this.hidden ? 'hidden' : null, 'type-' + this.type, {
+      'error': this.captionType == 'error' ? true : false,
       'show': this.isShow,
       'flex': this.minHeight != null || this.maxHeight != null,
       'full-width': this.fullWidth
@@ -7469,6 +7469,7 @@ const BcmList = class {
       'show': this.searchable,
     });
     const footer = classnames('footer');
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + this.captionType);
     var customStyle = {
       'height': this.minHeight != null || this.maxHeight != null ? 'auto' : this.height,
       'min-height': this.minHeight != null ? this.minHeight : null,
@@ -7478,11 +7479,14 @@ const BcmList = class {
       '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.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))), this.multiSelect === true && (h("div", { class: "check-container" }, h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, h("div", { class: "check-content" }, h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })), "Select All"), h("div", { class: "divider" }, h("bcm-divider", null)))), h("div", { class: classes }, h("slot", null), h("div", { class: "list" }), h("div", { class: "spinner first-run" }, h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))), this.infoFooter == true && (h("div", { class: footer }, h("bcm-text", { scale: "size-1", color: "grey-8" }, h("span", { id: "selected-item" }), " Total ", h("span", { id: "in-total" }, "0"), " items found.")))));
+    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, " ")))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "isShow": ["handleOpen"]
+    "isShow": ["handleOpen"],
+    "value": ["handleChange"]
   }; }
 };
 BcmList.style = listCss;
@@ -7636,8 +7640,8 @@ const BcmListSelect = class {
       this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
       this.selectAreaWidth = this.selectArea.clientWidth;
     }
+    this.selectArea.style.width = "100%";
     this.handleTagControl();
-    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
     if (sessionStorage.getItem(this._internal_id + "-config")) {
       this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
     }
@@ -7656,6 +7660,14 @@ const BcmListSelect = class {
   handleBlur() {
     this.blur.emit();
   }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
   /**
    * @descc
    */
@@ -7734,6 +7746,11 @@ const BcmListSelect = class {
    * @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'];
     }
@@ -7828,6 +7845,7 @@ const BcmListSelect = class {
       // this.selectHiddenData = this.value
     }
     // console.log('this.otherList: ', this.otherList)
+    // this.resetCaption()
     return this.value;
   }
   /**
@@ -7857,7 +7875,6 @@ const BcmListSelect = class {
    * @descc
    */
   async handleTagControl() {
-    // debugger
     this.selectHiddenData = [];
     const tagcontainer = this.el.shadowRoot.getElementById("tagcontainer");
     if (tagcontainer) {
@@ -7873,8 +7890,9 @@ const BcmListSelect = class {
         element["style"]["position"] = "absolute";
       });
       tags.forEach(element => {
-        if ((this.selectAreaWidth - padding) > (element.clientWidth + 2 + tagsWidth)) {
-          tagsWidth += element.clientWidth + 2;
+        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";
         }
@@ -7887,7 +7905,8 @@ const BcmListSelect = class {
         if ((this.selectAreaWidth - padding) < (calcOther === true ? tagsWidth + otherTagWidth : tagsWidth)) {
           visibleTags = Array.from(tags).filter(e => e["hidden"] === false);
           if (visibleTags[visibleTags.length - 1]) {
-            tagsWidth -= visibleTags[visibleTags.length - 1].clientWidth + 2;
+            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);
           }
@@ -7956,6 +7975,7 @@ const BcmListSelect = class {
       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);
@@ -7982,24 +8002,25 @@ const BcmListSelect = class {
    * @desc
    */
   async handleClick(event) {
-    if (event["path"] && event["path"].filter((input) => input['_internal_id'] == this._internal_id)[0]) {
+    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 (event["path"].filter((input) => input['id'] == "close-button")[0]
-        && event["path"].filter((input) => input['className'] == "tag dissmisable size-1")[0]
-        && event["path"].filter((input) => input['className'] == "tag dissmisable size-1")[0]["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 = event["path"].filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"];
+        const selectedID = path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"];
         if (element) {
           element.unChecked(selectedID);
         }
       }
-      if (event["path"].filter((input) => input['id'] == "other-tag")[0]) {
+      if (path.filter((input) => input['id'] == "other-tag")[0]) {
         event.preventDefault();
         event.stopPropagation();
-        if (event["path"].filter((input) => input['id'] == "close")[0]) {
+        if (path.filter((input) => input['id'] == "close")[0]) {
           if (cloneElement) {
             if (await cloneElement.openStatus() === true) {
               if (element) {
@@ -8063,7 +8084,7 @@ const BcmListSelect = class {
     //       <slot />
     //     </div>
     // </Host>
-    h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("label", { class: "label size-1", onClick: () => this.handleOpen() }, " ", label, " ", 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", { "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", value: this.searchText, "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (h("div", { class: "buttons" }, clearable && value && (h("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(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("label", { class: "label size-1", onClick: () => this.handleOpen() }, " ", label, " ", required === true && ('*'), "  "), 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", { "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", value: this.searchText, "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (h("div", { class: "buttons" }, clearable && value && (h("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, " "))))));
   }