bromcom-ui 2.7.38-rc.12 → 2.7.38-rc.14

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

@@ -63,6 +63,7 @@ export class BcmList {
     this.placeholder = 'Choose an option';
     this.searchPlaceholder = 'Search';
     this.searchIsOnlyChilds = false;
+    this.minSearchLength = 2;
     this.clearable = false;
     this.caption = undefined;
     this.noCaption = false;
@@ -547,7 +548,7 @@ export class BcmList {
     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.searchFound = (ids === null || ids === void 0 ? void 0 : ids.length) || 0;
     this.limit = 500;
     this.searchGetParents = null;
     await delay(1000);
@@ -764,7 +765,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(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: cs('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: 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, { 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 })));
+      }) }, 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, { highlight: this.highlightText, searchable: this.type == 'autocomplete' ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-list"; }
   static get originalStyleUrls() {
@@ -1342,6 +1343,24 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "false"
       },
+      "minSearchLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-search-length",
+        "reflect": false,
+        "defaultValue": "2"
+      },
       "clearable": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/organism/states/bcm-list2.states.js

@@ -188,7 +188,7 @@ const findItem = (id, itemId, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       if (itemId.includes(item.id)) {
-        checkedProcess(id, item, true);
+        checkedProcess(id, item);
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
         }

package/dist/collection/components/other/input-custom/input-custom.js

@@ -0,0 +1,249 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__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;
+};
+import { h, Host } from "@stencil/core";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
+import cs from "classnames";
+export class BcmInputCustom {
+  constructor() {
+    this.handleFocus = () => {
+      this.hasFocus = true;
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+    };
+    this.handleChange = (e) => {
+      this.value = e.target.value;
+      console.log(e);
+    };
+    this.handleInput = (e) => {
+      // this.value = (e.target as HTMLInputElement).value;
+      console.log(e);
+    };
+    this._id = Generate.UID();
+    this.name = undefined;
+    this.value = undefined;
+    this.type = "text";
+    this.label = undefined;
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.placeholder = undefined;
+    this.fullwidth = false;
+    this.hasFocus = false;
+  }
+  render() {
+    const { _id, type, name, value, label, required, fullwidth, placeholder, disabled, readonly } = this;
+    return (h(Host, { class: cs("tw-inline-flex tw-w-full tw-max-w-[256px] tw-flex-col", {
+        "tw-max-w-full": fullwidth,
+      }) }, label && h("bcm-label", { value: label, required: required, htmlFor: _id }), h("div", { class: cs("tw-relative tw-flex tw-w-full tw-flex-row tw-items-stretch tw-rounded tw-border tw-p-0 hover:tw-border-primary-600", {
+        "tw-cursor-not-allowed tw-bg-secondary-50": this.disabled,
+        "tw-cursor-text": !this.disabled,
+        "tw-cursor-default tw-bg-secondary-50": this.readonly,
+        "tw-border-primary-500 tw-bg-secondary-50": this.hasFocus,
+        "tw-border-secondary-300 tw-bg-white": !this.hasFocus,
+      }) }, h("input", { id: _id, name: name, type: type, value: value, "data-value": value, placeholder: placeholder, required: required, disabled: disabled, readonly: readonly, class: cs("tw-text-overflow-ellipsis", "tw-rounded-none", "tw-flex-1", "tw-cursor-inherit", "tw-w-full", "tw-appearance-none", "tw-overflow-hidden", "tw-whitespace-nowrap", "tw-border-none", "tw-bg-transparent", "tw-p-2", "tw-text-secondary-600", "tw-placeholder-secondary-300", "tw-outline-none"), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: e => this.handleChange(e), onInput: this.handleInput }))));
+  }
+  static get is() { return "bcm-input-custom"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fullwidth",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmInputCustom.prototype, "el", void 0);

package/dist/collection/helper/generate.js

@@ -7,6 +7,7 @@ import { StatusProps } from "../components/molecules/alert/types";
 import { version } from "../../package.json";
 import { Build } from "@stencil/core";
 import snq from "snq";
+import colors from 'tailwindcss/colors';
 const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
 const isAllowedDomain = () => {
   const hostname = window.location.hostname;
@@ -15,7 +16,42 @@ const isAllowedDomain = () => {
 if (isAllowedDomain()) {
   console.log(`%cbromcom ui%c version: ${version}-${Build.isDev ? "d" : "p"} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
 }
+(function checkTheme() {
+  const body = document.querySelector("body");
+  let theme = localStorage.getItem("bcm-theme");
+  if (!body.classList.contains("bcm-theme-*") && theme) {
+    body.classList.add(`bcm-theme-${theme}`);
+  }
+})();
 export class Generate {
+  static observeElementRemoval(element, callback) {
+    const observer = new MutationObserver((mutationsList, observer) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList") {
+          const removedNodes = Array.from(mutation.removedNodes);
+          for (const removedNode of removedNodes) {
+            if (removedNode === element) {
+              callback();
+              observer.disconnect();
+              return;
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.documentElement, { childList: true, subtree: true });
+  }
+  static getTwColor(color, variable = "--bcm-color-default") {
+    if (!color || !colors[color]) {
+      return false;
+    }
+    const colorObj = colors[color];
+    const result = {};
+    for (const [key, value] of Object.entries(colorObj)) {
+      result[`${variable}-${key}`] = value;
+    }
+    return result;
+  }
 }
 Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 Generate.getIconAttrWithStatusType = (status, loading = false) => {

package/dist/collection/helper/popover-helper.js

@@ -2,31 +2,38 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { FloatingUI } from '@bcm/utils';
-import { ColorHelper, Generate, StringHelper } from '@bcm/helpers';
+import { delay, FloatingUI } from "@bcm/utils";
+import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 export class Popover {
-  constructor({ content, message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { } }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
     this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.exepcitonColors = {
-      white: 'slate-300',
-      black: 'slate-700',
+      white: "slate-300",
+      black: "slate-700",
     };
     this.target = () => document.getElementById(this.targetId);
     this.init = () => {
-      console.log(this.content, this.message);
       const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ''}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ''}
+            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
-      this.el = Generate.createElement('div', {
-        'id': `${this.targetId}-popover-box`,
-        'class': `
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-popover-box`,
+        "class": `
             tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
             tw-shadow`,
-        'role': 'popover',
-        'aria-hidden': 'true',
-        'style': `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
-        'innerHTML': inner,
+        "role": "popover",
+        "aria-hidden": "true",
+        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": inner,
       });
     };
     this.update = () => {
@@ -37,21 +44,21 @@ export class Popover {
       }
     };
     this.listener = () => {
-      window.addEventListener('resize', this.calculatePosition.bind(this));
-      window.addEventListener('scroll', this.calculatePosition.bind(this), true);
-      window.addEventListener('wheel', this.calculatePosition.bind(this));
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
       if (this.trigger && this.target()) {
         switch (this.trigger) {
-          case 'click':
-            this.target().addEventListener('click', this.toggle.bind(this));
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
             break;
-          case 'hover':
-            this.target().addEventListener('mouseenter', this.show.bind(this));
-            this.target().addEventListener('mouseleave', this.hide.bind(this));
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
-          case 'focus':
-            this.target().addEventListener('focus', this.show.bind(this), true);
-            this.target().addEventListener('blur', this.hide.bind(this), true);
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
             break;
           default:
             break;
@@ -59,6 +66,18 @@ export class Popover {
       }
       this.calculatePosition();
     };
+    this.removeListener = () => {
+      window.removeEventListener("resize", this.calculatePosition.bind(this));
+      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.removeEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.target()) {
+        this.target().removeEventListener("click", this.toggle.bind(this));
+        this.target().removeEventListener("mouseenter", this.show.bind(this));
+        this.target().removeEventListener("mouseleave", this.hide.bind(this));
+        this.target().removeEventListener("focus", this.show.bind(this), true);
+        this.target().removeEventListener("blur", this.hide.bind(this), true);
+      }
+    };
     this.calculatePosition = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -72,19 +91,23 @@ export class Popover {
         });
       }
     };
-    this.show = () => {
+    this.show = async () => {
       if (this.message) {
         this.init();
+        await delay(this.openDelay);
         this.calculatePosition();
+        this.emitShow();
       }
       else {
         this.hide();
       }
     };
-    this.hide = () => {
+    this.hide = async () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
+        await delay(this.closeDelay);
         this.el.remove();
+        this.emitHide();
       }
     };
     this.toggle = () => {
@@ -102,6 +125,11 @@ export class Popover {
     this.placement = placement;
     this.color = color;
     this.trigger = trigger;
-    this.id = targetId + '-popover-box';
+    this.id = targetId + "-popover-box";
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+    Generate.observeElementRemoval(document.getElementById(this.targetId), this.destroy.bind(this));
   }
 }

package/dist/collection/helper/tooltip-helper.js

@@ -2,11 +2,19 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { FloatingUI } from "@bcm/utils";
+import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 export class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium" }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { }, }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
     this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
     this.sizeClass = () => {
@@ -62,6 +70,18 @@ export class Tooltip {
       }
       this.calculatePosition();
     };
+    this.removeListener = () => {
+      window.removeEventListener("resize", this.calculatePosition.bind(this));
+      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.removeEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.target()) {
+        this.target().removeEventListener("click", this.toggle.bind(this));
+        this.target().removeEventListener("mouseenter", this.show.bind(this));
+        this.target().removeEventListener("mouseleave", this.hide.bind(this));
+        this.target().removeEventListener("focus", this.show.bind(this), true);
+        this.target().removeEventListener("blur", this.hide.bind(this), true);
+      }
+    };
     this.calculatePosition = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -75,19 +95,23 @@ export class Tooltip {
         });
       }
     };
-    this.show = () => {
+    this.show = async () => {
       if (this.message) {
         this.init();
+        await delay(this.openDelay);
         this.calculatePosition();
+        this.emitShow();
       }
       else {
         this.hide();
       }
     };
-    this.hide = () => {
+    this.hide = async () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
+        await delay(this.closeDelay);
         this.el.remove();
+        this.emitHide();
       }
     };
     this.toggle = () => {
@@ -106,5 +130,10 @@ export class Tooltip {
     this.id = targetId + "-tooltip-box";
     this.trigger = trigger;
     this.size = size;
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+    Generate.observeElementRemoval(document.getElementById(this.targetId), this.destroy.bind(this));
   }
 }

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 = ({ 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, }) => {
+export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
@@ -19,5 +19,5 @@ export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treev
       'flex-direction': 'column',
     };
   };
-  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", style: { '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, 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, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { '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 }))));
 };

package/dist/components/bcm-input-custom.d.ts

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