bromcom-ui 2.7.37-rc.3 → 2.7.37-rc.4-0

package/dist/components/bcm-list.js

@@ -0,0 +1,1859 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import { J as JsonParse } from './json-parse-decarator.js';
+import './color-helper.js';
+import { V as Validators } from './validators.js';
+import { s as snq, G as Generate } from './generate.js';
+import { N as NumberHelper } from './number-helper.js';
+import { S as StringHelper } from './string-helper.js';
+import './element-dragger.js';
+import { g as getPlacement, s as setPosition } from './popover-placement.js';
+import { p as pluralize, d as delay } from './utils.js';
+import { B as Bcm, a as Bcm$1 } from './bcm.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import { c as classnames } from './index2.js';
+import './input-template.js';
+import { L as LabelTemplate } from './label-template.js';
+import './types.js';
+import { c as createStore } from './index3.js';
+import { T as Tooltip } from './tooltip-helper.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './search.js';
+
+const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
+  // if ( indeterminate ) {
+  //   checked = indeterminate == 'determinate' ? true : false 
+  // }
+  const hostClasses = classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
+    // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
+    // 'size-3': optionType === 'button' && size === Bcm.Size.large,
+    'error': captionType == Bcm.Status.error,
+    hidden,
+    checked,
+    disabled,
+    required,
+    readonly,
+  });
+  const bcmCheckboxIconClass = classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
+    'bcm-checkbox__label-icon-checked': checked,
+  });
+  const bcmCheckboxLabelClass = classnames('bcm-checkbox__label');
+  return (h("div", { class: hostClasses },
+    h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
+    h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
+      h("span", { class: bcmCheckboxIconClass },
+        h("bcm-icon", { icon: "far fa-check" })))));
+};
+
+const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
+  total = total || 0;
+  variableText = variableText ? pluralize(variableText, total) : 'items';
+  return (h("footer", { class: "bcm-info-footer" },
+    h("bcm-text", { scale: "size-1", color: "grey-8" },
+      (multiple && selected > 0) && ` ( ${selected} selected ) `,
+      ` Total ${total} `,
+      found != null && ` / ${found} `,
+      ` ${variableText} found. `)));
+};
+
+const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
+  const isHaveChildren = item.items && item.items.length > 0;
+  var text = StringHelper.htmlEntities(item.text);
+  let intersection = [];
+  if (highlight && StringHelper.slugify(text).includes(StringHelper.slugify(highlight))) {
+    if (!searchIsOnlyChilds || (searchIsOnlyChilds && (!isHaveChildren || (!treeview && item.type != "group")))) {
+      text = StringHelper.highlight(text, highlight);
+    }
+  }
+  if (item.type != 'group' && item.template) {
+    const match = item.template
+      .replace(/\s/g, '')
+      .match(/\{{[^}}]+\}/g)
+      .map(x => x.replace(/[{}]/g, ''));
+    const keys = Object.keys(item.itemObject);
+    intersection = match.filter(x => keys.includes(x));
+  }
+  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 itemClick = (event) => {
+    let path = event.path || event.composedPath();
+    if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
+      return;
+    }
+    if (readonly) {
+      collapseClick();
+    }
+    !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
+  };
+  const collapseClick = () => {
+    item.open = item.isSearching;
+    openGroup(item.id);
+  };
+  return (h("div", { id: item.id, hidden: item.hidden, tabindex: "-1", "on-focus": e => !unClickable && !disabled && focusItem(e), 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--readonly': readonly,
+    }) },
+    h("div", { class: classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled: disabled }) },
+      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("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 = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon }) => {
+  const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
+  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } },
+    data && searchable && (h("section", { class: "bcm-list__container-search" },
+      h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, searchIsOnlyChilds: searchIsOnlyChilds }))),
+    h("main", { onScroll: (e) => onScrollEvent(e), class: "scrolling" },
+      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) }))),
+      ((!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" })))),
+      searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" },
+        h("bcm-empty", { style: { "height": "auto" }, icon: emptyIcon },
+          h("span", { innerHTML: emptyText || "No Data Found" }))))),
+    infoFooter && data && data.length > 0 && (h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
+};
+
+const { state } = createStore({
+  value: new Map(),
+});
+const setValue = val => {
+  const { id, dataSource, options } = val;
+  const { type, treeview, checkboxes, searchable, value, name, label, size, disabled, readonly, highlight, required, hidden, fullWidth, height, maxHeight, minHeight, width, infoFooter, variableText, template, allOpen, keyControl, checkAll, linkedComponent, placeholder, searchPlaceholder, searchIsOnlyChilds, clearable, caption, noCaption, captionType, captionError, placement, } = options;
+  const itemOptions = { size, checkboxes, template, allOpen, highlight, treeview };
+  const data = {
+    id: snq(() => id, Generate.UID),
+    dataSource: dataSource && dataSource.length > 0 && recursive(dataSource, itemOptions),
+    options: {
+      type,
+      treeview,
+      checkboxes,
+      searchable,
+      value,
+      name,
+      label,
+      size,
+      disabled,
+      readonly,
+      highlight,
+      required,
+      hidden,
+      fullWidth,
+      height,
+      maxHeight,
+      minHeight,
+      width,
+      infoFooter,
+      variableText,
+      template,
+      allOpen,
+      keyControl,
+      checkAll,
+      linkedComponent,
+      placeholder,
+      searchPlaceholder,
+      searchIsOnlyChilds,
+      clearable,
+      caption,
+      noCaption,
+      captionType,
+      captionError,
+      placement,
+    },
+    totalItems: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 && calculateTotalItems(dataSource, options.treeview),
+    totalRoots: dataSource === null || dataSource === void 0 ? void 0 : dataSource.length,
+  };
+  state.value.set(data.id, data);
+};
+const recursive = (data, options, parentId) => {
+  let recData = [];
+  if (data && data.length > 0) {
+    recData = data.map(item => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
+      ? { items: snq(() => recursive(item.items, options, item.id), []) }
+      : { items: [] }))));
+  }
+  return recData;
+};
+const removeValue = _id => {
+  state.value.delete(_id);
+};
+const getValue = id => snq(() => state.value.get(id), {});
+const calculateTotalItems = (dataSource, treeview) => {
+  let total = 0;
+  dataSource.forEach(item => {
+    if (treeview || (!treeview && item.type != 'group')) {
+      total += 1;
+    }
+    if ((treeview || (!treeview && item.type == 'group')) && item.items) {
+      total += calculateTotalItems(item.items, treeview);
+    }
+  });
+  return total;
+};
+const getData = id => {
+  let data = [];
+  const value = getValue(id);
+  if (value) {
+    const { dataSource } = value;
+    data = dataSource;
+  }
+  return data;
+};
+const getDataPagination = (id, limit = 3, ids) => {
+  let data = [];
+  const value = getValue(id);
+  if (value) {
+    const { dataSource } = value;
+    data = !ids ? dataSource.slice(0, limit) : dataSource.filter(item => ids.indexOf(item.id) > -1).slice(0, limit);
+  }
+  return data;
+};
+const openGroup = (id, groupId, items, status) => {
+  let dataSource;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      if (status != undefined) {
+        item.open = status;
+      }
+      else if (item.id == groupId) {
+        item.open = !item.open;
+        item.isSearching = item.open;
+        if (!item.open && item.items) {
+          openGroup(id, groupId, item.items, false);
+        }
+      }
+      else if (item.items) {
+        openGroup(id, groupId, item.items);
+      }
+    });
+  }
+};
+const removeOtherTags = (id, ids, items) => {
+  ids = Array.isArray(ids) ? ids : [ids];
+  let dataSource;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    ids.forEach(otherTagIds => {
+      dataSource.forEach(child => {
+        if (child.id == otherTagIds) {
+          child.checked = false;
+          child.itemObject.checked = false;
+        }
+        else if (child.items) {
+          onRemoveItems(id, otherTagIds, child.items);
+        }
+      });
+    });
+  }
+};
+const onRemoveItems = (id, itemId, items) => {
+  if (items) {
+    items.forEach(item => {
+      if (item.id == itemId) {
+        item.checked = false;
+        item.itemObject.checked = false;
+        indeterminateStatus(id, item.parentId);
+      }
+      else if (item.items) {
+        onRemoveItems(id, itemId, item.items);
+      }
+    });
+  }
+};
+const addChecked = (id, ids) => {
+  const value = getValue(id);
+  if (value) {
+    ids.forEach(item => {
+      checkedItem(id, item);
+    });
+  }
+};
+const checkedItem = (id, itemId) => {
+  findItem(id, itemId);
+};
+const findItem = (id, itemId, items) => {
+  itemId = Array.isArray(itemId) ? itemId : [itemId];
+  let dataSource;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      if (itemId.includes(item.id)) {
+        checkedProcess(id, item);
+        if (item.parentId) {
+          indeterminateStatus(id, item.parentId);
+        }
+      }
+      else if (item.items) {
+        findItem(id, itemId, item.items);
+      }
+    });
+  }
+};
+const checkedProcess = (id, item, status) => {
+  const value = getValue(id);
+  if (value) {
+    const treeview = value.options.treeview;
+    if (item) {
+      // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
+      if (treeview || (!treeview && item.type != 'group')) {
+        if (!item.disabled) {
+          if (status != undefined) {
+            item.checked = status;
+          }
+          else {
+            item.checked = !item.checked;
+          }
+          item.itemObject.checked = item.checked;
+          item.indeterminate = item.checked ? 'determinate' : 'uncheck';
+        }
+      }
+      if (item.items) {
+        item.items.forEach(child => {
+          checkedProcess(id, child, status == undefined ? item.checked : status);
+        });
+      }
+    }
+  }
+};
+const indeterminateStatus = (id, itemId, items) => {
+  let dataSource;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      if (item.id == itemId) {
+        let allChecked = true;
+        let allUnchecked = true;
+        if (item.items) {
+          item.items.map(child => {
+            (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
+            !child.checked && (allChecked = false);
+          });
+        }
+        const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+        item.indeterminate = indeterminateState;
+        item.checked = indeterminateState == 'determinate' ? true : false;
+        item.itemObject.checked = item.checked;
+        if (item.parentId) {
+          indeterminateStatus(id, item.parentId);
+        }
+      }
+      else if (item.items) {
+        indeterminateStatus(id, itemId, item.items);
+      }
+    });
+  }
+};
+const filterData = (id, ids, items, searchOtherTag) => {
+  let checkeds = [];
+  let visibled = [];
+  getValue(id).isSearchOtherTag = searchOtherTag;
+  let dataSource;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      if (ids) {
+        item.hidden = true;
+        // const filter = ids.find((find) => find.id === item.id)
+        var filter;
+        for (let index = 0; index < ids.length; index++) {
+          if (ids[index].id === item.id) {
+            filter = ids[index];
+            break;
+          }
+        }
+        if (filter) {
+          item.hidden = false;
+          if (!getValue(id).isSearchOtherTag) {
+            item.isSearching = true;
+          }
+          visibled.push(item);
+          if (item.checked) {
+            checkeds.push(item);
+          }
+          if (filter.items) {
+            const { checkedItems, visibledItems } = filterData(id, filter.items, item.items, searchOtherTag);
+            if (checkedItems) {
+              checkeds = [...new Set([...checkeds, ...checkedItems])];
+            }
+            if (visibledItems) {
+              visibled = [...new Set([...visibled, ...visibledItems])];
+            }
+          }
+        }
+      }
+      else {
+        item.hidden = false;
+        if (item.items) {
+          filterData(id, null, item.items);
+        }
+        visibled.push(item);
+        item.isSearching = false;
+      }
+    });
+  }
+  return { checkedItems: checkeds !== null && checkeds !== void 0 ? checkeds : [], visibledItems: visibled !== null && visibled !== void 0 ? visibled : [] };
+};
+const getSelected = (id, items) => {
+  let dataSource;
+  let selected = null;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      if (item.selected) {
+        selected = item.itemObject;
+      }
+      else if (item.items) {
+        const found = getSelected(id, item.items);
+        if (found) {
+          selected = found;
+        }
+      }
+    });
+  }
+  return selected;
+};
+const getCheckedList = (id, items) => {
+  let dataSource;
+  let checkedList = [];
+  let nestedResult = [];
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      var _a;
+      let foundChild = [];
+      let foundItem = [];
+      if (item.checked) {
+        checkedList.push(item.itemObject);
+        foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+      }
+      if (item.items) {
+        const found = getCheckedList(id, item.items);
+        if (((_a = found === null || found === void 0 ? void 0 : found.checkedList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+          checkedList = [...checkedList, ...found.checkedList];
+        }
+        if (found.nestedResult.length > 0) {
+          foundChild = found.nestedResult;
+        }
+      }
+      if (foundChild.length > 0) {
+        if (foundItem.length == 0) {
+          foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+        }
+        foundItem[0].items = foundChild;
+        nestedResult.push(foundItem[0]);
+      }
+      else {
+        if (foundItem.length > 0) {
+          foundItem[0].items = foundChild;
+          nestedResult.push(foundItem[0]);
+        }
+      }
+    });
+  }
+  return { checkedList: (checkedList === null || checkedList === void 0 ? void 0 : checkedList.length) > 0 ? checkedList : null, nestedResult: nestedResult };
+};
+const selectedItem = (id, itemId, items) => {
+  let dataSource;
+  let selected = [];
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      if (itemId) {
+        if (item.id == itemId) {
+          // if (!item.selected){
+          item.selected = true;
+          item.itemObject.selected = item.selected;
+          // }
+        }
+        else {
+          if (item.selected) {
+            item.selected = false;
+            item.itemObject.selected = item.selected;
+          }
+        }
+      }
+      if (item.items) {
+        const found = selectedItem(id, itemId, item.items);
+        if ((found === null || found === void 0 ? void 0 : found.length) > 0) {
+          selected = [...selected, ...found];
+        }
+      }
+      if (item.selected) {
+        selected.push(item.itemObject);
+      }
+    });
+  }
+  return selected && selected.length > 0 ? selected : null;
+};
+const setClear = (id, items) => {
+  let dataSource;
+  if (items) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  if (dataSource) {
+    dataSource.forEach(item => {
+      var _a, _b, _c;
+      item.checked && (item.checked = false);
+      item.selected && (item.selected = false);
+      item.indeterminate && (item.indeterminate = 'uncheck');
+      ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
+      ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
+      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
+      if (item.items) {
+        setClear(id, item.items);
+      }
+    });
+  }
+};
+const selectAll = (id, status) => {
+  const dataSource = getValue(id).dataSource;
+  if (dataSource) {
+    dataSource.forEach(item => {
+      checkedProcess(id, item, status);
+    });
+  }
+};
+const updateOptions = (id, options) => {
+  Object.keys(getValue(id).options).forEach(key => {
+    getValue(id).options[key] = options[key];
+  });
+};
+const removeState = id => {
+  return Promise.resolve(state.value.delete(id));
+};
+const listState = {
+  setValue,
+  removeValue,
+  getValue,
+  getData,
+  getDataPagination,
+  openGroup,
+  checkedItem,
+  filterData,
+  getSelected,
+  getCheckedList,
+  selectedItem,
+  addChecked,
+  setClear,
+  selectAll,
+  removeOtherTags,
+  onRemoveItems,
+  updateOptions,
+  removeState,
+};
+
+class KeyControl {
+  constructor(keyCode, element, elementName, childElementName) {
+    this.elementName = '';
+    this.childElementName = '';
+    this.keyCode = keyCode;
+    this.element = element;
+    this.elementName = elementName;
+    this.childElementName = childElementName;
+  }
+  getKeyCode() {
+    return this.keyCode;
+  }
+  getElementName() {
+    return this.elementName;
+  }
+  getChildElementName() {
+    return this.childElementName;
+  }
+  getFocusedElementName() {
+    return this.getElementName() + '.focused';
+  }
+  getFocusedElement() {
+    return this.element.querySelectorAll(this.getFocusedElementName())[0] || null;
+  }
+  getFirstElement() {
+    return this.element.querySelectorAll(this.getElementName())[0] || null;
+  }
+  getNextElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) || this.getFirstElement();
+  }
+  getPreviousElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.getFirstElement();
+  }
+  getChildElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName())[0]) || null;
+  }
+  getParentElement(element) {
+    if (element && element) {
+      const isRootElement = element && element.attributes['data-isroot'];
+      if (isRootElement) {
+        return element;
+      }
+      return this.getParentElement(element.parentNode);
+    }
+  }
+  focusElementIsOpen() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.classList.contains('bcm-list__item--open')) || false;
+  }
+  isRootElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.getChildElementName()).length) > 0;
+  }
+  isRootElementIsOpen() {
+    return this.getFocusedElement().classList.contains('bcm-list__item--open');
+  }
+  getFocusedChildElement() {
+    var _a;
+    return ((_a = this.getChildElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.focused')[0]) || null;
+  }
+  isLastElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null;
+  }
+  focusParentElementFirstChild() {
+    var _a, _b;
+    return this.setFocus((_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.firstChild);
+  }
+  isFirstElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null;
+  }
+  focusRootElement() {
+    var _a, _b, _c;
+    return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.firstChild);
+  }
+  nextRootElement() {
+    var _a, _b, _c;
+    return this.setFocus((_c = (_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.nextElementSibling);
+  }
+  findFocusElementParent() {
+    return this.getFocusedElement().parentNode.querySelectorAll('.bcm-list__item--open');
+  }
+  getLastElement() {
+    return this.element.querySelectorAll(this.getElementName())[this.element.querySelectorAll(this.getElementName()).length - 1] || null;
+  }
+  setFocus(element) {
+    element.focus();
+  }
+}
+
+class ListKeyControl extends KeyControl {
+  constructor(keyCode, element, treeview, checkBoxes) {
+    super(keyCode, element, '.bcm-list__item', '.bcm-list__item-childs');
+    this.isTreeview = false;
+    this.isCheckBoxes = false;
+    this.isTreeview = treeview;
+    this.isCheckBoxes = checkBoxes;
+  }
+  keyUpControl() {
+    if (this.isTreeview) {
+      this.keyUpTreeview();
+    }
+    else {
+      if (this.isFirstElement()) {
+        this.setFocus(this.getLastElement());
+      }
+      else {
+        this.setFocus(this.getPreviousElement());
+      }
+    }
+  }
+  keyDownTreeView() {
+    var _a;
+    if (this.isTreeview) {
+      if (this.isRootElement() && this.isRootElementIsOpen()) {
+        const childs = this.getChildElement();
+        if (childs) {
+          this.setFocus(childs.firstChild);
+        }
+      }
+      else {
+        if (this.isLastElement() && this.getParentElement(this.getFocusedElement())) {
+          this.setFocus((_a = this.getParentElement(this.getFocusedElement())) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
+        }
+        else {
+          this.setFocus(this.getNextElement());
+        }
+      }
+    }
+  }
+  keyUpTreeview() {
+    if (this.isFirstElement()) {
+      const parent = this.getParentElement(this.getFocusedElement());
+      this.setFocus(parent);
+    }
+    else {
+      const previousElement = this.getPreviousElement();
+      if (previousElement) {
+        if (previousElement.classList.contains('bcm-list__item--open')) {
+          const getChildElement = previousElement.querySelectorAll(this.getChildElementName())[0];
+          console.log({ getChildElement });
+          this.setFocus(getChildElement.lastChild);
+        }
+        else {
+          this.setFocus(previousElement);
+        }
+      }
+    }
+  }
+  keyDownControl() {
+    if (this.isTreeview) {
+      this.keyDownTreeView();
+    }
+    else {
+      if (this.isLastElement()) {
+        this.setFocus(this.getFirstElement());
+      }
+      else {
+        this.setFocus(this.getNextElement());
+      }
+    }
+  }
+  keyRightControl() {
+    if (this.isTreeview) {
+      if (!this.isRootElementIsOpen() && this.isRootElement()) {
+        const { id } = this.getFocusedElement();
+        this.openGroup(id);
+      }
+    }
+  }
+  keyLeftControl() {
+    if (this.isTreeview) {
+      if (this.isRootElementIsOpen() && this.isRootElement()) {
+        const { id } = this.getFocusedElement();
+        this.openGroup(id);
+      }
+    }
+  }
+  keyEnterControl() { }
+  keySpaceControl() {
+    if (this.isCheckBoxes) {
+      const { id } = this.getFocusedElement();
+      this.checkedItem(id);
+    }
+  }
+  keyDown() {
+    switch (this.getKeyCode()) {
+      case Bcm.KeyCode.up:
+        this.keyUpControl();
+        break;
+      case Bcm.KeyCode.down:
+        this.keyDownControl();
+        break;
+      case Bcm.KeyCode.left:
+        this.keyLeftControl();
+        break;
+      case Bcm.KeyCode.right:
+        this.keyRightControl();
+        break;
+      case Bcm.KeyCode.enter:
+        this.keyEnterControl();
+        break;
+      case Bcm.KeyCode.space:
+        this.keySpaceControl();
+        break;
+    }
+  }
+  keyUp() { }
+}
+
+class ListTagControl {
+  constructor(containerId, values, listId, selectedOtherTag, clearable) {
+    this.clearable = false;
+    this.containerId = containerId;
+    this.values = values;
+    this.listId = listId;
+    this.selectedOtherTag = selectedOtherTag;
+    this.clearable = clearable;
+  }
+  getTooltip(id, text) {
+    return new Tooltip({ message: text, targetId: id, placement: 'bottom' });
+  }
+  tagHtmlTemplate(tag, isOtherTag = false, otherTagIsSingle = false) {
+    return `<span class="bcm-tag__content dismissable ${!otherTagIsSingle && isOtherTag && (this.selectedOtherTag ? 'checkable checked' : '')}">
+                    <span class="value">${tag.text}</span>
+                    ${otherTagIsSingle
+      ? ''
+      : `
+                    <span class="right close-button" bcm-list-tag-dismiss >
+                        <bcm-icon icon="fal fa-times"></bcm-icon>
+                    </span>`}
+                </span>`;
+  }
+  getContainer() {
+    return document.getElementById(this.containerId);
+  }
+  getContainerWidth() {
+    let tagContainerWidth = snq(() => document.getElementById(this.containerId).clientWidth, 0);
+    tagContainerWidth = (this.clearable ? tagContainerWidth - 20 : tagContainerWidth) - 20;
+    return [tagContainerWidth < 130 ? 130 : tagContainerWidth - 20, tagContainerWidth];
+  }
+  isClickDismiss(e) {
+    const path = e.path || (e.composedPath && e.composedPath());
+    const tag = path.find(element => element.attributes && element.attributes['bcm-list-tag-dismiss']);
+    return !!tag;
+  }
+  onClickControl(e, id, isOtherTag = false) {
+    const isDismiss = this.isClickDismiss(e);
+    let tooltipId = '';
+    if (isDismiss) {
+      this.onClickDismiss(id);
+      tooltipId = isOtherTag ? `bcm-list-input-tag-${this.listId}-other-tag` : `list-${this.listId}-${id}`;
+      this.getTooltip(tooltipId, '').hide();
+    }
+    else {
+      isOtherTag ? this.onClickOtherTag(id) : this.onClickTag(id);
+    }
+  }
+  calculateTags() {
+    const containerWidth = this.getContainerWidth();
+    const virtualDom = this.getContainer();
+    if (virtualDom) {
+      if (this.values && this.values.length > 0) {
+        if (containerWidth[0] > 0 && virtualDom) {
+          virtualDom.innerHTML = '';
+          this.values.slice(0, 50).map(value => {
+            const tag = document.createElement('div');
+            tag.classList.add('bcm-tag');
+            tag.id = `list-${this.listId}-${value.id}`;
+            // tag.title = value.tagTitle || value.text || '';
+            tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').show();
+            tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${value.id}`, value.tagTitle || value.text || '').hide();
+            tag.dataset.id = value.id;
+            tag.onclick = e => this.onClickControl(e, value.id);
+            tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, value), { text: StringHelper.textLimitter(value.text, 10) }));
+            virtualDom.appendChild(tag);
+          });
+          let tags = virtualDom.querySelectorAll('.bcm-tag');
+          let otherTags = [];
+          let visibleTags = [];
+          const checkControl = () => {
+            const virtualDomTags = virtualDom.querySelectorAll('.bcm-tag');
+            if (visibleTags.length === 1 && (virtualDomTags === null || virtualDomTags === void 0 ? void 0 : virtualDomTags.length) === 1) {
+              visibleTags[0].innerHTML = this.tagHtmlTemplate({ text: '+1' }, false, true);
+            }
+          };
+          let tagsWidth = Array.from(tags).reduce((acc, tag) => {
+            const tagClientWidth = tag.clientWidth > 50 ? tag.clientWidth : 50;
+            if (tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0]) {
+              acc += tagClientWidth + 10;
+              visibleTags.push(tag);
+              const checkFreeSpace = tagClientWidth > 0 && acc + tagClientWidth + 10 < containerWidth[0];
+              !checkFreeSpace && containerWidth[1] < 70 && checkControl();
+            }
+            else {
+              otherTags.push(tag);
+              tag.remove();
+            }
+            return acc;
+          }, 0);
+          const otherTagElement = this.values.slice(visibleTags.length);
+          const virtualDomLastElements = virtualDom.lastElementChild;
+          const otherTagTextControl = args => {
+            const { count, width } = args;
+            if (count > 999)
+              return '999+' + pluralize('item', count);
+            if (width > 100)
+              return `${count} ` + pluralize('item', count) + ' selected';
+            if (width < 100)
+              return `+${count < 10 ? count : '9'}`;
+          };
+          if (otherTags && otherTags.length > 0 && virtualDomLastElements && virtualDomLastElements.id !== `bcm-list-input-tag-${this.listId}-other-tag`) {
+            otherTags.push(virtualDomLastElements);
+            if (otherTags.length > 0) {
+              const otherCounter = otherTagElement.length + 1;
+              const createOthertagElement = {
+                id: `bcm-list-input-tag-${this.listId}-other-tag`,
+                text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
+                title: snq(() => otherTags
+                  .map(tag => this.values.find(value => value.id == tag.dataset.id))
+                  .slice(0, 15)
+                  .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
+                  .toString()
+                  .split(',')
+                  .join('\r\n') + (otherTags.length > 15 ? ('\r\n...') : ''), '...'),
+              };
+              virtualDomLastElements.remove();
+              visibleTags = visibleTags.filter(tag => tag.id !== virtualDomLastElements.id);
+              const hiddenTags = this.values.filter(value => !visibleTags.find(tag => tag.dataset.id == value.id)).map(value => value.id);
+              const otherTag = document.createElement('div');
+              const otherTagIds = hiddenTags.join(',');
+              const otherTagIsSingle = visibleTags.length === 0;
+              otherTag.classList.add('bcm-tag');
+              !otherTagIsSingle && otherTag.classList.add('bcm-tag--other');
+              otherTag.id = createOthertagElement.id;
+              // otherTag.title = createOthertagElement.title || false;
+              if (createOthertagElement.title) {
+                otherTag.onmouseenter = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).show();
+                otherTag.onmouseleave = () => this.getTooltip(createOthertagElement.id, createOthertagElement.title).hide();
+              }
+              otherTag.onclick = e => this.onClickControl(e, otherTagIds, otherTagIsSingle ? false : true);
+              otherTag.innerHTML = this.tagHtmlTemplate(createOthertagElement, true, otherTagIsSingle);
+              otherTag.dataset.ids = hiddenTags.join(',');
+              virtualDom.appendChild(otherTag);
+            }
+          }
+          const otherTag = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
+          const otherTagWidth = otherTag ? (otherTag.clientWidth && otherTag.clientWidth < 50 ? 50 : otherTag.clientWidth) : 200;
+          const tagsPerRow = Math.floor(containerWidth[0] - tagsWidth);
+          if (tagsPerRow > otherTagWidth) {
+            if (otherTag) {
+              const findElement = this.values.find(value => value.id == otherTag.dataset.ids.split(',')[0]);
+              const tag = document.createElement('div');
+              tag.classList.add('bcm-tag');
+              tag.id = `list-${this.listId}-${findElement.id}`;
+              // tag.title = findElement?.title || '';
+              tag.onmouseenter = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').show();
+              tag.onmouseleave = () => this.getTooltip(`list-${this.listId}-${findElement.id}`, (findElement === null || findElement === void 0 ? void 0 : findElement.title) || '').hide();
+              tag.dataset.id = findElement.id;
+              tag.onclick = e => this.onClickControl(e, findElement === null || findElement === void 0 ? void 0 : findElement.id);
+              tag.innerHTML = this.tagHtmlTemplate(Object.assign(Object.assign({}, findElement), { text: StringHelper.textLimitter(findElement.text, 10) }));
+              const otherTagElement = document.getElementById(`bcm-list-input-tag-${this.listId}-other-tag`);
+              otherTagElement.remove();
+              virtualDom.appendChild(tag);
+            }
+          }
+        }
+      }
+      else {
+        virtualDom.innerHTML = '';
+      }
+    }
+  }
+}
+
+const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}:root{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}:root{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}:root{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-checkbox{outline:none;border:none;--bcm-checkbox-primary-color-default:var(--bcm-new-ds-color-blue-500);--bcm-checkbox-secondary-color-default:var(--bcm-new-ds-color-white);--bcm-checkbox-primary-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-checkbox-secondary-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-checkbox-secondary-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-active:var(--bcm-new-ds-color-blue-700);--bcm-checkbox-secondary-color-active:var(--bcm-new-ds-color-slate-50);--bcm-checkbox-primary-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-checkbox-secondary-color-disabled:var(--bcm-new-ds-color-slate-200);display:inline-flex;width:fit-content;flex-direction:column;margin-bottom:8px}.bcm-checkbox:focus,.bcm-checkbox:hover,.bcm-checkbox:active{outline:none;border:none}.bcm-checkbox *{box-sizing:border-box}.bcm-checkbox input[type=radio],.bcm-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0}.bcm-checkbox__input{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;padding-top:4px}.bcm-checkbox.hidden{display:none}.bcm-checkbox :hover{cursor:pointer}.bcm-checkbox[disabled] :hover,.bcm-checkbox.disabled :hover{cursor:not-allowed}.bcm-checkbox .slot{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;color:var(--bcm-new-ds-color-slate-600)}.bcm-checkbox .slot:not(:empty){margin-left:8px;margin-right:8px}.bcm-checkbox-size-small .slot{font-size:12px;line-height:calc(12px + 8px);margin-top:-2.5px}.bcm-checkbox-size-small .bcm-checkbox__input{min-height:calc(24px - 4px)}.bcm-checkbox-size-small .bcm-checkbox__label-icon{width:14px;height:14px;min-width:14px;font-size:calc(10px - 2px)}.bcm-checkbox-size-medium .slot{font-size:calc(12px + 1px);line-height:calc(12px + 8px);margin-top:-1.5px}.bcm-checkbox-size-medium .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-medium .bcm-checkbox__label-icon{width:16px;height:16px;min-width:16px;font-size:10px}.bcm-checkbox-size-large .slot{font-size:16px;line-height:calc(16px + 8px);margin-top:-1.5px}.bcm-checkbox-size-large .bcm-checkbox__input{min-height:calc(32px - 4px)}.bcm-checkbox-size-large .bcm-checkbox__label-icon{width:18px;height:18px;min-width:18px;font-size:12px}.bcm-checkbox__label{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap}.bcm-checkbox__label-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;border-width:1px;border-style:solid;border-radius:2px}.bcm-checkbox__label-icon-indeterminate{position:relative}.bcm-checkbox__label-icon-indeterminate:after{content:\"\";display:block;position:absolute;width:70%;height:1.5px;background:var(--bcm-new-ds-color-white)}.bcm-checkbox__label-icon.bcm-radio__icon{width:16px;height:16px;box-sizing:border-box;border-radius:100px}.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner{width:10px;height:10px;border-radius:100px;background-color:var(--bcm-new-ds-color-white)}.bcm-checkbox .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-default);color:var(--bcm-checkbox-secondary-color-default);border-color:var(--bcm-new-ds-color-slate-300)}.bcm-checkbox .bcm-checkbox__label-icon-checked,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-default);border-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-default);background-color:var(--bcm-checkbox-secondary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-default)}.bcm-checkbox:hover .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-hover);color:var(--bcm-checkbox-secondary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-hover);border-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-hover);background-color:var(--bcm-checkbox-secondary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-hover)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-focus-visible);color:var(--bcm-checkbox-secondary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-focus-visible);border-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-focus-visible);background-color:var(--bcm-checkbox-secondary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-focus-visible)}.bcm-checkbox:active .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-active);color:var(--bcm-checkbox-secondary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-active);border-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-active);background-color:var(--bcm-checkbox-secondary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-active)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon{background:var(--bcm-checkbox-secondary-color-disabled);color:var(--bcm-checkbox-secondary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-checkbox-primary-color-disabled);border-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon{border-color:var(--bcm-checkbox-primary-color-disabled);background-color:var(--bcm-checkbox-secondary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner{background-color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate,.bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate{color:var(--bcm-checkbox-primary-color-disabled)}.bcm-checkbox[no-margin] .bcm-checkbox__input{margin:0;min-height:0;padding:0}.bcm-list{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;--width:256px;--height:256px;--max-height:inherit;--min-height:inherit;min-width:90px;display:flex;flex-direction:column;margin:0 0 8px 0}.bcm-list__listbox .bcm-list__container{height:var(--height);max-height:var(--max-height);min-height:var(--min-height)}.bcm-list.full-width{width:100%}.bcm-list__size-small .bcm-list__input{height:24px;font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable{font-size:10px;line-height:calc(10px + 8px)}.bcm-list__size-medium .bcm-list__input{height:32px;font-size:14px;line-height:calc(14px + 8px)}.bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__size-large .bcm-list__input{height:40px;font-size:16px;line-height:calc(16px + 8px)}.bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable{font-size:14px;line-height:calc(14px + 8px)}.bcm-list:hover{outline:none}.bcm-list:hover .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-500);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list:focus-visible{outline:none}.bcm-list:focus-visible .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);background-color:var(--bcm-new-ds-color-white)}.bcm-list:active{outline:none}.bcm-list:active .bcm-list__input{border-color:var(--bcm-new-ds-color-blue-600);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list__container{--width:256px;--height:256px;width:var(--width);height:var(--height);background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;padding-top:8px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-list__container main{scroll-behavior:smooth;padding:0 8px;flex:1;overflow:auto;display:flex;flex-direction:column}.bcm-list__container-search{margin:0 8px}.bcm-list__container-search:after{margin:4px 0}.bcm-list__container-no-data{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding-bottom:4px}.bcm-list__container.error{border-color:var(--bcm-color-red-6)}.bcm-list__container.full-width{width:100%}.bcm-list__container.bcm-list__type-linked-component,.bcm-list__container.bcm-list__type-select,.bcm-list__container.bcm-list__type-autocomplete{opacity:0;visibility:hidden;position:absolute;top:0;left:0;height:0;width:0;transform:translateY(10%);z-index:10800;transition:visibility 0s linear 400ms, opacity 100ms, transform 200ms}.bcm-list__container.bcm-list__type-linked-component.bcm-list--top,.bcm-list__container.bcm-list__type-select.bcm-list--top,.bcm-list__container.bcm-list__type-autocomplete.bcm-list--top{transform:translateY(-10%)}.bcm-list__container.bcm-list__type-linked-component.is-open,.bcm-list__container.bcm-list__type-select.is-open,.bcm-list__container.bcm-list__type-autocomplete.is-open{opacity:1;transform:translateY(0);visibility:visible;transition:visibility 0s linear 0s, opacity 100ms, transform 100ms}.bcm-list__label{line-height:1}.bcm-list__input{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-white);user-select:none;cursor:pointer;padding:0 8px;height:32px;overflow:hidden;position:relative;transition:background-color 100ms, border-color 100ms}.bcm-list__input-spinner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bcm-color-grey-1);opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;z-index:-1}.bcm-list__input-spinner.is-open{opacity:1;visibility:visible;z-index:1}.bcm-list__input-container{width:100%}.bcm-list__input-container.value-empty{color:var(--bcm-color-grey-6)}.bcm-list__input-container.type-single,.bcm-list__input-container.value-empty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-list__input-placeholder{color:var(--bcm-color-grey-6)}.bcm-list__input-tag-container{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;grid-gap:2px;line-height:1}.bcm-list__input-buttons{display:flex;align-items:center;justify-content:flex-end;grid-gap:4px;min-width:40px}.bcm-list__input-buttons-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px;font-size:16px;color:var(--bcm-new-ds-color-slate-500)}.bcm-list__input-buttons-button.caret-is{transform:rotate(360deg);transition:transform 0.2s ease-in-out}.bcm-list__input-buttons-button.caret-is-open{transform:rotate(180deg)}.bcm-list__input-buttons:not(.disabled) .bcm-list__input-buttons-button:hover{cursor:pointer;color:var(--bcm-new-ds-color-slate-600)}.bcm-list__input-autocomplete{position:relative;padding-right:0}.bcm-list__input-autocomplete .bcm-list-input-selected-text{background-color:#ffffff;display:flex;align-items:center;justify-content:flex-start;width:calc(100% - 24px);height:100%;padding:0 calc(8px + 4px);position:absolute;top:0;left:0}.bcm-list__input-autocomplete .bcm-list__input-container{height:100%;display:flex;flex-direction:row}.bcm-list__input-autocomplete .bcm-list__input-container .bcm-list__input-tag-container{width:auto}.bcm-list__input-autocomplete .bcm-input,.bcm-list__input-autocomplete .bcm-list__autocomplete{height:100%;min-width:70px;width:100%}.bcm-list__input-autocomplete .bcm-input__container,.bcm-list__input-autocomplete .bcm-list__autocomplete__container{height:100%;border:none;padding:0;width:100%}.bcm-list__input-autocomplete .bcm-input__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-input__container:not(.disabled):hover,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled).focused,.bcm-list__input-autocomplete .bcm-list__autocomplete__container:not(.disabled):hover{border:none;box-shadow:none}.bcm-list__autocomplete{width:100%;position:relative}.bcm-list.full-width .bcm-list__container,.bcm-list.full-width .bcm-list__input{width:100%}.bcm-list.error .bcm-list__input{border-color:var(--bcm-color-red-6)}.bcm-list.disabled .bcm-list__container,.bcm-list.disabled .bcm-list__input{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-list.disabled .bcm-tag__content.dismissable .close-button{cursor:default}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button bcm-icon{color:var(--bcm-new-ds-color-slate-100)}.bcm-list:not(.disabled) .bcm-list__input .bcm-tag__content.checked .close-button:hover bcm-icon{color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:hover{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked){background-color:var(--bcm-new-ds-color-slate-200);border-color:var(--bcm-new-ds-color-slate-200)}.bcm-list:not(.disabled) .bcm-list__input:focus-visible{border-color:var(--bcm-new-ds-color-blue-500);box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-list:not(.disabled) .bcm-list__input:active{border-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item{padding:2px 0}.bcm-list__item.disabled{user-select:none}.bcm-list__item:focus{outline:none}.bcm-list__item:focus-visible>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item:focus-visible>.bcm-list__item-content:not(.disabled){color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item-content{display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;cursor:pointer;border-radius:4px;padding:0;padding-left:4px;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-50);transition:background-color 0.2s ease}.bcm-list__item-content.disabled{color:var(--bcm-new-ds-color-slate-300);background-color:var(--bcm-new-ds-color-slate-50);user-select:none;cursor:not-allowed}.bcm-list__item-content.selected{color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-500)}.bcm-list__item-content.selected:hover:not(.disabled){color:var(--bcm-new-ds-color-white);background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item-content:hover:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item-content:active:not(.disabled){color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item-content-collapse-icon{width:16px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:16px}.bcm-list__item-content-collapse-icon.child{cursor:pointer}.bcm-list__item-content-text{user-select:none;padding:8px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.bcm-list__item-content-text.treeview{padding:8px 0}.bcm-list__item-content-text-checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;margin-right:8px}.bcm-list__item-content-text-checkbox .bcm-checkbox{margin:0}.bcm-list__item-content-text-inner{width:100%}.bcm-list__item-content-text mark{padding:0;margin:0;font-size:inherit;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-yellow-4)}.bcm-list__item-childs{padding-left:16px}.bcm-list__item-small{padding:2px 0 2px 8px;font-size:10px;line-height:calc(10px + 8px)}.bcm-list__item-small .bcm-list__item-content-text{padding:3px 4px}.bcm-list__item-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-list__item-medium .bcm-list__item-content-text{padding:6px 4px}.bcm-list__item-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-list__item-large .bcm-list__item-content-text{padding:9px 4px}.bcm-list__item--readonly:focus>.bcm-list__item-content:not(.disabled),.bcm-list__item--readonly.focused>.bcm-list__item-content:not(.disabled){color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content{color:var(--bcm-color-grey-7)}.bcm-list__item--readonly>.bcm-list__item-content:hover,.bcm-list__item--readonly>.bcm-list__item-content:focus{color:var(--bcm-color-grey-7)}.bcm-list__item--group{border-radius:4px}.bcm-list__item--group:focus>.bcm-list__item-content:not(.disabled){background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-content{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);border-radius:4px 4px 0 0;cursor:default;font-size:14px;line-height:calc(14px + 8px);font-weight:500;position:sticky;top:0}.bcm-list__item--group>.bcm-list__item-content>.bcm-list__item-content-text{padding:4px 8px 4px 16px}.bcm-list__item--group>.bcm-list__item-content:hover,.bcm-list__item--group>.bcm-list__item-content:focus{color:var(--bcm-new-ds-color-slate-800);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-content-unclickable:hover{color:var(--bcm-new-ds-color-slate-700);background-color:var(--bcm-new-ds-color-slate-50)}.bcm-list__item--group>.bcm-list__item-childs{background-color:var(--bcm-new-ds-color-slate-50);color:var(--bcm-new-ds-color-slate-600);padding-bottom:8px;border-radius:0 0 4px 4px;padding-left:8px}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content{background-color:var(--bcm-new-ds-color-white);color:var(--bcm-new-ds-color-slate-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:hover{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:active{background-color:var(--bcm-new-ds-color-slate-200)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content:focus-visible{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected{background-color:var(--bcm-new-ds-color-blue-500);color:var(--bcm-new-ds-color-white)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-list__item--group>.bcm-list__item-childs .bcm-list__item-content.selected:active{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-list__linked{display:none}.bcm-list .bcm-tag--other .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcm-info-footer{text-align:right;padding:4px 8px;background-color:var(--bcm-new-ds-color-slate-100);color:var(--bcm-new-ds-color-slate-600);border-radius:0 0 4px 4px}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.bcmChecklist = createEvent(this, "bcm-checklist", 7);
+    this.bcmSelected = createEvent(this, "bcm-selected", 7);
+    this.change = createEvent(this, "bcm-change", 7);
+    this.open = createEvent(this, "bcm-open", 7);
+    this.close = createEvent(this, "bcm-close", 7);
+    this.debounce = null;
+    this._id = Generate.UID();
+    // All types
+    this.type = Bcm$1.ListType.listbox;
+    this.treeview = false;
+    this.checkboxes = false;
+    this.searchable = false;
+    this.value = null;
+    this.size = Bcm$1.Size.medium;
+    this.disabled = false;
+    this.readonly = false;
+    this.highlight = false;
+    this.required = false;
+    this.hidden = false;
+    this.fullWidth = false;
+    this.height = '256px';
+    this.maxHeight = '500px';
+    this.minHeight = '150px';
+    this.width = '256px';
+    this.infoFooter = false;
+    this.variableText = 'item';
+    // @Prop({ mutable: true }) showIcon = false;
+    // @Prop({ mutable: true }) favIcon = false;
+    // @Prop({ mutable: true }) favIconOnlyChilds = false;
+    // @Prop({ mutable: true }) contextMenu
+    this.allOpen = false;
+    this.keyControl = false;
+    this.checkAll = true;
+    this.stopDeepClean = false;
+    this.isOpen = false;
+    this.calculatedViewport = false;
+    this.isSelectedOther = false;
+    this.isHaveOtherTag = false;
+    //Only Select and similar
+    this.placeholder = 'Choose an option';
+    this.searchPlaceholder = 'Search';
+    this.searchIsOnlyChilds = false;
+    this.clearable = false;
+    this.noCaption = false;
+    this.captionType = Bcm$1.Status.default;
+    this.emptyIcon = 'fad fa-folder-open';
+    this.tick = {};
+    this.totalData = 0;
+    this.totalRootData = 0;
+    this.limit = 20;
+    this.searchResultLimit = 20; //Gerekliliği düşünülecek
+    this.searchFound = null;
+    this.returnFilterData = {};
+    this.returnOtherData = {};
+    this.options = {
+      rootMargin: '30px',
+    };
+    this.tagContainerWidth = 0;
+    this.selectAllItem = {
+      id: 'select-all',
+      text: 'Select All',
+      value: 'select-all',
+      checked: false,
+      disabled: false,
+      icon: '',
+      status: Bcm$1.Status.default,
+      indeterminate: 'uncheck',
+    };
+    this.placement = Bcm$1.Placement['bottom-start'];
+    this.data = [];
+    this.debounceHandler = Generate.debounceInput(() => this.listenResize(), 300, false);
+  }
+  connectedCallback() {
+    if (this.height != '256px') {
+      if (this.height.indexOf('px') > -1) {
+        this.limit = Math.floor(+this.height.replace('px', '') / 10);
+      }
+      else {
+        this.limit = Math.floor(+(window.innerHeight / 10));
+      }
+      this.searchResultLimit = this.limit;
+      this.markForCheck();
+    }
+    const checkElementWithDom = document.querySelectorAll(`#bcm-list-${this._id}`);
+    (checkElementWithDom === null || checkElementWithDom === void 0 ? void 0 : checkElementWithDom.length) > 0 && checkElementWithDom.forEach(item => item.remove());
+  }
+  componentWillRender() {
+    this.calculateLocation();
+  }
+  componentShouldUpdate(newVal, oldVal, propName) {
+    if (Object.keys(this.getOptions()).indexOf(propName) > -1 && newVal !== oldVal) {
+      this.updateOptions();
+    }
+  }
+  async componentDidLoad() {
+    await this.initState();
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = this.el.querySelector(`#bcm-list-${this._id}`);
+      if (list) {
+        document.body.appendChild(list);
+      }
+    }
+  }
+  tagCalculator() {
+    if (this.checkboxes && (this.type == 'select' || this.type == 'autocomplete')) {
+      const tagCalculator = new ListTagControl(`bcm-list-input-tag-container-${this._id}`, this.value, this._id, this.isSelectedOther, this.clearable);
+      tagCalculator.calculateTags();
+      const arrayIds = id => (typeof id == 'string' ? id.split(',') : [id]);
+      const clearAutocomplete = () => {
+        if (this.type == 'autocomplete') {
+          const autocompleteInput = this.getAutoCompleteInput();
+          if (autocompleteInput) {
+            autocompleteInput.handleClear(false);
+          }
+        }
+      };
+      tagCalculator.onClickOtherTag = async (id) => {
+        if (!this.disabled) {
+          clearAutocomplete();
+          if (this.isSelectedOther) {
+            await this.unSelectOther();
+          }
+          else {
+            await this.onClearSearch();
+            this.isSelectedOther = true;
+            this.filterOtherList(arrayIds(id));
+            this.isOpen = true;
+          }
+          this.onSelectSearch();
+        }
+      };
+      tagCalculator.onClickTag = _ => {
+        // console.log(id);
+        clearAutocomplete();
+        this.onSelectSearch();
+        this.unSelectOther();
+      };
+      tagCalculator.onClickDismiss = async (id) => {
+        var _a;
+        if (!this.disabled) {
+          if (this.isSelectedOther) {
+            await this.unSelectOther();
+          }
+          arrayIds(id).length > 1 ? listState.removeOtherTags(this._id, arrayIds(id)) : listState.checkedItem(this._id, arrayIds(id)[0]);
+          this.value = (await this.getCheckedList()).checkedList;
+          this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+        }
+      };
+    }
+  }
+  disconnectedCallback() {
+    this.isOpen = false;
+    if (this.stopDeepClean)
+      return;
+    listState.removeState(this._id);
+    this.el.innerHTML = '';
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = document.querySelectorAll(`#bcm-list-${this._id}`);
+      if (list === null || list === void 0 ? void 0 : list.length) {
+        list.forEach(item => item.remove());
+        this.el.remove();
+      }
+    }
+  }
+  watchId(_, oldVal) {
+    // console.info('Changed component id:', oldVal + ' -> ' + newVal);
+    listState.removeState(oldVal);
+    this.initState();
+  }
+  handleValueChange(newVal, oldVal) {
+    var _a;
+    if (Generate.objectIsEmpty(this.returnFilterData)) {
+      this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+    }
+    if (this.checkboxes) {
+      if (!Validators.compareTwoArrayIsSame(newVal, oldVal)) {
+        this.bcmChecklist.emit(this.value);
+        this.change.emit(this.value);
+      }
+    }
+    else {
+      if ((newVal === null || newVal === void 0 ? void 0 : newVal.text) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.text)) {
+        this.change.emit(this.value);
+      }
+    }
+    this.tagCalculator();
+  }
+  watchReturnFilterData(newVal) {
+    var _a;
+    const { checkedItems, visibledItems } = newVal;
+    if (checkedItems && visibledItems) {
+      this.handleIndeterminate(checkedItems.length, visibledItems.length);
+    }
+    else {
+      this.handleIndeterminate(((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, this.totalData);
+    }
+  }
+  handleOtherSelected(newValue) {
+    var _a;
+    const tagContent = (_a = document.getElementById(`bcm-list-input-tag-${this._id}-other-tag`)) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-tag__content');
+    if (tagContent) {
+      if (newValue === true) {
+        tagContent.classList.add('checkable', 'checked');
+      }
+      else {
+        tagContent.classList.remove('checkable', 'checked');
+      }
+    }
+  }
+  async handleOpen() {
+    if (this.isOpen) {
+      this.open.emit();
+      this.calculateLocation();
+      this.onSelectSearch();
+    }
+    else {
+      this.close.emit();
+      await delay(100);
+      this.unSelectOther();
+    }
+  }
+  async dataChanged(newValue, oldValue) {
+    if (!Validators.compareTwoArrayIsSame(newValue, oldValue)) {
+      await this.initState();
+    }
+  }
+  isIntersecting(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target && target.id === this._id) {
+      this.listenResize();
+    }
+  }
+  handleSlotItems(e) {
+    var _a;
+    if (((_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.data = e.detail;
+    }
+  }
+  handleChange(e) {
+    if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
+      e.stopImmediatePropagation();
+    }
+  }
+  handleResize() {
+    this.calculateLocation();
+    this.debounceHandler();
+  }
+  handleWheel(event) {
+    if (this.isOpen) {
+      const list = document.querySelector(`#bcm-list-${this._id}`);
+      const isClickInside = list && Generate.findEventPath(event, list);
+      if (isClickInside) {
+        if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+          this.calculateLocation();
+        }
+      }
+      else {
+        this.hide();
+      }
+    }
+  }
+  handleClick(event) {
+    var _a;
+    if (this.disabled)
+      return;
+    const list = document.querySelector(`#bcm-list-${this._id}`);
+    const isClickInside = Generate.findEventPath(event, this.el) || (list && Generate.findEventPath(event, list));
+    if (isClickInside) {
+      if (this.debounce !== null) {
+        event.preventDefault();
+        event.stopPropagation();
+        clearTimeout(this.debounce);
+        this.debounce = null;
+      }
+      this.debounce = setTimeout(() => {
+        this.debounce = null;
+      }, 300);
+    }
+    if (!isClickInside) {
+      if (this.type == 'autocomplete') {
+        const autocompleteInput = this.getAutoCompleteInput();
+        if (autocompleteInput) {
+          if (this.checkboxes) {
+            autocompleteInput.setValue('');
+          }
+          else {
+            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
+          }
+        }
+      }
+    }
+    const clickToTag = Generate.findEventPathWithKey(event, 'className', ['bcm-tag']);
+    const clickToOtherTag = Generate.findEventPathWithKey(event, 'className', ['bcm-tag bcm-tag--other']);
+    const clickToSelect = Generate.findEventPathWithKey(event, 'id', [`bcm-list-input-${this._id}`, `bcm-list-label-${this._id}`]);
+    const clickToTagDismiss = Generate.findEventPathWithKey(event, 'className', ['right close-button']);
+    if (clickToSelect && !clickToTagDismiss && this.type != 'autocomplete') {
+      this.isOpen = clickToTag || clickToOtherTag ? true : !this.isOpen;
+    }
+    if (list) {
+      if (this.isOpen) {
+        if (!list.contains(event.target) && !this.el.contains(event.target)) {
+          this.isOpen = false;
+          // this.unSelectOther()
+        }
+      }
+    }
+  }
+  bcmOnSearchClear(event) {
+    var _a, _b;
+    if (this.type == 'autocomplete') {
+      if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
+        if (event.detail) {
+          this.setClear();
+        }
+      }
+    }
+  }
+  bcmOnSearch(event) {
+    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.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;
+      }
+      if (this.type == 'autocomplete') {
+        this.isOpen = true;
+      }
+      if (!event.detail.result) {
+        if (this.type == 'autocomplete') {
+          this.isOpen = false;
+        }
+        if (this.isSelectedOther) {
+          this.filterOtherList(this.otherTagIds());
+        }
+        else {
+          this.returnFilterData = {};
+          listState.filterData(this._id, null);
+        }
+        // this.isSelectedOther = false
+        this.searchResultLimit = null;
+        this.highlightText = null;
+      }
+      this.markForCheck();
+    }
+  }
+  //keyboard navigation
+  handleKeyDown(ev) {
+    const keycode = ev.keyCode || ev.which;
+    if (keycode === Bcm$1.KeyCode.escape) {
+      if (this.isOpen) {
+        this.isOpen = false;
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation();
+      }
+    }
+    if (this.keyControl) {
+      const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
+      keyboard.openGroup = openGroupId => {
+        this.openGroup(openGroupId);
+      };
+      keyboard.checkedItem = checkedItemId => {
+        this.checkedItem(checkedItemId);
+      };
+      keyboard.keyDown();
+    }
+  }
+  handleKeyUp(ev) {
+    if (this.keyControl) {
+      const focusedList = Generate.findEventPath(ev, this.el);
+      if (focusedList) {
+        const list = document.getElementById(`bcm-list-${this._id}`);
+        if (list) {
+          const items = list.querySelectorAll('.bcm-list__item.focused');
+          if (items.length > 0) {
+            const main = list.querySelector('main');
+            const itemHeight = items[0].offsetHeight;
+            const listHeight = main.offsetHeight;
+            const itemTop = items[0].offsetTop;
+            if (itemTop > listHeight) {
+              main.scrollTop = itemTop - listHeight / 2 + itemHeight / 2;
+            }
+            if (itemTop < listHeight) {
+              main.scrollTop = itemTop - listHeight / 2 - itemHeight / 2;
+            }
+          }
+        }
+      }
+    }
+  }
+  async set(data) {
+    if (data) {
+      if (Array.isArray(data)) {
+        this.addChecked(data);
+      }
+      if (typeof data === 'string' || typeof data === 'number') {
+        this.selectedItem(data);
+      }
+    }
+    else {
+      this.setClear();
+    }
+  }
+  async get() {
+    var _a, _b;
+    return this.value ? (this.checkboxes ? (_b = (_a = (await this.getCheckedList())) === null || _a === void 0 ? void 0 : _a.checkedList) === null || _b === void 0 ? void 0 : _b.map(item => item.id) : this.value.id) : null;
+  }
+  async getCheckedList() {
+    return Promise.resolve(listState.getCheckedList(this._id));
+  }
+  async getSelected() {
+    return Promise.resolve(listState.getSelected(this._id));
+  }
+  async getValue() {
+    return Promise.resolve(this.value);
+  }
+  async addChecked(ids = [], save = false, emit = true) {
+    if (ids && ids.length > 0) {
+      if (!save) {
+        listState.setClear(this._id);
+        await delay(10);
+      }
+      await listState.addChecked(this._id, ids);
+      await delay(10);
+      emit && (this.value = (await this.getCheckedList()).checkedList);
+      this.markForCheck();
+    }
+    return Promise.resolve(this.value);
+  }
+  async selected(id) {
+    if (id) {
+      return Promise.resolve(await this.selectedItem(id));
+    }
+    return false;
+  }
+  async setClear(e) {
+    listState.setClear(this._id);
+    this.value = null;
+    this.inputText = '';
+    this.isOpen = false;
+    this.selectAllItem.indeterminate = 'uncheck';
+    this.tagCalculator();
+    this.markForCheck();
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    await delay(10);
+    return Promise.resolve();
+  }
+  async resetCaption() {
+    await delay(10);
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+    await delay(10);
+    return Promise.resolve();
+  }
+  async show() {
+    this.isOpen = true;
+    return Promise.resolve();
+  }
+  async hide() {
+    this.isOpen = false;
+    return Promise.resolve();
+  }
+  updateOptions() {
+    listState.updateOptions(this._id, this);
+  }
+  handleIndeterminate(checkeds, total) {
+    this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? (checkeds === total ? 'check' : 'indeterminate') : 'uncheck', checked: this.checkboxes && checkeds > 0 ? (checkeds === total ? true : false) : false });
+  }
+  listenResize() {
+    this.tagCalculator();
+    this.calculateLocation();
+    this.markForCheck();
+  }
+  async unSelectOther() {
+    await this.onClearSearch();
+    this.isSelectedOther = false;
+    this.searchFound = null;
+    this.returnFilterData = {};
+    listState.filterData(this._id, null);
+    await delay(10);
+    return Promise.resolve();
+  }
+  async onClearSearch() {
+    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
+    if (searchInput) {
+      await searchInput.handleClear();
+    }
+    return Promise.resolve();
+  }
+  async onSelectSearch() {
+    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
+    if (searchInput) {
+      await delay(100);
+      searchInput.onBcmFocus();
+      searchInput.onBcmSelect();
+    }
+  }
+  otherTagIds() {
+    const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
+    if (otherTag) {
+      return otherTag.getAttribute('data-ids').split(',');
+    }
+  }
+  async filterOtherList(ids) {
+    const checklist = (await this.getCheckedList()).nestedResult;
+    const filter = Generate.convertIdsToNestedData(ids, checklist);
+    this.returnFilterData = await listState.filterData(this._id, filter, null, true);
+    this.searchFound = ids.length || 0;
+    this.limit = 500;
+    this.searchGetParents = null;
+    await delay(1000);
+    this.markForCheck();
+  }
+  async initState() {
+    var _a, _b, _c;
+    this.onClearSearch();
+    await listState.setValue({
+      id: this._id,
+      dataSource: this.data && snq(() => (typeof this.data == 'string' ? JSON.parse(this.data) : this.data), []),
+      options: this,
+    });
+    const { totalRoots, totalItems } = listState.getValue(this._id);
+    this.totalData = totalItems;
+    this.totalRootData = totalRoots;
+    this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
+    if (!this.checkboxes) {
+      this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+    }
+    // checkli olan subparentların indeterminate kontrolü için
+    if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+      const checkedIDs = [];
+      this.value.forEach(item => {
+        if (!item.items || item.items.length === 0) {
+          checkedIDs.push(item.id);
+        }
+      });
+      await this.addChecked(checkedIDs, false, false);
+    }
+    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
+    await this.markForCheck();
+  }
+  async markForCheck() {
+    await delay(10);
+    this.tick = Generate.UID();
+  }
+  getOptions() {
+    return snq(() => listState.getValue(this._id).options, {});
+  }
+  getItems() {
+    if (this.isSelectedOther) {
+      return this.returnFilterData['checkedItems'];
+    }
+    return snq(() => listState.getData(this._id), []);
+  }
+  getLimitedItems(ids) {
+    return snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
+  }
+  openGroup(parentId) {
+    listState.openGroup(this._id, parentId);
+    this.markForCheck();
+  }
+  focusItem(e) {
+    if (e.target.classList.contains('bcm-list__item')) {
+      const item = e.target;
+      const list = document.getElementById(`bcm-list-${this._id}`);
+      if (list) {
+        const items = list.querySelectorAll('.bcm-list__item');
+        if (items.length > 0) {
+          const selectedItem = list.querySelector('.bcm-list__item.focused');
+          if (selectedItem) {
+            selectedItem.classList.remove('focused');
+          }
+          item.classList.add('focused');
+        }
+      }
+    }
+  }
+  async selectedItem(itemId) {
+    var _a;
+    if (!this.checkboxes) {
+      this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
+      this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.isOpen = false;
+      this.markForCheck();
+      if (this.type == 'autocomplete' && this.value) {
+        // await delay(100)
+        // this.resetCaption()
+        const autocompleteInput = this.getAutoCompleteInput();
+        if (autocompleteInput) {
+          setTimeout(() => {
+            var _a;
+            autocompleteInput.setValue(((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || '');
+            this.isOpen = false;
+          }, 100);
+        }
+      }
+    }
+    return Promise.resolve(this.value);
+  }
+  async checkedItem(itemId) {
+    const isCheckSelectAll = itemId === 'select-all';
+    if (!isCheckSelectAll) {
+      listState.checkedItem(this._id, itemId);
+    }
+    else {
+      listState.selectAll(this._id, !this.selectAllItem.checked);
+    }
+    this.value = (await this.getCheckedList()).checkedList;
+    this.changeVisibleCheckeds();
+    this.markForCheck();
+  }
+  changeVisibleCheckeds() {
+    const { visibledItems } = this.returnFilterData;
+    this.returnFilterData = {
+      visibledItems,
+      checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || [],
+    };
+  }
+  getAutoCompleteInput() {
+    return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
+  }
+  dataScrollEvent(event) {
+    let count = 0;
+    let io = new IntersectionObserver((data) => {
+      if (count === 0) {
+        count++;
+        if (data[0].isIntersecting) {
+          this.limit += 15;
+          this.searchResultLimit += 15;
+          io.disconnect();
+          io = null;
+        }
+      }
+    }, this.options);
+    io.observe(event.target.lastElementChild);
+  }
+  async calculateLocation() {
+    var _a, _b;
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = document.getElementById(`bcm-list-${this._id}`);
+      // list && (list.style.height = '256px') //sebebi neydi ki!
+      var placement = this.placement;
+      const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+      const targetElement = document.getElementById(targetElementId);
+      if (list && targetElement) {
+        getPlacement(list, targetElement, placement, (place) => (placement = place));
+        await delay(10);
+        let pos = setPosition(placement, targetElement);
+        let captionAreaHeight = 0;
+        let labelAreaHeight = 0;
+        if (this.linkedComponent) {
+          const linked = document.getElementById(this.linkedComponent);
+          if (linked) {
+            if (!linked['noCaption']) {
+              const captionArea = ((_a = linked.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.bcm-caption-area')) || linked.querySelector('.bcm-caption-area');
+              if (captionArea) {
+                captionAreaHeight = captionArea.offsetHeight || captionArea.clientHeight;
+              }
+            }
+            const labelArea = ((_b = linked.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.bcm-label')) || linked.querySelector('.bcm-label');
+            if (labelArea) {
+              labelAreaHeight = labelArea.offsetHeight || labelArea.clientHeight;
+            }
+          }
+        }
+        if (this.fullWidth) {
+          list.style.width = targetElement.offsetWidth + 'px';
+        }
+        else {
+          list.style.width = this.width || 'auto';
+        }
+        if (this.height.indexOf('%') > -1) {
+          list.style.height = NumberHelper.toNumber(this.height) * 0.01 * window.innerHeight - pos[0] - 50 + 'px';
+        }
+        else {
+          list.style.height = this.height;
+        }
+        list.style.minHeight = this.minHeight;
+        // const calculatedMaxHeight = window.innerHeight - pos[0] - 50;
+        const calculatedMaxHeight = placement.split('-')[0] == 'top' ? window.innerHeight - (window.innerHeight - pos[0]) - 50 : window.innerHeight - pos[0] - 50;
+        if (this.maxHeight.indexOf('%') > -1) {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) * 0.01 * calculatedMaxHeight + 'px';
+        }
+        else {
+          list.style.maxHeight = NumberHelper.toNumber(this.maxHeight) < calculatedMaxHeight ? this.maxHeight : calculatedMaxHeight + 'px';
+        }
+        getPlacement(list, targetElement, placement, (place) => (placement = place));
+        await delay(10);
+        pos = setPosition(placement, targetElement);
+        list.style.top = (placement.split('-')[0] == 'top' ? pos[0] - list.offsetHeight + labelAreaHeight : pos[0] - captionAreaHeight) + 'px';
+        // list.style.left = pos[1] + 'px';
+        list.style.left = placement.split('-')[1] == 'end' ? pos[1] - list.offsetWidth + 'px' : pos[1] + 'px';
+        list.classList.toggle('bcm-list--top', placement.split('-')[0] == 'top');
+        this.calculatedViewport = true;
+      }
+    }
+  }
+  render() {
+    const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
+    const hostClasses = classnames('bcm-list', `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === 'large' ? 'size-3' : 'size-2', {
+      'error': this.captionType == Bcm$1.Status.error,
+      'full-width': fullWidth,
+      'bcm-list__linked': this.linkedComponent,
+      hidden,
+      readonly,
+      disabled,
+    });
+    const bcmListContainer = classnames('bcm-list__container', this.linkedComponent ? 'bcm-list__type-linked-component' : `bcm-list__type-${this.type}`, {
+      'is-open': this.isOpen && this.calculatedViewport,
+      'error': this.captionType == Bcm$1.Status.error,
+      'full-width': fullWidth,
+      hidden,
+      readonly,
+      disabled,
+    });
+    const bcmListInput = classnames('bcm-list__input');
+    const openedType = this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent;
+    return (h(Host, { class: hostClasses, tabindex: "0", style: {
+        '--width': fullWidth ? '100%' : this.width,
+        '--height': openedType ? '100%' : this.height,
+        '--max-height': openedType ? 'inherit' : this.maxHeight,
+        '--min-height': openedType ? 'inherit' : this.minHeight,
+      } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h(LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == 'select' && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: classnames('bcm-list__input-container', { 'type-single': !checkboxes, 'value-empty': !this.value }) }, this.checkboxes && h("span", { id: `bcm-list-input-tag-container-${this._id}`, class: "bcm-list__input-tag-container" }), this.checkboxes && !this.value && h("span", { class: "bcm-list__input-placeholder" }, this.placeholder), !this.checkboxes && (this.value ? this.inputText : h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: classnames('bcm-list__input-buttons', {
+        disabled: disabled,
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && 'caret-is-open'}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === 'autocomplete' && (h("div", { id: `bcm-list-input-${this._id}`, class: classnames(bcmListInput, { 'bcm-list__input-autocomplete': this.type == 'autocomplete' }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == 'autocomplete' ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "_id": ["watchId"],
+    "value": ["handleValueChange"],
+    "returnFilterData": ["watchReturnFilterData"],
+    "isSelectedOther": ["handleOtherSelected"],
+    "isOpen": ["handleOpen"],
+    "data": ["dataChanged"]
+  }; }
+  static get style() { return listCss; }
+}, [0, "bcm-list", {
+    "_id": [1537, "id"],
+    "type": [1025],
+    "treeview": [1028],
+    "checkboxes": [1028],
+    "searchable": [1028],
+    "value": [1032],
+    "name": [1025],
+    "label": [1025],
+    "size": [1025],
+    "disabled": [1028],
+    "readonly": [1028],
+    "highlight": [1028],
+    "highlightText": [1032, "highlight-text"],
+    "required": [1028],
+    "hidden": [1028],
+    "fullWidth": [1028, "full-width"],
+    "height": [1025],
+    "maxHeight": [1025, "max-height"],
+    "minHeight": [1025, "min-height"],
+    "width": [1025],
+    "infoFooter": [1028, "info-footer"],
+    "variableText": [1025, "variable-text"],
+    "template": [1025],
+    "allOpen": [1028, "all-open"],
+    "keyControl": [1028, "key-control"],
+    "checkAll": [1028, "check-all"],
+    "stopDeepClean": [4, "stop-deep-clean"],
+    "linkedComponent": [1025, "linked-component"],
+    "placeholder": [1025],
+    "searchPlaceholder": [1025, "search-placeholder"],
+    "searchIsOnlyChilds": [1028, "search-is-only-childs"],
+    "clearable": [1028],
+    "caption": [1025],
+    "noCaption": [1028, "no-caption"],
+    "captionType": [1025, "caption-type"],
+    "captionError": [1025, "caption-error"],
+    "emptyText": [1, "empty-text"],
+    "emptyIcon": [1, "empty-icon"],
+    "placement": [1025],
+    "data": [1032],
+    "inputText": [32],
+    "isOpen": [32],
+    "calculatedViewport": [32],
+    "isSelectedOther": [32],
+    "isHaveOtherTag": [32],
+    "captionCache": [32],
+    "captionTypeCache": [32],
+    "tick": [32],
+    "totalData": [32],
+    "totalRootData": [32],
+    "limit": [32],
+    "searchGetParents": [32],
+    "searchResultLimit": [32],
+    "searchFound": [32],
+    "returnFilterData": [32],
+    "returnOtherData": [32],
+    "options": [32],
+    "tagContainerWidth": [32],
+    "selectAllItem": [32],
+    "set": [64],
+    "get": [64],
+    "getCheckedList": [64],
+    "getSelected": [64],
+    "getValue": [64],
+    "addChecked": [64],
+    "selected": [64],
+    "setClear": [64],
+    "resetCaption": [64],
+    "show": [64],
+    "hide": [64]
+  }, [[2, "bcm-is-intersecting", "isIntersecting"], [2, "bcm-items", "handleSlotItems"], [0, "bcm-change", "handleChange"], [9, "resize", "handleResize"], [4, "wheel", "handleWheel"], [10, "click", "handleClick"], [10, "bcm-on-search-clear", "bcmOnSearchClear"], [10, "bcm-on-search", "bcmOnSearch"], [10, "keydown", "handleKeyDown"], [10, "keyup", "handleKeyUp"]]]);
+__decorate([
+  IsLoad()
+], BcmList$1.prototype, "el", void 0);
+__decorate([
+  JsonParse('data')
+], BcmList$1.prototype, "data", void 0);
+__decorate([
+  JsonParse('data', true)
+], BcmList$1.prototype, "dataChanged", null);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-list", "bcm-icon", "bcm-search"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmList$1);
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmList = BcmList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmList, defineCustomElement };