bromcom-ui 2.8.1-rc.1 → 2.8.1-rc.3

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

@@ -12,17 +12,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { IsLoad, JsonParse } from '@bcm/decorator';
-import { Generate, NumberHelper, Validators } from '@bcm/helpers';
-import { Bcm } from '@bcm/model';
-import { CaptionTemplate, LabelTemplate, ListTemplate } from '@bcm/template';
-import { delay, getPlacement, setPosition } from '@bcm/utils';
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import snq from 'snq';
-import listState from '../states/bcm-list2.states';
-import { ListKeyControl } from './list-key-control';
-import { ListTagControl } from './list-tag-control';
+import { IsLoad, JsonParse } from "@bcm/decorator";
+import { Generate, NumberHelper, StringHelper, Validators } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate, LabelTemplate, ListTemplate } from "@bcm/template";
+import { delay, getPlacement, setPosition } from "@bcm/utils";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import snq from "snq";
+import listState from "../states/bcm-list2.states";
+import { ListKeyControl } from "./list-key-control";
 export class BcmList {
   constructor() {
     this.debounce = null;
@@ -44,12 +43,12 @@ export class BcmList {
     this.required = false;
     this.hidden = false;
     this.fullWidth = false;
-    this.height = '256px';
-    this.maxHeight = '500px';
-    this.minHeight = '150px';
-    this.width = '256px';
+    this.height = "256px";
+    this.maxHeight = "500px";
+    this.minHeight = "150px";
+    this.width = "256px";
     this.infoFooter = false;
-    this.variableText = 'item';
+    this.variableText = "item";
     this.template = undefined;
     this.allOpen = false;
     this.keyControl = false;
@@ -60,8 +59,8 @@ export class BcmList {
     this.calculatedViewport = false;
     this.isSelectedOther = false;
     this.isHaveOtherTag = false;
-    this.placeholder = 'Choose an option';
-    this.searchPlaceholder = 'Search';
+    this.placeholder = "Choose an option";
+    this.searchPlaceholder = "Search";
     this.searchIsOnlyChilds = false;
     this.minSearchLength = 2;
     this.clearable = false;
@@ -70,7 +69,7 @@ export class BcmList {
     this.captionType = Bcm.Status.default;
     this.captionError = undefined;
     this.emptyText = undefined;
-    this.emptyIcon = 'fad fa-folder-open';
+    this.emptyIcon = "fad fa-folder-open";
     this.captionCache = undefined;
     this.captionTypeCache = undefined;
     this.tick = {};
@@ -83,26 +82,26 @@ export class BcmList {
     this.returnFilterData = {};
     this.returnOtherData = {};
     this.options = {
-      rootMargin: '30px',
+      rootMargin: "30px",
     };
     this.tagContainerWidth = 0;
     this.selectAllItem = {
-      id: 'select-all',
-      text: 'Select All',
-      value: 'select-all',
+      id: "select-all",
+      text: "Select All",
+      value: "select-all",
       checked: false,
       disabled: false,
-      icon: '',
+      icon: "",
       status: Bcm.Status.default,
-      indeterminate: 'uncheck',
+      indeterminate: "uncheck",
     };
-    this.placement = Bcm.Placement['bottom-start'];
+    this.placement = Bcm.Placement["bottom-start"];
     this.data = [];
   }
   connectedCallback() {
-    if (this.height != '256px') {
-      if (this.height.indexOf('px') > -1) {
-        this.limit = Math.floor(+this.height.replace('px', '') / 10);
+    if (this.height != "256px") {
+      if (this.height.indexOf("px") > -1) {
+        this.limit = Math.floor(+this.height.replace("px", "") / 10);
       }
       else {
         this.limit = Math.floor(+(window.innerHeight / 10));
@@ -121,69 +120,39 @@ export class BcmList {
       this.updateOptions();
     }
   }
+  get containerWidth() {
+    var _a, _b;
+    return (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width;
+  }
+  get tagCount() {
+    return this.containerWidth > 0 ? Math.floor(+(this.containerWidth - 100) / 85) : 0;
+  }
+  get tagData() {
+    return snq(() => {
+      var _a;
+      return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map(item => ({
+        value: item.id,
+        label: StringHelper.textLimitter(item.text, 7),
+        text: item.tooltipMessage || item.tagTitle || item.text,
+      }));
+    }, []);
+  }
   async componentDidLoad() {
     await this.initState();
-    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+    if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
       const list = this.el.querySelector(`#bcm-list-${this._id}`);
       if (list) {
         document.body.appendChild(list);
       }
     }
   }
-  tagCalculator() {
-    if (this.checkboxes && (this.type == 'select' || this.type == 'autocomplete')) {
-      const tagCalculator = new ListTagControl(`bcm-list-input-tag-container-${this._id}`, this.value, this._id, this.isSelectedOther, this.clearable);
-      tagCalculator.calculateTags();
-      const arrayIds = id => (typeof id == 'string' ? id.split(',') : [id]);
-      const clearAutocomplete = () => {
-        if (this.type == 'autocomplete') {
-          const autocompleteInput = this.getAutoCompleteInput();
-          if (autocompleteInput) {
-            autocompleteInput.handleClear(false);
-          }
-        }
-      };
-      tagCalculator.onClickOtherTag = async (id) => {
-        if (!this.disabled) {
-          clearAutocomplete();
-          if (this.isSelectedOther) {
-            await this.unSelectOther();
-          }
-          else {
-            await this.onClearSearch();
-            this.isSelectedOther = true;
-            this.filterOtherList(arrayIds(id));
-            this.isOpen = true;
-          }
-          this.onSelectSearch();
-        }
-      };
-      tagCalculator.onClickTag = _ => {
-        // console.log(id);
-        clearAutocomplete();
-        this.onSelectSearch();
-        this.unSelectOther();
-      };
-      tagCalculator.onClickDismiss = async (id) => {
-        var _a;
-        if (!this.disabled) {
-          if (this.isSelectedOther) {
-            await this.unSelectOther();
-          }
-          arrayIds(id).length > 1 ? listState.removeOtherTags(this._id, arrayIds(id)) : listState.checkedItem(this._id, arrayIds(id)[0]);
-          this.value = (await this.getCheckedList()).checkedList;
-          this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
-        }
-      };
-    }
-  }
   disconnectedCallback() {
     this.isOpen = false;
     if (this.stopDeepClean)
       return;
     listState.removeState(this._id);
-    this.el.innerHTML = '';
-    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+    this.el.innerHTML = "";
+    if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
       const list = document.querySelectorAll(`#bcm-list-${this._id}`);
       if (list === null || list === void 0 ? void 0 : list.length) {
         list.forEach(item => item.remove());
@@ -212,7 +181,6 @@ export class BcmList {
         this.change.emit(this.value);
       }
     }
-    this.tagCalculator();
   }
   watchReturnFilterData(newVal) {
     var _a;
@@ -224,18 +192,6 @@ export class BcmList {
       this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
     }
   }
-  handleOtherSelected(newValue) {
-    var _a;
-    const tagContent = (_a = document.getElementById(`bcm-list-input-tag-${this._id}-other-tag`)) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-tag__content');
-    if (tagContent) {
-      if (newValue === true) {
-        tagContent.classList.add('checkable', 'checked');
-      }
-      else {
-        tagContent.classList.remove('checkable', 'checked');
-      }
-    }
-  }
   async handleOpen() {
     if (this.isOpen) {
       this.open.emit();
@@ -252,7 +208,7 @@ export class BcmList {
   listScrollToTop() {
     const list = document.querySelector(`#bcm-list-${this._id}`);
     if (list) {
-      list.querySelector('.scrolling').scrollTop = 0;
+      list.querySelector(".scrolling").scrollTop = 0;
     }
   }
   async dataChanged(newValue, oldValue) {
@@ -286,7 +242,7 @@ export class BcmList {
       const list = document.querySelector(`#bcm-list-${this._id}`);
       const isClickInside = list && Generate.findEventPath(event, list);
       if (isClickInside) {
-        if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+        if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
           this.calculateLocation();
         }
       }
@@ -295,6 +251,41 @@ export class BcmList {
       }
     }
   }
+  clearAutocomplete() {
+    if (this.type == "autocomplete") {
+      const autocompleteInput = this.getAutoCompleteInput();
+      if (autocompleteInput) {
+        autocompleteInput.handleClear(false);
+      }
+    }
+  }
+  async handleSelectOtherTag(e) {
+    if (this.disabled)
+      return;
+    const { id, checked } = e.detail;
+    this.isSelectedOther = checked;
+    if (id) {
+      checked ? this.filterOtherList(id) : this.unSelectOther();
+      this.isOpen = true;
+    }
+  }
+  async handleDeleteTag(e) {
+    var _a;
+    if (this.disabled)
+      return;
+    const { id } = e.detail;
+    this.isSelectedOther && this.unSelectOther();
+    Array.isArray(id) ? listState.removeOtherTags(this._id, id) : listState.checkedItem(this._id, id);
+    this.value = (await this.getCheckedList()).checkedList;
+    this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+  }
+  async handleSelectTag(_) {
+    if (this.disabled)
+      return;
+    this.clearAutocomplete();
+    this.onSelectSearch();
+    this.unSelectOther();
+  }
   handleClick(event) {
     var _a;
     if (this.disabled)
@@ -313,23 +304,23 @@ export class BcmList {
       }, 300);
     }
     if (!isClickInside) {
-      if (this.type == 'autocomplete') {
+      if (this.type == "autocomplete") {
         const autocompleteInput = this.getAutoCompleteInput();
         if (autocompleteInput) {
           if (this.checkboxes) {
-            autocompleteInput.setValue('');
+            autocompleteInput.setValue("");
           }
           else {
-            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
+            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
           }
         }
       }
     }
-    const clickToTag = Generate.findEventPathWithKey(event, 'className', ['bcm-tag']);
-    const clickToOtherTag = Generate.findEventPathWithKey(event, 'className', ['bcm-tag bcm-tag--other']);
-    const clickToSelect = Generate.findEventPathWithKey(event, 'id', [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
-    const clickToTagDismiss = Generate.findEventPathWithKey(event, 'className', ['right close-button']);
-    if (clickToSelect && !clickToTagDismiss && this.type != 'autocomplete') {
+    const clickToTag = Generate.findEventPathWithKey(event, "className", ["bcm-tag"]);
+    const clickToOtherTag = Generate.findEventPathWithKey(event, "className", ["bcm-tag bcm-tag--other"]);
+    const clickToSelect = Generate.findEventPathWithKey(event, "id", [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
+    const clickToTagDismiss = Generate.findEventPathWithKey(event, "className", ["right close-button"]);
+    if (clickToSelect && !clickToTagDismiss && this.type != "autocomplete") {
       this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
     }
     if (list) {
@@ -343,7 +334,7 @@ export class BcmList {
   }
   bcmOnSearchClear(event) {
     var _a, _b;
-    if (this.type == 'autocomplete') {
+    if (this.type == "autocomplete") {
       if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
         if (event.detail) {
           this.setClear();
@@ -361,16 +352,13 @@ export class BcmList {
       if (this.searchFound > 0 && this.highlight) {
         this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
       }
-      if (this.type == 'autocomplete') {
+      if (this.type == "autocomplete") {
         this.isOpen = true;
       }
       if (!event.detail.result) {
-        if (this.type == 'autocomplete') {
+        if (this.type == "autocomplete") {
           this.isOpen = false;
         }
-        if (this.isSelectedOther) {
-          this.filterOtherList(this.otherTagIds());
-        }
         else {
           this.returnFilterData = {};
           listState.filterData(this._id, null);
@@ -410,9 +398,9 @@ export class BcmList {
       if (focusedList) {
         const list = document.getElementById(`bcm-list-${this._id}`);
         if (list) {
-          const items = list.querySelectorAll('.bcm-list__item.focused');
+          const items = list.querySelectorAll(".bcm-list__item.focused");
           if (items.length > 0) {
-            const main = list.querySelector('main');
+            const main = list.querySelector("main");
             const itemHeight = items[0].offsetHeight;
             const listHeight = main.offsetHeight;
             const itemTop = items[0].offsetTop;
@@ -432,7 +420,7 @@ export class BcmList {
       if (Array.isArray(data)) {
         this.addChecked(data);
       }
-      if (typeof data === 'string' || typeof data === 'number') {
+      if (typeof data === "string" || typeof data === "number") {
         this.selectedItem(data);
       }
     }
@@ -475,10 +463,9 @@ export class BcmList {
   async setClear(e) {
     listState.setClear(this._id);
     this.value = null;
-    this.inputText = '';
+    this.inputText = "";
     this.isOpen = false;
-    this.selectAllItem.indeterminate = 'uncheck';
-    this.tagCalculator();
+    this.selectAllItem.indeterminate = "uncheck";
     this.markForCheck();
     if (e) {
       e.stopPropagation();
@@ -507,10 +494,9 @@ export class BcmList {
     listState.updateOptions(this._id, this);
   }
   handleIndeterminate(checkeds, total) {
-    this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? 'check' : 'indeterminate') : 'uncheck', checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
+    this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? "check" : "indeterminate") : "uncheck", checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
   }
   listenResize() {
-    this.tagCalculator();
     this.calculateLocation();
     this.markForCheck();
   }
@@ -538,12 +524,6 @@ export class BcmList {
       searchInput.onBcmSelect();
     }
   }
-  otherTagIds() {
-    const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
-    if (otherTag) {
-      return otherTag.getAttribute('data-ids').split(',');
-    }
-  }
   async filterOtherList(ids) {
     const checklist = (await this.getCheckedList()).nestedResult;
     const filter = Generate.convertIdsToNestedData(ids, checklist);
@@ -559,7 +539,7 @@ export class BcmList {
     this.onClearSearch();
     await listState.setValue({
       id: this._id,
-      dataSource: this.data && snq(() => (typeof this.data == 'string' ? JSON.parse(this.data) : this.data), []),
+      dataSource: this.data && snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
       options: this,
     });
     const { totalRoots, totalItems } = listState.getValue(this._id);
@@ -591,7 +571,7 @@ export class BcmList {
   }
   getItems() {
     if (this.isSelectedOther) {
-      return this.returnFilterData['checkedItems'];
+      return this.returnFilterData["checkedItems"];
     }
     return snq(() => listState.getData(this._id), []);
   }
@@ -603,17 +583,17 @@ export class BcmList {
     this.markForCheck();
   }
   focusItem(e) {
-    if (e.target.classList.contains('bcm-list__item')) {
+    if (e.target.classList.contains("bcm-list__item")) {
       const item = e.target;
       const list = document.getElementById(`bcm-list-${this._id}`);
       if (list) {
-        const items = list.querySelectorAll('.bcm-list__item');
+        const items = list.querySelectorAll(".bcm-list__item");
         if (items.length > 0) {
-          const selectedItem = list.querySelector('.bcm-list__item.focused');
+          const selectedItem = list.querySelector(".bcm-list__item.focused");
           if (selectedItem) {
-            selectedItem.classList.remove('focused');
+            selectedItem.classList.remove("focused");
           }
-          item.classList.add('focused');
+          item.classList.add("focused");
         }
       }
     }
@@ -625,14 +605,14 @@ export class BcmList {
       this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
       this.isOpen = false;
       this.markForCheck();
-      if (this.type == 'autocomplete' && this.value) {
+      if (this.type == "autocomplete" && this.value) {
         // await delay(100)
         // this.resetCaption()
         const autocompleteInput = this.getAutoCompleteInput();
         if (autocompleteInput) {
           setTimeout(() => {
             var _a;
-            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
+            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || "");
             this.isOpen = false;
           }, 100);
         }
@@ -641,7 +621,7 @@ export class BcmList {
     return Promise.resolve(this.value);
   }
   async checkedItem(itemId) {
-    const isCheckSelectAll = itemId === 'select-all';
+    const isCheckSelectAll = itemId === "select-all";
     if (!isCheckSelectAll) {
       listState.checkedItem(this._id, itemId);
     }
@@ -679,7 +659,7 @@ export class BcmList {
   }
   async calculateLocation() {
     var _a, _b;
-    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+    if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
       const list = document.getElementById(`bcm-list-${this._id}`);
       // list && (list.style.height = '256px') //sebebi neydi ki!
       var placement = this.placement;
@@ -694,78 +674,78 @@ export class BcmList {
         if (this.linkedComponent) {
           const linked = document.getElementById(this.linkedComponent);
           if (linked) {
-            if (!linked['noCaption']) {
-              const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-caption-area')) || linked.querySelector('.bcm-caption-area');
+            if (!linked["noCaption"]) {
+              const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".bcm-caption-area")) || linked.querySelector(".bcm-caption-area");
               if (captionArea) {
                 captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
               }
             }
-            const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.bcm-label')) || linked.querySelector('.bcm-label');
+            const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".bcm-label")) || linked.querySelector(".bcm-label");
             if (labelArea) {
               labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
             }
           }
         }
         if (this.fullWidth) {
-          list.style.width = targetElement.offsetWidth + 'px';
+          list.style.width = targetElement.offsetWidth + "px";
         }
         else {
-          list.style.width = this.width || 'auto';
+          list.style.width = this.width || "auto";
         }
-        if (this.height.indexOf('%') > -1) {
-          list.style.height = NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + 'px';
+        if (this.height.indexOf("%") > -1) {
+          list.style.height = NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
         }
         else {
           list.style.height = this.height;
         }
         list.style.minHeight = this.minHeight;
         // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
-        const calculatedMaxHeight = placement.split('-')[0] == 'top' ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
-        if (this.maxHeight.indexOf('%') > -1) {
-          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + 'px';
+        const calculatedMaxHeight = placement.split("-")[0] == "top" ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
+        if (this.maxHeight.indexOf("%") > -1) {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + "px";
         }
         else {
-          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + 'px';
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + "px";
         }
         getPlacement(list, targetElement, placement, (place) => (placement = place));
         await delay(10);
         pos = setPosition(placement, targetElement);
-        list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
+        list.style.top = (placement.split("-")[0] == "top" ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + "px";
         // list.style.left = pos[1] + 'px';
-        list.style.left = placement.split('-')[1] == 'end' ? pos[1] - list.offsetWidth + 'px' : pos[1] + 'px';
-        list.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
+        list.style.left = placement.split("-")[1] == "end" ? pos[1] - list.offsetWidth + "px" : pos[1] + "px";
+        list.classList.toggle("bcm-list--top", placement.split("-")[0] == "top");
         this.calculatedViewport = true;
       }
     }
   }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
-    const hostClasses = cs('bcm-list', `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === 'large' ? 'size-3' : 'size-2', {
-      'error': this.captionType == Bcm.Status.error,
-      'full-width': fullWidth,
-      'bcm-list__linked': this.linkedComponent,
+    const hostClasses = cs("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
+      "error": this.captionType == Bcm.Status.error,
+      "full-width": fullWidth,
+      "bcm-list__linked": this.linkedComponent,
       hidden,
       readonly,
       disabled,
     });
-    const bcmListContainer = cs('bcm-list__container', this.linkedComponent ? 'bcm-list__type-linked-component' : `bcm-list__type-${this.type}`, {
-      'is-open': this.isOpen && this.calculatedViewport,
-      'error': this.captionType == Bcm.Status.error,
-      'full-width': fullWidth,
+    const bcmListContainer = cs("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
+      "is-open": this.isOpen && this.calculatedViewport,
+      "error": this.captionType == Bcm.Status.error,
+      "full-width": fullWidth,
       hidden,
       readonly,
       disabled,
     });
-    const bcmListInput = cs('bcm-list__input');
-    const openedType = this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent;
+    const bcmListInput = cs("bcm-list__input");
+    const openedType = this.type == "select" || this.type == "autocomplete" || this.linkedComponent;
     return (h(Host, { class: hostClasses, tabindex: "0", style: {
-        '--width': fullWidth ? '100%' : this.width,
-        '--height': openedType ? '100%' : this.height,
-        '--max-height': openedType ? 'inherit' : this.maxHeight,
-        '--min-height': openedType ? 'inherit' : this.minHeight,
-      } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h(LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == 'select' && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs('bcm-list__input-container', { 'type-single': !checkboxes, 'value-empty': !this.value }) }, this.checkboxes && h("span", { id: `bcm-list-input-tag-container-${this._id}`, class: "bcm-list__input-tag-container" }), this.checkboxes && !this.value && h("span", { class: "bcm-list__input-placeholder" }, this.placeholder), !this.checkboxes && (this.value ? this.inputText : h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs('bcm-list__input-buttons', {
+        "--width": fullWidth ? "100%" : this.width,
+        "--height": openedType ? "100%" : this.height,
+        "--max-height": openedType ? "inherit" : this.maxHeight,
+        "--min-height": openedType ? "inherit" : this.minHeight,
+      } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h(LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && 'caret-is-open'}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === 'autocomplete' && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { 'bcm-list__input-autocomplete': this.type == 'autocomplete' }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == 'autocomplete' ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-list"; }
   static get originalStyleUrls() {
@@ -1091,7 +1071,7 @@ export class BcmList {
         },
         "attribute": "height",
         "reflect": false,
-        "defaultValue": "'256px'"
+        "defaultValue": "\"256px\""
       },
       "maxHeight": {
         "type": "string",
@@ -1109,7 +1089,7 @@ export class BcmList {
         },
         "attribute": "max-height",
         "reflect": false,
-        "defaultValue": "'500px'"
+        "defaultValue": "\"500px\""
       },
       "minHeight": {
         "type": "string",
@@ -1127,7 +1107,7 @@ export class BcmList {
         },
         "attribute": "min-height",
         "reflect": false,
-        "defaultValue": "'150px'"
+        "defaultValue": "\"150px\""
       },
       "width": {
         "type": "string",
@@ -1145,7 +1125,7 @@ export class BcmList {
         },
         "attribute": "width",
         "reflect": false,
-        "defaultValue": "'256px'"
+        "defaultValue": "\"256px\""
       },
       "infoFooter": {
         "type": "boolean",
@@ -1181,7 +1161,7 @@ export class BcmList {
         },
         "attribute": "variable-text",
         "reflect": false,
-        "defaultValue": "'item'"
+        "defaultValue": "\"item\""
       },
       "template": {
         "type": "string",
@@ -1305,7 +1285,7 @@ export class BcmList {
         },
         "attribute": "placeholder",
         "reflect": false,
-        "defaultValue": "'Choose an option'"
+        "defaultValue": "\"Choose an option\""
       },
       "searchPlaceholder": {
         "type": "string",
@@ -1323,7 +1303,7 @@ export class BcmList {
         },
         "attribute": "search-placeholder",
         "reflect": false,
-        "defaultValue": "'Search'"
+        "defaultValue": "\"Search\""
       },
       "searchIsOnlyChilds": {
         "type": "boolean",
@@ -1487,7 +1467,7 @@ export class BcmList {
         },
         "attribute": "empty-icon",
         "reflect": false,
-        "defaultValue": "'fad fa-folder-open'"
+        "defaultValue": "\"fad fa-folder-open\""
       },
       "placement": {
         "type": "string",
@@ -1510,7 +1490,7 @@ export class BcmList {
         },
         "attribute": "placement",
         "reflect": false,
-        "defaultValue": "Bcm.Placement['bottom-start']"
+        "defaultValue": "Bcm.Placement[\"bottom-start\"]"
       },
       "data": {
         "type": "any",
@@ -1842,9 +1822,6 @@ export class BcmList {
       }, {
         "propName": "returnFilterData",
         "methodName": "watchReturnFilterData"
-      }, {
-        "propName": "isSelectedOther",
-        "methodName": "handleOtherSelected"
       }, {
         "propName": "isOpen",
         "methodName": "handleOpen"
@@ -1890,6 +1867,24 @@ export class BcmList {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "bcm-select-other-tag",
+        "method": "handleSelectOtherTag",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-delete-tag",
+        "method": "handleDeleteTag",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-select-tag",
+        "method": "handleSelectTag",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "click",
         "method": "handleClick",
@@ -1927,5 +1922,5 @@ __decorate([
   IsLoad()
 ], BcmList.prototype, "el", void 0);
 __decorate([
-  JsonParse('data', true)
+  JsonParse("data", true)
 ], BcmList.prototype, "dataChanged", null);