bromcom-ui 2.7.38-rc.9 → 2.8.0-rc.1

package/dist/components/bcm-select.js

@@ -1207,7 +1207,7 @@ const BcmSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       'overflow': 'hidden',
       'display': 'block'
     };
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e) }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
   }

package/dist/components/bcm-stepper.js

@@ -3,13 +3,19 @@
  * Copyright (c) Bromcom.
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
+import { c as classnames } from './index2.js';
+import './color-helper.js';
+import './validators.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { g as getChildElements, d as delay } from './utils.js';
+import { a as Bcm } from './bcm.js';
 import { I as IsLoad } from './is-load-decorator.js';
-import { B as Bcm } from './bcm.js';
-import { g as getChildElements } from './utils.js';
+import './types.js';
+import './types2.js';
 import { s as stepperStates, d as defineCustomElement$2 } from './step.js';
-import { d as defineCustomElement$3 } from './icon.js';
 
 const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
   const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
@@ -89,14 +95,14 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.setSteps(this.getItems());
   }
   setSteps(steps) {
-    const slots = getChildElements(this.el, 'bcm-step');
+    const slots = getChildElements(this.el, "bcm-step");
     if (slots.length > 0) {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          Generate.setAttributes(item, Object.assign({ title: "", _title: step.title || step._title || "", status: step.status || "default", disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || "" }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
-            item.removeAttribute('hidden');
+            item.removeAttribute("hidden");
           }
         }
       });
@@ -112,7 +118,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return stepperStates.getActiveIndex(this.stepperId);
   }
   getSlotElements() {
-    return snq(() => getChildElements(this.el, 'bcm-step'), []);
+    return snq(() => getChildElements(this.el, "bcm-step"), []);
   }
   async onStepChange(index) {
     if (index) {
@@ -143,36 +149,53 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const step = await this.getCurrentStep();
     const lastStep = this.getItems()[this.getItems().length - 1];
     if (step.valid) {
-      this.linear && lastStep.id != step.id && (step.status = 'success');
+      this.linear && lastStep.id != step.id && (step.status = "success");
       if (index < this.getItems().length) {
         await this.onStepChange(index + 1);
       }
     }
     else {
-      step.status = 'error';
+      step.status = "error";
     }
     forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
-  async setActive(index) {
+  async setActive(index, force = false) {
     if (!index)
       return;
-    if (this.linear) {
-      const prevStepIsValid = this.getItems()
-        .filter(item => item.index < index)
-        .map(item => ({
-        id: item.id,
-        status: item.status,
-        disabled: item.disabled,
-      }))
-        .every(item => !item.disabled && (item.status === 'success' || item.status === 'default'));
-      if (prevStepIsValid) {
-        await this.next(index - 1);
+    if (force) {
+      if (this.getActiveIndex() < index) {
+        while (this.getActiveIndex() < index) {
+          await this.next();
+          await delay(100);
+        }
+      }
+      else {
+        while (this.getActiveIndex() > index) {
+          await this.prev();
+          await delay(100);
+        }
       }
     }
     else {
-      stepperStates.setActiveIndex(this.stepperId, index);
-      await this.next(index - 1);
+      if (this.linear) {
+        const prevStepIsValid = this.getItems()
+          .filter(item => item.index < index)
+          .map(item => ({
+          id: item.id,
+          status: item.status,
+          disabled: item.disabled,
+        }))
+          .every(item => !item.disabled && (item.status === "success" || item.status === "default"));
+        console.log("prevStepIsValid", prevStepIsValid);
+        if (prevStepIsValid) {
+          await this.next(index - 1);
+        }
+      }
+      else {
+        stepperStates.setActiveIndex(this.stepperId, index);
+        await this.next(index - 1);
+      }
     }
   }
   async reset() {
@@ -192,11 +215,11 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = classnames('bcm-stepper', 'bcm-stepper__direction-' + direction, 'bcm-stepper__size-' + size, {
-      'bcm-stepper__linear': linear,
+    const hostClasses = classnames("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
+      "bcm-stepper__linear": linear,
       hidden,
     });
-    const lineClasses = item => classnames('bcm-stepper__header-line', `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? 'disabled' : (item === null || item === void 0 ? void 0 : item.status) === 'error' ? 'default' : item === null || item === void 0 ? void 0 : item.status}`);
+    const lineClasses = item => classnames("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
       h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.onStepChange(step) })),
@@ -233,18 +256,13 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-stepper", "bcm-icon", "bcm-step"];
+  const components = ["bcm-stepper", "bcm-step"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-stepper":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmStepper$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
     case "bcm-step":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/components/bcm-switch.js

@@ -136,7 +136,7 @@ const BcmSwitch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const bcmSwitchContainer = classnames('bcm-switch__container', `bcm-switch__container--${this.labelPosition}`);
     const switchText = (text) => (size != Bcm.Size.small && (activeText || inactiveText)) && (h("span", { class: text + '-text' }, text == 'active' ? activeText : inactiveText));
     const switchIcon = (text) => (size != Bcm.Size.small && (activeIcon || inactiveIcon)) && h("bcm-icon", { icon: text == 'active' ? activeIcon : inactiveIcon, class: ' icon-' + text });
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }
   static get style() { return switchCss; }

package/dist/components/bcm-tab-group.js

@@ -4,9 +4,14 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.js';
-import { G as Generate, s as snq } from './generate.js';
-import { c as classnames } from './index2.js';
-import { B as Bcm } from './bcm.js';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { d as delay } from './utils.js';
+import { a as Bcm } from './bcm.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -22,150 +27,131 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    this.tabChange = createEvent(this, "tabChange", 7);
-    this.headerItems = [];
+    this.tabChange = createEvent(this, "bcm-tab-change", 7);
     this._id = Generate.UID();
     this.active = "1";
     this.color = "blue";
     this.size = Bcm.Size.medium;
   }
+  get tabItems() {
+    return this.el.querySelectorAll("bcm-tab-item");
+  }
+  get tabItemHeaders() {
+    return this.el.querySelectorAll("bcm-tab-item-header");
+  }
   connectedCallback() {
     var _a;
-    if ((_a = this.tabItems()) === null || _a === void 0 ? void 0 : _a.length) {
-      this.headerItems = [];
-      this.tabItems().forEach((tab, index) => {
+    if ((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.length) {
+      this.tabItems.forEach((tab, index) => {
         let itemActive = tab.hasAttribute("active") ? true : false;
         let itemDisabled = tab.hasAttribute("disabled") ? true : false;
         let itemIndex = index + 1;
         tab.setAttribute("index", `${itemIndex}`);
-        tab.classList.add("tw-w-full");
-        let header = {
-          slot: "header",
-          content: "",
-          active: itemActive,
-          disabled: itemDisabled,
-          index: itemIndex,
-        };
-        const headerItemHeader = tab.querySelector("bcm-tab-item-header");
-        if (headerItemHeader) {
-          header.content = headerItemHeader.innerHTML;
-          headerItemHeader.classList.add("tw-hidden");
-        }
-        else {
-          header.content = tab.getAttribute("label") || `Tab ${itemIndex}`;
-        }
+        tab.setAttribute("size", this.size);
+        tab.setAttribute("color", this.color);
+        tab.removeAttribute("active");
+        tab.removeAttribute("disabled");
         if (itemActive) {
           tab.setAttribute("active", "");
-          tab.classList.add("tw-block");
-          tab.classList.remove("tw-hidden");
           this.active = itemIndex.toString();
         }
-        else {
-          tab.removeAttribute("active");
-          tab.classList.remove("tw-block");
-          tab.classList.add("tw-hidden");
+        if (itemDisabled) {
+          tab.setAttribute("disabled", "");
         }
-        this.headerItems.push(header);
       });
-      const isHasActiveTab = this.headerItems.some(tab => tab.active);
+      const isHasActiveTab = Array.from(this.tabItems).some(tab => tab.hasAttribute("active"));
       if (!isHasActiveTab) {
-        this.headerItems[0].active = true;
-        this.tabItems()[0].setAttribute("active", "");
-        this.tabItems()[0].classList.add("tw-block");
-        this.tabItems()[0].classList.remove("tw-hidden");
+        this.tabItems[0].setAttribute("active", "");
       }
     }
   }
-  tabItems() {
-    return snq(() => this.el.querySelectorAll("bcm-tab-item"), []);
-  }
   handleTabClick(index) {
-    this.headerItems.forEach(tab => {
-      tab.active && (tab.active = false);
-    });
-    this.headerItems[index - 1].active = true;
-    this.active = index.toString();
-    const tabItems = this.el.querySelectorAll("bcm-tab-item");
-    if (tabItems) {
-      tabItems.forEach(tab => {
-        const tabIndex = tab.getAttribute("index");
-        if (tabIndex == this.active) {
+    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", "");
-          tab.classList.add("tw-block");
-          tab.classList.remove("tw-hidden");
         }
-        else {
-          tab.removeAttribute("active");
-          tab.classList.remove("tw-block");
-          tab.classList.add("tw-hidden");
+      });
+    }
+    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.inkBarControl();
-    forceUpdate(this);
     this.tabChange.emit(this.active);
   }
+  componentDidRender() {
+    this.inkBarControl();
+    this.handleTabClick();
+  }
   componentDidLoad() {
     this.inkBarControl();
   }
   async setActive(index) {
-    if (index > 0 && index <= this.headerItems.length && index != +this.active && !this.headerItems[index - 1].disabled) {
+    if (index > 0 && index <= this.tabItems.length && index != +this.active) {
       this.handleTabClick(index);
     }
   }
+  async refresh() {
+    await delay(100);
+    forceUpdate(this);
+  }
   inkBarControl() {
+    var _a;
     const inkBar = this.el.querySelector("#ink-bar");
-    if (inkBar) {
-      const tabHeaderItems = this.el.querySelectorAll("bcm-tab-item-header");
-      if (tabHeaderItems) {
-        tabHeaderItems.forEach((tab) => {
-          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)`;
-          }
-        });
+    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)`;
       }
     }
   }
-  render() {
-    const { color, size } = this;
-    let fontSize, padding, gap;
-    switch (size) {
-      case Bcm.Size.small:
-        fontSize = "2";
-        padding = "1";
-        gap = "2";
-        break;
-      case Bcm.Size.medium:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-      case Bcm.Size.large:
-        fontSize = "4";
-        padding = "3";
-        gap = "4";
-        break;
-      default:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
+  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";
     }
-    const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
-    return (h(Host, { class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between tw-mb-${padding} tw-relative` }, this.headerItems.map(item => (h("bcm-tab-item-header", { tabIndex: "1", class: 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-all tw-gap-${gap} tw-focus:outline-none`, item.disabled ? disabledClass : "tw-cursor-pointer", item.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"), active: item.active, disabled: item.disabled, index: item.index, innerHTML: item.content, onClick: () => !item.disabled && this.handleTabClick(item.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` })), h("slot", null)));
+  }
+  render() {
+    const { color } = this;
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header" }, 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` })), h("slot", null)));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "active": ["activeChanged"]
+  }; }
 }, [4, "bcm-tab-group", {
     "_id": [513, "id"],
     "active": [1537],
     "color": [1],
     "size": [1],
-    "setActive": [64]
+    "setActive": [64],
+    "refresh": [64]
   }]);
 __decorate([
   IsLoad()

package/dist/components/bcm-tab-item-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmTabItemHeader extends Components.BcmTabItemHeader, HTMLElement {}
+export const BcmTabItemHeader: {
+  prototype: BcmTabItemHeader;
+  new (): BcmTabItemHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-tab-item-header.js

@@ -0,0 +1,102 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { a as Bcm } from './bcm.js';
+import { c as classnames } from './index2.js';
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmTabItemHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.active = false;
+    this.disabled = false;
+    this.index = undefined;
+    this.color = "blue";
+    this.size = Bcm.Size.medium;
+  }
+  handleClick() {
+    var _a;
+    if (!this.disabled) {
+      (_a = Generate.findParentElement(this.el, "bcm-tab-group")) === null || _a === void 0 ? void 0 : _a.setActive(this.index);
+    }
+  }
+  render() {
+    const { color, size, active, disabled } = this;
+    let fontSize, padding, gap;
+    switch (size) {
+      case Bcm.Size.small:
+        fontSize = "2";
+        padding = "1";
+        gap = "2";
+        break;
+      case Bcm.Size.medium:
+        fontSize = "3";
+        padding = "2";
+        gap = "3";
+        break;
+      case 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 (h(Host, { onClick: () => this.handleClick(), class: 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 this; }
+}, [0, "bcm-tab-item-header", {
+    "_id": [1537, "id"],
+    "active": [1540],
+    "disabled": [4],
+    "index": [8],
+    "color": [1],
+    "size": [1]
+  }]);
+__decorate([
+  IsLoad()
+], BcmTabItemHeader$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-tab-item-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-tab-item-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmTabItemHeader$1);
+      }
+      break;
+  } });
+}
+
+const BcmTabItemHeader = BcmTabItemHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmTabItemHeader, defineCustomElement };

package/dist/components/bcm-tab-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmTabItem extends Components.BcmTabItem, HTMLElement {}
+export const BcmTabItem: {
+  prototype: BcmTabItem;
+  new (): BcmTabItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;