bromcom-ui 2.7.38-rc.13 → 2.7.38-rc.14

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/tooltip/tooltip.js

@@ -25,13 +25,29 @@ export class BcmTooltip {
     this.open = false;
     this.color = "slate";
     this.size = Bcm.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  componentWillLoad() {
     this.tooltip = new Tooltip({
-      targetId: this._id,
+      targetId: this.targetId || this._id,
       message: this.message,
       placement: this.placement,
       color: this.color,
       trigger: this.trigger,
       size: this.size,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
     });
   }
   componentDidLoad() {
@@ -43,8 +59,13 @@ export class BcmTooltip {
     this.tooltip.color = this.color;
     this.tooltip.trigger = this.trigger;
     this.tooltip.size = this.size;
+    this.tooltip.openDelay = this.openDelay;
+    this.tooltip.closeDelay = this.closeDelay;
     this.tooltip.update();
   }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
   async show() {
     this.tooltip.show();
   }
@@ -200,6 +221,59 @@ export class BcmTooltip {
         "attribute": "size",
         "reflect": false,
         "defaultValue": "Bcm.Size.medium"
+      },
+      "openDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "closeDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "targetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target-id",
+        "reflect": false
       }
     };
   }
@@ -208,6 +282,39 @@ export class BcmTooltip {
       "tooltip": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "bcmTooltipShow",
+        "name": "bcmTooltipShow",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmTooltipHide",
+        "name": "bcmTooltipHide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "show": {

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/input-custom/input-custom.js

@@ -0,0 +1,249 @@
+/*!
+ * 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 { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
+import cs from "classnames";
+export class BcmInputCustom {
+  constructor() {
+    this.handleFocus = () => {
+      this.hasFocus = true;
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+    };
+    this.handleChange = (e) => {
+      this.value = e.target.value;
+      console.log(e);
+    };
+    this.handleInput = (e) => {
+      // this.value = (e.target as HTMLInputElement).value;
+      console.log(e);
+    };
+    this._id = Generate.UID();
+    this.name = undefined;
+    this.value = undefined;
+    this.type = "text";
+    this.label = undefined;
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.placeholder = undefined;
+    this.fullwidth = false;
+    this.hasFocus = false;
+  }
+  render() {
+    const { _id, type, name, value, label, required, fullwidth, placeholder, disabled, readonly } = this;
+    return (h(Host, { class: cs("tw-inline-flex tw-w-full tw-max-w-[256px] tw-flex-col", {
+        "tw-max-w-full": fullwidth,
+      }) }, label && h("bcm-label", { value: label, required: required, htmlFor: _id }), h("div", { class: cs("tw-relative tw-flex tw-w-full tw-flex-row tw-items-stretch tw-rounded tw-border tw-p-0 hover:tw-border-primary-600", {
+        "tw-cursor-not-allowed tw-bg-secondary-50": this.disabled,
+        "tw-cursor-text": !this.disabled,
+        "tw-cursor-default tw-bg-secondary-50": this.readonly,
+        "tw-border-primary-500 tw-bg-secondary-50": this.hasFocus,
+        "tw-border-secondary-300 tw-bg-white": !this.hasFocus,
+      }) }, h("input", { id: _id, name: name, type: type, value: value, "data-value": value, placeholder: placeholder, required: required, disabled: disabled, readonly: readonly, class: cs("tw-text-overflow-ellipsis", "tw-rounded-none", "tw-flex-1", "tw-cursor-inherit", "tw-w-full", "tw-appearance-none", "tw-overflow-hidden", "tw-whitespace-nowrap", "tw-border-none", "tw-bg-transparent", "tw-p-2", "tw-text-secondary-600", "tw-placeholder-secondary-300", "tw-outline-none"), onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: e => this.handleChange(e), onInput: this.handleInput }))));
+  }
+  static get is() { return "bcm-input-custom"; }
+  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()"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "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"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fullwidth",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+__decorate([
+  IsLoad()
+], BcmInputCustom.prototype, "el", void 0);