bromcom-ui 2.7.37-rc.1 → 2.7.37-rc.3

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

@@ -0,0 +1,280 @@
+/*!
+ * 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 { Component, Host, h, Prop, Element, forceUpdate, Method, Event } from '@stencil/core';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
+import cs from 'classnames';
+import Bcm from '../../../models/bcm';
+import snq from 'snq';
+export class BcmTabGroup {
+  constructor() {
+    this._id = Generate.UID();
+    this.active = "1";
+    this.color = "blue";
+    this.size = Bcm.Size.medium;
+    this.headerItems = [];
+  }
+  connectedCallback() {
+    var _a;
+    if ((_a = this.tabItems()) === null || _a === void 0 ? void 0 : _a.length) {
+      this.headerItems = [];
+      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}`;
+        }
+        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');
+        }
+        this.headerItems.push(header);
+      });
+      const isHasActiveTab = this.headerItems.some(tab => tab.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');
+      }
+    }
+  }
+  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) {
+          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');
+        }
+      });
+    }
+    this.inkBarControl();
+    forceUpdate(this);
+    this.tabChange.emit(this.active);
+  }
+  componentDidLoad() {
+    this.inkBarControl();
+  }
+  async setActive(index) {
+    if (index > 0 && index <= this.headerItems.length && index != +this.active && !this.headerItems[index - 1].disabled) {
+      this.handleTabClick(index);
+    }
+  }
+  inkBarControl() {
+    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)`;
+          }
+        });
+      }
+    }
+  }
+  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;
+    }
+    const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
+    return (h(Host, { class: "tw-font-sans tw-w-full tw-flex tw-flex-col tw-items-center" },
+      h("div", { class: `tw-w-full tw-flex 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: cs(`tw-text-${fontSize} tw-py-${padding} tw-transition-all tw-flex-1 tw-flex tw-items-center tw-justify-center tw-border-b-[2px]  tw-border-b-slate-300 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:active:tw-text-slate-600 enabled:focus-visible:tw-text-slate-700"), 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-h-[2px] tw-rounded-sm tw-mt-[-2px] tw-absolute tw-bottom-0 tw-left-0 tw-transition-transform` })),
+      h("slot", null)));
+  }
+  static get is() { return "bcm-tab-group"; }
+  static get properties() { return {
+    "_id": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id",
+      "reflect": true,
+      "defaultValue": "Generate.UID()"
+    },
+    "active": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "\"1\""
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"blue\""
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SizeTypes",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "SizeTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "Bcm.Size.medium"
+    }
+  }; }
+  static get events() { return [{
+      "method": "tabChange",
+      "name": "tabChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setActive": {
+      "complexType": {
+        "signature": "(index: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmTabGroup.prototype, "el", void 0);