bromcom-ui 2.7.38-rc.10 → 2.7.38-rc.11

package/dist/collection/components/molecules/tab-group/tab-item.js

@@ -0,0 +1,161 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+var __decorate = (this && this.__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;
+};
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { h, Host } from "@stencil/core";
+export class BcmTabItem {
+  constructor() {
+    this._id = Generate.UID();
+    this.active = false;
+    this.disabled = false;
+    this.index = undefined;
+  }
+  componentWillLoad() {
+    this.indexControl();
+  }
+  componentDidRender() {
+    this.headerMove();
+  }
+  getHeaderItem() {
+    const headerItem = this.el.querySelector("bcm-tab-item-header");
+    if (headerItem) {
+      headerItem.setAttribute("index", `${this.index}`);
+      headerItem.setAttribute("active", `${this.active}`);
+      headerItem.setAttribute("disabled", `${this.disabled}`);
+      headerItem.setAttribute("tab-id", `${this._id}`);
+      headerItem.style.order = `${this.index}`;
+    }
+    return headerItem;
+  }
+  getParentTabGroup() {
+    return Generate.findParentElement(this.el, "bcm-tab-group");
+  }
+  getFindHeaderItem() {
+    var _a, _b;
+    return (_b = (_a = this.getParentTabGroup()) === null || _a === void 0 ? void 0 : _a.querySelector("#tab-header")) === null || _b === void 0 ? void 0 : _b.querySelector(`bcm-tab-item-header[tab-id="${this._id}"]`);
+  }
+  headerMove() {
+    var _a, _b, _c, _d;
+    if (this.getHeaderItem()) {
+      (_a = this.getFindHeaderItem()) === null || _a === void 0 ? void 0 : _a.remove();
+      (_c = (_b = this.getParentTabGroup()) === null || _b === void 0 ? void 0 : _b.querySelector("#tab-header")) === null || _c === void 0 ? void 0 : _c.appendChild(this.getHeaderItem());
+      (_d = this.el.parentElement) === null || _d === void 0 ? void 0 : _d.refresh();
+    }
+  }
+  indexControl() {
+    var _a;
+    if (!this.index) {
+      (_a = Generate.findParentElement(this.el, "bcm-tab-group")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("bcm-tab-item").forEach((item, index) => {
+        if (item === this.el) {
+          item.setAttribute("index", `${index + 1}`);
+        }
+      });
+    }
+  }
+  componentDidLoad() {
+    const observer = new MutationObserver(() => {
+      this.headerMove();
+    });
+    observer.observe(this.el, { childList: true, subtree: true });
+  }
+  render() {
+    return (h(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: {
+        "tw-block": this.active,
+        "tw-hidden": !this.active,
+        "tw-opacity-50": this.disabled,
+        "tw-w-full": true,
+      } }, h("slot", null)));
+  }
+  static get is() { return "bcm-tab-item"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "index": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "index",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmTabItem.prototype, "el", void 0);

package/dist/collection/helper/generate.js

@@ -2,44 +2,44 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { StatusProps } from '../components/molecules/alert/types';
+import { StatusProps } from "../components/molecules/alert/types";
 // @ts-ignore
-import { version } from '../../package.json';
-import { Build } from '@stencil/core';
-import snq from 'snq';
-const allowedDomains = ['localhost', 'beta-regression.bromcomcloud.com', 'beta-scrum.bromcomcloud.com', 'beta-kanban.bromcomcloud.com'];
+import { version } from "../../package.json";
+import { Build } from "@stencil/core";
+import snq from "snq";
+const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
 const isAllowedDomain = () => {
   const hostname = window.location.hostname;
   return allowedDomains.includes(hostname);
 };
 if (isAllowedDomain()) {
-  console.log(`%cbromcom ui%c version: ${version}-${Build.isDev ? 'd' : 'p'} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
+  console.log(`%cbromcom ui%c version: ${version}-${Build.isDev ? "d" : "p"} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
 }
 export class Generate {
 }
-Generate.UID = (prefix = 'bcm') => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
+Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 Generate.getIconAttrWithStatusType = (status, loading = false) => {
   if (loading)
-    return { icon: 'far fa-spinner-third fa-spin' };
+    return { icon: "far fa-spinner-third fa-spin" };
   switch (status) {
     case StatusProps.info:
-      return { icon: 'far fa-info-circle' };
+      return { icon: "far fa-info-circle" };
     case StatusProps.error:
-      return { icon: 'far fa-times-circle' };
+      return { icon: "far fa-times-circle" };
     case StatusProps.warning:
-      return { icon: 'far fa-exclamation-circle' };
+      return { icon: "far fa-exclamation-circle" };
     case StatusProps.success:
-      return { icon: 'far fa-check-circle' };
+      return { icon: "far fa-check-circle" };
   }
 };
-Generate.createComponent = (el, props, area = 'append-area') => {
+Generate.createComponent = (el, props, area = "append-area") => {
   let container = area ? document.querySelector(area) : document.body;
   if (area && !container) {
-    container = document.createElement('div');
-    container.id = 'append-area';
+    container = document.createElement("div");
+    container.id = "append-area";
     document.body.appendChild(container);
-    container.style.visibility = 'hidden';
-    container.style.opacity = '0';
+    container.style.visibility = "hidden";
+    container.style.opacity = "0";
   }
   let element = document.getElementById(props.id);
   if (!element) {
@@ -52,13 +52,13 @@ Generate.createComponent = (el, props, area = 'append-area') => {
   container.appendChild(element);
   return element;
 };
-Generate.createElement = (tag = 'div', props) => {
+Generate.createElement = (tag = "div", props) => {
   let element = document.getElementById(props.id);
   if (!element) {
     element = document.createElement(tag);
   }
   Object.keys(props).forEach(key => {
-    if (key == 'innerHTML') {
+    if (key == "innerHTML") {
       element[key] = props[key];
     }
     else {
@@ -166,3 +166,68 @@ Generate.getAncestor = (el, selector) => {
     ;
   return el;
 };
+Generate.findParentElement = (element, selector) => {
+  const firstChar = selector.charAt(0);
+  function getElementByClass(currentElement, className) {
+    while (currentElement !== null) {
+      if (currentElement.classList.contains(className)) {
+        return currentElement;
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return null;
+  }
+  function getElementById(currentElement, id) {
+    while (currentElement !== null) {
+      if (currentElement.id === id) {
+        return currentElement;
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return null;
+  }
+  function getElementByAttribute(currentElement, attr, value) {
+    while (currentElement !== null) {
+      if (currentElement.hasAttribute(attr) && (value === undefined || currentElement.getAttribute(attr) === value)) {
+        return currentElement;
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return null;
+  }
+  function getElementByTag(currentElement, tag) {
+    while (currentElement !== null) {
+      if (currentElement.tagName.toLowerCase() === tag.toLowerCase()) {
+        return currentElement;
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return null;
+  }
+  if (selector === "*") {
+    // Tüm elementleri seç
+    return element.parentElement;
+  }
+  else if (firstChar === ".") {
+    // Sınıf adı seçicisi
+    const className = selector.slice(1);
+    return getElementByClass(element.parentElement, className);
+  }
+  else if (firstChar === "#") {
+    // ID seçicisi
+    const id = selector.slice(1);
+    return getElementById(element.parentElement, id);
+  }
+  else if (firstChar === "[") {
+    // Öznitelik seçicisi
+    const end = selector.indexOf("]");
+    const attr = selector.slice(1, end);
+    const value = selector.slice(end + 2, -1);
+    return getElementByAttribute(element.parentElement, attr, value);
+  }
+  else {
+    // Etiket adı seçicisi
+    const tag = selector.toLowerCase();
+    return getElementByTag(element.parentElement, tag);
+  }
+};

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: "0", 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 };