bromcom-ui 2.12.3-rc.2 → 2.12.3

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

@@ -0,0 +1,210 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-dc98a2ca.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-84d8ae28.js');
+require('./element-dragger-a8562f82.js');
+const utils = require('./utils-fc077139.js');
+const bcm = require('./bcm-1d1fcf21.js');
+require('./colors-56282b00.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-033055fc.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;
+    const dc = generate.Generate.getTwColor({
+      color: color,
+      tones: [700]
+    });
+    return (index.h(index.Host, { class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, index.h("div", { role: "tablist", "aria-label": "Tab Group", class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, index.h("div", { id: "ink-bar", class: `tw-bg-default-700 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

@@ -0,0 +1,60 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-dc98a2ca.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-84d8ae28.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-1d1fcf21.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-033055fc.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;
+    const tabId = this.el.getAttribute("tab-id");
+    const disabledClass = "tw-cursor-not-allowed tw-text-gray-500 tw-opacity-50";
+    const dc = generate.Generate.getTwColor({
+      color: color,
+      tones: [700, 800, 900]
+    });
+    return (index.h(index.Host, { role: "tab", id: `tab-${tabId}`, "aria-selected": active ? "true" : "false", "aria-controls": tabId, onClick: () => this.handleClick(), class: index$1.classnames(`tw-font-medium tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-0 tw-border-solid tw-border-b-[2px] tw-border-b-gray-300  tw-transition-font tw-focus:outline-none`, {
+        "tw-text-2 tw-pt-1 tw-pb-1 tw-gap-2": size === bcm.Bcm.Size.small,
+        "tw-text-3 tw-pt-2 tw-pb-2.5 tw-gap-2.5": size === bcm.Bcm.Size.medium,
+        "tw-text-4 tw-pt-3 tw-pb-3 tw-gap-3": size === bcm.Bcm.Size.large,
+      }, disabled ? disabledClass : "tw-cursor-pointer", active
+        ? `tw-text-default-700 enabled:hover:tw-text-default-800 enabled:active:tw-text-default-900 enabled:focus-visible:tw-text-default-900`
+        : "tw-text-gray-700"), style: dc }));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.bcm_tab_item_header = BcmTabItemHeader;

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

@@ -0,0 +1,91 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+require('./color-helper-dc98a2ca.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-84d8ae28.js');
+require('./element-dragger-a8562f82.js');
+require('./bcm-1d1fcf21.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-033055fc.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 ? "true" : "false", 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-tab.cjs.entry.js

@@ -0,0 +1,72 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const types = require('./types-3871235f.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const tabCss = "@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}:host{display:block}:host(.hidden){display:none}slot[name=icon-suffix]::slotted(bcm-icon){margin-left:10px}slot[name=icon-prefix]::slotted(bcm-icon){margin-right:10px}.tab{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:var(--bcm-tab-vertical-space) 14px var(--bcm-tab-vertical-space) 14px;color:#374151;font-size:14px;line-height:20px;font-weight:500;cursor:pointer;user-select:none}.tab:hover{color:#1f2937}.tab:active{color:#1f2937}.tab:focus-visible{color:#1f2937}.tab.active{color:#1d4ed8}.tab.active::before{content:\"\";bottom:-2px;left:0;width:100%;height:2px;background-color:#1d4ed8;position:absolute;z-index:1}.tab.active:hover{color:#1e40af}.tab.active:active{color:#1e40af}.tab.active:focus-visible{color:#1e40af}.tab:active,.tab:focus{color:var(--bcm-color-prime-blue-7)}.tab[disabled],.tab.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.tab.closable:not(.pane){padding-left:0;padding-right:0}.tab.closable .close{margin-left:34px}.tab.pane{border:1px solid transparent;border-bottom:none;border-color:var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-3);border-radius:2px 2px 0 0}.tab.pane.active{background-color:#ffffff}.badge{padding-left:8px;position:relative}.badge.blink:after{content:\"\";position:absolute;top:8px;left:9px;background:black;border-radius:50%;height:7px;width:7px;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1)}.badge.success:after{animation:pulsesuccess 2s infinite;background-color:#52C41A}.badge.error:after{animation:pulseerror 2s infinite;background-color:#F5222D}.badge.default:after{animation:pulsedefault 2s infinite;background-color:#D9D9D9}.badge.processing:after{animation:pulseprocessing 2s infinite;background-color:#4293CF}.badge.warning:after{animation:pulsewarning 2s infinite;background-color:#FA8C16}@keyframes pulsesuccess{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(82, 196, 26, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseerror{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(245, 34, 45, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsedefault{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(217, 217, 217, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseprocessing{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(66, 147, 207, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsewarning{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(250, 140, 22, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
+
+const BcmTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.click = index.createEvent(this, "bcm-click", 7);
+    this.close = index.createEvent(this, "bcm-close", 7);
+    this.type = types.TypeProps.normal;
+    this.active = false;
+    this.disabled = false;
+    this.closable = false;
+    this.tabId = (Math.random() * 4).toString(16).replace('.', '');
+    this.formControl = null;
+    this.hidden = false;
+    this.status = 'default';
+    this.badge = false;
+    this.blink = false;
+  }
+  /**
+   * @desc
+   */
+  handleClose() {
+    if (this.disabled)
+      return;
+    this.close.emit();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleClick(event) {
+    if (this.disabled)
+      return;
+    const targetElement = event.target;
+    // Detect close icon clicked
+    // #
+    if (String(targetElement.tagName).toLowerCase() == 'bcm-icon' && targetElement.classList.contains('close')) {
+      this.close.emit(event);
+    }
+    else {
+      this.click.emit(event);
+    }
+  }
+  render() {
+    const { active, disabled, closable } = this;
+    const classes = index$1.classnames('tab', [this.type], {
+      'active': active,
+      'disabled': disabled,
+      'closable': closable
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    const badgeClasses = index$1.classnames('badge');
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes, onClick: (event) => this.handleClick(event) }, index.h("slot", { name: "icon-prefix" }), index.h("slot", null), index.h("slot", { name: "icon-suffix" }), this.closable && (index.h("bcm-icon", { class: "close", icon: "far fa-times" })), this.badge && (index.h("bcm-badge", { blink: true, class: badgeClasses, size: "small", status: this.status })))));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmTab.style = tabCss;
+
+exports.bcm_tab = BcmTab;

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

@@ -10,10 +10,10 @@ const index = require('./index-c591ecec.js');
 const watermark = require('./watermark-2c23c8f1.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-beac9c8d.js');
-require('./number-helper-46c7892f.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
 const stringHelper = require('./string-helper-9cdfb273.js');
-require('./validators-27568118.js');
+require('./validators-84d8ae28.js');
 require('./element-dragger-a8562f82.js');
 require('./bcm-1d1fcf21.js');
 const index$1 = require('./index-95ae50d0.js');
@@ -23,7 +23,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-e6628eb2.js');
+require('./package-033055fc.js');
 
 // DO NOT UPDATE MANUALLY: Generated from script during build time
 var VERSION$4 = '29.0.0';