bromcom-ui 2.8.0-rc.0 → 2.8.0-rc.2

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/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/helper/generate.js

@@ -7,6 +7,7 @@ import { StatusProps } from "../components/molecules/alert/types";
 import { version } from "../../package.json";
 import { Build } from "@stencil/core";
 import snq from "snq";
+import colors from 'tailwindcss/colors';
 const allowedDomains = ["localhost", "beta-regression.bromcomcloud.com", "beta-scrum.bromcomcloud.com", "beta-kanban.bromcomcloud.com"];
 const isAllowedDomain = () => {
   const hostname = window.location.hostname;
@@ -40,6 +41,17 @@ export class Generate {
     });
     observer.observe(document.documentElement, { childList: true, subtree: true });
   }
+  static getTwColor(color, variable = "--bcm-color-default") {
+    if (!color || !colors[color]) {
+      return false;
+    }
+    const colorObj = colors[color];
+    const result = {};
+    for (const [key, value] of Object.entries(colorObj)) {
+      result[`${variable}-${key}`] = value;
+    }
+    return result;
+  }
 }
 Generate.UID = (prefix = "bcm") => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 Generate.getIconAttrWithStatusType = (status, loading = false) => {

package/dist/collection/helper/tooltip-helper.js

@@ -110,7 +110,7 @@ export class Tooltip {
       this.el = document.getElementById(this.id);
       if (this.el) {
         await delay(this.closeDelay);
-        this.el.remove();
+        this.el && this.el.remove();
         this.emitHide();
       }
     };

package/dist/components/bcm-list.js

@@ -325,7 +325,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);
         }