bromcom-ui 2.8.1-rc.0 → 2.8.1-rc.10-0

package/dist/components/bcm-list.js

@@ -19,10 +19,11 @@ import { c as classnames } from './index2.js';
 import './types.js';
 import { L as LabelTemplate } from './label-template.js';
 import './types2.js';
-import { c as createStore } from './index3.js';
-import { T as Tooltip } from './tooltip-helper.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './search.js';
+import { c as createStore } from './index4.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './rc-overflow.js';
+import { d as defineCustomElement$3 } from './search.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
 const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
   // if ( indeterminate ) {
@@ -115,8 +116,8 @@ const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, ch
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
-    const itemCount = searchFound >= 0 || (treeview ? items.length : totalData);
-    let scrollHeight = itemCount * itemHeight || 0;
+    const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
+    const scrollHeight = itemCount * itemHeight || 0;
     return {
       'min-height': `${scrollHeight}px`,
       'overscroll-behavior': 'none',
@@ -193,12 +194,12 @@ const setValue = val => {
   };
   state.value.set(data.id, data);
 };
-const recursive = (data, options, parentId, parentIndex = '0.') => {
+const recursive = (data, options, parentId, parentIndex = "0.") => {
   let recData = [];
   if (data && data.length > 0) {
-    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
+    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
       ? { items: snq(() => recursive(item.items, options, item.id, `${parentIndex}${index}`), []) }
-      : { items: [] }))));
+      : { items: [] })), { ct: `${parentIndex}${index}` })));
   }
   return recData;
 };
@@ -209,10 +210,10 @@ const getValue = id => snq(() => state.value.get(id), {});
 const calculateTotalItems = (dataSource, treeview) => {
   let total = 0;
   dataSource.forEach(item => {
-    if (treeview || (!treeview && item.type != 'group')) {
+    if (treeview || (!treeview && item.type != "group")) {
       total += 1;
     }
-    if ((treeview || (!treeview && item.type == 'group')) && item.items) {
+    if ((treeview || (!treeview && item.type == "group")) && item.items) {
       total += calculateTotalItems(item.items, treeview);
     }
   });
@@ -342,7 +343,7 @@ const checkedProcess = (id, item, status) => {
     const treeview = value.options.treeview;
     if (item) {
       // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
-      if (treeview || (!treeview && item.type != 'group')) {
+      if (treeview || (!treeview && item.type != "group")) {
         if (!item.disabled) {
           if (status != undefined) {
             item.checked = status;
@@ -351,7 +352,7 @@ const checkedProcess = (id, item, status) => {
             item.checked = !item.checked;
           }
           item.itemObject.checked = item.checked;
-          item.indeterminate = item.checked ? 'determinate' : 'uncheck';
+          item.indeterminate = item.checked ? "determinate" : "uncheck";
         }
       }
       if (item.items) {
@@ -378,13 +379,13 @@ const indeterminateStatus = (id, itemId, items) => {
         let allUnchecked = true;
         if (item.items) {
           item.items.map(child => {
-            (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
+            (child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
             !child.checked && (allChecked = false);
           });
         }
-        const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+        const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
         item.indeterminate = indeterminateState;
-        item.checked = indeterminateState == 'determinate' ? true : false;
+        item.checked = indeterminateState == "determinate" ? true : false;
         item.itemObject.checked = item.checked;
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
@@ -491,11 +492,12 @@ const getCheckedList = (id, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       var _a;
+      const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
       let foundChild = [];
       let foundItem = [];
       if (item.checked) {
-        checkedList.push(item.itemObject);
-        foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+        checkedList.push(newItem);
+        foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
       }
       if (item.items) {
         const found = getCheckedList(id, item.items);
@@ -508,7 +510,7 @@ const getCheckedList = (id, items) => {
       }
       if (foundChild.length > 0) {
         if (foundItem.length == 0) {
-          foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+          foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
         }
         foundItem[0].items = foundChild;
         nestedResult.push(foundItem[0]);
@@ -576,10 +578,10 @@ const setClear = (id, items) => {
       var _a, _b, _c;
       item.checked && (item.checked = false);
       item.selected && (item.selected = false);
-      item.indeterminate && (item.indeterminate = 'uncheck');
+      item.indeterminate && (item.indeterminate = "uncheck");
       ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
       ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
-      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
+      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
       if (item.items) {
         setClear(id, item.items);
       }
@@ -837,173 +839,7 @@ class ListKeyControl extends KeyControl {
   keyUp() { }
 }
 
-class ListTagControl {
-  constructor(containerId, values, listId, selectedOtherTag, clearable) {
-    this.clearable = false;
-    this.containerId = containerId;
-    this.values = values;
-    this.listId = listId;
-    this.selectedOtherTag = selectedOtherTag;
-    this.clearable = clearable;
-  }
-  getTooltip(id, text) {
-    return new Tooltip({ message: text, targetId: id, placement: 'bottom' });
-  }
-  tagHtmlTemplate(tag, isOtherTag = false, otherTagIsSingle = false) {
-    return `<span class="bcm-tag__content dismissable ${!otherTagIsSingle && isOtherTag && (this.selectedOtherTag ? 'checkable checked' : '')}">
-                    <span class="value">${tag.text}</span>
-                    ${otherTagIsSingle
-      ? ''
-      : `
-                    <span class="right close-button" bcm-list-tag-dismiss >
-                        <bcm-icon icon="fal fa-times"></bcm-icon>
-                    </span>`}
-                </span>`;
-  }
-  getContainer() {
-    return document.getElementById(this.containerId);
-  }
-  getContainerWidth() {
-    let tagContainerWidth = snq(() => document.getElementById(this.containerId).clientWidth, 0);
-    tagContainerWidth = (this.clearable ? tagContainerWidth - 20 : tagContainerWidth) - 20;
-    return [tagContainerWidth < 130 ? 130 : tagContainerWidth - 20, tagContainerWidth];
-  }
-  isClickDismiss(e) {
-    const path = e.path || (e.composedPath && e.composedPath());
-    const tag = path.find(element => element.attributes && element.attributes['bcm-list-tag-dismiss']);
-    return !!tag;
-  }
-  onClickControl(e, id, isOtherTag = false) {
-    const isDismiss = this.isClickDismiss(e);
-    let tooltipId = '';
-    if (isDismiss) {
-      this.onClickDismiss(id);
-      tooltipId = isOtherTag ? `bcm-list-input-tag-${this.listId}-other-tag` : `list-${this.listId}-${id}`;
-      this.getTooltip(tooltipId, '').hide();
-    }
-    else {
-      isOtherTag ? this.onClickOtherTag(id) : this.onClickTag(id);
-    }
-  }
-  calculateTags() {
-    const containerWidth = this.getContainerWidth();
-    const virtualDom = this.getContainer();
-    if (virtualDom) {
-      if (this.values && this.values.length > 0) {
-        if (containerWidth[0] > 0 && virtualDom) {
-          virtualDom.innerHTML = '';
-          this.values.slice(0, 50).map(value => {
-            const tag = document.createElement('div');
-            tag.classList.add('bcm-tag');
-            tag.id = `list-${this.listId}-${value.id}`;
-            // tag.title = value.tagTitle || value.text || '';
-            tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').show();
-            tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').hide();
-            tag.dataset.id = value.id;
-            tag.onclick = e => this.onClickControl(e, value.id);
-            tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, value), { text: StringHelper.textLimitter(value.text, 10) }));
-            virtualDom.appendChild(tag);
-          });
-          let tags = virtualDom.querySelectorAll('.bcm-tag');
-          let otherTags = [];
-          let visibleTags = [];
-          const checkControl = () => {
-            const virtualDomTags = virtualDom.querySelectorAll('.bcm-tag');
-            if (visibleTags.length === 1 && (virtualDomTags === null || virtualDomTags === void 0 ? void 0 : virtualDomTags.length) === 1) {
-              visibleTags[0].innerHTML = this.tagHtmlTemplate({ text: '+1' }, false, true);
-            }
-          };
-          let tagsWidth = Array.from(tags).reduce((acc, tag) => {
-            const tagClientWidth = tag.clientWidth > 50 ? tag.clientWidth : 50;
-            if (tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0]) {
-              acc += tagClientWidth + 10;
-              visibleTags.push(tag);
-              const checkFreeSpace = tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0];
-              !checkFreeSpace && containerWidth[1] < 70 && checkControl();
-            }
-            else {
-              otherTags.push(tag);
-              tag.remove();
-            }
-            return acc;
-          }, 0);
-          const otherTagElement = this.values.slice(visibleTags.length);
-          const virtualDomLastElements = virtualDom.lastElementChild;
-          const otherTagTextControl = args => {
-            const { count, width } = args;
-            if (count > 999)
-              return '999+' + pluralize('item', count);
-            if (width > 100)
-              return `${count} ` + pluralize('item', count) + ' selected';
-            if (width < 100)
-              return `+${count < 10 ? count : '9'}`;
-          };
-          if (otherTags && otherTags.length > 0 && virtualDomLastElements && virtualDomLastElements.id !== `bcm-list-input-tag-${this.listId}-other-tag`) {
-            otherTags.push(virtualDomLastElements);
-            if (otherTags.length > 0) {
-              const otherCounter = otherTagElement.length + 1;
-              const createOthertagElement = {
-                id: `bcm-list-input-tag-${this.listId}-other-tag`,
-                text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
-                title: snq(() => otherTags
-                  .map(tag => this.values.find(value => value.id == tag.dataset.id))
-                  .sort((a, b) => +a._i - +b._i)
-                  .slice(0, 15)
-                  .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
-                  .toString()
-                  .split(',')
-                  .join('\r\n') + (otherTags.length > 15 ? ('\r\n...') : ''), '...'),
-              };
-              virtualDomLastElements.remove();
-              visibleTags = visibleTags.filter(tag => tag.id !== virtualDomLastElements.id);
-              const hiddenTags = this.values.filter(value => !visibleTags.find(tag => tag.dataset.id == value.id)).map(value => value.id);
-              const otherTag = document.createElement('div');
-              const otherTagIds = hiddenTags.join(',');
-              const otherTagIsSingle = visibleTags.length === 0;
-              otherTag.classList.add('bcm-tag');
-              !otherTagIsSingle && otherTag.classList.add('bcm-tag--other');
-              otherTag.id = createOthertagElement.id;
-              // otherTag.title = createOthertagElement.title || false;
-              if (createOthertagElement.title) {
-                otherTag.onmouseenter = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).show();
-                otherTag.onmouseleave = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).hide();
-              }
-              otherTag.onclick = e => this.onClickControl(e, otherTagIds, otherTagIsSingle ? false : true);
-              otherTag.innerHTML = this.tagHtmlTemplate(createOthertagElement, true, otherTagIsSingle);
-              otherTag.dataset.ids = hiddenTags.join(',');
-              virtualDom.appendChild(otherTag);
-            }
-          }
-          const otherTag = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
-          const otherTagWidth = otherTag ? (otherTag.clientWidth && otherTag.clientWidth < 50 ? 50 : otherTag.clientWidth) : 200;
-          const tagsPerRow = Math.floor(containerWidth[0] - tagsWidth);
-          if (tagsPerRow > otherTagWidth) {
-            if (otherTag) {
-              const findElement = this.values.find(value => value.id == otherTag.dataset.ids.split(',')[0]);
-              const tag = document.createElement('div');
-              tag.classList.add('bcm-tag');
-              tag.id = `list-${this.listId}-${findElement.id}`;
-              // tag.title = findElement?.title || '';
-              tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').show();
-              tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').hide();
-              tag.dataset.id = findElement.id;
-              tag.onclick = e => this.onClickControl(e, findElement === null || findElement === void 0 ? void 0 : findElement.id);
-              tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, findElement), { text: StringHelper.textLimitter(findElement.text, 10) }));
-              const otherTagElement = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
-              otherTagElement.remove();
-              virtualDom.appendChild(tag);
-            }
-          }
-        }
-      }
-      else {
-        virtualDom.innerHTML = '';
-      }
-    }
-  }
-}
-
-const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{scroll-behavior:smooth;padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800;transition:visibility 0s linear 400ms, opacity 100ms, transform 200ms}.bcm-list__container.bcm-list__type-linked-component.bcm-list--top,.bcm-list__container.bcm-list__type-select.bcm-list--top,.bcm-list__container.bcm-list__type-autocomplete.bcm-list--top{transform:translateY(-10%)}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{opacity:1;transform:translateY(0);visibility:visible;transition:visibility 0s linear 0s, opacity 100ms, transform 100ms}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{width:100%}.bcm-list__input-container.value-empty{color:var(--bcm-color-grey-6)}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-color-grey-6)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px;min-width:40px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-50);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);user-select:none;cursor:not-allowed}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--readonly:focus>.bcm-list__item-content:not(.disabled),.bcm-list__item--readonly.focused>.bcm-list__item-content:not(.disabled){color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content{color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content:hover,.bcm-list__item--readonly>.bcm-list__item-content:focus{color:var(--bcm-color-grey-7)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
+const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;display:none}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{scroll-behavior:smooth;padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800;transition:visibility 0s linear 400ms, opacity 100ms, transform 200ms}.bcm-list__container.bcm-list__type-linked-component.bcm-list--top,.bcm-list__container.bcm-list__type-select.bcm-list--top,.bcm-list__container.bcm-list__type-autocomplete.bcm-list--top{transform:translateY(-10%)}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{opacity:1;transform:translateY(0);visibility:visible;transition:visibility 0s linear 0s, opacity 100ms, transform 100ms}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{flex:1;display:block;overflow:hidden}.bcm-list__input-container.value-empty{color:var(--bcm-color-grey-6)}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-color-grey-6)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px 4px 0 4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-50);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);user-select:none;cursor:not-allowed}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--readonly:focus>.bcm-list__item-content:not(.disabled),.bcm-list__item--readonly.focused>.bcm-list__item-content:not(.disabled){color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content{color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content:hover,.bcm-list__item--readonly>.bcm-list__item-content:focus{color:var(--bcm-color-grey-7)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1043,12 +879,12 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -1059,8 +895,8 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -1069,7 +905,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.captionType = Bcm$1.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 = {};
@@ -1082,26 +918,26 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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$1.Status.default,
-      indeterminate: 'uncheck',
+      indeterminate: "uncheck",
     };
-    this.placement = Bcm$1.Placement['bottom-start'];
+    this.placement = Bcm$1.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));
@@ -1120,69 +956,39 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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());
@@ -1207,11 +1013,10 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
     else {
-      if ((newVal === null || newVal === void 0 ? void 0 : newVal.text) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.text)) {
+      if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
         this.change.emit(this.value);
       }
     }
-    this.tagCalculator();
   }
   watchReturnFilterData(newVal) {
     var _a;
@@ -1223,18 +1028,6 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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();
@@ -1251,7 +1044,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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) {
@@ -1285,7 +1078,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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();
         }
       }
@@ -1294,6 +1087,41 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  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)
@@ -1312,23 +1140,23 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, 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) {
@@ -1342,7 +1170,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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();
@@ -1360,16 +1188,13 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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);
@@ -1409,9 +1234,9 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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;
@@ -1431,7 +1256,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (Array.isArray(data)) {
         this.addChecked(data);
       }
-      if (typeof data === 'string' || typeof data === 'number') {
+      if (typeof data === "string" || typeof data === "number") {
         this.selectedItem(data);
       }
     }
@@ -1474,10 +1299,9 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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();
@@ -1506,10 +1330,9 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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();
   }
@@ -1537,12 +1360,6 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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);
@@ -1558,7 +1375,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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);
@@ -1590,7 +1407,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   getItems() {
     if (this.isSelectedOther) {
-      return this.returnFilterData['checkedItems'];
+      return this.returnFilterData["checkedItems"];
     }
     return snq(() => listState.getData(this._id), []);
   }
@@ -1602,17 +1419,17 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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");
         }
       }
     }
@@ -1624,14 +1441,14 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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);
         }
@@ -1640,7 +1457,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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);
     }
@@ -1678,7 +1495,7 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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;
@@ -1693,85 +1510,84 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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 = classnames('bcm-list', `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === 'large' ? 'size-3' : 'size-2', {
-      'error': this.captionType == Bcm$1.Status.error,
-      'full-width': fullWidth,
-      'bcm-list__linked': this.linkedComponent,
+    const hostClasses = classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
+      "error": this.captionType == Bcm$1.Status.error,
+      "full-width": fullWidth,
+      "bcm-list__linked": this.linkedComponent,
       hidden,
       readonly,
       disabled,
     });
-    const bcmListContainer = classnames('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$1.Status.error,
-      'full-width': fullWidth,
+    const bcmListContainer = classnames("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$1.Status.error,
+      "full-width": fullWidth,
       hidden,
       readonly,
       disabled,
     });
-    const bcmListInput = classnames('bcm-list__input');
-    const openedType = this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent;
+    const bcmListInput = classnames("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: classnames('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: classnames('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: classnames("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: classnames("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: classnames(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: classnames(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 })));
   }
   get el() { return this; }
   static get watchers() { return {
     "_id": ["watchId"],
     "value": ["handleValueChange"],
     "returnFilterData": ["watchReturnFilterData"],
-    "isSelectedOther": ["handleOtherSelected"],
     "isOpen": ["handleOpen"],
     "data": ["dataChanged"]
   }; }
@@ -1848,18 +1664,18 @@ const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "resetCaption": [64],
     "show": [64],
     "hide": [64]
-  }, [[2, "bcm-is-intersecting", "isIntersecting"], [2, "bcm-items", "handleSlotItems"], [0, "bcm-change", "handleChange"], [9, "resize", "handleResize"], [7, "scroll", "handleWheel"], [4, "wheel", "handleWheel"], [10, "click", "handleClick"], [10, "bcm-on-search-clear", "bcmOnSearchClear"], [10, "bcm-on-search", "bcmOnSearch"], [10, "keydown", "handleKeyDown"], [10, "keyup", "handleKeyUp"]]]);
+  }, [[2, "bcm-is-intersecting", "isIntersecting"], [2, "bcm-items", "handleSlotItems"], [0, "bcm-change", "handleChange"], [9, "resize", "handleResize"], [7, "scroll", "handleWheel"], [4, "wheel", "handleWheel"], [0, "bcm-select-other-tag", "handleSelectOtherTag"], [0, "bcm-delete-tag", "handleDeleteTag"], [0, "bcm-select-tag", "handleSelectTag"], [10, "click", "handleClick"], [10, "bcm-on-search-clear", "bcmOnSearchClear"], [10, "bcm-on-search", "bcmOnSearch"], [10, "keydown", "handleKeyDown"], [10, "keyup", "handleKeyUp"]]]);
 __decorate([
   IsLoad()
 ], BcmList$1.prototype, "el", void 0);
 __decorate([
-  JsonParse('data', true)
+  JsonParse("data", true)
 ], BcmList$1.prototype, "dataChanged", null);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-list", "bcm-icon", "bcm-search"];
+  const components = ["bcm-list", "bcm-icon", "bcm-rc-overflow", "bcm-search", "bcm-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-list":
       if (!customElements.get(tagName)) {
@@ -1868,10 +1684,20 @@ function defineCustomElement$1() {
       break;
     case "bcm-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-rc-overflow":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
       }
       break;
     case "bcm-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }