bromcom-ui 2.8.0-rc.1 → 2.8.0-rc.10-t

package/dist/collection/components/molecules/stepper/stepper.js

@@ -12,14 +12,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         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 { forceUpdate, h, Host } from "@stencil/core";
-import snq from "snq";
-import cs from "classnames";
-import { Generate } from "@bcm/helpers";
 import { IsLoad } from "@bcm/decorator";
-import { StepperHeaderTemplate } from "@bcm/template";
-import { delay, getChildElements } from "@bcm/utils";
+import { Generate } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
+import { StepperHeaderTemplate } from "@bcm/template";
+import { getChildElements } from "@bcm/utils";
+import { Host, forceUpdate, h } from "@stencil/core";
+import cs from "classnames";
+import snq from "snq";
 import stepperStates from "../states/stepper-states";
 export class BcmStepper {
   constructor() {
@@ -113,7 +113,8 @@ export class BcmStepper {
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
-    const index = idx || this.getActiveIndex();
+    let index;
+    idx == 0 ? (index = 0) : index == 1 ? (index = 1) : (index = idx || this.getActiveIndex());
     const step = await this.getCurrentStep();
     const lastStep = this.getItems()[this.getItems().length - 1];
     if (step.valid) {
@@ -128,43 +129,32 @@ export class BcmStepper {
     forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
-  async setActive(index, force = false) {
+  async setActive(index) {
     if (!index)
       return;
-    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);
-        }
-      }
+    if (typeof index != "number") {
+      console.warn("index must be a number");
+      return;
     }
-    else {
-      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);
+    if (this.linear) {
+      const prevSteps = this.getItems().filter(item => item.index < index);
+      const prevStepIsValid = prevSteps === null || prevSteps === void 0 ? void 0 : prevSteps.map(item => ({
+        id: item.id,
+        status: item.status,
+        disabled: item.disabled,
+      })).every(item => item.status == "success" || item.status == "default");
+      if (prevStepIsValid) {
+        prevSteps === null || prevSteps === void 0 ? void 0 : prevSteps.forEach(item => {
+          item.status = "success";
+          item.disabled = false;
+        });
         await this.next(index - 1);
       }
     }
+    else {
+      stepperStates.setActiveIndex(this.stepperId, index);
+      await this.next(index - 1);
+    }
   }
   async reset() {
     await this.onStepChange(1);
@@ -452,13 +442,10 @@ export class BcmStepper {
       },
       "setActive": {
         "complexType": {
-          "signature": "(index: number, force?: boolean) => Promise<void>",
+          "signature": "(index: number) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
-            }, {
-              "tags": [],
-              "text": ""
             }],
           "references": {
             "Promise": {

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

@@ -16,7 +16,7 @@ import { IsLoad } from "@bcm/decorator";
 import { Generate } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 import { delay } from "@bcm/utils";
-import { Host, h, forceUpdate } from "@stencil/core";
+import { Host, forceUpdate, h } from "@stencil/core";
 export class BcmTabGroup {
   constructor() {
     this._id = Generate.UID();
@@ -30,32 +30,36 @@ export class BcmTabGroup {
   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.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.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 isHasActiveTab = Array.from(this.tabItems).some(tab => tab.hasAttribute("active"));
-      if (!isHasActiveTab) {
-        this.tabItems[0].setAttribute("active", "");
+  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) {
@@ -94,6 +98,7 @@ export class BcmTabGroup {
   }
   componentDidLoad() {
     this.inkBarControl();
+    this.observeTabItem();
   }
   async setActive(index) {
     if (index > 0 && index <= this.tabItems.length && index != +this.active) {
@@ -128,6 +133,57 @@ export class BcmTabGroup {
       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);
+              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;
     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)));
@@ -278,6 +334,15 @@ export class BcmTabGroup {
         "methodName": "activeChanged"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "inkBarControl",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }
 __decorate([
   IsLoad()

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

@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { IsLoad } from "@bcm/decorator";
 import { Generate } from "@bcm/helpers";
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class BcmTabItem {
   constructor() {
     this._id = Generate.UID();
@@ -150,7 +150,7 @@ export class BcmTabItem {
           "text": ""
         },
         "attribute": "index",
-        "reflect": false
+        "reflect": true
       }
     };
   }

package/dist/collection/components/molecules/textarea/textarea.js

@@ -89,7 +89,8 @@ export class BcmTextarea {
   async getValue() {
     return this.value;
   }
-  watchValue() {
+  watchValue(newValue) {
+    this.textarea.value = newValue;
     this.handleChange();
   }
   handleFocus() {

package/dist/collection/components/molecules/tooltip/tooltip.js

@@ -36,7 +36,7 @@ export class BcmTooltip {
   emitHide() {
     this.bcmTooltipHide.emit();
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.tooltip = new Tooltip({
       targetId: this.targetId || this._id,
       message: this.message,

package/dist/collection/components/other/modal-2/modal-2-footer.js

@@ -0,0 +1,54 @@
+/*!
+ * 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";
+import cs from "classnames";
+export class BcmModal2Footer {
+  constructor() {
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    return (h(Host, { class: cs("tw-flex tw-flex-row tw-items-center tw-justify-end tw-gap-2 tw-px-6 tw-pb-6 tw-pt-2") }, h("slot", null)));
+  }
+  static get is() { return "bcm-modal-2-footer"; }
+  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()"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmModal2Footer.prototype, "el", void 0);

package/dist/collection/components/other/modal-2/modal-2-header.js

@@ -0,0 +1,53 @@
+/*!
+ * 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 BcmModal2Header {
+  constructor() {
+    this._id = Generate.UID();
+    this.el.slot = "header";
+  }
+  render() {
+    return (h(Host, { class: "tw-w-full tw-flex-none tw-overflow-hidden tw-rounded-t-lg tw-bg-primary-400 tw-pt-1" }, h("div", { class: "tw-flex tw-w-full tw-items-center tw-justify-between tw-bg-primary-50 tw-px-4 tw-py-3 tw-text-4 tw-font-medium tw-text-slate-600" }, h("span", null, h("slot", null)), h("button", { type: "button", class: "tw-focus:tw-outline-none tw-flex tw-h-8 tw-w-8 tw-cursor-pointer tw-items-center tw-justify-center tw-bg-transparent tw-text-5 tw-text-slate-700 tw-transition tw-duration-150 tw-ease-in-out hover:tw-text-slate-900", "data-dismiss": true }, h("i", { class: "far fa-times" })))));
+  }
+  static get is() { return "bcm-modal-2-header"; }
+  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()"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmModal2Header.prototype, "el", void 0);