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

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

@@ -2,100 +2,49 @@
  * 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 { h, Host } from "@stencil/core";
+import { Bcm } from "@bcm/model";
+import { Generate } from "@bcm/helpers";
 import cs from 'classnames';
-import { IsLoad } from "../../../decorators/is-load-decorator";
-import { ColorHelper } from "../../../helper/color-helper";
-import { Generate } from "../../../helper/generate";
-import Bcm from "../../../models/bcm";
-import { SlotTemplate } from "../../../templates/slot-template";
 export class BcmRadio {
   constructor() {
     this._id = Generate.UID();
     this.checked = undefined;
     this.value = undefined;
-    this.disabled = undefined;
+    this.disabled = false;
     this.size = Bcm.Size.medium;
-    this.hidden = false;
-    this.required = false;
-    this.color = "blue";
-  }
-  setColor(color = this.color) {
-    if (!color)
-      return;
-    const prefix = `--bcm-checkbox`;
-    return {
-      [`${prefix}-primary-color-default`]: ColorHelper.dsColor(color + '-500'),
-      [`${prefix}-primary-color-hover`]: ColorHelper.dsColor(color + '-600'),
-      [`${prefix}-primary-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-      [`${prefix}-primary-color-active`]: ColorHelper.dsColor(color + '-700'),
-      // [`${prefix}-primary-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-      [`${prefix}-secondary-color-default`]: ColorHelper.dsColor('white'),
-      [`${prefix}-secondary-color-hover`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-active`]: ColorHelper.dsColor('slate-50'),
-      // [`${prefix}-secondary-color-disabled`]: ColorHelper.dsColor('slate-200')
-    };
+    this.color = undefined;
   }
   render() {
-    const { checked, value, disabled, size, hidden, required } = this;
-    // const defaultClasses = cs(
-    //     'radio-container',
-    //     'size-2',
-    //     {
-    //         'checked': checked,
-    //         'disabled': disabled
-    //     }
-    // )
-    // const buttonClasses = cs(
-    //     'radio-button',
-    //     buttonStyle,
-    //     size,
-    //     {
-    //         'size-2': size === 'small' || size === 'medium',
-    //         'size-3': size === 'large',
-    //         'checked': checked,
-    //         'disabled': disabled,
-    //     }
-    // )
-    const bcmRadioHostClasses = cs('bcm-checkbox', `bcm-checkbox-size-${size}`, {
-      hidden,
-      checked,
-      disabled,
-      required
-    });
-    const bcmRadioLabelClass = cs('bcm-checkbox__label');
-    const bcmCheckboxInputClass = cs('bcm-checkbox__input');
-    return (h(Host, { class: bcmRadioHostClasses, onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit(), style: this.setColor(this.color) }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmCheckboxInputClass }, h("label", { class: bcmRadioLabelClass }, h("input", { type: "radio", value: value, checked: checked, disabled: disabled }), h("span", { class: cs("bcm-checkbox__label-icon", "bcm-radio__icon", {
-        'bcm-checkbox__label-icon-checked': checked,
-      }) }, h("span", { class: 'bcm-radio__icon-inner' })), h(SlotTemplate, { className: "slot" })))));
+    const { value, size, disabled, checked, _id, color } = this;
+    return (h(Host, { class: cs("tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1", {
+        "tw-cursor-pointer tw-text-slate-600": !disabled,
+        "tw-cursor-not-allowed tw-text-slate-400": disabled,
+        "tw-text-1": size === Bcm.Size.small,
+        "tw-text-2.5": size === Bcm.Size.medium,
+        "tw-text-4": size === Bcm.Size.large,
+      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
+        "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
+        "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
+        "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,
+      }, "focus:tw-outline-none focus:tw-shadow-outline", 
+      // default
+      `tw-border-slate-400 tw-bg-slate-50`, `checked:tw-border-default-500`, `checked:before:tw-bg-default-500`, 
+      // disabled
+      `disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-slate-400`, `disabled:checked:before:tw-bg-slate-400`, !disabled && cs(
+      // hover
+      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
+      // focus-visible 
+      `focus-visible:tw-border-default-800 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-800`, `focus-visible:checked:before:tw-bg-default-800`, 
+      // active
+      `active:tw-border-default-700`, `active:checked:tw-border-default-700`, `active:checked:before:tw-bg-default-700`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
   }
   static get is() { return "bcm-radio"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["radio.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["radio.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -105,7 +54,7 @@ export class BcmRadio {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Props *"
+          "text": ""
         },
         "attribute": "id",
         "reflect": true,
@@ -113,7 +62,7 @@ export class BcmRadio {
       },
       "checked": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -130,7 +79,7 @@ export class BcmRadio {
       },
       "value": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string | number",
           "resolved": "number | string",
@@ -147,7 +96,7 @@ export class BcmRadio {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -160,18 +109,19 @@ export class BcmRadio {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -185,48 +135,12 @@ export class BcmRadio {
         "reflect": false,
         "defaultValue": "Bcm.Size.medium"
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "color": {
-        "type": "string",
-        "mutable": true,
+        "type": "any",
+        "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -236,15 +150,14 @@ export class BcmRadio {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"blue\""
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
-        "method": "change",
-        "name": "bcm-change",
+        "method": "radioChange",
+        "name": "bcm-radio-change",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -291,6 +204,3 @@ export class BcmRadio {
   }
   static get elementRef() { return "el"; }
 }
-__decorate([
-  IsLoad()
-], BcmRadio.prototype, "el", void 0);

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/organism/states/bcm-list2.states.js

@@ -188,7 +188,7 @@ const findItem = (id, itemId, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       if (itemId.includes(item.id)) {
-        checkedProcess(id, item, true);
+        checkedProcess(id, item);
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
         }

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);