bromcom-ui 3.0.0-alpha.3 → 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");
@@ -838,7 +1020,7 @@ export class BcmList {
         "--min-height": openedType ? "inherit" : this.minHeight,
       } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e), disabled: disabled, readonly: readonly }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-list"; }
   static get originalStyleUrls() {
@@ -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/toast/toast.js

@@ -5,7 +5,6 @@
 import { Host, h } from "@stencil/core";
 import cs from "classnames";
 import { Generate } from "../../../helper/generate";
-import { StringHelper } from "../../../helper/string-helper";
 import Bcm from "../../../models/bcm";
 import { delay } from "../../../utils/utils";
 export class BcmToast {
@@ -23,6 +22,13 @@ export class BcmToast {
     this.visible = false;
     this.visibleContainer = false;
   }
+  renderMultiline(text) {
+    if (!text) {
+      return null;
+    }
+    const lines = text.split("\n");
+    return lines.map((line, index) => [index > 0 && h("br", null), line]);
+  }
   async show() {
     const toast = document.getElementById(this._id + "-container");
     if (toast) {
@@ -78,7 +84,7 @@ export class BcmToast {
     return container;
   }
   render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-color-default tw-bg-white tw-text-color-default", {
+    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
         "tw-p-4": !this.description,
         "tw-p-6": this.description,
       }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
@@ -86,11 +92,11 @@ export class BcmToast {
         "tw-opacity-0": !this.visibleContainer,
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
         "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
-      }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: cs("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
-        "tw-text-color-success": this.status === "success",
-        "tw-text-color-error": this.status === "error",
-        "tw-text-color-warning": this.status === "warning",
-        "tw-text-color-info": this.status === "info",
+      }) }, h("div", { class: "tw-flex tw-items-start tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-start tw-gap-3 " }, this.status && (h("i", { class: cs("tw-text-6 tw-pt-0.5", this.messageIcon ? this.messageIcon : "far", {
+        "tw-text-emerald-500": this.status === "success",
+        "tw-text-red-500": this.status === "error",
+        "tw-text-amber-500": this.status === "warning",
+        "tw-text-blue-500": this.status === "info",
       }, {
         "fa-check-circle": !this.messageIcon && this.status === "success",
         "fa-exclamation-circle": !this.messageIcon && this.status === "error",
@@ -99,9 +105,9 @@ export class BcmToast {
       }) })), h("span", { class: cs({
         "tw-text-4": !this.description,
         "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: cs("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "tw-transition tw-duration-300 tw-ease-in-out", {
+      }) }, this.renderMultiline(this.message))), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: cs("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
         "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: cs("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer", "tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-size-5 font-medium" }, this.description), h("slot", null)))));
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: cs("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.renderMultiline(this.description)), h("slot", null)))));
   }
   static get is() { return "bcm-toast"; }
   static get properties() {

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

@@ -6,7 +6,7 @@ import { h } from '@stencil/core';
 import cs from 'classnames';
 import { CheckboxTemplate } from './checkbox-template';
 import { StringHelper } from '@bcm/helpers';
-export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds }) => {
+export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selectedItem, openGroup, checkedItem, focusItem, searchIsOnlyChilds, disabled: parentDisabled, readonly: parentReadonly }) => {
   const isHaveChildren = item.items && item.items.length > 0;
   var text = StringHelper.htmlEntities(item.text);
   let intersection = [];
@@ -25,8 +25,8 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
   }
   text = item.isHtmlContent ? item.isHtmlContent : item.template && intersection.length > 0 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
   const unClickable = !treeview && item.type == "group" && !item.clickable;
-  const disabled = item.disabled;
-  const readonly = item.readonly;
+  const disabled = item.disabled || parentDisabled;
+  const readonly = item.readonly || parentReadonly;
   const itemClick = (event) => {
     let path = event.path || event.composedPath();
     if (path.filter(x => x.attributes && x.attributes.getNamedItem("unlinked"))[0]) {
@@ -44,11 +44,12 @@ 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: 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")) &&
+    }) }, 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/collection/templates/list-template.js

@@ -5,7 +5,7 @@
 import { h } from '@stencil/core';
 import { InfoFooterTemplate } from './info-footer-template';
 import { ListItemTemplate } from './list-item-template';
-export const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
+export const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, disabled, readonly, }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
@@ -13,5 +13,5 @@ export const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer,
     const scrollHeight = itemCount * itemHeight || 0;
     return Object.assign(Object.assign({ 'min-height': `${scrollHeight}px` }, (type === 'select' && { 'overscroll-behavior': 'none' })), { 'height': '100%', 'display': 'flex', 'flex-direction': 'column' });
   };
-  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) }, 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, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) }, h("div", { style: setScrollHeight() }, checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" }, h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))), items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))), (!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 }))));
+  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) }, 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, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) }, h("div", { style: setScrollHeight() }, checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" }, h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId), disabled: disabled, readonly: readonly }))), items.map((item) => (h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId), disabled: disabled, readonly: readonly }))), (!items || items.length === 0) && searchFound != 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No data' })))), 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 }))));
 };