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

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/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;

package/dist/components/bcm-input-custom.js

@@ -0,0 +1,114 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import { G as Generate } from './generate.js';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './label.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmInputCustom$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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: classnames("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: classnames("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: classnames("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 }))));
+  }
+  get el() { return this; }
+}, [0, "bcm-input-custom", {
+    "_id": [1537, "id"],
+    "name": [1],
+    "value": [1025],
+    "type": [1],
+    "label": [1],
+    "required": [4],
+    "disabled": [4],
+    "readonly": [4],
+    "placeholder": [1],
+    "fullwidth": [4],
+    "hasFocus": [32]
+  }]);
+__decorate([
+  IsLoad()
+], BcmInputCustom$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-input-custom", "bcm-icon", "bcm-label", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-input-custom":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmInputCustom$1);
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmInputCustom = BcmInputCustom$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmInputCustom, defineCustomElement };

package/dist/components/bcm-list.js

@@ -325,7 +325,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/components/bcm-popover.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.js';
 import { C as ColorHelper } from './color-helper.js';
 import './validators.js';
@@ -11,31 +11,39 @@ import './number-helper.js';
 import { S as StringHelper } from './string-helper.js';
 import './element-dragger.js';
 import { a as Bcm } from './bcm.js';
+import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 
 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 = () => {
@@ -46,26 +54,38 @@ 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;
         }
       }
       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) {
@@ -79,19 +99,23 @@ 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 = () => {
@@ -109,7 +133,12 @@ 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));
   }
 }
 
@@ -127,6 +156,8 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
+    this.bcmPopoverShow = createEvent(this, "bcmPopoverShow", 7);
+    this.bcmPopoverHide = createEvent(this, "bcmPopoverHide", 7);
     this._id = Generate.UID();
     this.message = "";
     this.content = "";
@@ -134,13 +165,29 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
     this.color = "white";
+    this.targetId = undefined;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.popover = undefined;
+  }
+  emitShow() {
+    this.bcmPopoverShow.emit();
+  }
+  emitHide() {
+    this.bcmPopoverHide.emit();
+  }
+  componentWillLoad() {
     this.popover = new Popover({
-      targetId: this._id,
+      targetId: this.targetId || this._id,
       content: this.content,
       message: this.message,
       placement: this.placement,
       color: this.color,
       trigger: this.trigger,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
     });
   }
   componentDidLoad() {
@@ -155,6 +202,9 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popover.trigger = trigger;
     this.popover.update();
   }
+  disconnectedCallback() {
+    this.popover.destroy();
+  }
   async show() {
     this.popover.show();
   }
@@ -176,6 +226,9 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "trigger": [1],
     "open": [1028],
     "color": [1],
+    "targetId": [1, "target-id"],
+    "openDelay": [2, "open-delay"],
+    "closeDelay": [2, "close-delay"],
     "popover": [32],
     "show": [64],
     "hide": [64],