bromcom-ui 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/components/list.js

@@ -61,7 +61,7 @@ const InfoFooterTemplate = ({ selected, total, found, multiple, variableText })
       ` ${variableText} found. `)));
 };
 
-const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
+const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds, disabled: parentDisabled, readonly: parentReadonly }) => {
   const isHaveChildren = item.items && item.items.length > 0;
   var text = StringHelper.htmlEntities(item.text);
   let intersection = [];
@@ -80,8 +80,8 @@ const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selecte
   }
   text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
   const unClickable = !treeview && item.type == "group" && !item.clickable;
-  const disabled = item.disabled;
-  const readonly = item.readonly;
+  const disabled = item.disabled || parentDisabled;
+  const readonly = item.readonly || parentReadonly;
   const itemClick = (event) => {
     let path = event.path || event.composedPath();
     if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
@@ -99,23 +99,24 @@ const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selecte
     item.open = item.isSearching;
     openGroup(item.id);
   };
-  return (h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: classnames('bcm-list__item', 
+  return (h("div", { id: item.id, hidden: item.hidden, "data-has-children": isHaveChildren ? "true" : "false", "data-open": item.isSearching || item.open ? "true" : "false", "data-parent-id": item.parentId || "", "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: classnames('bcm-list__item', 
     // size === 'large' ? 'size-3' : 'size-2',
     'bcm-list__item-' + size, {
       'bcm-list__item--group': !treeview && item.type == 'group',
+      'bcm-list__item--open': item.isSearching || item.open,
       'bcm-list__item--readonly': readonly,
     }) },
     h("div", { class: classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) },
       treeview && (h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && h("bcm-icon", { icon: classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
       h("div", { class: classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
         checkboxes && (treeview || (!treeview && item.type != 'group')) && (h("div", { class: "bcm-list__item-content-text-checkbox" },
-          h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
+          h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: disabled }))),
         h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
     (treeview || !treeview && item.type == "group") && isHaveChildren && (h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
       item.items.map((item) => (h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
 };
 
-const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
+const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, disabled, readonly, }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
@@ -129,8 +130,8 @@ const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treevi
     h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) },
       h("div", { style: setScrollHeight() },
         checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" },
-          h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
-        items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
+          h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId), disabled: disabled, readonly: readonly }))),
+        items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId), disabled: disabled, readonly: readonly }))),
         (!items || items.length === 0) && searchFound != 0 && (h("section", { class: "bcm-list__container-no-data" },
           h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
             h("span", { innerHTML: emptyText || 'No data' })))),
@@ -634,6 +635,347 @@ const listState = {
   removeState,
 };
 
+class ListFocusManager {
+  constructor() {
+    this.focusableSelector = [
+      "a[href]",
+      "area[href]",
+      "button:not([disabled])",
+      "input:not([disabled]):not([type='hidden'])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[contenteditable='true']",
+      "[tabindex]:not([tabindex='-1'])",
+    ].join(",");
+  }
+  getFocusableElements(container) {
+    return Array.from(container.querySelectorAll(this.focusableSelector)).filter(item => this.isVisible(item));
+  }
+  getFirstFocusableElement(container) {
+    if (!container)
+      return null;
+    if (this.canReceiveProgrammaticFocus(container))
+      return container;
+    return this.getFocusableElements(container)[0] || null;
+  }
+  getListItems(listElement) {
+    if (!listElement)
+      return [];
+    return Array.from(listElement.querySelectorAll(".bcm-list__item")).filter(item => this.canReceiveProgrammaticFocus(item));
+  }
+  getItemById(listElement, itemId) {
+    return this.getListItems(listElement).find(item => item.id === itemId) || null;
+  }
+  getCurrentListItem(listElement, activeElement) {
+    if (!listElement)
+      return null;
+    const activeItem = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".bcm-list__item");
+    if (activeItem && this.isInsideElement(listElement, activeItem) && this.canReceiveProgrammaticFocus(activeItem)) {
+      return activeItem;
+    }
+    const focusedItem = listElement.querySelector(".bcm-list__item.focused");
+    return this.canReceiveProgrammaticFocus(focusedItem) ? focusedItem : null;
+  }
+  getPreferredListFocusElement(listElement, direction = "first") {
+    var _a;
+    if (!listElement)
+      return null;
+    const focusedItem = listElement.querySelector(".bcm-list__item.focused");
+    if (focusedItem && this.canReceiveProgrammaticFocus(focusedItem))
+      return focusedItem;
+    const selectedItem = (_a = listElement.querySelector(".bcm-list__item .selected")) === null || _a === void 0 ? void 0 : _a.closest(".bcm-list__item");
+    if (selectedItem && this.canReceiveProgrammaticFocus(selectedItem))
+      return selectedItem;
+    const listItems = this.getListItems(listElement);
+    if (listItems.length > 0) {
+      return direction === "last" ? listItems[listItems.length - 1] : listItems[0];
+    }
+    const focusableElements = this.getFocusableElements(listElement);
+    return direction === "last" ? focusableElements[focusableElements.length - 1] || null : focusableElements[0] || null;
+  }
+  isElementNaturallyFocusable(element) {
+    const nodeName = element.tagName;
+    if (nodeName === "A")
+      return element.hasAttribute("href");
+    return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(nodeName);
+  }
+  isEditableElement(element) {
+    if (!element)
+      return false;
+    const nodeName = element.tagName;
+    return nodeName === "INPUT" || nodeName === "TEXTAREA" || nodeName === "SELECT" || element.isContentEditable;
+  }
+  isVisible(element) {
+    if (!element.isConnected)
+      return false;
+    const style = window.getComputedStyle(element);
+    return style.display !== "none" && style.visibility !== "hidden";
+  }
+  isInsideElement(parent, child) {
+    return !!(parent && child && (parent === child || parent.contains(child)));
+  }
+  canReceiveProgrammaticFocus(element) {
+    if (!element || !this.isVisible(element))
+      return false;
+    const tabIndexAttr = element.getAttribute("tabindex");
+    if (tabIndexAttr != null) {
+      return Number(tabIndexAttr) >= 0;
+    }
+    return this.isElementNaturallyFocusable(element);
+  }
+  getInteractionContext(params) {
+    const { hostElement, targetElement, listElement, openTriggerElement } = params;
+    const activeElement = document.activeElement;
+    const isFocusInsideTarget = this.isInsideElement(targetElement, activeElement);
+    const isFocusInsideOpenTrigger = this.isInsideElement(openTriggerElement || null, activeElement);
+    const isFocusInsideHost = this.isInsideElement(hostElement, activeElement);
+    const isFocusInsideList = this.isInsideElement(listElement, activeElement);
+    const isTriggerFocused = isFocusInsideHost || isFocusInsideTarget || isFocusInsideOpenTrigger;
+    return {
+      activeElement,
+      isFocusInsideHost,
+      isFocusInsideList,
+      isFocusInsideOpenTrigger,
+      isFocusInsideTarget,
+      isTriggerFocused,
+    };
+  }
+  isInsideSearch(activeElement) {
+    return !!(activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".bcm-list__container-search"));
+  }
+  focusElement(element) {
+    var _a;
+    if (!element || !this.canReceiveProgrammaticFocus(element))
+      return false;
+    element.focus();
+    (_a = element.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(element, { block: "nearest" });
+    return this.isInsideElement(element, document.activeElement);
+  }
+  focusListElement(listElement, preferItem = false, direction = "first") {
+    const focusTarget = preferItem ? this.getPreferredListFocusElement(listElement, direction) : this.getFirstFocusableElement(listElement);
+    return this.focusElement(focusTarget);
+  }
+  focusListItemByOffset(listElement, activeElement, offset) {
+    const items = this.getListItems(listElement);
+    if (items.length === 0)
+      return false;
+    const currentItem = this.getCurrentListItem(listElement, activeElement);
+    const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+    const nextIndex = currentIndex === -1 ? (offset > 0 ? 0 : items.length - 1) : (currentIndex + offset + items.length) % items.length;
+    return this.focusElement(items[nextIndex]);
+  }
+  focusListItemWhenReady(listElement, itemId, remainingAttempts = 6) {
+    if (this.focusElement(this.getItemById(listElement, itemId)))
+      return true;
+    if (remainingAttempts <= 0)
+      return false;
+    requestAnimationFrame(() => {
+      this.focusListItemWhenReady(listElement, itemId, remainingAttempts - 1);
+    });
+    return true;
+  }
+  focusListElementWhenReady(listElement, preferItem = false, direction = "first", remainingAttempts = 6) {
+    if (this.focusListElement(listElement, preferItem, direction))
+      return true;
+    if (remainingAttempts <= 0)
+      return false;
+    requestAnimationFrame(() => {
+      this.focusListElementWhenReady(listElement, preferItem, direction, remainingAttempts - 1);
+    });
+    return true;
+  }
+  getParentListItem(item) {
+    if (!item)
+      return null;
+    const parentId = item.getAttribute("data-parent-id");
+    if (!parentId)
+      return null;
+    return this.getItemById(item.closest(".bcm-list__container"), parentId);
+  }
+  getFirstChildListItem(item) {
+    return (item === null || item === void 0 ? void 0 : item.querySelector(":scope > .bcm-list__item-childs > .bcm-list__item")) || null;
+  }
+  hasTreeChildren(item) {
+    return (item === null || item === void 0 ? void 0 : item.getAttribute("data-has-children")) === "true";
+  }
+  isTreeItemOpen(item) {
+    return (item === null || item === void 0 ? void 0 : item.getAttribute("data-open")) === "true";
+  }
+  isInsideAnyElement(elements, child) {
+    return elements.some(element => this.isInsideElement(element || null, child));
+  }
+  focusAdjacentOutside(params) {
+    const { hostElement, targetElement, listElement, openTriggerElement, direction } = params;
+    const relatedElements = [hostElement, targetElement, listElement, openTriggerElement];
+    const focusableElements = this.getFocusableElements(document.body).filter(item => !this.isInsideAnyElement(relatedElements, item));
+    const documentFocusableElements = this.getFocusableElements(document.body);
+    const relatedIndexes = documentFocusableElements
+      .map((item, index) => (this.isInsideAnyElement(relatedElements, item) ? index : -1))
+      .filter(index => index >= 0);
+    if (relatedIndexes.length === 0 || focusableElements.length === 0)
+      return false;
+    const anchorIndex = direction === "next" ? Math.max(...relatedIndexes) : Math.min(...relatedIndexes);
+    const focusTarget = direction === "next"
+      ? documentFocusableElements.slice(anchorIndex + 1).find(item => focusableElements.includes(item))
+      : documentFocusableElements
+        .slice(0, anchorIndex)
+        .reverse()
+        .find(item => focusableElements.includes(item));
+    return this.focusElement(focusTarget || null);
+  }
+  restoreTriggerFocus(params) {
+    const { hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger } = params;
+    const primaryTarget = preferOpenTrigger ? openTriggerElement : autocompleteInput || targetElement;
+    const secondaryTarget = preferOpenTrigger ? autocompleteInput || targetElement : openTriggerElement;
+    const focusTarget = this.getFirstFocusableElement(primaryTarget || null) || this.getFirstFocusableElement(secondaryTarget || null) || this.getFirstFocusableElement(hostElement);
+    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
+  }
+  handleKeyDown(params) {
+    const { disabled, isOpen, isOverlayType } = params;
+    if (disabled || !isOverlayType)
+      return false;
+    return isOpen ? this.handleOpenOverlayKeyDown(params) : this.handleClosedOverlayKeyDown(params);
+  }
+  handleClosedOverlayKeyDown(params) {
+    const { event, hostElement, targetElement, listElement, openList, openTriggerElement } = params;
+    const keyCode = event.keyCode || event.which;
+    const isSpaceKey = event.key === " " || event.key === "Spacebar" || keyCode === 32;
+    const isArrowDownKey = event.key === "ArrowDown" || keyCode === 40;
+    const isArrowUpKey = event.key === "ArrowUp" || keyCode === 38;
+    const context = this.getInteractionContext({ hostElement, targetElement, listElement, openTriggerElement });
+    if (!context.isTriggerFocused)
+      return false;
+    if (this.isEditableElement(context.activeElement) && !isArrowDownKey && !isArrowUpKey)
+      return false;
+    if (!isSpaceKey && !isArrowDownKey && !isArrowUpKey)
+      return false;
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    openList();
+    if (isArrowDownKey || isArrowUpKey) {
+      this.focusListElementWhenReady(listElement, true, isArrowUpKey ? "last" : "first");
+    }
+    return true;
+  }
+  handleOpenOverlayKeyDown(params) {
+    const { event, hostElement, targetElement, listElement, closeList, selectFocusedItem, openGroup, treeview, checkboxes, autocompleteInput, openTriggerElement } = params;
+    const keyCode = event.keyCode || event.which;
+    const isSpaceKey = event.key === " " || event.key === "Spacebar" || keyCode === 32;
+    const isEnterKey = event.key === "Enter" || keyCode === 13;
+    const isEscapeKey = event.key === "Escape" || keyCode === 27;
+    const isTabKey = event.key === "Tab" || keyCode === 9;
+    const isArrowDownKey = event.key === "ArrowDown" || keyCode === 40;
+    const isArrowUpKey = event.key === "ArrowUp" || keyCode === 38;
+    const isArrowRightKey = event.key === "ArrowRight" || keyCode === 39;
+    const isArrowLeftKey = event.key === "ArrowLeft" || keyCode === 37;
+    const context = this.getInteractionContext({ hostElement, targetElement, listElement, openTriggerElement });
+    const currentItem = this.getCurrentListItem(listElement, context.activeElement);
+    const isInsideSearch = this.isInsideSearch(context.activeElement);
+    if (isEscapeKey && (context.isTriggerFocused || context.isFocusInsideList || context.isFocusInsideHost)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    if (isSpaceKey && checkboxes && currentItem && !isInsideSearch) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      selectFocusedItem(currentItem.id);
+      return true;
+    }
+    if (isSpaceKey && currentItem && !checkboxes && !isInsideSearch) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return true;
+    }
+    if (isSpaceKey && context.isTriggerFocused && !this.isEditableElement(context.activeElement)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    if ((isArrowDownKey || isArrowUpKey) && listElement && (context.isFocusInsideList || context.isTriggerFocused)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (context.isFocusInsideList && !isInsideSearch) {
+        return this.focusListItemByOffset(listElement, context.activeElement, isArrowUpKey ? -1 : 1);
+      }
+      return this.focusListElementWhenReady(listElement, true, isArrowUpKey ? "last" : "first");
+    }
+    if (treeview && (isArrowRightKey || isArrowLeftKey) && currentItem && !isInsideSearch) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (isArrowRightKey) {
+        if (this.hasTreeChildren(currentItem) && !this.isTreeItemOpen(currentItem)) {
+          openGroup(currentItem.id);
+          return this.focusListItemWhenReady(listElement, currentItem.id);
+        }
+        return this.focusElement(this.getFirstChildListItem(currentItem));
+      }
+      if (this.hasTreeChildren(currentItem) && this.isTreeItemOpen(currentItem)) {
+        openGroup(currentItem.id);
+        return this.focusListItemWhenReady(listElement, currentItem.id);
+      }
+      return this.focusElement(this.getParentListItem(currentItem));
+    }
+    if (isEnterKey && context.isFocusInsideOpenTrigger && !this.isEditableElement(context.activeElement) && listElement) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return this.focusListElementWhenReady(listElement, true, "first");
+    }
+    if (isEnterKey && listElement && context.isFocusInsideList && !isInsideSearch) {
+      const focusedItem = currentItem || listElement.querySelector(".bcm-list__item.focused");
+      if (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.id) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        selectFocusedItem(focusedItem.id);
+        return true;
+      }
+    }
+    if (!isTabKey || !listElement)
+      return false;
+    const focusableElements = this.getFocusableElements(listElement);
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+    if (!event.shiftKey && context.isTriggerFocused) {
+      event.preventDefault();
+      return this.focusListElementWhenReady(listElement);
+    }
+    if (event.shiftKey && context.isFocusInsideList && firstFocusableElement && context.activeElement === firstFocusableElement) {
+      event.preventDefault();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    if (!event.shiftKey && context.isFocusInsideList && lastFocusableElement && context.activeElement === lastFocusableElement) {
+      event.preventDefault();
+      closeList();
+      requestAnimationFrame(() => {
+        this.focusAdjacentOutside({ hostElement, targetElement, listElement, openTriggerElement, direction: "next" });
+      });
+      return true;
+    }
+    if (context.isFocusInsideList && focusableElements.length === 0) {
+      event.preventDefault();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    return false;
+  }
+}
+
 class KeyControl {
   constructor(keyCode, element, elementName, childElementName) {
     this.elementName = '';
@@ -816,13 +1158,18 @@ class ListKeyControl extends KeyControl {
       }
     }
   }
-  keyEnterControl() { }
-  keySpaceControl() {
+  keyEnterControl() {
+    const focused = this.getFocusedElement();
+    if (!(focused === null || focused === void 0 ? void 0 : focused.id))
+      return;
     if (this.isCheckBoxes) {
-      const { id } = this.getFocusedElement();
-      this.checkedItem(id);
+      this.checkedItem(focused.id);
+    }
+    else {
+      this.selectedItem(focused.id);
     }
   }
+  keySpaceControl() { }
   keyDown() {
     switch (this.getKeyCode()) {
       case Bcm.KeyCode.up:
@@ -848,7 +1195,7 @@ class ListKeyControl extends KeyControl {
   keyUp() { }
 }
 
-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\"); .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}.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-ui-color-background-primary-default);--bcm-checkbox-secondary-color-default:var(--bcm-ui-color-background-base-default);--bcm-checkbox-primary-color-hover:var(--bcm-ui-color-background-primary-hover);--bcm-checkbox-secondary-color-hover:var(--bcm-ui-color-background-default-default);--bcm-checkbox-primary-color-focus-visible:var(--bcm-ui-color-background-primary-active);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-ui-color-background-default-active);--bcm-checkbox-primary-color-active:var(--bcm-ui-color-background-primary-active);--bcm-checkbox-secondary-color-active:var(--bcm-ui-color-background-default-active);--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-ui-color-text-default)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:24px}.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:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-4);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:32px}.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:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:40px}.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:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.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:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.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:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6)}.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-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-border-radius-default);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{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{display:none;opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800}.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{transition:transform 50ms;display:flex}.bcm-list__container.bcm-list__type-linked-component.is-open-animation,.bcm-list__container.bcm-list__type-select.is-open-animation,.bcm-list__container.bcm-list__type-autocomplete.is-open-animation{opacity:1;transform:translateY(0);visibility:visible}.bcm-list__container.bcm-list__type-linked-component{margin-top:2px}.bcm-list__label{display:contents}.bcm-list__label>div{display:contents}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;color:var(--bcm-ui-color-text-default);background-color:var(--bcm-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-border-radius-default);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:#6B7280}.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-ui-color-text-placeholder)}.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:0 4px 0 4px;font-size:16px;color:var(--bcm-ui-color-text-default)}.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-ui-color-text-disabled);background-color:var(--bcm-ui-color-background-disabled-default);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-ui-color-border-primary)}.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-ui-color-border-primary);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-ui-color-border-primary)}.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-ui-color-text-default);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-ui-color-text-disabled);background-color:var(--bcm-ui-color-background-disabled-default);user-select:none;cursor:not-allowed}.bcm-list__item-content.readonly{color:var(--bcm-new-ds-color-slate-500);background-color:var(--bcm-new-ds-color-slate-100);cursor:default}.bcm-list__item-content.readonly .bcm-list__item-content-collapse-icon{color:var(--bcm-new-ds-color-slate-700);cursor:pointer}.bcm-list__item-content.selected{color:var(--bcm-ui-color-text-primary);background-color:var(--bcm-ui-color-background-stated-primary-default)}.bcm-list__item-content.selected:hover:not(.disabled):not(.readonly){color:var(--bcm-ui-color-text-primary);background-color:var(--bcm-ui-color-background-stated-primary-hover)}.bcm-list__item-content:hover:not(.disabled):not(.readonly){background-color:var(--bcm-ui-color-background-base-hover)}.bcm-list__item-content:active:not(.disabled):not(.readonly){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-ui-color-background-base-active)}.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--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\"); .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}.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-ui-color-background-primary-default);--bcm-checkbox-secondary-color-default:var(--bcm-ui-color-background-base-default);--bcm-checkbox-primary-color-hover:var(--bcm-ui-color-background-primary-hover);--bcm-checkbox-secondary-color-hover:var(--bcm-ui-color-background-default-default);--bcm-checkbox-primary-color-focus-visible:var(--bcm-ui-color-background-primary-active);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-ui-color-background-default-active);--bcm-checkbox-primary-color-active:var(--bcm-ui-color-background-primary-active);--bcm-checkbox-secondary-color-active:var(--bcm-ui-color-background-default-active);--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-ui-color-text-default)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:24px}.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:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-4);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:32px}.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:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:40px}.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:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4)}.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:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5)}.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:var(--bcm-ui-font-size-6);line-height:var(--bcm-ui-line-height-6)}.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-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-border-radius-default);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{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{display:none;opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;z-index:10800}.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{display:flex}.bcm-list__container.bcm-list__type-linked-component.is-open-animation,.bcm-list__container.bcm-list__type-select.is-open-animation,.bcm-list__container.bcm-list__type-autocomplete.is-open-animation{opacity:1;visibility:visible}.bcm-list__container.bcm-list__type-linked-component{margin-top:2px}.bcm-list__label{display:contents}.bcm-list__label>div{display:contents}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;color:var(--bcm-ui-color-text-default);background-color:var(--bcm-ui-color-background-base-default);border:1px solid var(--bcm-ui-color-border-default);border-radius:var(--bcm-ui-border-radius-default);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:#6B7280}.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-ui-color-text-placeholder)}.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:0 4px 0 4px;font-size:16px;color:var(--bcm-ui-color-text-default)}.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-ui-color-text-disabled);background-color:var(--bcm-ui-color-background-disabled-default);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-ui-color-border-primary)}.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-ui-color-border-primary);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-ui-color-border-primary)}.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-ui-color-text-default);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-ui-color-text-disabled);background-color:var(--bcm-ui-color-background-disabled-default);user-select:none;cursor:not-allowed}.bcm-list__item-content.readonly{color:var(--bcm-new-ds-color-slate-500);background-color:var(--bcm-new-ds-color-slate-100);cursor:default}.bcm-list__item-content.readonly .bcm-list__item-content-collapse-icon{color:var(--bcm-new-ds-color-slate-700);cursor:pointer}.bcm-list__item-content.selected{color:var(--bcm-ui-color-text-primary);background-color:var(--bcm-ui-color-background-stated-primary-default)}.bcm-list__item-content.selected:hover:not(.disabled):not(.readonly){color:var(--bcm-ui-color-text-primary);background-color:var(--bcm-ui-color-background-stated-primary-hover)}.bcm-list__item-content:hover:not(.disabled):not(.readonly){background-color:var(--bcm-ui-color-background-base-hover)}.bcm-list__item-content:active:not(.disabled):not(.readonly){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-ui-color-background-base-active)}.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--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}@media (max-width: 768px), (pointer: coarse){.bcm-list__container-search .bcm-input__container,.bcm-list__autocomplete .bcm-input__container{font-size:16px}.bcm-list__container-search .bcm-input-element,.bcm-list__autocomplete .bcm-input-element{font-size:16px}}.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;
@@ -871,8 +1218,18 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.close = createEvent(this, "bcm-close", 3);
     this.listClose = createEvent(this, "bcm-list-close", 7);
     this.listOpen = createEvent(this, "bcm-list-open", 7);
+    var _a, _b;
     this.debounce = null;
+    this.focusManager = new ListFocusManager();
+    this.openTriggerElement = null;
+    this.suppressScrollCloseUntil = 0;
     this.debounceHandler = Generate.debounceInput(() => this.listenResize(), 300, false);
+    this.handleVisualViewportChange = () => {
+      if (!this.isOpen)
+        return;
+      this.preventScrollClose(400);
+      this.calculateLocation();
+    };
     this._id = Generate.UID();
     this.tempId = Generate.UID();
     this.type = Bcm$1.ListType.listbox;
@@ -954,6 +1311,8 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
     window.addEventListener("wheel", this.handleWheel.bind(this), true);
     window.addEventListener("resize", this.handleResize.bind(this), true);
+    (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", this.handleVisualViewportChange, true);
+    (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", this.handleVisualViewportChange, true);
   }
   connectedCallback() {
     if (this.height != "256px") {
@@ -1004,7 +1363,10 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // }
   }
   disconnectedCallback() {
+    var _a, _b;
     this.isOpen = false;
+    (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.handleVisualViewportChange, true);
+    (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.handleVisualViewportChange, true);
     if (this.stopDeepClean)
       return;
     listState.removeState(this._id);
@@ -1063,8 +1425,10 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   async handleOpen() {
     const isAutoSelected = this.autoFocusSelected && this.type == "select" && !this.checkboxes && this.value;
+    const isMobile = this.isMobileViewport();
     if (this.isOpen) {
       this.detectClone();
+      await this.prepareMobileViewportForOpen();
       if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
         const list = this.el.querySelector(`#bcm-list-${this._id}`);
         if (list) {
@@ -1075,7 +1439,9 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.open.emit();
       this.calculateLocation();
       this.onSelectSearch();
-      await delay(50);
+      if (!isMobile) {
+        await delay(50);
+      }
       this.isOpenAnimation = true;
       if (isAutoSelected) {
         this.focusSelectedElement();
@@ -1133,11 +1499,41 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this.calculateLocation();
         }
       }
+      else if (this.shouldKeepOpenWhileInteracting(list)) {
+        if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
+          this.calculateLocation();
+        }
+      }
       else {
         this.hide();
       }
     }
   }
+  handleTouchStart(event) {
+    if (!this.isOpen)
+      return;
+    const list = document.querySelector(`#bcm-list-${this._id}`);
+    const isInside = Generate.findEventPath(event, this.el) || (list && Generate.findEventPath(event, list));
+    if (isInside) {
+      this.preventScrollClose(1000);
+    }
+    else if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
+      this.isOpen = false;
+    }
+  }
+  handleFocusIn(event) {
+    if (!this.isOpen)
+      return;
+    const list = document.querySelector(`#bcm-list-${this._id}`);
+    const isInside = Generate.findEventPath(event, this.el) || (list && Generate.findEventPath(event, list));
+    if (isInside) {
+      this.preventScrollClose(1000);
+      this.calculateLocation();
+    }
+    else if (this.isOverlayType()) {
+      this.isOpen = false;
+    }
+  }
   clearAutocomplete() {
     if (this.type == "autocomplete") {
       const autocompleteInput = this.getAutoCompleteInput();
@@ -1233,8 +1629,8 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a, _b, _c, _d, _e, _f;
     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`) {
       this.searchGetParents = snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
-      this.searchResultLimit = 10;
       this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
+      this.searchResultLimit = this.getInitialSearchResultLimit();
       this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
       if (this.searchFound > 0 && this.highlight) {
         this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
@@ -1260,13 +1656,51 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //keyboard navigation
   handleKeyDown(ev) {
     const keycode = ev.keyCode || ev.which;
-    if (keycode === Bcm$1.KeyCode.escape) {
-      if (this.isOpen) {
+    const handled = this.focusManager.handleKeyDown({
+      event: ev,
+      disabled: this.disabled,
+      isOpen: this.isOpen,
+      isOverlayType: this.isOverlayType(),
+      hostElement: this.el,
+      targetElement: this.getTargetElement(),
+      listElement: document.getElementById(`bcm-list-${this._id}`),
+      openList: () => {
+        this.rememberOpenTrigger();
+        this.isOpen = true;
+      },
+      closeList: () => {
         this.isOpen = false;
-        ev.preventDefault();
-        ev.stopPropagation();
-        ev.stopImmediatePropagation();
-      }
+      },
+      selectFocusedItem: (itemId) => {
+        if (this.checkboxes) {
+          this.checkedItem(itemId);
+        }
+        else {
+          this.selectedItem(itemId);
+        }
+      },
+      openGroup: (itemId) => {
+        this.openGroup(itemId);
+      },
+      treeview: this.treeview,
+      checkboxes: this.checkboxes,
+      autocompleteInput: this.type == "autocomplete" ? this.getAutoCompleteInput() : null,
+      openTriggerElement: this.openTriggerElement,
+    });
+    if (handled)
+      return;
+    if ((ev.key === "Escape" || keycode === Bcm$1.KeyCode.escape) && this.isOpen) {
+      this.isOpen = false;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      this.focusManager.restoreTriggerFocus({
+        hostElement: this.el,
+        targetElement: this.getTargetElement(),
+        autocompleteInput: this.type == "autocomplete" ? this.getAutoCompleteInput() : null,
+        openTriggerElement: this.openTriggerElement,
+        preferOpenTrigger: true,
+      });
     }
     if (this.keyControl) {
       const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
@@ -1276,6 +1710,9 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       keyboard.checkedItem = checkedItemId => {
         this.checkedItem(checkedItemId);
       };
+      keyboard.selectedItem = itemId => {
+        this.selectedItem(itemId);
+      };
       keyboard.keyDown();
     }
   }
@@ -1385,7 +1822,8 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     }
   }
-  async show() {
+  async show(openTriggerElement) {
+    this.rememberOpenTrigger(openTriggerElement);
     this.isOpen = true;
     return Promise.resolve();
   }
@@ -1422,11 +1860,50 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async onSelectSearch() {
     const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
     if (searchInput) {
+      this.preventScrollClose(1000);
       await delay(100);
       searchInput.onBcmFocus();
       searchInput.onBcmSelect();
     }
   }
+  preventScrollClose(duration = 500) {
+    this.suppressScrollCloseUntil = Date.now() + duration;
+  }
+  isMobileViewport() {
+    return window.matchMedia("(max-width: 768px), (pointer: coarse)").matches;
+  }
+  async prepareMobileViewportForOpen() {
+    var _a;
+    if (!this.isMobileViewport() || !(this.type == "select" || this.type == "autocomplete" || this.linkedComponent)) {
+      return;
+    }
+    const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+    const targetElement = document.getElementById(targetElementId);
+    if (!targetElement)
+      return;
+    const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
+    const rect = targetElement.getBoundingClientRect();
+    const minimumSpaceBelow = Math.min(320, viewportHeight * 0.45);
+    const shouldReposition = rect.top > viewportHeight * 0.35 || viewportHeight - rect.bottom < minimumSpaceBelow;
+    if (shouldReposition) {
+      this.preventScrollClose(1200);
+      const desiredTop = Math.max(110, Math.min(180, viewportHeight * 0.24));
+      const delta = rect.top - desiredTop;
+      window.scrollBy({
+        top: delta,
+        left: 0,
+        behavior: "auto",
+      });
+      await delay(50);
+      this.calculateLocation();
+    }
+  }
+  shouldKeepOpenWhileInteracting(list) {
+    var _a;
+    const activeElement = document.activeElement;
+    const focusedInside = !!(activeElement && (((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) || (list === null || list === void 0 ? void 0 : list.contains(activeElement))));
+    return focusedInside || Date.now() < this.suppressScrollCloseUntil;
+  }
   async filterOtherList(ids) {
     const checklist = (await this.getCheckedList()).nestedResult;
     const filter = Generate.convertIdsToNestedData(ids, checklist);
@@ -1489,8 +1966,30 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return snq(() => listState.getData(this._id), []);
   }
+  hasNestedItems(items = []) {
+    return items.some((item) => { var _a; return (item === null || item === void 0 ? void 0 : item.type) === "group" || ((_a = item === null || item === void 0 ? void 0 : item.items) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+  }
+  getVisibleSearchItems() {
+    const visibledItems = this.returnFilterData["visibledItems"];
+    if (this.searchFound == null || !Array.isArray(visibledItems)) {
+      return null;
+    }
+    return visibledItems;
+  }
+  getInitialSearchResultLimit() {
+    if (this.searchFound === 0) {
+      return 0;
+    }
+    const initialLimit = Math.max(10, this.limit);
+    return this.searchFound == null ? initialLimit : Math.min(initialLimit, this.searchFound);
+  }
   getLimitedItems(ids) {
-    return snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
+    const visibleSearchItems = this.getVisibleSearchItems();
+    const limit = this.searchResultLimit || this.limit;
+    if (visibleSearchItems && !this.hasNestedItems(this.getItems())) {
+      return visibleSearchItems.slice(0, limit);
+    }
+    return snq(() => listState.getDataPagination(this._id, limit, ids), []);
   }
   openGroup(parentId) {
     listState.openGroup(this._id, parentId);
@@ -1518,7 +2017,15 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
       this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
       this.isOpen = false;
-      this.markForCheck();
+      await this.markForCheck();
+      if (this.isOverlayType()) {
+        await delay(10);
+        this.focusManager.restoreTriggerFocus({
+          hostElement: this.el,
+          targetElement: this.getTargetElement(),
+          autocompleteInput: this.type == "autocomplete" ? this.getAutoCompleteInput() : null,
+        });
+      }
       if (this.type == "autocomplete" && this.value) {
         // await delay(100)
         // this.resetCaption()
@@ -1556,15 +2063,36 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
+  rememberOpenTrigger(openTriggerElement) {
+    const activeElement = openTriggerElement || document.activeElement;
+    this.openTriggerElement = this.isValidOpenTrigger(activeElement) ? activeElement : null;
+  }
+  isValidOpenTrigger(element) {
+    return !!(element && element.isConnected && element !== document.body && element !== document.documentElement);
+  }
+  isOverlayType() {
+    return this.type == "select" || this.type == "autocomplete" || !!this.linkedComponent;
+  }
+  getTargetElement() {
+    const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+    return document.getElementById(targetElementId);
+  }
   /** @description Fixes the issue where the list appears empty during fast scrolling. */
   dataScrollEvent(event) {
     var _a, _b;
     const itemHeight = this.size === 'small' ? 28 : this.size === 'large' ? 48 : 36;
     const currentScrollBottom = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.clientHeight);
     const requiredItems = Math.ceil(currentScrollBottom / itemHeight) + 20;
-    if (requiredItems > this.limit) {
-      this.limit = requiredItems;
-      this.searchResultLimit = requiredItems;
+    const isSearchActive = this.searchFound != null && !this.isSelectedOther;
+    const currentLimit = isSearchActive ? this.searchResultLimit || 0 : this.limit;
+    if (requiredItems > currentLimit) {
+      if (isSearchActive) {
+        this.searchResultLimit = Math.min(requiredItems, this.searchFound);
+      }
+      else {
+        this.limit = requiredItems;
+        this.searchResultLimit = requiredItems;
+      }
     }
   }
   async calculateLocation() {
@@ -1637,20 +2165,20 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /** @description Focus selected element * BUG 282262 */
   focusSelectedElement() {
-    var _a;
+    var _a, _b;
     const listElement = document.querySelector(`#bcm-list-${this._id}`);
     if (!listElement)
       return;
-    const selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
+    const selectedId = Array.isArray(this.value) ? (_a = this.value[0]) === null || _a === void 0 ? void 0 : _a.id : (_b = this.value) === null || _b === void 0 ? void 0 : _b.id;
     if (selectedId) {
-      const targetItem = listElement.querySelector(`[id*="${selectedId}"]`);
-      if (targetItem) {
-        targetItem.scrollIntoView({
-          block: 'center',
-          inline: 'nearest',
-          behavior: 'auto'
-        });
-        targetItem.focus();
+      const targetItem = (listElement.querySelector(`[id="${selectedId}"]`) || listElement.querySelector(`[id*="${selectedId}"]`));
+      const scrollContainer = listElement.querySelector(".scrolling");
+      if (targetItem && scrollContainer) {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const itemRect = targetItem.getBoundingClientRect();
+        const relativeOffsetTop = itemRect.top - containerRect.top + scrollContainer.scrollTop;
+        scrollContainer.scrollTop = relativeOffsetTop - (containerRect.height / 2) + (itemRect.height / 2);
+        targetItem.focus({ preventScroll: true });
         const items = listElement.querySelectorAll(".bcm-list__item");
         items.forEach(i => i.classList.remove("focused"));
         targetItem.classList.add("focused");
@@ -1685,7 +2213,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "--min-height": openedType ? "inherit" : this.minHeight,
       } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h("bcm-label", { tooltip: this.tooltip, 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, { type: this.type, 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, tempId: this.tempId, 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, handleTransitionEnd: e => this.handleTransitionEnd(e) }), 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, { type: this.type, 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, tempId: this.tempId, 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, handleTransitionEnd: e => this.handleTransitionEnd(e), disabled: disabled, readonly: readonly }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -1776,7 +2304,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "resetCaption": [64],
     "show": [64],
     "hide": [64]
-  }, [[2, "bcm-is-intersecting", "isIntersecting"], [2, "bcm-items", "handleSlotItems"], [0, "bcm-change", "handleChange"], [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"]]]);
+  }, [[2, "bcm-is-intersecting", "isIntersecting"], [2, "bcm-items", "handleSlotItems"], [0, "bcm-change", "handleChange"], [11, "touchstart", "handleTouchStart"], [10, "focusin", "handleFocusIn"], [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.prototype, "el", void 0);