bromcom-ui 2.8.0-rc.10-h → 2.8.0-rc.10

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 { Host, h } 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": true
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmTabItem.prototype, "el", void 0);