bromcom-ui 2.9.0-rc.4 → 2.9.0-rc.6

package/dist/esm/bcm-badge_15.entry.js

@@ -0,0 +1,1720 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, a as getAssetPath, f as forceUpdate } from './index-348b16ad.js';
+import { C as ColorHelper } from './color-helper-116755ed.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate, s as snq } from './generate-786bd626.js';
+import './number-helper-d9b73e76.js';
+import { S as StringHelper } from './string-helper-6bd24967.js';
+import './validators-0b019b63.js';
+import './element-dragger-7ea06c76.js';
+import { B as Bcm, a as Bcm$1 } from './bcm-9f50af9c.js';
+import { c as cva } from './index-962dec74.js';
+import { c as classnames } from './index-ed9652af.js';
+import { c as createStore } from './index-0052017c.js';
+import { S as SlotTemplate } from './slot-template-672e941d.js';
+import { I as IsLoad } from './is-load-decorator-07d3502a.js';
+import { J as JsonParse } from './json-parse-decarator-e85e0fea.js';
+import { d as delay } from './utils-b3338faf.js';
+import { F as FloatingUI } from './floating-ui-e7341329.js';
+import './colors-1d7854ea.js';
+import './colors-44c95e7e.js';
+import './_commonjsHelpers-3016b722.js';
+
+class Tooltip {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
+    this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case Bcm.Size.small:
+          return "tw-text-1";
+        case Bcm.Size.medium:
+          return "tw-text-2";
+        case Bcm.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
+    this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-tooltip",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": ColorHelper.generateStyleString(style),
+        "innerHTML": StringHelper.trim(this.message),
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      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));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          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);
+            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) {
+        FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
+        });
+      }
+    };
+    this.show = async () => {
+      if (this.message) {
+        this.init();
+        await delay(this.openDelay);
+        this.calculatePosition();
+        this.emitShow();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = async () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        await delay(this.closeDelay);
+        this.el && this.el.remove();
+        this.emitHide();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.id = targetId + "-tooltip-box";
+    this.trigger = trigger;
+    this.size = size;
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+  }
+}
+
+class Popover {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
+    this.target = () => document.getElementById(this.targetId);
+    this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-popover",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
+      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2">
+            ${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": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] 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": ColorHelper.generateStyleString(style),
+        "innerHTML": inner,
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      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));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          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);
+            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) {
+        FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-[--bcm-popover-bg]`,
+        });
+      }
+    };
+    this.show = async () => {
+      if (this.message) {
+        this.init();
+        await delay(this.openDelay);
+        this.calculatePosition();
+        this.emitShow();
+      }
+      else {
+        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 = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.content = content;
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.trigger = trigger;
+    this.id = targetId + "-popover-box";
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+  }
+}
+
+const badgeStyle = cva([
+  "bcm-badge__dot bcm-ui-element bcm-ui-content-display",
+  "tw-flex tw-items-center tw-justify-center tw-flex-row",
+  "tw-rounded-full tw-text-center",
+  "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",
+  " tw-whitespace-nowrap [&>*:empty]:tw-hidden",
+], {
+  variants: {
+    size: {
+      small: ["bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5 [&>*]:tw-px-1.5 [&>*]:tw-min-w-4"],
+      medium: ["bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2 [&>*]:tw-px-1.5 [&>*]:tw-min-w-5"],
+      large: ["bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5 [&>*]:tw-px-2 [&>*]:tw-min-w-6"], //10
+    },
+    blink: {
+      true: [
+        "bcm-badge__dot-blink tw-relative",
+        "after:tw-content-[''] after:tw-absolute after:tw-top-0 after:tw-left-0  after:tw-z-[-1]",
+        "after:tw-w-full after:tw-h-full after:tw-bg-[--bcm-badge-bg] after:tw-opacity-75 after:tw-rounded-full",
+        "after:tw-animate-blink after:tw-pointer-events-none"
+      ],
+    },
+  },
+  compoundVariants: [
+    {
+      size: "medium",
+      blink: false,
+      class: "",
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    blink: false,
+  },
+});
+
+const BcmBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald",
+    };
+    this._id = Generate.UID();
+    this.blink = false;
+    this.value = undefined;
+    this.color = undefined;
+    this.size = Bcm.Size.medium;
+    this.status = undefined;
+  }
+  render() {
+    const { blink, value, size, color, status } = this;
+    const _color = this.statusColors[status] || color;
+    const { tone, colorName } = ColorHelper.parseColor(_color);
+    const dc = Generate.getTwColor({
+      color: colorName,
+      tones: {
+        [tone]: ["bg"],
+      },
+      variable: "--bcm-badge",
+    });
+    const style = Object.assign(Object.assign({}, dc), (dc["--bcm-badge-bg"] && { "--bcm-badge-text": ColorHelper.reverseColor(dc["--bcm-badge-bg"]) }));
+    return (h(Host, { class: "bcm-badge tw-inline-flex tw-items-center tw-justify-center", role: "status", "aria-live": "polite" }, h("div", { class: badgeStyle({ size, blink }), style: style }, h("span", { class: "bcm-badge__dot-text", role: "presentation", "aria-hidden": "true" }, h("slot", null, value)), h("span", { class: "tw-sr-only" }, value))));
+  }
+  get el() { return getElement(this); }
+};
+
+const variantOptions = {
+  save: {
+    text: 'Save',
+    color: 'emerald',
+    icon: 'far fa-save',
+    iconPosition: 'prefix',
+  },
+  ok: {
+    text: 'Ok',
+    color: 'emerald',
+    icon: 'far fa-check',
+    iconPosition: 'prefix',
+  },
+  new: {
+    text: 'New',
+    color: 'emerald',
+    icon: 'far fa-plus',
+    iconPosition: 'prefix',
+  },
+  add: {
+    text: 'Add',
+    color: 'emerald',
+    icon: 'far fa-plus',
+    iconPosition: 'prefix',
+  },
+  create: {
+    text: 'Create',
+    color: 'emerald',
+    icon: 'far fa-plus',
+    iconPosition: 'prefix',
+  },
+  prev: {
+    text: 'Prev',
+    color: '',
+    icon: 'far fa-arrow-left',
+    iconPosition: 'prefix',
+  },
+  next: {
+    text: 'Next',
+    color: '',
+    icon: 'far fa-arrow-right',
+    iconPosition: 'suffix',
+  },
+  apply: {
+    text: 'Apply',
+    color: '',
+    icon: 'far fa-check-circle',
+    iconPosition: 'prefix',
+  },
+  submit: {
+    text: 'Submit',
+    color: '',
+    icon: 'far fa-save',
+    iconPosition: 'prefix',
+  },
+  send: {
+    text: 'Send',
+    color: 'emerald',
+    icon: 'far fa-paper-plane',
+    iconPosition: 'prefix',
+  },
+  delete: {
+    text: 'Delete',
+    color: 'red',
+    icon: 'far fa-trash',
+    iconPosition: 'prefix',
+  },
+  cancel: {
+    text: 'Cancel',
+    color: 'red',
+    icon: 'far fa-times',
+    iconPosition: 'prefix',
+  },
+  decline: {
+    text: 'Decline',
+    color: 'red',
+    icon: 'far fa-ban',
+    iconPosition: 'prefix',
+  },
+  close: {
+    text: 'Close',
+    color: 'red',
+    icon: 'far fa-times-circle',
+    iconPosition: 'prefix',
+  },
+  archive: {
+    text: 'Archive',
+    color: 'red',
+    icon: 'far fa-folder-open',
+    iconPosition: 'prefix',
+  },
+  remove: {
+    text: 'Remove',
+    color: 'red',
+    icon: 'far fa-minus-circle',
+    iconPosition: 'prefix',
+  },
+  edit: {
+    text: 'Edit',
+    color: '',
+    icon: 'far fa-edit',
+    iconPosition: 'prefix',
+  },
+  export: {
+    text: 'Export',
+    color: '',
+    icon: 'far fa-sign-out',
+    iconPosition: 'prefix',
+  },
+  import: {
+    text: 'Import',
+    color: '',
+    icon: 'far fa-sign-in',
+    iconPosition: 'prefix',
+  },
+  filter: {
+    text: 'Filter',
+    color: '',
+    icon: 'far fa-filter',
+    iconPosition: 'prefix',
+  },
+  update: {
+    text: 'Update',
+    color: '',
+    icon: 'far fa-sync',
+    iconPosition: 'prefix',
+  },
+  reset: {
+    text: "Reset",
+    color: "",
+    icon: 'far fa-sync',
+    iconPosition: "prefix",
+  },
+  download: {
+    text: 'Download',
+    color: '',
+    icon: 'far fa-download',
+    iconPosition: 'prefix',
+  },
+};
+var VariantProps;
+(function (VariantProps) {
+  VariantProps["save"] = "save";
+  VariantProps["submit"] = "submit";
+  VariantProps["ok"] = "ok";
+  VariantProps["new"] = "new";
+  VariantProps["add"] = "add";
+  VariantProps["create"] = "create";
+  VariantProps["apply"] = "apply";
+  VariantProps["prev"] = "prev";
+  VariantProps["next"] = "next";
+  VariantProps["send"] = "send";
+  VariantProps["delete"] = "delete";
+  VariantProps["cancel"] = "cancel";
+  VariantProps["decline"] = "decline";
+  VariantProps["close"] = "close";
+  VariantProps["archive"] = "archive";
+  VariantProps["remove"] = "remove";
+  VariantProps["edit"] = "edit";
+  VariantProps["export"] = "export";
+  VariantProps["import"] = "import";
+  VariantProps["filter"] = "filter";
+  VariantProps["update"] = "update";
+  VariantProps["reset"] = "Reset";
+  VariantProps["download"] = "download";
+})(VariantProps || (VariantProps = {}));
+
+const { state } = createStore({
+  value: new Map(),
+  setData: {},
+  removeData: {}
+});
+const setValue = (val) => {
+  const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
+    icon: variantOptions[val.variant].icon,
+    value: variantOptions[val.variant].text,
+    iconPosition: Bcm$1.IconPosition[variantOptions[val.variant].iconPosition],
+    variantColor: variantOptions[val.variant].color
+  }));
+  state.value.set(data.id, data);
+};
+const removeValue = (_id) => {
+  state.value.delete(_id);
+};
+const getValue = (id) => snq(() => state.value.get(id), {});
+const buttonState = {
+  setValue,
+  removeValue,
+  getValue
+};
+
+const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
+  const ButtonTagType = (href) ? Bcm$1.HtmlElementType.a : Bcm$1.HtmlElementType.button;
+  return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm$1.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
+    h("span", { hidden: true },
+      h("slot", null)),
+    loading && h("span", { class: "bcm-button__container-loading" },
+      " ",
+      h("span", { class: "bcm-button__container-icon" },
+        h("i", { class: "far fa-spinner-third fa-spin" }),
+        " ")),
+    icon && h("span", { class: `${iconPosition} bcm-button__container-icon` },
+      h("i", { class: `${icon}` })),
+    !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })),
+    h("slot", { name: "suffix" })));
+};
+
+const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
+
+const BcmButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmClick = createEvent(this, "bcm-click", 7);
+    this._id = Generate.UID();
+    this.hidden = false;
+    this.type = Bcm$1.ButtonType.button;
+    this.size = Bcm$1.Size.medium;
+    this.disabled = false;
+    this.kind = Bcm$1.Kind.solid;
+    this.outline = false;
+    this.icon = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.value = undefined;
+    this.loading = false;
+    this.variant = undefined;
+    this.dataDismiss = false;
+    this.fullWidth = false;
+    this.iconPosition = Bcm$1.IconPosition.prefix;
+    this.color = undefined;
+    this.checked = false;
+  }
+  handleOnClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }
+  componentWillRender() {
+    const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
+    buttonState.setValue({
+      id: this._id,
+      size,
+      type,
+      kind,
+      icon,
+      iconPosition,
+      disabled,
+      outline,
+      href,
+      target,
+      loading,
+      variant,
+      fullWidth,
+      hidden,
+      value,
+      isIconOnly: !!(this.isHaveChildNodes() && this.icon),
+    });
+  }
+  getStateData() {
+    return buttonState.getValue(this._id);
+  }
+  isHaveChildNodes() {
+    const childNodes = Array.from(this.el.childNodes);
+    return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
+  }
+  setColor(color = this.color) {
+    if (!color)
+      return;
+    const { kind } = this;
+    const prefix = `--bcm-button-${kind}`;
+    if (kind === 'solid') {
+      return {
+        [`${prefix}-color-default`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
+      };
+    }
+    else if (kind == 'link') {
+      return {
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor('transparent'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor('slate-50'),
+        [`${prefix}-border-disabled`]: ColorHelper.dsColor('transparent')
+      };
+    }
+    else if (kind == 'ghost') {
+      return {
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-100'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-200'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-400'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor(color + '-50'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-300'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-400'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-disabled`]: ColorHelper.dsColor(color + '-200'),
+      };
+    }
+    return;
+  }
+  render() {
+    const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
+    const classPrefix = 'bcm-button';
+    let componentClass = classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
+      'full-width': fullWidth,
+      'checked': this.checked,
+      'disabled': disabled,
+    });
+    const hostClasses = classnames(`${classPrefix}`, {
+      hidden,
+      'full-width': fullWidth,
+    });
+    return (h(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+  }
+  get el() { return getElement(this); }
+};
+BcmButton.style = buttonCss;
+
+const dropdownCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-dropdown{width:fit-content;display:inline-flex;flex-direction:row}.bcm-dropdown.hidden{display:none}.bcm-dropdown.no-style{cursor:pointer}.bcm-dropdown.full-width{width:100%}.bcm-dropdown.full-width .bcm-button__container-text{flex:1;justify-content:space-between}.bcm-dropdown__type-split .main-button .bcm-button__container{border-top-right-radius:0;border-bottom-right-radius:0}.bcm-dropdown__type-split .split-button .bcm-button__container{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:1px;min-width:auto}.bcm-dropdown__icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;transform:rotate(0deg);transition:transform 0.2s ease}.bcm-dropdown__icon--open{transform:rotate(180deg)}";
+
+var __decorate$1 = (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 BcmDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmClick = createEvent(this, "bcm-click", 7);
+    this.bcmDropdownChange = createEvent(this, "bcm-dropdown-change", 7);
+    this.isOpen = undefined;
+    this._id = Generate.UID();
+    this.menuId = Generate.UID();
+    this.hidden = false;
+    this.type = 'dropdown';
+    this.size = Bcm$1.Size.medium;
+    this.disabled = false;
+    this.kind = Bcm$1.Kind.solid;
+    this.icon = undefined;
+    this.href = undefined;
+    this.target = undefined;
+    this.value = undefined;
+    this.noStyle = false;
+    this.dropdownIcon = 'fas fa-angle-down';
+    this.linkedComponent = undefined;
+    this.loading = false;
+    this.variant = undefined;
+    this.dataDismiss = false;
+    this.fullWidth = false;
+    this.iconPosition = Bcm$1.IconPosition.prefix;
+    this.placement = undefined;
+    this.height = undefined;
+    this.maxHeight = '500px';
+    this.minHeight = '50px';
+    this.stopDeepClean = false;
+    this.selectable = true;
+    this.gap = '4px';
+    this.color = undefined;
+    this.activeItem = null;
+    this.data = [];
+  }
+  async dataChanged(newValue) {
+    if (newValue) {
+      this.data = newValue;
+    }
+  }
+  async setActive(id = null) {
+    var _a, _b;
+    (_b = (_a = document
+      .getElementById(`${this.menuId}`)) === null || _a === void 0 ? void 0 : _a.querySelectorAll('bcm-menu')) === null || _b === void 0 ? void 0 : _b.forEach(item => {
+      item.setActive(id);
+    });
+  }
+  async getActive() {
+    return this.activeItem;
+  }
+  handleSlotItems({ detail }) {
+    this.data = detail;
+  }
+  setActiveAttribute(e) {
+    if (e.detail) {
+      this.bcmDropdownChange.emit(e.detail);
+      this.activeItem = e.detail;
+    }
+  }
+  ;
+  render() {
+    const { size, kind, disabled, icon, color, href, target, loading, type, variant, fullWidth, isOpen } = this;
+    const hostClasses = classnames('bcm-dropdown', 'bcm-dropdown__type-' + type, {
+      'full-width': fullWidth,
+      'no-style': this.noStyle,
+      'hidden': this.hidden || this.linkedComponent,
+    });
+    const attributes = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (disabled && { disabled })), (loading && { loading })), (kind && { kind })), (size && { size })), (variant && { variant })), (color && { color })), (this.menuId && { 'menu-id': this.menuId }));
+    const iconClasses = classnames('bcm-dropdown__icon', {
+      'bcm-dropdown__icon--open': isOpen,
+    });
+    const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
+    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e), gap: this.gap, dropdown: true }), h("slot", { name: "content" }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "data": ["dataChanged"]
+  }; }
+};
+__decorate$1([
+  IsLoad()
+], BcmDropdown.prototype, "el", void 0);
+__decorate$1([
+  JsonParse('data', true)
+], BcmDropdown.prototype, "dataChanged", null);
+BcmDropdown.style = dropdownCss;
+
+const iconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-icon.hidden{display:none}";
+
+const customIconList = {
+  "message-bot": "message-bot.svg",
+};
+const BcmIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hidden = false;
+    this.icon = undefined;
+  }
+  getIcon() {
+    const { icon } = this;
+    if (icon in customIconList) {
+      const _icon = getAssetPath("./static/" + customIconList[icon]);
+      return (h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+    }
+    return h("i", { class: `${icon}` });
+  }
+  render() {
+    const { /*icon,*/ hidden } = this;
+    return h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return getElement(this); }
+};
+BcmIcon.style = iconCss;
+
+const itemCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-item{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;--bcm-item-color-default:var(--bcm-new-ds-color-white);--bcm-item-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-item-color-hover:var(--bcm-new-ds-color-white);--bcm-item-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-item-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-item-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-item-color-active:var(--bcm-new-ds-color-white);--bcm-item-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-item-color-disabled:var(--bcm-new-ds-color-white);--bcm-item-background-color-disabled:var(--bcm-new-ds-color-slate-400);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;border-radius:4px;outline:none;color:var(--bcm-item-color-default);background-color:var(--bcm-item-background-color-default)}.bcm-item-size-small{font-size:12px;line-height:calc(12px + 8px);padding:2px 12px;min-height:calc(calc(12px + 8px) + calc(2px) * 2)}.bcm-item-size-medium{font-size:14px;line-height:calc(14px + 8px);padding:5px 12px;min-height:calc(calc(14px + 8px) + calc(5px) * 2)}.bcm-item-size-large{font-size:16px;line-height:calc(16px + 8px);padding:8px 12px;min-height:calc(calc(16px + 8px) + calc(8px) * 2)}.bcm-item:default{color:var(--bcm-item-color-default);background-color:var(--bcm-item-background-color-default)}.bcm-item:hover{color:var(--bcm-item-color-hover);background-color:var(--bcm-item-background-color-hover)}.bcm-item:focus-visible{color:var(--bcm-item-color-focus-visible);background-color:var(--bcm-item-background-color-focus-visible)}.bcm-item:active{color:var(--bcm-item-color-active);background-color:var(--bcm-item-background-color-active)}.bcm-item:disabled{color:var(--bcm-item-color-disabled);background-color:var(--bcm-item-background-color-disabled)}.bcm-item:not(.static):hover{cursor:pointer}";
+
+const BcmItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.size = Bcm$1.Size.medium;
+    this.color = undefined;
+    this.static = false;
+  }
+  setColor(color = this.color) {
+    if (!color)
+      return;
+    const prefix = `--bcm-item`;
+    if (color == "white") {
+      return {
+        [`${prefix}-color-default`]: ColorHelper.dsColor('slate-600'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor('slate-600'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('slate-600'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor('slate-600'),
+        [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(this.static ? 'white' : 'white'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(this.static ? 'white' : 'slate-100'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(this.static ? 'white' : 'slate-200'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(this.static ? 'white' : 'slate-300'),
+        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
+      };
+    }
+    return {
+      [`${prefix}-color-default`]: ColorHelper.dsColor('white'),
+      [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
+      [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
+      [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
+      [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
+      [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-500'),
+      [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
+      [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+      [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
+      [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
+    };
+  }
+  disconnectedCallback() {
+    //   this.el.remove()
+  }
+  render() {
+    const hostClasses = classnames('bcm-item', `bcm-item-size-${this.size}`);
+    return (h(Host, { class: hostClasses, style: this.setColor() }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+BcmItem.style = itemCss;
+
+const BcmItems = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmItems = createEvent(this, "bcm-items", 7);
+    this._id = Generate.UID();
+  }
+  connectedCallback() {
+    if (this.el.children && this.el.children.length > 0) {
+      let slots = this.nestedItems(this.el);
+      this.bcmItems.emit(slots);
+      this.el.remove();
+    }
+  }
+  mapItems(element) {
+    var _a;
+    const item = element;
+    const textContent = (_a = item === null || item === void 0 ? void 0 : item.innerHTML) === null || _a === void 0 ? void 0 : _a.replace(/<bcm-item>.*<\/bcm-item>/g, '').replace(/<bcm-item .*>.*<\/bcm-item>/g, '').replace(/<!--(.|\s)*?-->/g, '').trim();
+    const checkAttr = (attr) => StringHelper.elementBooleanCheck(element.getAttribute(attr));
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: element.getAttribute('id') || Generate.UID(), text: element.getAttribute('text') || textContent }, (element.innerHTML.trim() && { isHtmlContent: element.textContent.length > 0 ? (element.innerHTML.trim()) : null })), (checkAttr('disabled') && { disabled: checkAttr('disabled') })), (checkAttr('selected') && { selected: checkAttr('selected') })), (checkAttr('hidden') && { hidden: checkAttr('hidden') })), (checkAttr('checked') && { checked: checkAttr('checked') })), (checkAttr('readonly') && { readonly: checkAttr('readonly') })), (checkAttr('active') && { active: checkAttr('active') })), (checkAttr('icon') && { icon: element.getAttribute('icon') })), (checkAttr('link') && { link: element.getAttribute('link') }));
+  }
+  nestedItems(element) {
+    return snq(() => Array.from(element === null || element === void 0 ? void 0 : element.children).map((child) => {
+      var _a;
+      return (Object.assign(Object.assign({}, (((_a = child === null || child === void 0 ? void 0 : child.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'bcm-item' && this.mapItems(child))), { items: this.nestedItems(child) }));
+    }), []);
+  }
+  render() {
+    return h("slot", null);
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmLinked = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmOpen = createEvent(this, "bcm-open", 7);
+    this._id = Generate.UID();
+    this.placement = Bcm.Placement["bottom-start"];
+    this.trigger = Bcm.TriggerType.click;
+    this.targetId = "";
+    this.height = undefined;
+    this.maxHeight = undefined;
+    this.minHeight = "50px";
+    this.isOpen = false;
+    this.hideDelay = 500;
+    this.isMouseOverLink = false;
+  }
+  target() {
+    const target = document.querySelectorAll(`[id="${this.targetId}"]`);
+    if (target.length > 0) {
+      target.length > 1 && console.warn(`[bcm-linked] - Target id "${this.targetId}" is duplicated`);
+      return target[0];
+    }
+    else {
+      // console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" could not be found.`);
+      this.el.remove();
+      return null;
+    }
+  }
+  detectClone() {
+    const linked = document.querySelectorAll(`[target-id="${this.targetId}"]`);
+    if (linked.length > 0) {
+      linked.forEach((item) => {
+        if (item.id !== this._id) {
+          console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" is duplicated.`);
+          item.remove();
+        }
+      });
+    }
+  }
+  dismissEvent() {
+    document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
+  }
+  checkDataDismiss(e) {
+    Generate.findEventPathHasAttribute(e, "data-dismiss") && this.dismissEvent();
+  }
+  hideChildLinked() {
+    this.el.querySelectorAll("[is-linked][linked-is-open]").forEach(item => {
+      var _a;
+      (_a = document.querySelector(`#${item.getAttribute("is-linked")}[is-open]`)) === null || _a === void 0 ? void 0 : _a.hide(false);
+    });
+  }
+  calculatePosition() {
+    const el = this.el;
+    if (el && this.target()) {
+      if (this.isOpen) {
+        FloatingUI({
+          ref: this.target(),
+          floating: el,
+          placement: this.placement,
+          offset: 4,
+          autoHidden: el.getAttribute("main-linked") === "true" ? false : true,
+          autoSize: true,
+          style: {
+            height: this.height,
+            maxHeight: this.maxHeight,
+            minHeight: this.minHeight,
+          },
+        });
+      }
+      else {
+        el.style.visibility = "hidden";
+        el.style.opacity = "0";
+      }
+    }
+  }
+  init() {
+    const target = this.target();
+    this.trigger === Bcm.TriggerType.hover && this.listenMouseOver();
+    if (target) {
+      target.setAttribute("is-linked", this.el.id);
+      if (!Generate.getAncestor(target, "bcm-linked")) {
+        this.el.setAttribute("main-linked", "true");
+      }
+      else {
+        this.el.removeAttribute("main-linked");
+      }
+    }
+  }
+  componentDidLoad() {
+    this.init();
+  }
+  triggerWatch(newValue) {
+    if (newValue === Bcm.TriggerType.hover) {
+      this.listenMouseOver();
+    }
+  }
+  watchIsOpen() {
+    this.bcmOpen.emit(this.isOpen);
+  }
+  onLinkedDataDismis() {
+    this.hide(false);
+  }
+  onBcmFloatingIsHide(e) {
+    if (e.detail.id === this._id) {
+      this.hide(false);
+    }
+  }
+  async show(wait = true) {
+    wait && (await delay(50));
+    this.detectClone();
+    const target = this.target();
+    if (target) {
+      const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
+      bcmOverlayContainer.appendChild(this.el);
+      target.setAttribute("linked-is-open", "true");
+      this.isOpen = true;
+      this.calculatePosition();
+    }
+    else {
+      this.hide(false);
+    }
+    return this.isOpen;
+  }
+  async hide(wait = true) {
+    wait && (await delay(50));
+    const target = this.target();
+    this.isMouseOverLink = false;
+    if (target) {
+      target.removeAttribute("linked-is-open");
+      this.hideChildLinked();
+      this.isOpen = false;
+    }
+    return this.isOpen;
+  }
+  async toggle(wait = true) {
+    return this.isOpen ? await this.hide(wait) : await this.show(wait);
+  }
+  clickListener(e) {
+    if (!this.target())
+      return;
+    if (this.trigger === Bcm.TriggerType.hover)
+      return;
+    const isTarget = Generate.findEventPath(e, this.target());
+    const isSelf = Generate.findEventPath(e, this.el);
+    const isLinked = Generate.findEventPathWithNodeName(e, "BCM-LINKED");
+    if (!isTarget && !isSelf && !isLinked) {
+      this.hide();
+      this.bcmOpen.emit(this.isOpen);
+      return;
+    }
+    if (this.isOpen) {
+      isTarget && this.hide(false);
+      isSelf && this.checkDataDismiss(e);
+      if (this.el.getAttribute("main-linked") === "true" && !isTarget && !isSelf && !isLinked) {
+        this.dismissEvent();
+      }
+    }
+    else {
+      isTarget && this.show(false);
+    }
+  }
+  resizeListener() {
+    this.calculatePosition();
+  }
+  scrollListener() {
+    this.calculatePosition();
+  }
+  wheelListener() {
+    this.calculatePosition();
+  }
+  listenMouseOver() {
+    var _a, _b;
+    this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
+    this.el.addEventListener("mouseleave", () => {
+      this.isMouseOverLink = false;
+      this.handleMouseLeave();
+    });
+    (_a = this.target()) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseenter", this.handleMouseEnter.bind(this));
+    (_b = this.target()) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+  }
+  handleMouseLeave() {
+    setTimeout(() => {
+      !this.isMouseOverLink && this.hide();
+    }, this.hideDelay);
+  }
+  handleMouseEnter() {
+    clearTimeout(this.timeoutId);
+    this.isMouseOverLink = false;
+    this.show();
+  }
+  render() {
+    const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
+    return (h(Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "trigger": ["triggerWatch"],
+    "isOpen": ["watchIsOpen"]
+  }; }
+};
+
+const menuCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-menu{--bcm-menu-color-default:var(--bcm-new-ds-color-slate-700);--bcm-menu-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-default:var(--bcm-new-ds-color-slate-600);--bcm-menu-color-hover:var(--bcm-new-ds-color-slate-800);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-menu-icon-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-menu-color-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active:var(--bcm-color-primary-500);--bcm-menu-icon-color-active:var(--bcm-new-ds-color-white);--bcm-menu-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-focus-visible:var(--bcm-color-primary-600);--bcm-menu-icon-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-menu-icon-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-color-dropdownDisabled:var(--bcm-new-ds-color-slate-400);--bcm-menu-background-color-dropdownDisabled:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-dropdownDisabled:var(--bcm-new-ds-color-slate-400);--bcm-menu-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-hover:var(--bcm-color-primary-400);--bcm-menu-icon-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-focus-visible:var(--bcm-color-primary-700);--bcm-menu-icon-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-active-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-active:var(--bcm-color-primary-800);--bcm-menu-icon-color-active-active:var(--bcm-new-ds-color-white);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;position:relative;width:210px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);transition:background-color 0.1s ease-in-out, width 0.3s ease-in-out}.bcm-menu__container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap}.bcm-menu__item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;font:inherit;cursor:pointer;color:inherit;background-color:inherit;padding:0;margin:0;border:none;outline:none;text-decoration:none}.bcm-menu__item:hover,.bcm-menu__item:focus,.bcm-menu__item:active{outline:none;text-decoration:none}.bcm-menu__item--is-sub{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover);border-radius:4px}.bcm-menu__item--is-sub .bcm-menu__item-link-icon,.bcm-menu__item--is-sub .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:4px;transition:background-color 0.1s ease-in-out, padding 0.3s ease-in-out;color:var(--bcm-menu-color-default);background-color:var(--bcm-menu-background-color-default)}.bcm-menu__item-link-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;min-width:24px;max-width:24px}.bcm-menu__item-link-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bcm-menu__item-link-text--collapse{opacity:0}.bcm-menu__item-link-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:10px;height:100%;order:0;width:24px;transform:rotate(0deg);transition:transform 0.2s ease-in-out;margin-right:-8px}.bcm-menu__item-link-toggle--collapse{transform:rotate(-180deg)}.bcm-menu__item-link .bcm-menu__item-link-icon,.bcm-menu__item-link .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-default)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-focus-visible)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-dropdownDisabled);background-color:var(--bcm-menu-background-color-dropdownDisabled)}.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:dropdownDisabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-dropdownDisabled)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-active)}.bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-submenu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:12px;display:none}.bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu__item-submenu--open{display:flex}.bcm-menu__size-small{padding:8px;font-size:12px;line-height:calc(14px + 8px)}.bcm-menu__size-medium{padding:16px;font-size:14px;line-height:calc(16px + 8px)}.bcm-menu__size-large{padding:16px;font-size:16px;line-height:calc(18px + 8px)}.bcm-menu__collapse-button{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active);display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:14px;border-radius:100px;position:absolute;top:23px;right:-8px;width:18px;height:18px;cursor:pointer;transition:background-color 0.1s ease-in-out, transform 0.3s ease}.bcm-menu__collapse-button:hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__collapse-button:focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__collapse-button:active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__collapse-button--collapsed{transform:rotate(-180deg)}.bcm-menu__collapse{width:64px}.bcm-menu__collapse .bcm-menu__item-link{padding:4px}.bcm-menu--linked{position:absolute;z-index:10800;top:0;left:0;opacity:0;visibility:hidden;width:fit-content;min-height:50px;max-height:500px;height:auto;overflow-y:auto;padding:12px}.bcm-menu--linked.bcm-menu__open{opacity:1;visibility:visible}.bcm-menu--linked .bcm-menu__container{gap:4px}.bcm-menu--linked .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item .bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__dropdown{width:auto;max-width:210px}.bcm-menu__dropdown .bcm-menu__item-link--disabled{color:var(--bcm-menu-color-dropdownDisabled);background-color:var(--bcm-menu-background-color-dropdownDisabled)}.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__dropdown .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-dropdownDisabled)}";
+
+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 BcmMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmClick = createEvent(this, "bcm-click", 7);
+    this.bcmExpanded = createEvent(this, "bcm-expanded", 7);
+    this.bcmMenuChange = createEvent(this, "bcm-menu-change", 7);
+    this._id = Generate.UID();
+    this.size = 'medium';
+    this.collapsible = false;
+    this.collapse = false;
+    this.mode = 'inline';
+    this.disabled = false;
+    this.hidden = false;
+    this.linkedComponent = undefined;
+    this.height = 'auto';
+    this.maxHeight = '500px';
+    this.minHeight = '150px';
+    this.selectable = true;
+    this.gap = "16px";
+    this.dropdown = false;
+    this.placement = 'bottom-start';
+    this.activeItemId = undefined;
+    this.data = [];
+  }
+  async setActive(param) {
+    this.activeItemId = null;
+    const recursive = (data) => {
+      data.forEach(item => {
+        if (item.id == param) {
+          item.active = true;
+          this.activeItemId = item.id;
+          this.bcmClick.emit(item);
+        }
+        else {
+          item.active = false;
+          if (item.items) {
+            recursive(item.items);
+          }
+        }
+      });
+    };
+    recursive(this.data);
+  }
+  async getActive() {
+    return this.activeItem;
+  }
+  handleSlotItems({ detail }) {
+    this.data = detail;
+  }
+  handleClickItem(item) {
+    if (item.items && item.items.length > 0) {
+      item.isOpen = !item.isOpen;
+      forceUpdate(this);
+    }
+    else {
+      this.activeItemId = item.id;
+      document.dispatchEvent(new CustomEvent('linked-data-dismiss', { detail: { id: this._id } }));
+    }
+    // this.data = this.data.map(menuItem => ({ ...menuItem, active: menuItem.id === item.id }));
+    this.bcmClick.emit(item);
+  }
+  getTooltip(id, text) {
+    return new Tooltip({ message: text, targetId: 'bcm-menu__item-' + this._id + '-' + id, placement: 'right' });
+  }
+  render() {
+    const { data, collapsible, collapse } = this;
+    const hostClasses = classnames('bcm-menu', `bcm-menu__size-${this.size}`, {
+      'bcm-menu__collapse': collapse,
+      'bcm-menu__dropdown': this.dropdown,
+    });
+    const MenuLinkTemplate = (item, index) => {
+      if (!item.text)
+        return;
+      if (!item.id)
+        item.id = Generate.UID();
+      const subItems = !!(item.items && item.items.length);
+      if (this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active)) {
+        this.bcmMenuChange.emit(item);
+        this.activeItem = item;
+      }
+      return (h("a", { id: 'bcm-menu__item-' + this._id + '-' + item.id, onMouseEnter: () => this.collapse && this.getTooltip(item.id, item.text).show(), onMouseLeave: () => this.collapse && this.getTooltip(item.id, item.text).hide(), key: index, href: !item.disabled ? item.link || 'javascript:void(0)' : 'javascript:void(0)', tabindex: item.disabled ? '-1' : '0', class: classnames('bcm-menu__item', {
+          'bcm-menu__item--is-sub': subItems && item.isOpen,
+          'hidden tw-hidden': item.hidden,
+        }) }, h("span", { class: classnames('bcm-menu__item-link', `bcm-menu__item-link--${this.mode}`, {
+          'bcm-menu__item-link--active': this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active),
+          'bcm-menu__item-link--disabled': item.disabled,
+        }), onClick: () => {
+          !this.disabled && !item.disabled && this.handleClickItem(item);
+        } }, item.icon && (h("span", { class: "bcm-menu__item-link-icon" }, h("i", { class: item.icon || 'far fa-angle-left' }))), h("span", { class: classnames('bcm-menu__item-link-text', {
+          'bcm-menu__item-link-text--collapse': collapse,
+        }), innerHTML: item.text }), subItems && (h("div", { class: classnames('bcm-menu__item-link-toggle', {
+          'bcm-menu__item-link-toggle--collapse': item.isOpen,
+        }) }, h("i", { class: "fas fa-chevron-down" })))), subItems && (h("div", { class: classnames('bcm-menu__item-submenu', {
+          'bcm-menu__item-submenu--collapse': collapse,
+          'bcm-menu__item-submenu--open': item.isOpen,
+        }) }, item.items.map((subItem, subIndex) => MenuLinkTemplate(subItem, subIndex))))));
+    };
+    return (h(Host, { class: hostClasses, disabled: this.disabled }, h("div", { class: "bcm-menu__container", style: { gap: this.gap } }, h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (h("div", { class: classnames('bcm-menu__collapse-button', {
+        'bcm-menu__collapse-button--collapsed': collapse,
+      }), onClick: () => {
+        this.collapse = !collapse;
+        collapsible && this.bcmExpanded.emit(collapse);
+      } }, h("i", { class: "far fa-angle-left" }))))));
+  }
+  get el() { return getElement(this); }
+};
+__decorate([
+  IsLoad()
+], BcmMenu.prototype, "el", void 0);
+BcmMenu.style = menuCss;
+
+const BcmPopover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmPopoverShow = createEvent(this, "bcmPopoverShow", 7);
+    this.bcmPopoverHide = createEvent(this, "bcmPopoverHide", 7);
+    this._id = Generate.UID();
+    this.message = "";
+    this.content = "";
+    this.placement = Bcm.Placement.top;
+    this.trigger = Bcm.TriggerType.click;
+    this.open = false;
+    this.color = "white";
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.popover = undefined;
+  }
+  emitShow() {
+    this.bcmPopoverShow.emit();
+  }
+  emitHide() {
+    this.bcmPopoverHide.emit();
+  }
+  connectedCallback() {
+    this.popover = new Popover({
+      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,
+      autoHide: this.autoHide,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.popover.listener();
+  }
+  componentDidRender() {
+    const { content, message, placement, color, trigger } = this;
+    this.popover.content = content;
+    this.popover.message = message;
+    this.popover.placement = placement;
+    this.popover.color = color;
+    this.popover.trigger = trigger;
+    this.popover.openDelay = this.openDelay;
+    this.popover.closeDelay = this.closeDelay;
+    this.popover.autoHide = this.autoHide;
+    this.popover.update();
+  }
+  disconnectedCallback() {
+    this.popover.destroy();
+  }
+  async show() {
+    this.popover.show();
+  }
+  async hide() {
+    this.popover.hide();
+  }
+  async toggle() {
+    this.popover.toggle();
+  }
+  render() {
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmTabGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabChange = createEvent(this, "bcm-tab-change", 7);
+    this._id = Generate.UID();
+    this.active = "1";
+    this.color = "blue";
+    this.size = Bcm.Size.medium;
+  }
+  get tabItems() {
+    return this.el.querySelectorAll("bcm-tab-item");
+  }
+  get tabItemHeaders() {
+    return this.el.querySelectorAll("bcm-tab-item-header");
+  }
+  setTabAttributes() {
+    this.tabItems.forEach((tab, index) => {
+      const itemActive = tab.hasAttribute("active") ? true : false;
+      const itemDisabled = tab.hasAttribute("disabled") ? true : false;
+      const itemIndex = index + 1;
+      tab.setAttribute("index", `${itemIndex}`);
+      tab.setAttribute("size", this.size);
+      tab.setAttribute("color", this.color);
+      tab.removeAttribute("active");
+      tab.removeAttribute("disabled");
+      if (itemActive) {
+        tab.setAttribute("active", "");
+        this.active = itemIndex.toString();
+      }
+      if (itemDisabled) {
+        tab.setAttribute("disabled", "");
+      }
+      // const headerElement = tab.querySelector("bcm-tab-item-header");
+      // if (headerElement) {
+      //     this.setHeaderTabAttributes(headerElement, tab);
+      // }
+    });
+    const isHasActiveTab = Array.from(this.tabItems).some((tab) => tab.hasAttribute("active"));
+    if (!isHasActiveTab) {
+      this.tabItems[0].setAttribute("active", "");
+    }
+  }
+  componentWillLoad() {
+    this.setTabAttributes();
+  }
+  handleTabClick(index) {
+    var _a, _b;
+    if (index) {
+      this.active = index.toString();
+    }
+    if ((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.length) {
+      this.tabItems.forEach(tab => {
+        tab.removeAttribute("active");
+        tab.setAttribute("size", this.size);
+        tab.setAttribute("color", this.color);
+        if (tab.getAttribute("index") == this.active) {
+          tab.setAttribute("active", "");
+        }
+      });
+    }
+    if ((_b = this.tabItemHeaders) === null || _b === void 0 ? void 0 : _b.length) {
+      this.tabItemHeaders.forEach(tabHeader => {
+        tabHeader.removeAttribute("active");
+        tabHeader.setAttribute("size", this.size);
+        tabHeader.setAttribute("color", this.color);
+        if (tabHeader.getAttribute("index") == this.active) {
+          tabHeader.setAttribute("active", "");
+          // tabHeader.scrollIntoView({
+          //     behavior: "smooth",
+          //     block: "start",
+          //     inline: "center",
+          // });
+        }
+      });
+    }
+    this.tabChange.emit(this.active);
+  }
+  componentDidRender() {
+    this.inkBarControl();
+    this.handleTabClick();
+  }
+  componentDidLoad() {
+    this.inkBarControl();
+    this.observeTabItem();
+  }
+  async setActive(index) {
+    if (index > 0 && index <= this.tabItems.length && index != +this.active) {
+      this.handleTabClick(index);
+    }
+  }
+  async refresh() {
+    await delay(100);
+    forceUpdate(this);
+  }
+  inkBarControl() {
+    var _a;
+    const inkBar = this.el.querySelector("#ink-bar");
+    if (!inkBar || !((_a = this.tabItemHeaders) === null || _a === void 0 ? void 0 : _a.length))
+      return;
+    for (let i = 0; i < this.tabItemHeaders.length; i++) {
+      const tab = this.tabItemHeaders[i];
+      const tabIndex = tab.getAttribute("index");
+      if (tabIndex === this.active) {
+        inkBar.style.width = `${tab.offsetWidth}px`;
+        // inkBar.style.top = `${tab.offsetHeight}px`;
+        inkBar.style.transform = `translateX(${tab.offsetLeft}px)`;
+      }
+    }
+  }
+  activeChanged(newVal, _oldVal) {
+    var _a;
+    if (!((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.length))
+      return;
+    const isHasActiveTab = Array.from(this.tabItems).some(tab => tab.getAttribute("index") == newVal);
+    if (!isHasActiveTab) {
+      this.active = "1";
+    }
+  }
+  observeTabItem() {
+    const callback = (mutationsList, _observer) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList") {
+          // for (const node of mutation.addedNodes) {
+          //     if (node.nodeName === "BCM-TAB-ITEM") {
+          //         // Do something when a bcm-tab-item is added
+          //     }
+          // }
+          for (const node of mutation.removedNodes) {
+            if (node.nodeName === "BCM-TAB-ITEM") {
+              // Do something when a bcm-tab-item is removed
+              // console.log("A bcm-tab-item was removed.", node);
+              if (node === null || node === void 0 ? void 0 : node.active) {
+                this.active = "1";
+              }
+              this.tabProcess();
+            }
+          }
+        }
+      }
+    };
+    this.observer = new MutationObserver(callback);
+    this.observer.observe(this.el, { childList: true });
+  }
+  tabProcess() {
+    this.updateTabHeaders();
+    this.regenerateIndex();
+    this.refresh();
+    this.inkBarControl();
+  }
+  updateTabHeaders() {
+    const tabIds = Array.from(this.tabItems).map(tab => tab.getAttribute("id"));
+    const tabHeaderElements = Array.from(this.el.querySelector("#tab-header").querySelectorAll("bcm-tab-item-header"));
+    if (tabIds.length !== tabHeaderElements.length) {
+      tabHeaderElements.forEach(tabHeader => {
+        const tabId = tabHeader.getAttribute("tab-id");
+        if (!tabIds.includes(tabId)) {
+          tabHeader.remove();
+        }
+      });
+    }
+  }
+  regenerateIndex() {
+    this.tabItems.forEach((tab, index) => {
+      const itemIndex = index + 1;
+      tab.setAttribute("index", `${itemIndex}`);
+      const headerElement = this.el.querySelector(`bcm-tab-item-header[tab-id="${tab.getAttribute("id")}"]`);
+      if (headerElement) {
+        headerElement.setAttribute("index", `${itemIndex}`);
+        headerElement.style.order = `${itemIndex}`;
+      }
+    });
+  }
+  render() {
+    const { color } = this;
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: [500]
+    });
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["activeChanged"]
+  }; }
+};
+
+const BcmTabItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.active = false;
+    this.disabled = false;
+    this.index = undefined;
+  }
+  componentWillLoad() {
+    this.indexControl();
+  }
+  componentDidRender() {
+    this.headerMove();
+  }
+  getHeaderItem() {
+    const headerItem = this.el.querySelector("bcm-tab-item-header");
+    if (headerItem) {
+      headerItem.setAttribute("index", `${this.index}`);
+      headerItem.setAttribute("active", `${this.active}`);
+      headerItem.setAttribute("disabled", `${this.disabled}`);
+      headerItem.setAttribute("tab-id", `${this._id}`);
+      headerItem.style.order = `${this.index}`;
+    }
+    return headerItem;
+  }
+  getParentTabGroup() {
+    return Generate.findParentElement(this.el, "bcm-tab-group");
+  }
+  getFindHeaderItem() {
+    var _a, _b;
+    return (_b = (_a = this.getParentTabGroup()) === null || _a === void 0 ? void 0 : _a.querySelector("#tab-header")) === null || _b === void 0 ? void 0 : _b.querySelector(`bcm-tab-item-header[tab-id="${this._id}"]`);
+  }
+  headerMove() {
+    var _a, _b, _c, _d;
+    if (this.getHeaderItem()) {
+      (_a = this.getFindHeaderItem()) === null || _a === void 0 ? void 0 : _a.remove();
+      (_c = (_b = this.getParentTabGroup()) === null || _b === void 0 ? void 0 : _b.querySelector("#tab-header")) === null || _c === void 0 ? void 0 : _c.appendChild(this.getHeaderItem());
+      (_d = this.el.parentElement) === null || _d === void 0 ? void 0 : _d.refresh();
+    }
+  }
+  indexControl() {
+    var _a;
+    if (!this.index) {
+      (_a = Generate.findParentElement(this.el, "bcm-tab-group")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("bcm-tab-item").forEach((item, index) => {
+        if (item === this.el) {
+          item.setAttribute("index", `${index + 1}`);
+        }
+      });
+    }
+  }
+  componentDidLoad() {
+    const observer = new MutationObserver(() => {
+      this.headerMove();
+    });
+    observer.observe(this.el, { childList: true, subtree: true });
+  }
+  render() {
+    return (h(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: {
+        "tw-block": this.active,
+        "tw-hidden": !this.active,
+        "tw-opacity-50": this.disabled,
+        "tw-w-full": true,
+      } }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmTabItemHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.active = false;
+    this.disabled = false;
+    this.index = undefined;
+    this.color = "blue";
+    this.size = Bcm.Size.medium;
+  }
+  handleClick() {
+    var _a;
+    if (!this.disabled) {
+      (_a = Generate.findParentElement(this.el, "bcm-tab-group")) === null || _a === void 0 ? void 0 : _a.setActive(this.index);
+    }
+  }
+  render() {
+    const { color, size, active, disabled } = this;
+    const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: [500, 600, 700, 800]
+    });
+    return (h(Host, { onClick: () => this.handleClick(), class: classnames(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-focus:outline-none`, {
+        "tw-text-2 tw-py-1 tw-gap-2": size === Bcm.Size.small,
+        "tw-text-3 tw-py-2 tw-gap-3": size === Bcm.Size.medium,
+        "tw-text-4 tw-py-3 tw-gap-4": size === Bcm.Size.large,
+      }, disabled ? disabledClass : "tw-cursor-pointer", active
+        ? `tw-text-default-500 enabled:hover:tw-text-default-600 enabled:active:tw-text-default-700 enabled:focus-visible:tw-text-default-800`
+        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600"), style: dc }));
+  }
+  get el() { return getElement(this); }
+};
+
+const textCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-text{display:inline;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-text.hidden{display:none}.bcm-text__paragraph{margin:0;padding:0}.bcm-text__font-size-1{font-size:10px;line-height:calc(10px + 8px)}.bcm-text__font-size-2{font-size:12px;line-height:calc(12px + 8px)}.bcm-text__font-size-3{font-size:14px;line-height:calc(14px + 8px)}.bcm-text__font-size-4{font-size:16px;line-height:calc(16px + 8px)}.bcm-text__font-size-5{font-size:18px;line-height:calc(18px + 8px)}.bcm-text__font-size-6{font-size:20px;line-height:calc(20px + 8px)}.bcm-text__font-size-7{font-size:24px;line-height:calc(24px + 8px)}.bcm-text__font-size-8{font-size:32px;line-height:calc(32px + 8px)}.bcm-text__font-size-9{font-size:40px;line-height:calc(40px + 8px)}";
+
+const BcmText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hidden = false;
+    this.scale = undefined;
+    this.weight = "400";
+    this.color = "slate";
+    this.text = undefined;
+    this.fontSize = 4;
+  }
+  render() {
+    const { hidden, scale, weight, color, fontSize } = this;
+    const hostClasses = classnames('bcm-text', {
+      hidden
+    });
+    const classes = classnames('bcm-text__paragraph', `bcm-text__font-size-${fontSize}`, scale);
+    const fontWeight = +weight || 400;
+    const style = {
+      color: ColorHelper.dsColor(color),
+      fontWeight
+    };
+    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), h("p", { class: classes, style: Object.assign({}, style) }, h(SlotTemplate, { value: this.text }))));
+  }
+  get el() { return getElement(this); }
+};
+BcmText.style = textCss;
+
+const BcmTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmTooltipShow = createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = createEvent(this, "bcmTooltipHide", 7);
+    this._id = Generate.UID();
+    this.message = "";
+    this.placement = Bcm.Placement.top;
+    this.trigger = Bcm.TriggerType.click;
+    this.open = false;
+    this.color = "slate";
+    this.size = Bcm.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    this.tooltip = new Tooltip({
+      targetId: this.targetId || this._id,
+      message: this.message,
+      placement: this.placement,
+      color: this.color,
+      trigger: this.trigger,
+      size: this.size,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.tooltip.listener();
+  }
+  componentDidRender() {
+    this.tooltip.message = this.message;
+    this.tooltip.placement = this.placement;
+    this.tooltip.color = this.color;
+    this.tooltip.trigger = this.trigger;
+    this.tooltip.size = this.size;
+    this.tooltip.openDelay = this.openDelay;
+    this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.autoHide = this.autoHide;
+    this.tooltip.update();
+  }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
+  async show() {
+    this.tooltip.show();
+  }
+  async hide() {
+    this.tooltip.hide();
+  }
+  async toggle() {
+    this.tooltip.toggle();
+  }
+  render() {
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const BcmTypography = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: "bcm-ui-element bcm-ui-content-display" }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+export { BcmBadge as bcm_badge, BcmButton as bcm_button, BcmDropdown as bcm_dropdown, BcmIcon as bcm_icon, BcmItem as bcm_item, BcmItems as bcm_items, BcmLinked as bcm_linked, BcmMenu as bcm_menu, BcmPopover as bcm_popover, BcmTabGroup as bcm_tab_group, BcmTabItem as bcm_tab_item, BcmTabItemHeader as bcm_tab_item_header, BcmText as bcm_text, BcmTooltip as bcm_tooltip, BcmTypography as bcm_typography };