bromcom-ui 2.9.0-rc.8 → 2.9.0

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

@@ -1,1739 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-ddfd6d8f.js');
-const colorHelper = require('./color-helper-7ab15732.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-cae9c0fb.js');
-require('./number-helper-101d8aa8.js');
-const stringHelper = require('./string-helper-d681e5c7.js');
-require('./validators-26badb68.js');
-require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-ab921827.js');
-const index = require('./index-b08b037a.js');
-const index$3 = require('./index-fdbf5226.js');
-const index$2 = require('./index-4506fcd7.js');
-const slotTemplate = require('./slot-template-d70ea082.js');
-const isLoadDecorator = require('./is-load-decorator-137dded1.js');
-const jsonParseDecarator = require('./json-parse-decarator-34a3d26e.js');
-const utils = require('./utils-fc077139.js');
-const floatingUi = require('./floating-ui-c9fc2202.js');
-require('./colors-56282b00.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./package-ed8b3296.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.Bcm.Size.small:
-          return "tw-text-1";
-        case bcm.Bcm.Size.medium:
-          return "tw-text-2";
-        case bcm.Bcm.Size.large:
-          return "tw-text-3";
-        default:
-          return "tw-text-2";
-      }
-    };
-    this.init = () => {
-      const { tone, colorName } = colorHelper.ColorHelper.parseColor(this.color, 700);
-      const dc = generate.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.ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
-      this.el = generate.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.ColorHelper.generateStyleString(style),
-        "innerHTML": stringHelper.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.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 utils.delay(this.openDelay);
-        this.calculatePosition();
-        this.emitShow();
-      }
-      else {
-        this.hide();
-      }
-    };
-    this.hide = async () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        await utils.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.ColorHelper.parseColor(this.color, 700);
-      const dc = generate.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.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.StringHelper.trim(this.message)}</div>` : ""}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${stringHelper.StringHelper.trim(this.content)}</div>` : ""}
-        </div>`;
-      this.el = generate.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.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.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 utils.delay(this.openDelay);
-        this.calculatePosition();
-        this.emitShow();
-      }
-      else {
-        this.hide();
-      }
-    };
-    this.hide = async () => {
-      this.el = document.getElementById(this.id);
-      if (this.el) {
-        await utils.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 = index.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) {
-    index$1.registerInstance(this, hostRef);
-    this.statusColors = {
-      info: "blue",
-      error: "red",
-      warning: "amber",
-      success: "emerald",
-    };
-    this._id = generate.Generate.UID();
-    this.blink = false;
-    this.value = undefined;
-    this.color = undefined;
-    this.size = bcm.Bcm.Size.medium;
-    this.status = undefined;
-  }
-  render() {
-    const { blink, value, size, color, status } = this;
-    const _color = this.statusColors[status] || color;
-    const { tone, colorName } = colorHelper.ColorHelper.parseColor(_color);
-    const dc = generate.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.ColorHelper.reverseColor(dc["--bcm-badge-bg"]) }));
-    return (index$1.h(index$1.Host, { class: "bcm-badge tw-inline-flex tw-items-center tw-justify-center", role: "status", "aria-live": "polite" }, index$1.h("div", { class: badgeStyle({ size, blink }), style: style }, index$1.h("span", { class: "bcm-badge__dot-text", role: "presentation", "aria-hidden": "true" }, index$1.h("slot", null, value)), index$1.h("span", { class: "tw-sr-only" }, value))));
-  }
-  get el() { return index$1.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 } = index$2.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.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) => generate.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.Bcm$1.HtmlElementType.a : bcm.Bcm$1.HtmlElementType.button;
-  return (index$1.h(ButtonTagType, Object.assign({ id: id }, (type == bcm.Bcm$1.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
-    index$1.h("span", { hidden: true },
-      index$1.h("slot", null)),
-    loading && index$1.h("span", { class: "bcm-button__container-loading" },
-      " ",
-      index$1.h("span", { class: "bcm-button__container-icon" },
-        index$1.h("i", { class: "far fa-spinner-third fa-spin" }),
-        " ")),
-    icon && index$1.h("span", { class: `${iconPosition} bcm-button__container-icon` },
-      index$1.h("i", { class: `${icon}` })),
-    !isIconOnly && (index$1.h(slotTemplate.SlotTemplate, { className: "bcm-button__container-text", value: value })),
-    index$1.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) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
-    this._id = generate.Generate.UID();
-    this.hidden = false;
-    this.type = bcm.Bcm$1.ButtonType.button;
-    this.size = bcm.Bcm$1.Size.medium;
-    this.disabled = false;
-    this.kind = bcm.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.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.ColorHelper.dsColor('white'),
-        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor('white'),
-        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor('white'),
-        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor('white'),
-        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('slate-400')
-      };
-    }
-    else if (kind == 'link') {
-      return {
-        [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
-        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-disabled`]: colorHelper.ColorHelper.dsColor('transparent')
-      };
-    }
-    else if (kind == 'ghost') {
-      return {
-        [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-100'),
-        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-200'),
-        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor(color + '-50'),
-        [`${prefix}-border-default`]: colorHelper.ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-border-hover`]: colorHelper.ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-border-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-active`]: colorHelper.ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-disabled`]: colorHelper.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 = index$3.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 = index$3.classnames(`${classPrefix}`, {
-      hidden,
-      'full-width': fullWidth,
-    });
-    return (index$1.h(index$1.Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, index$1.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 index$1.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) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
-    this.bcmDropdownChange = index$1.createEvent(this, "bcm-dropdown-change", 7);
-    this.isOpen = undefined;
-    this._id = generate.Generate.UID();
-    this.menuId = generate.Generate.UID();
-    this.hidden = false;
-    this.type = 'dropdown';
-    this.size = bcm.Bcm$1.Size.medium;
-    this.disabled = false;
-    this.kind = bcm.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.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 = index$3.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 = index$3.classnames('bcm-dropdown__icon', {
-      'bcm-dropdown__icon--open': isOpen,
-    });
-    const dropdownIcon = (index$1.h("span", { class: iconClasses }, index$1.h("bcm-icon", { icon: this.dropdownIcon })));
-    return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("span", { hidden: true }, index$1.h("slot", null)), this.noStyle && index$1.h("slot", null), !this.noStyle && (index$1.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 })), index$1.h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (index$1.h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), index$1.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 && index$1.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 }), index$1.h("slot", { name: "content" }))));
-  }
-  get el() { return index$1.getElement(this); }
-  static get watchers() { return {
-    "data": ["dataChanged"]
-  }; }
-};
-__decorate$1([
-  isLoadDecorator.IsLoad()
-], BcmDropdown.prototype, "el", void 0);
-__decorate$1([
-  jsonParseDecarator.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) {
-    index$1.registerInstance(this, hostRef);
-    this.hidden = false;
-    this.icon = undefined;
-  }
-  getIcon() {
-    const { icon } = this;
-    if (icon in customIconList) {
-      const _icon = index$1.getAssetPath("./static/" + customIconList[icon]);
-      return (index$1.h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, index$1.h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
-    }
-    return index$1.h("i", { class: `${icon}` });
-  }
-  render() {
-    const { /*icon,*/ hidden } = this;
-    return index$1.h(index$1.Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
-  }
-  static get assetsDirs() { return ["static"]; }
-  get el() { return index$1.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) {
-    index$1.registerInstance(this, hostRef);
-    this._id = generate.Generate.UID();
-    this.size = bcm.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.ColorHelper.dsColor('slate-600'),
-        [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor('slate-600'),
-        [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor('slate-600'),
-        [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor('slate-600'),
-        [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(this.static ? 'white' : 'white'),
-        [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(this.static ? 'white' : 'slate-100'),
-        [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(this.static ? 'white' : 'slate-200'),
-        [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(this.static ? 'white' : 'slate-300'),
-        [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
-      };
-    }
-    return {
-      [`${prefix}-color-default`]: colorHelper.ColorHelper.dsColor('white'),
-      [`${prefix}-color-hover`]: colorHelper.ColorHelper.dsColor('white'),
-      [`${prefix}-color-focus-visible`]: colorHelper.ColorHelper.dsColor('white'),
-      [`${prefix}-color-active`]: colorHelper.ColorHelper.dsColor('white'),
-      [`${prefix}-color-disabled`]: colorHelper.ColorHelper.dsColor('white'),
-      [`${prefix}-background-color-default`]: colorHelper.ColorHelper.dsColor(color + '-500'),
-      [`${prefix}-background-color-hover`]: colorHelper.ColorHelper.dsColor(color + '-600'),
-      [`${prefix}-background-color-focus-visible`]: colorHelper.ColorHelper.dsColor(color + '-700'),
-      [`${prefix}-background-color-active`]: colorHelper.ColorHelper.dsColor(color + '-800'),
-      [`${prefix}-background-color-disabled`]: colorHelper.ColorHelper.dsColor('slate-400'),
-    };
-  }
-  disconnectedCallback() {
-    //   this.el.remove()
-  }
-  render() {
-    const hostClasses = index$3.classnames('bcm-item', `bcm-item-size-${this.size}`);
-    return (index$1.h(index$1.Host, { class: hostClasses, style: this.setColor() }, index$1.h("slot", null)));
-  }
-  get el() { return index$1.getElement(this); }
-};
-BcmItem.style = itemCss;
-
-const BcmItems = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmItems = index$1.createEvent(this, "bcm-items", 7);
-    this._id = generate.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.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.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 generate.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 index$1.h("slot", null);
-  }
-  get el() { return index$1.getElement(this); }
-};
-
-const BcmLinked = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmOpen = index$1.createEvent(this, "bcm-open", 7);
-    this._id = generate.Generate.UID();
-    this.placement = bcm.Bcm.Placement["bottom-start"];
-    this.trigger = bcm.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.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.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.Bcm.TriggerType.hover && this.listenMouseOver();
-    if (target) {
-      target.setAttribute("is-linked", this.el.id);
-      if (!generate.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.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 utils.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 utils.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.Bcm.TriggerType.hover)
-      return;
-    const isTarget = generate.Generate.findEventPath(e, this.target());
-    const isSelf = generate.Generate.findEventPath(e, this.el);
-    const isLinked = generate.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 (index$1.h(index$1.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" }) }, index$1.h("slot", null)));
-  }
-  get el() { return index$1.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) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
-    this.bcmExpanded = index$1.createEvent(this, "bcm-expanded", 7);
-    this.bcmMenuChange = index$1.createEvent(this, "bcm-menu-change", 7);
-    this._id = generate.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;
-      index$1.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 = index$3.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.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 (index$1.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: index$3.classnames('bcm-menu__item', {
-          'bcm-menu__item--is-sub': subItems && item.isOpen,
-          'hidden tw-hidden': item.hidden,
-        }) }, index$1.h("span", { class: index$3.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 && (index$1.h("span", { class: "bcm-menu__item-link-icon" }, index$1.h("i", { class: item.icon || 'far fa-angle-left' }))), index$1.h("span", { class: index$3.classnames('bcm-menu__item-link-text', {
-          'bcm-menu__item-link-text--collapse': collapse,
-        }), innerHTML: item.text }), subItems && (index$1.h("div", { class: index$3.classnames('bcm-menu__item-link-toggle', {
-          'bcm-menu__item-link-toggle--collapse': item.isOpen,
-        }) }, index$1.h("i", { class: "fas fa-chevron-down" })))), subItems && (index$1.h("div", { class: index$3.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 (index$1.h(index$1.Host, { class: hostClasses, disabled: this.disabled }, index$1.h("div", { class: "bcm-menu__container", style: { gap: this.gap } }, index$1.h("slot", null), (data === null || data === void 0 ? void 0 : data.length) > 0 && data.map((item, index) => MenuLinkTemplate(item, index)), collapsible && (index$1.h("div", { class: index$3.classnames('bcm-menu__collapse-button', {
-        'bcm-menu__collapse-button--collapsed': collapse,
-      }), onClick: () => {
-        this.collapse = !collapse;
-        collapsible && this.bcmExpanded.emit(collapse);
-      } }, index$1.h("i", { class: "far fa-angle-left" }))))));
-  }
-  get el() { return index$1.getElement(this); }
-};
-__decorate([
-  isLoadDecorator.IsLoad()
-], BcmMenu.prototype, "el", void 0);
-BcmMenu.style = menuCss;
-
-const BcmPopover = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmPopoverShow = index$1.createEvent(this, "bcmPopoverShow", 7);
-    this.bcmPopoverHide = index$1.createEvent(this, "bcmPopoverHide", 7);
-    this._id = generate.Generate.UID();
-    this.message = "";
-    this.content = "";
-    this.placement = bcm.Bcm.Placement.top;
-    this.trigger = bcm.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 (index$1.h(index$1.Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, index$1.h("slot", null)));
-  }
-  get el() { return index$1.getElement(this); }
-};
-
-const BcmTabGroup = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.tabChange = index$1.createEvent(this, "bcm-tab-change", 7);
-    this._id = generate.Generate.UID();
-    this.active = "1";
-    this.color = "blue";
-    this.size = bcm.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 utils.delay(100);
-    index$1.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.Generate.getTwColor({
-      color: color,
-      tones: [500]
-    });
-    return (index$1.h(index$1.Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, index$1.h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, index$1.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` })), index$1.h("slot", null)));
-  }
-  get el() { return index$1.getElement(this); }
-  static get watchers() { return {
-    "active": ["activeChanged"]
-  }; }
-};
-
-const BcmTabItem = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this._id = generate.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.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.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 (index$1.h(index$1.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,
-      } }, index$1.h("slot", null)));
-  }
-  get el() { return index$1.getElement(this); }
-};
-
-const BcmTabItemHeader = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this._id = generate.Generate.UID();
-    this.active = false;
-    this.disabled = false;
-    this.index = undefined;
-    this.color = "blue";
-    this.size = bcm.Bcm.Size.medium;
-  }
-  handleClick() {
-    var _a;
-    if (!this.disabled) {
-      (_a = generate.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.Generate.getTwColor({
-      color: color,
-      tones: [500, 600, 700, 800]
-    });
-    return (index$1.h(index$1.Host, { onClick: () => this.handleClick(), class: index$3.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.Bcm.Size.small,
-        "tw-text-3 tw-py-2 tw-gap-3": size === bcm.Bcm.Size.medium,
-        "tw-text-4 tw-py-3 tw-gap-4": size === bcm.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 index$1.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) {
-    index$1.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 = index$3.classnames('bcm-text', {
-      hidden
-    });
-    const classes = index$3.classnames('bcm-text__paragraph', `bcm-text__font-size-${fontSize}`, scale);
-    const fontWeight = +weight || 400;
-    const style = {
-      color: colorHelper.ColorHelper.dsColor(color),
-      fontWeight
-    };
-    return (index$1.h(index$1.Host, { class: hostClasses }, index$1.h("span", { hidden: true }, index$1.h("slot", null)), index$1.h("p", { class: classes, style: Object.assign({}, style) }, index$1.h(slotTemplate.SlotTemplate, { value: this.text }))));
-  }
-  get el() { return index$1.getElement(this); }
-};
-BcmText.style = textCss;
-
-const BcmTooltip = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmTooltipShow = index$1.createEvent(this, "bcmTooltipShow", 7);
-    this.bcmTooltipHide = index$1.createEvent(this, "bcmTooltipHide", 7);
-    this._id = generate.Generate.UID();
-    this.message = "";
-    this.placement = bcm.Bcm.Placement.top;
-    this.trigger = bcm.Bcm.TriggerType.click;
-    this.open = false;
-    this.color = "slate";
-    this.size = bcm.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 (index$1.h(index$1.Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, index$1.h("slot", null)));
-  }
-  get el() { return index$1.getElement(this); }
-};
-
-const BcmTypography = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index$1.h(index$1.Host, { class: "bcm-ui-element bcm-ui-content-display" }, index$1.h("slot", null)));
-  }
-  get el() { return index$1.getElement(this); }
-};
-
-exports.bcm_badge = BcmBadge;
-exports.bcm_button = BcmButton;
-exports.bcm_dropdown = BcmDropdown;
-exports.bcm_icon = BcmIcon;
-exports.bcm_item = BcmItem;
-exports.bcm_items = BcmItems;
-exports.bcm_linked = BcmLinked;
-exports.bcm_menu = BcmMenu;
-exports.bcm_popover = BcmPopover;
-exports.bcm_tab_group = BcmTabGroup;
-exports.bcm_tab_item = BcmTabItem;
-exports.bcm_tab_item_header = BcmTabItemHeader;
-exports.bcm_text = BcmText;
-exports.bcm_tooltip = BcmTooltip;
-exports.bcm_typography = BcmTypography;