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

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

@@ -1,225 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ddfd6d8f.js');
-const colorHelper = require('./color-helper-d6d2028b.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-d246df02.js');
-require('./number-helper-26df0c91.js');
-const stringHelper = require('./string-helper-d681e5c7.js');
-require('./validators-095e7611.js');
-require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-ab921827.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');
-
-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.bgColor = () => colorHelper.ColorHelper.twColor(this.color, 700);
-    this.exepcitonColors = {
-      white: "slate-300",
-      black: "slate-700",
-    };
-    this.target = () => document.getElementById(this.targetId);
-    this.init = () => {
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${stringHelper.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-${this.bgColor()} tw-text-white tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
-            tw-shadow`,
-        "role": "popover",
-        "aria-hidden": "true",
-        "style": `color: ${colorHelper.ColorHelper.twColorReverse(this.bgColor())}`,
-        "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-${this.bgColor()}`,
-        });
-      }
-    };
-    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 BcmPopover = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bcmPopoverShow = index.createEvent(this, "bcmPopoverShow", 7);
-    this.bcmPopoverHide = index.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.h(index.Host, { "aria-describedby": "popover", class: "tw-inline-flex tw-h-fit tw-w-fit" }, index.h("slot", null)));
-  }
-  get el() { return index.getElement(this); }
-};
-
-exports.bcm_popover = BcmPopover;

package/dist/cjs/bcm-tab-group.cjs.entry.js

@@ -1,205 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ddfd6d8f.js');
-require('./color-helper-d6d2028b.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-d246df02.js');
-require('./number-helper-26df0c91.js');
-require('./string-helper-d681e5c7.js');
-require('./validators-095e7611.js');
-require('./element-dragger-a8562f82.js');
-const utils = require('./utils-fc077139.js');
-const bcm = require('./bcm-ab921827.js');
-require('./colors-56282b00.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-
-const BcmTabGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tabChange = index.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.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;
-    return (index.h(index.Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, index.h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header" }, index.h("div", { id: "ink-bar", class: `tw-bg-${color}-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), index.h("slot", null)));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "active": ["activeChanged"]
-  }; }
-};
-
-exports.bcm_tab_group = BcmTabGroup;

package/dist/cjs/bcm-tab-item-header.cjs.entry.js

@@ -1,73 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ddfd6d8f.js');
-require('./color-helper-d6d2028b.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-d246df02.js');
-require('./number-helper-26df0c91.js');
-require('./string-helper-d681e5c7.js');
-require('./validators-095e7611.js');
-require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-ab921827.js');
-const index$1 = require('./index-fdbf5226.js');
-require('./colors-56282b00.js');
-require('./utils-fc077139.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-
-const BcmTabItemHeader = class {
-  constructor(hostRef) {
-    index.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;
-    let fontSize, padding, gap;
-    switch (size) {
-      case bcm.Bcm.Size.small:
-        fontSize = "2";
-        padding = "1";
-        gap = "2";
-        break;
-      case bcm.Bcm.Size.medium:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-      case bcm.Bcm.Size.large:
-        fontSize = "4";
-        padding = "3";
-        gap = "4";
-        break;
-      default:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-    }
-    const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
-    return (index.h(index.Host, { onClick: () => this.handleClick(), class: index$1.classnames(`tw-text-${fontSize} tw-py-${padding} tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-gap-${gap} tw-focus:outline-none tw-mb-${padding}]`, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-${color}-500 enabled:hover:tw-text-${color}-600 enabled:active:tw-text-${color}-700 enabled:focus-visible:tw-text-${color}-800`
-        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600") }));
-  }
-  get el() { return index.getElement(this); }
-};
-
-exports.bcm_tab_item_header = BcmTabItemHeader;

package/dist/cjs/bcm-tab-item.cjs.entry.js

@@ -1,90 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ddfd6d8f.js');
-require('./color-helper-d6d2028b.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-d246df02.js');
-require('./number-helper-26df0c91.js');
-require('./string-helper-d681e5c7.js');
-require('./validators-095e7611.js');
-require('./element-dragger-a8562f82.js');
-require('./bcm-ab921827.js');
-require('./colors-56282b00.js');
-require('./utils-fc077139.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-
-const BcmTabItem = class {
-  constructor(hostRef) {
-    index.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.h(index.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.h("slot", null)));
-  }
-  get el() { return index.getElement(this); }
-};
-
-exports.bcm_tab_item = BcmTabItem;

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

@@ -1,49 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const colorHelper = require('./color-helper-d6d2028b.js');
-const slotTemplate = require('./slot-template-d70ea082.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-56282b00.js');
-require('./utils-fc077139.js');
-require('./colors-e1d142ad.js');
-require('./string-helper-d681e5c7.js');
-require('./bcm-ab921827.js');
-
-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.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$1.classnames('bcm-text', {
-      hidden
-    });
-    const classes = index$1.classnames('bcm-text__paragraph', `bcm-text__font-size-${fontSize}`, scale);
-    const fontWeight = +weight || 400;
-    const style = {
-      color: colorHelper.ColorHelper.dsColor(color),
-      fontWeight
-    };
-    return (index.h(index.Host, { class: hostClasses }, index.h("span", { hidden: true }, index.h("slot", null)), index.h("p", { class: classes, style: Object.assign({}, style) }, index.h(slotTemplate.SlotTemplate, { value: this.text }))));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmText.style = textCss;
-
-exports.bcm_text = BcmText;