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

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

@@ -21,11 +21,22 @@ import { Host, h } from "@stencil/core";
 import cs from "classnames";
 import snq from "snq";
 import listState from "../states/bcm-list2.states";
+import { ListFocusManager } from "./list-focus-manager";
 import { ListKeyControl } from "./list-key-control";
 export class BcmList {
   constructor() {
+    var _a, _b;
     this.debounce = null;
+    this.focusManager = new ListFocusManager();
+    this.openTriggerElement = null;
+    this.suppressScrollCloseUntil = 0;
     this.debounceHandler = Generate.debounceInput(() => this.listenResize(), 300, false);
+    this.handleVisualViewportChange = () => {
+      if (!this.isOpen)
+        return;
+      this.preventScrollClose(400);
+      this.calculateLocation();
+    };
     this._id = Generate.UID();
     this.tempId = Generate.UID();
     this.type = Bcm.ListType.listbox;
@@ -107,6 +118,8 @@ export class BcmList {
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
     window.addEventListener("wheel", this.handleWheel.bind(this), true);
     window.addEventListener("resize", this.handleResize.bind(this), true);
+    (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", this.handleVisualViewportChange, true);
+    (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", this.handleVisualViewportChange, true);
   }
   connectedCallback() {
     if (this.height != "256px") {
@@ -157,7 +170,10 @@ export class BcmList {
     // }
   }
   disconnectedCallback() {
+    var _a, _b;
     this.isOpen = false;
+    (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.handleVisualViewportChange, true);
+    (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.handleVisualViewportChange, true);
     if (this.stopDeepClean)
       return;
     listState.removeState(this._id);
@@ -216,8 +232,10 @@ export class BcmList {
   }
   async handleOpen() {
     const isAutoSelected = this.autoFocusSelected && this.type == "select" && !this.checkboxes && this.value;
+    const isMobile = this.isMobileViewport();
     if (this.isOpen) {
       this.detectClone();
+      await this.prepareMobileViewportForOpen();
       if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
         const list = this.el.querySelector(`#bcm-list-${this._id}`);
         if (list) {
@@ -228,7 +246,9 @@ export class BcmList {
       this.open.emit();
       this.calculateLocation();
       this.onSelectSearch();
-      await delay(50);
+      if (!isMobile) {
+        await delay(50);
+      }
       this.isOpenAnimation = true;
       if (isAutoSelected) {
         this.focusSelectedElement();
@@ -286,11 +306,41 @@ export class BcmList {
           this.calculateLocation();
         }
       }
+      else if (this.shouldKeepOpenWhileInteracting(list)) {
+        if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
+          this.calculateLocation();
+        }
+      }
       else {
         this.hide();
       }
     }
   }
+  handleTouchStart(event) {
+    if (!this.isOpen)
+      return;
+    const list = document.querySelector(`#bcm-list-${this._id}`);
+    const isInside = Generate.findEventPath(event, this.el) || (list && Generate.findEventPath(event, list));
+    if (isInside) {
+      this.preventScrollClose(1000);
+    }
+    else if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
+      this.isOpen = false;
+    }
+  }
+  handleFocusIn(event) {
+    if (!this.isOpen)
+      return;
+    const list = document.querySelector(`#bcm-list-${this._id}`);
+    const isInside = Generate.findEventPath(event, this.el) || (list && Generate.findEventPath(event, list));
+    if (isInside) {
+      this.preventScrollClose(1000);
+      this.calculateLocation();
+    }
+    else if (this.isOverlayType()) {
+      this.isOpen = false;
+    }
+  }
   clearAutocomplete() {
     if (this.type == "autocomplete") {
       const autocompleteInput = this.getAutoCompleteInput();
@@ -386,8 +436,8 @@ export class BcmList {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.id) === `bcm-list-${this._id}-search` || ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.id) === `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
       this.searchGetParents = snq(() => { var _a; return (_a = event.detail) === null || _a === void 0 ? void 0 : _a.parentIndex; }, null);
-      this.searchResultLimit = 10;
       this.searchFound = ((_c = event.detail) === null || _c === void 0 ? void 0 : _c.matching) != null ? (_d = event.detail) === null || _d === void 0 ? void 0 : _d.matching.length : null;
+      this.searchResultLimit = this.getInitialSearchResultLimit();
       this.returnFilterData = listState.filterData(this._id, (_e = event.detail) === null || _e === void 0 ? void 0 : _e.nestedResult);
       if (this.searchFound > 0 && this.highlight) {
         this.highlightText = (_f = event.detail) === null || _f === void 0 ? void 0 : _f.value;
@@ -413,13 +463,51 @@ export class BcmList {
   //keyboard navigation
   handleKeyDown(ev) {
     const keycode = ev.keyCode || ev.which;
-    if (keycode === Bcm.KeyCode.escape) {
-      if (this.isOpen) {
+    const handled = this.focusManager.handleKeyDown({
+      event: ev,
+      disabled: this.disabled,
+      isOpen: this.isOpen,
+      isOverlayType: this.isOverlayType(),
+      hostElement: this.el,
+      targetElement: this.getTargetElement(),
+      listElement: document.getElementById(`bcm-list-${this._id}`),
+      openList: () => {
+        this.rememberOpenTrigger();
+        this.isOpen = true;
+      },
+      closeList: () => {
         this.isOpen = false;
-        ev.preventDefault();
-        ev.stopPropagation();
-        ev.stopImmediatePropagation();
-      }
+      },
+      selectFocusedItem: (itemId) => {
+        if (this.checkboxes) {
+          this.checkedItem(itemId);
+        }
+        else {
+          this.selectedItem(itemId);
+        }
+      },
+      openGroup: (itemId) => {
+        this.openGroup(itemId);
+      },
+      treeview: this.treeview,
+      checkboxes: this.checkboxes,
+      autocompleteInput: this.type == "autocomplete" ? this.getAutoCompleteInput() : null,
+      openTriggerElement: this.openTriggerElement,
+    });
+    if (handled)
+      return;
+    if ((ev.key === "Escape" || keycode === Bcm.KeyCode.escape) && this.isOpen) {
+      this.isOpen = false;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      this.focusManager.restoreTriggerFocus({
+        hostElement: this.el,
+        targetElement: this.getTargetElement(),
+        autocompleteInput: this.type == "autocomplete" ? this.getAutoCompleteInput() : null,
+        openTriggerElement: this.openTriggerElement,
+        preferOpenTrigger: true,
+      });
     }
     if (this.keyControl) {
       const keyboard = new ListKeyControl(keycode, this.el, this.treeview, this.checkboxes);
@@ -429,6 +517,9 @@ export class BcmList {
       keyboard.checkedItem = checkedItemId => {
         this.checkedItem(checkedItemId);
       };
+      keyboard.selectedItem = itemId => {
+        this.selectedItem(itemId);
+      };
       keyboard.keyDown();
     }
   }
@@ -538,7 +629,8 @@ export class BcmList {
       });
     }
   }
-  async show() {
+  async show(openTriggerElement) {
+    this.rememberOpenTrigger(openTriggerElement);
     this.isOpen = true;
     return Promise.resolve();
   }
@@ -575,11 +667,50 @@ export class BcmList {
   async onSelectSearch() {
     const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
     if (searchInput) {
+      this.preventScrollClose(1000);
       await delay(100);
       searchInput.onBcmFocus();
       searchInput.onBcmSelect();
     }
   }
+  preventScrollClose(duration = 500) {
+    this.suppressScrollCloseUntil = Date.now() + duration;
+  }
+  isMobileViewport() {
+    return window.matchMedia("(max-width: 768px), (pointer: coarse)").matches;
+  }
+  async prepareMobileViewportForOpen() {
+    var _a;
+    if (!this.isMobileViewport() || !(this.type == "select" || this.type == "autocomplete" || this.linkedComponent)) {
+      return;
+    }
+    const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+    const targetElement = document.getElementById(targetElementId);
+    if (!targetElement)
+      return;
+    const viewportHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
+    const rect = targetElement.getBoundingClientRect();
+    const minimumSpaceBelow = Math.min(320, viewportHeight * 0.45);
+    const shouldReposition = rect.top > viewportHeight * 0.35 || viewportHeight - rect.bottom < minimumSpaceBelow;
+    if (shouldReposition) {
+      this.preventScrollClose(1200);
+      const desiredTop = Math.max(110, Math.min(180, viewportHeight * 0.24));
+      const delta = rect.top - desiredTop;
+      window.scrollBy({
+        top: delta,
+        left: 0,
+        behavior: "auto",
+      });
+      await delay(50);
+      this.calculateLocation();
+    }
+  }
+  shouldKeepOpenWhileInteracting(list) {
+    var _a;
+    const activeElement = document.activeElement;
+    const focusedInside = !!(activeElement && (((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) || (list === null || list === void 0 ? void 0 : list.contains(activeElement))));
+    return focusedInside || Date.now() < this.suppressScrollCloseUntil;
+  }
   async filterOtherList(ids) {
     const checklist = (await this.getCheckedList()).nestedResult;
     const filter = Generate.convertIdsToNestedData(ids, checklist);
@@ -642,8 +773,30 @@ export class BcmList {
     }
     return snq(() => listState.getData(this._id), []);
   }
+  hasNestedItems(items = []) {
+    return items.some((item) => { var _a; return (item === null || item === void 0 ? void 0 : item.type) === "group" || ((_a = item === null || item === void 0 ? void 0 : item.items) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+  }
+  getVisibleSearchItems() {
+    const visibledItems = this.returnFilterData["visibledItems"];
+    if (this.searchFound == null || !Array.isArray(visibledItems)) {
+      return null;
+    }
+    return visibledItems;
+  }
+  getInitialSearchResultLimit() {
+    if (this.searchFound === 0) {
+      return 0;
+    }
+    const initialLimit = Math.max(10, this.limit);
+    return this.searchFound == null ? initialLimit : Math.min(initialLimit, this.searchFound);
+  }
   getLimitedItems(ids) {
-    return snq(() => listState.getDataPagination(this._id, this.searchResultLimit || this.limit, ids), []);
+    const visibleSearchItems = this.getVisibleSearchItems();
+    const limit = this.searchResultLimit || this.limit;
+    if (visibleSearchItems && !this.hasNestedItems(this.getItems())) {
+      return visibleSearchItems.slice(0, limit);
+    }
+    return snq(() => listState.getDataPagination(this._id, limit, ids), []);
   }
   openGroup(parentId) {
     listState.openGroup(this._id, parentId);
@@ -671,7 +824,15 @@ export class BcmList {
       this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
       this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
       this.isOpen = false;
-      this.markForCheck();
+      await this.markForCheck();
+      if (this.isOverlayType()) {
+        await delay(10);
+        this.focusManager.restoreTriggerFocus({
+          hostElement: this.el,
+          targetElement: this.getTargetElement(),
+          autocompleteInput: this.type == "autocomplete" ? this.getAutoCompleteInput() : null,
+        });
+      }
       if (this.type == "autocomplete" && this.value) {
         // await delay(100)
         // this.resetCaption()
@@ -709,15 +870,36 @@ export class BcmList {
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
+  rememberOpenTrigger(openTriggerElement) {
+    const activeElement = openTriggerElement || document.activeElement;
+    this.openTriggerElement = this.isValidOpenTrigger(activeElement) ? activeElement : null;
+  }
+  isValidOpenTrigger(element) {
+    return !!(element && element.isConnected && element !== document.body && element !== document.documentElement);
+  }
+  isOverlayType() {
+    return this.type == "select" || this.type == "autocomplete" || !!this.linkedComponent;
+  }
+  getTargetElement() {
+    const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+    return document.getElementById(targetElementId);
+  }
   /** @description Fixes the issue where the list appears empty during fast scrolling. */
   dataScrollEvent(event) {
     var _a, _b;
     const itemHeight = this.size === 'small' ? 28 : this.size === 'large' ? 48 : 36;
     const currentScrollBottom = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.clientHeight);
     const requiredItems = Math.ceil(currentScrollBottom / itemHeight) + 20;
-    if (requiredItems > this.limit) {
-      this.limit = requiredItems;
-      this.searchResultLimit = requiredItems;
+    const isSearchActive = this.searchFound != null && !this.isSelectedOther;
+    const currentLimit = isSearchActive ? this.searchResultLimit || 0 : this.limit;
+    if (requiredItems > currentLimit) {
+      if (isSearchActive) {
+        this.searchResultLimit = Math.min(requiredItems, this.searchFound);
+      }
+      else {
+        this.limit = requiredItems;
+        this.searchResultLimit = requiredItems;
+      }
     }
   }
   async calculateLocation() {
@@ -790,20 +972,20 @@ export class BcmList {
   }
   /** @description Focus selected element * BUG 282262 */
   focusSelectedElement() {
-    var _a;
+    var _a, _b;
     const listElement = document.querySelector(`#bcm-list-${this._id}`);
     if (!listElement)
       return;
-    const selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
+    const selectedId = Array.isArray(this.value) ? (_a = this.value[0]) === null || _a === void 0 ? void 0 : _a.id : (_b = this.value) === null || _b === void 0 ? void 0 : _b.id;
     if (selectedId) {
-      const targetItem = listElement.querySelector(`[id*="${selectedId}"]`);
-      if (targetItem) {
-        targetItem.scrollIntoView({
-          block: 'center',
-          inline: 'nearest',
-          behavior: 'auto'
-        });
-        targetItem.focus();
+      const targetItem = (listElement.querySelector(`[id="${selectedId}"]`) || listElement.querySelector(`[id*="${selectedId}"]`));
+      const scrollContainer = listElement.querySelector(".scrolling");
+      if (targetItem && scrollContainer) {
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const itemRect = targetItem.getBoundingClientRect();
+        const relativeOffsetTop = itemRect.top - containerRect.top + scrollContainer.scrollTop;
+        scrollContainer.scrollTop = relativeOffsetTop - (containerRect.height / 2) + (itemRect.height / 2);
+        targetItem.focus({ preventScroll: true });
         const items = listElement.querySelectorAll(".bcm-list__item");
         items.forEach(i => i.classList.remove("focused"));
         targetItem.classList.add("focused");
@@ -2015,11 +2197,17 @@ export class BcmList {
       },
       "show": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(openTriggerElement?: HTMLElement) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"
@@ -2085,6 +2273,18 @@ export class BcmList {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "touchstart",
+        "method": "handleTouchStart",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }, {
+        "name": "focusin",
+        "method": "handleFocusIn",
+        "target": "window",
+        "capture": true,
+        "passive": false
       }, {
         "name": "bcm-select-other-tag",
         "method": "handleSelectOtherTag",

package/dist/collection/components/other_deprecated/old-tag/old-tag.js

@@ -140,7 +140,7 @@ export class BcmOldTag {
         "mutable": true,
         "complexType": {
           "original": "ColorPaletteTypes",
-          "resolved": "\"red\" | \"default\" | \"black\" | \"white\" | \"prime-blue\" | \"prime-blue-1\" | \"prime-blue-2\" | \"prime-blue-3\" | \"prime-blue-5\" | \"prime-blue-6\" | \"prime-blue-7\" | \"prime-blue-8\" | \"prime-blue-9\" | \"prime-blue-10\" | \"grey\" | \"grey-1\" | \"grey-2\" | \"grey-3\" | \"grey-4\" | \"grey-5\" | \"grey-6\" | \"grey-7\" | \"grey-8\" | \"grey-9\" | \"grey-10\" | \"blue\" | \"blue-1\" | \"blue-2\" | \"blue-3\" | \"blue-4\" | \"blue-5\" | \"blue-6\" | \"blue-7\" | \"blue-8\" | \"blue-9\" | \"blue-10\" | \"warmyellow\" | \"warmyellow-1\" | \"warmyellow-2\" | \"warmyellow-3\" | \"warmyellow-4\" | \"warmyellow-5\" | \"warmyellow-6\" | \"warmyellow-7\" | \"warmyellow-8\" | \"warmyellow-9\" | \"warmyellow-10\" | \"yellow\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\" | \"yellow-4\" | \"yellow-5\" | \"yellow-6\" | \"yellow-7\" | \"yellow-8\" | \"yellow-9\" | \"yellow-10\" | \"limegreen\" | \"limegreen-1\" | \"limegreen-2\" | \"limegreen-3\" | \"limegreen-4\" | \"limegreen-5\" | \"limegreen-6\" | \"limegreen-7\" | \"limegreen-8\" | \"limegreen-9\" | \"limegreen-10\" | \"red-1\" | \"red-2\" | \"red-3\" | \"red-4\" | \"red-5\" | \"red-6\" | \"red-7\" | \"red-8\" | \"red-9\" | \"red-10\" | \"darkorange\" | \"darkorange-1\" | \"darkorange-2\" | \"darkorange-3\" | \"darkorange-4\" | \"darkorange-5\" | \"darkorange-6\" | \"darkorange-7\" | \"darkorange-8\" | \"darkorange-9\" | \"darkorange-10\" | \"orange\" | \"orange-1\" | \"orange-2\" | \"orange-3\" | \"orange-4\" | \"orange-5\" | \"orange-6\" | \"orange-7\" | \"orange-8\" | \"orange-9\" | \"orange-10\" | \"green\" | \"green-1\" | \"green-2\" | \"green-3\" | \"green-4\" | \"green-5\" | \"green-6\" | \"green-7\" | \"green-8\" | \"green-9\" | \"green-10\" | \"turquosie\" | \"turquosie-1\" | \"turquosie-2\" | \"turquosie-3\" | \"turquosie-4\" | \"turquosie-5\" | \"turquosie-6\" | \"turquosie-7\" | \"turquosie-8\" | \"turquosie-9\" | \"turquosie-10\" | \"cobaltblue\" | \"cobaltblue-1\" | \"cobaltblue-2\" | \"cobaltblue-3\" | \"cobaltblue-4\" | \"cobaltblue-5\" | \"cobaltblue-6\" | \"cobaltblue-7\" | \"cobaltblue-8\" | \"cobaltblue-9\" | \"cobaltblue-10\" | \"magenta\" | \"magenta-1\" | \"magenta-2\" | \"magenta-3\" | \"magenta-4\" | \"magenta-5\" | \"magenta-6\" | \"magenta-7\" | \"magenta-8\" | \"magenta-9\" | \"magenta-10\" | \"purple\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"purple-4\" | \"purple-5\" | \"purple-6\" | \"purple-7\" | \"purple-8\" | \"purple-9\" | \"purple-10\" | \"bc-red\" | \"bc-red-1\" | \"bc-red-2\" | \"bc-red-3\" | \"bc-red-4\" | \"bc-red-5\" | \"bc-red-6\" | \"bc-red-7\" | \"bc-red-8\" | \"bc-red-9\" | \"bc-blue\" | \"bc-blue-1\" | \"bc-blue-2\" | \"bc-blue-3\" | \"bc-blue-4\" | \"bc-blue-5\" | \"bc-blue-6\" | \"bc-blue-7\" | \"bc-blue-8\" | \"bc-blue-9\" | \"bc-green\" | \"bc-green-1\" | \"bc-green-2\" | \"bc-green-3\" | \"bc-green-4\" | \"bc-green-5\" | \"bc-green-6\" | \"bc-green-7\" | \"bc-green-8\" | \"bc-green-9\" | \"bc-orange\" | \"bc-orange-1\" | \"bc-orange-2\" | \"bc-orange-3\" | \"bc-orange-4\" | \"bc-orange-5\" | \"bc-orange-6\" | \"bc-orange-7\" | \"bc-orange-8\" | \"bc-orange-9\"",
+          "resolved": "\"red\" | \"blue\" | \"default\" | \"black\" | \"white\" | \"prime-blue\" | \"prime-blue-1\" | \"prime-blue-2\" | \"prime-blue-3\" | \"prime-blue-5\" | \"prime-blue-6\" | \"prime-blue-7\" | \"prime-blue-8\" | \"prime-blue-9\" | \"prime-blue-10\" | \"grey\" | \"grey-1\" | \"grey-2\" | \"grey-3\" | \"grey-4\" | \"grey-5\" | \"grey-6\" | \"grey-7\" | \"grey-8\" | \"grey-9\" | \"grey-10\" | \"blue-1\" | \"blue-2\" | \"blue-3\" | \"blue-4\" | \"blue-5\" | \"blue-6\" | \"blue-7\" | \"blue-8\" | \"blue-9\" | \"blue-10\" | \"warmyellow\" | \"warmyellow-1\" | \"warmyellow-2\" | \"warmyellow-3\" | \"warmyellow-4\" | \"warmyellow-5\" | \"warmyellow-6\" | \"warmyellow-7\" | \"warmyellow-8\" | \"warmyellow-9\" | \"warmyellow-10\" | \"yellow\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\" | \"yellow-4\" | \"yellow-5\" | \"yellow-6\" | \"yellow-7\" | \"yellow-8\" | \"yellow-9\" | \"yellow-10\" | \"limegreen\" | \"limegreen-1\" | \"limegreen-2\" | \"limegreen-3\" | \"limegreen-4\" | \"limegreen-5\" | \"limegreen-6\" | \"limegreen-7\" | \"limegreen-8\" | \"limegreen-9\" | \"limegreen-10\" | \"red-1\" | \"red-2\" | \"red-3\" | \"red-4\" | \"red-5\" | \"red-6\" | \"red-7\" | \"red-8\" | \"red-9\" | \"red-10\" | \"darkorange\" | \"darkorange-1\" | \"darkorange-2\" | \"darkorange-3\" | \"darkorange-4\" | \"darkorange-5\" | \"darkorange-6\" | \"darkorange-7\" | \"darkorange-8\" | \"darkorange-9\" | \"darkorange-10\" | \"orange\" | \"orange-1\" | \"orange-2\" | \"orange-3\" | \"orange-4\" | \"orange-5\" | \"orange-6\" | \"orange-7\" | \"orange-8\" | \"orange-9\" | \"orange-10\" | \"green\" | \"green-1\" | \"green-2\" | \"green-3\" | \"green-4\" | \"green-5\" | \"green-6\" | \"green-7\" | \"green-8\" | \"green-9\" | \"green-10\" | \"turquosie\" | \"turquosie-1\" | \"turquosie-2\" | \"turquosie-3\" | \"turquosie-4\" | \"turquosie-5\" | \"turquosie-6\" | \"turquosie-7\" | \"turquosie-8\" | \"turquosie-9\" | \"turquosie-10\" | \"cobaltblue\" | \"cobaltblue-1\" | \"cobaltblue-2\" | \"cobaltblue-3\" | \"cobaltblue-4\" | \"cobaltblue-5\" | \"cobaltblue-6\" | \"cobaltblue-7\" | \"cobaltblue-8\" | \"cobaltblue-9\" | \"cobaltblue-10\" | \"magenta\" | \"magenta-1\" | \"magenta-2\" | \"magenta-3\" | \"magenta-4\" | \"magenta-5\" | \"magenta-6\" | \"magenta-7\" | \"magenta-8\" | \"magenta-9\" | \"magenta-10\" | \"purple\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"purple-4\" | \"purple-5\" | \"purple-6\" | \"purple-7\" | \"purple-8\" | \"purple-9\" | \"purple-10\" | \"bc-red\" | \"bc-red-1\" | \"bc-red-2\" | \"bc-red-3\" | \"bc-red-4\" | \"bc-red-5\" | \"bc-red-6\" | \"bc-red-7\" | \"bc-red-8\" | \"bc-red-9\" | \"bc-blue\" | \"bc-blue-1\" | \"bc-blue-2\" | \"bc-blue-3\" | \"bc-blue-4\" | \"bc-blue-5\" | \"bc-blue-6\" | \"bc-blue-7\" | \"bc-blue-8\" | \"bc-blue-9\" | \"bc-green\" | \"bc-green-1\" | \"bc-green-2\" | \"bc-green-3\" | \"bc-green-4\" | \"bc-green-5\" | \"bc-green-6\" | \"bc-green-7\" | \"bc-green-8\" | \"bc-green-9\" | \"bc-orange\" | \"bc-orange-1\" | \"bc-orange-2\" | \"bc-orange-3\" | \"bc-orange-4\" | \"bc-orange-5\" | \"bc-orange-6\" | \"bc-orange-7\" | \"bc-orange-8\" | \"bc-orange-9\"",
           "references": {
             "ColorPaletteTypes": {
               "location": "import",

package/dist/collection/components/other_deprecated/tag/tag.js

@@ -156,7 +156,7 @@ export class BcmTag {
         "mutable": true,
         "complexType": {
           "original": "ColorPaletteTypes",
-          "resolved": "\"red\" | \"default\" | \"black\" | \"white\" | \"prime-blue\" | \"prime-blue-1\" | \"prime-blue-2\" | \"prime-blue-3\" | \"prime-blue-5\" | \"prime-blue-6\" | \"prime-blue-7\" | \"prime-blue-8\" | \"prime-blue-9\" | \"prime-blue-10\" | \"grey\" | \"grey-1\" | \"grey-2\" | \"grey-3\" | \"grey-4\" | \"grey-5\" | \"grey-6\" | \"grey-7\" | \"grey-8\" | \"grey-9\" | \"grey-10\" | \"blue\" | \"blue-1\" | \"blue-2\" | \"blue-3\" | \"blue-4\" | \"blue-5\" | \"blue-6\" | \"blue-7\" | \"blue-8\" | \"blue-9\" | \"blue-10\" | \"warmyellow\" | \"warmyellow-1\" | \"warmyellow-2\" | \"warmyellow-3\" | \"warmyellow-4\" | \"warmyellow-5\" | \"warmyellow-6\" | \"warmyellow-7\" | \"warmyellow-8\" | \"warmyellow-9\" | \"warmyellow-10\" | \"yellow\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\" | \"yellow-4\" | \"yellow-5\" | \"yellow-6\" | \"yellow-7\" | \"yellow-8\" | \"yellow-9\" | \"yellow-10\" | \"limegreen\" | \"limegreen-1\" | \"limegreen-2\" | \"limegreen-3\" | \"limegreen-4\" | \"limegreen-5\" | \"limegreen-6\" | \"limegreen-7\" | \"limegreen-8\" | \"limegreen-9\" | \"limegreen-10\" | \"red-1\" | \"red-2\" | \"red-3\" | \"red-4\" | \"red-5\" | \"red-6\" | \"red-7\" | \"red-8\" | \"red-9\" | \"red-10\" | \"darkorange\" | \"darkorange-1\" | \"darkorange-2\" | \"darkorange-3\" | \"darkorange-4\" | \"darkorange-5\" | \"darkorange-6\" | \"darkorange-7\" | \"darkorange-8\" | \"darkorange-9\" | \"darkorange-10\" | \"orange\" | \"orange-1\" | \"orange-2\" | \"orange-3\" | \"orange-4\" | \"orange-5\" | \"orange-6\" | \"orange-7\" | \"orange-8\" | \"orange-9\" | \"orange-10\" | \"green\" | \"green-1\" | \"green-2\" | \"green-3\" | \"green-4\" | \"green-5\" | \"green-6\" | \"green-7\" | \"green-8\" | \"green-9\" | \"green-10\" | \"turquosie\" | \"turquosie-1\" | \"turquosie-2\" | \"turquosie-3\" | \"turquosie-4\" | \"turquosie-5\" | \"turquosie-6\" | \"turquosie-7\" | \"turquosie-8\" | \"turquosie-9\" | \"turquosie-10\" | \"cobaltblue\" | \"cobaltblue-1\" | \"cobaltblue-2\" | \"cobaltblue-3\" | \"cobaltblue-4\" | \"cobaltblue-5\" | \"cobaltblue-6\" | \"cobaltblue-7\" | \"cobaltblue-8\" | \"cobaltblue-9\" | \"cobaltblue-10\" | \"magenta\" | \"magenta-1\" | \"magenta-2\" | \"magenta-3\" | \"magenta-4\" | \"magenta-5\" | \"magenta-6\" | \"magenta-7\" | \"magenta-8\" | \"magenta-9\" | \"magenta-10\" | \"purple\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"purple-4\" | \"purple-5\" | \"purple-6\" | \"purple-7\" | \"purple-8\" | \"purple-9\" | \"purple-10\" | \"bc-red\" | \"bc-red-1\" | \"bc-red-2\" | \"bc-red-3\" | \"bc-red-4\" | \"bc-red-5\" | \"bc-red-6\" | \"bc-red-7\" | \"bc-red-8\" | \"bc-red-9\" | \"bc-blue\" | \"bc-blue-1\" | \"bc-blue-2\" | \"bc-blue-3\" | \"bc-blue-4\" | \"bc-blue-5\" | \"bc-blue-6\" | \"bc-blue-7\" | \"bc-blue-8\" | \"bc-blue-9\" | \"bc-green\" | \"bc-green-1\" | \"bc-green-2\" | \"bc-green-3\" | \"bc-green-4\" | \"bc-green-5\" | \"bc-green-6\" | \"bc-green-7\" | \"bc-green-8\" | \"bc-green-9\" | \"bc-orange\" | \"bc-orange-1\" | \"bc-orange-2\" | \"bc-orange-3\" | \"bc-orange-4\" | \"bc-orange-5\" | \"bc-orange-6\" | \"bc-orange-7\" | \"bc-orange-8\" | \"bc-orange-9\" | \"prime-blue-4\"",
+          "resolved": "\"red\" | \"blue\" | \"default\" | \"black\" | \"white\" | \"prime-blue\" | \"prime-blue-1\" | \"prime-blue-2\" | \"prime-blue-3\" | \"prime-blue-5\" | \"prime-blue-6\" | \"prime-blue-7\" | \"prime-blue-8\" | \"prime-blue-9\" | \"prime-blue-10\" | \"grey\" | \"grey-1\" | \"grey-2\" | \"grey-3\" | \"grey-4\" | \"grey-5\" | \"grey-6\" | \"grey-7\" | \"grey-8\" | \"grey-9\" | \"grey-10\" | \"blue-1\" | \"blue-2\" | \"blue-3\" | \"blue-4\" | \"blue-5\" | \"blue-6\" | \"blue-7\" | \"blue-8\" | \"blue-9\" | \"blue-10\" | \"warmyellow\" | \"warmyellow-1\" | \"warmyellow-2\" | \"warmyellow-3\" | \"warmyellow-4\" | \"warmyellow-5\" | \"warmyellow-6\" | \"warmyellow-7\" | \"warmyellow-8\" | \"warmyellow-9\" | \"warmyellow-10\" | \"yellow\" | \"yellow-1\" | \"yellow-2\" | \"yellow-3\" | \"yellow-4\" | \"yellow-5\" | \"yellow-6\" | \"yellow-7\" | \"yellow-8\" | \"yellow-9\" | \"yellow-10\" | \"limegreen\" | \"limegreen-1\" | \"limegreen-2\" | \"limegreen-3\" | \"limegreen-4\" | \"limegreen-5\" | \"limegreen-6\" | \"limegreen-7\" | \"limegreen-8\" | \"limegreen-9\" | \"limegreen-10\" | \"red-1\" | \"red-2\" | \"red-3\" | \"red-4\" | \"red-5\" | \"red-6\" | \"red-7\" | \"red-8\" | \"red-9\" | \"red-10\" | \"darkorange\" | \"darkorange-1\" | \"darkorange-2\" | \"darkorange-3\" | \"darkorange-4\" | \"darkorange-5\" | \"darkorange-6\" | \"darkorange-7\" | \"darkorange-8\" | \"darkorange-9\" | \"darkorange-10\" | \"orange\" | \"orange-1\" | \"orange-2\" | \"orange-3\" | \"orange-4\" | \"orange-5\" | \"orange-6\" | \"orange-7\" | \"orange-8\" | \"orange-9\" | \"orange-10\" | \"green\" | \"green-1\" | \"green-2\" | \"green-3\" | \"green-4\" | \"green-5\" | \"green-6\" | \"green-7\" | \"green-8\" | \"green-9\" | \"green-10\" | \"turquosie\" | \"turquosie-1\" | \"turquosie-2\" | \"turquosie-3\" | \"turquosie-4\" | \"turquosie-5\" | \"turquosie-6\" | \"turquosie-7\" | \"turquosie-8\" | \"turquosie-9\" | \"turquosie-10\" | \"cobaltblue\" | \"cobaltblue-1\" | \"cobaltblue-2\" | \"cobaltblue-3\" | \"cobaltblue-4\" | \"cobaltblue-5\" | \"cobaltblue-6\" | \"cobaltblue-7\" | \"cobaltblue-8\" | \"cobaltblue-9\" | \"cobaltblue-10\" | \"magenta\" | \"magenta-1\" | \"magenta-2\" | \"magenta-3\" | \"magenta-4\" | \"magenta-5\" | \"magenta-6\" | \"magenta-7\" | \"magenta-8\" | \"magenta-9\" | \"magenta-10\" | \"purple\" | \"purple-1\" | \"purple-2\" | \"purple-3\" | \"purple-4\" | \"purple-5\" | \"purple-6\" | \"purple-7\" | \"purple-8\" | \"purple-9\" | \"purple-10\" | \"bc-red\" | \"bc-red-1\" | \"bc-red-2\" | \"bc-red-3\" | \"bc-red-4\" | \"bc-red-5\" | \"bc-red-6\" | \"bc-red-7\" | \"bc-red-8\" | \"bc-red-9\" | \"bc-blue\" | \"bc-blue-1\" | \"bc-blue-2\" | \"bc-blue-3\" | \"bc-blue-4\" | \"bc-blue-5\" | \"bc-blue-6\" | \"bc-blue-7\" | \"bc-blue-8\" | \"bc-blue-9\" | \"bc-green\" | \"bc-green-1\" | \"bc-green-2\" | \"bc-green-3\" | \"bc-green-4\" | \"bc-green-5\" | \"bc-green-6\" | \"bc-green-7\" | \"bc-green-8\" | \"bc-green-9\" | \"bc-orange\" | \"bc-orange-1\" | \"bc-orange-2\" | \"bc-orange-3\" | \"bc-orange-4\" | \"bc-orange-5\" | \"bc-orange-6\" | \"bc-orange-7\" | \"bc-orange-8\" | \"bc-orange-9\" | \"prime-blue-4\"",
           "references": {
             "ColorPaletteTypes": {
               "location": "import",

package/dist/collection/templates/list-item-template.js

@@ -44,10 +44,11 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
     item.open = item.isSearching;
     openGroup(item.id);
   };
-  return (h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: cs('bcm-list__item', 
+  return (h("div", { id: item.id, hidden: item.hidden, "data-has-children": isHaveChildren ? "true" : "false", "data-open": item.isSearching || item.open ? "true" : "false", "data-parent-id": item.parentId || "", "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: cs('bcm-list__item', 
     // size === 'large' ? 'size-3' : 'size-2',
     'bcm-list__item-' + size, {
       'bcm-list__item--group': !treeview && item.type == 'group',
+      'bcm-list__item--open': item.isSearching || item.open,
       'bcm-list__item--readonly': readonly,
     }) }, h("div", { class: cs('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) }, treeview && (h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && h("bcm-icon", { icon: cs('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))), h("div", { class: cs('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: 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) })))))));

package/dist/components/bcm-dropdown.js

@@ -74,6 +74,41 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       item.setActive(id);
     });
   }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  componentDidLoad() {
+    this.observeContent();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  observeContent() {
+    this.observer = new MutationObserver(() => {
+      this.manualSlotContent();
+    });
+    this.observer.observe(this.el, { childList: true });
+  }
+  manualSlotContent() {
+    const contentNodes = this.el.querySelectorAll(':scope > [slot="content"], :scope > bcm-content, :scope > bcm-items');
+    if (contentNodes.length > 0) {
+      const menu = document.getElementById(this.menuId);
+      if (menu) {
+        contentNodes.forEach(node => {
+          if (!menu.contains(node)) {
+            menu.appendChild(node);
+          }
+        });
+        if (menu === null || menu === void 0 ? void 0 : menu.updateLayout) {
+          menu === null || menu === void 0 ? void 0 : menu.updateLayout();
+        }
+      }
+    }
+  }
+  checkContent() {
+    this.manualSlotContent();
+  }
   async getActive() {
     return this.activeItem;
   }

package/dist/components/bcm-file-upload.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmFileUpload extends Components.BcmFileUpload, HTMLElement {}
+export const BcmFileUpload: {
+  prototype: BcmFileUpload;
+  new (): BcmFileUpload;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;