bromcom-ui 2.8.0-rc.8 → 3.0.0-rc.0

package/dist/collection/components/atoms/avatar/avatar.js

@@ -12,11 +12,11 @@ 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 { IsLoad } from '@bcm/decorator';
-import { ColorHelper, Generate, NumberHelper } from '@bcm/helpers';
-import { Bcm } from '@bcm/model';
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
+import { IsLoad } from "@bcm/decorator";
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
 export class BcmAvatar {
   constructor() {
     this._id = Generate.UID();
@@ -26,69 +26,70 @@ export class BcmAvatar {
     this.alt = undefined;
     this.shape = Bcm.Shape.ellipse;
     this.size = Bcm.Size.medium;
-    this.color = undefined;
+    this.color = "slate";
     this.status = undefined;
     this.isFallback = false;
   }
   componentWillLoad() {
-    this.name = this.name && this.name.trim() || '';
+    this.name = (this.name && this.name.trim()) || "";
   }
   handleError() {
     this.isFallback = true;
   }
-  getCustomSizes(customSize) {
-    return Math.round(parseInt(customSize) / 3);
-  }
   getFirstLetters(name) {
-    const splitted = name.split(' ');
+    const splitted = name.split(" ");
     if (splitted.length === 1)
       return splitted[0].substring(0, 2);
     return splitted[0].charAt(0) + splitted[splitted.length - 1].charAt(0);
   }
-  setStyleVariables() {
-    const { size } = this;
-    let { color } = this;
-    !color && (color = 'slate');
-    let height = NumberHelper.toNumber(size);
-    let fontSize = Math.round(parseInt(height) / 3);
-    const prefix = `--bcm-avatar`;
-    return {
-      [`${prefix}-color`]: ColorHelper.dsColor(`${color}-600`),
-      [`${prefix}-background-color`]: ColorHelper.dsColor(`${color}-100`),
-      [`${prefix}-height`]: `${height}px`,
-      [`${prefix}-font-size`]: `${fontSize}px`
-    };
-  }
   render() {
-    const { image, name, alt, hidden, shape, size, status } = this;
+    const { image, name, alt, hidden, shape, size, status, color, isFallback } = this;
     const isCustom = !Object.keys(Bcm.BaseSize).includes(size);
-    const hostClasses = cs('bcm-avatar', `bcm-avatar__shape-${shape}`, `bcm-avatar__size-${isCustom ? 'custom' : size}`, {
-      'hidden': hidden,
-      'bcm-avatar__status': !!status
-    });
-    const GetIcon = () => h("bcm-icon", { icon: "fas fa-user" });
-    return (h(Host, { class: hostClasses, style: this.setStyleVariables() }, h("span", { hidden: true }, h("slot", null)), this.isFallback ? (this.name ? this.getFirstLetters(this.name) : GetIcon())
-      : image
-        ? h("img", { onError: () => this.handleError(), src: image, alt: alt })
-        : name ? this.getFirstLetters(name)
-          : GetIcon(), status && h("bcm-badge", { status: status })));
-  }
-  static get is() { return "bcm-avatar"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["avatar.scss"]
+    const defaultColors = Generate.getTwColor({ color });
+    const IconTemplate = () => (h("i", { class: cs("far fa-user", {
+        "tw-text-size-2": size === Bcm.Size.small,
+        "tw-text-size-3": size === Bcm.Size.medium,
+        "tw-text-size-4": size === Bcm.Size.large,
+        "tw-px-[18px] tw-py-[17px] tw-text-4": isCustom,
+      }) }));
+    const ImageTemplate = () => {
+      return h("img", { onError: () => this.handleError(), src: image, alt: alt, class: cs("tw-h-full tw-w-full tw-rounded-full tw-object-cover") });
     };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["avatar.css"]
+    const NameTemplate = () => {
+      return (h("span", { class: cs("tw-uppercase", {
+          "tw-p-1 tw-text-size-3": size === Bcm.Size.small,
+          "tw-px-[5px] tw-py-1.5 tw-text-size-4": size === Bcm.Size.medium,
+          "tw-px-[9.5px] tw-py-[9px] tw-text-size-5": size === Bcm.Size.large,
+          "tw-px-[13.5px] tw-py-[13px] tw-text-4": isCustom,
+        }) }, this.getFirstLetters(name)));
     };
+    const StatusTemplate = () => {
+      return (h("bcm-badge", { class: cs("tw-absolute", {
+          "tw-right-0 tw-top-0": shape === Bcm.Shape.ellipse,
+          "tw-right-[-2px] tw-top-[-2px]": shape === Bcm.Shape.square,
+        }, {
+          "tw-h-1.5 tw-w-1.5": size === Bcm.Size.small,
+          "tw-h-2 tw-w-2": size === Bcm.Size.medium,
+          "tw-h-2.5 tw-w-2.5": size === Bcm.Size.large,
+        }), status: status }));
+    };
+    return (h(Host, { role: "avatar", class: cs("bcm-ui-element bcm-ui-content-display bcm-avatar", "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-default-200 tw-text-default-700", {
+        "tw-hidden": hidden,
+        "tw-relative": status,
+        "tw-h-6 tw-w-6": size === Bcm.Size.small,
+        "tw-h-8 tw-w-8": size === Bcm.Size.medium,
+        "tw-h-10 tw-w-10": size === Bcm.Size.large,
+        "tw-h-[50px] tw-w-[50px]": isCustom,
+      }, {
+        "tw-rounded-full": shape === Bcm.Shape.ellipse,
+      }), style: Object.assign({}, defaultColors) }, h("span", { class: "tw-hidden" }, h("slot", null)), image && !isFallback && h(ImageTemplate, null), name && !isFallback && h(NameTemplate, null), status && h(StatusTemplate, null), isFallback ? name ? h(NameTemplate, null) : h(IconTemplate, null) : null, !isFallback && !image && !name && h(IconTemplate, null)));
   }
+  static get is() { return "bcm-avatar"; }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -106,7 +107,7 @@ export class BcmAvatar {
       },
       "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -124,7 +125,7 @@ export class BcmAvatar {
       },
       "image": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -158,7 +159,7 @@ export class BcmAvatar {
       },
       "alt": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -175,7 +176,7 @@ export class BcmAvatar {
       },
       "shape": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "ShapeTypes",
           "resolved": "\"ellipse\" | \"square\"",
@@ -198,7 +199,7 @@ export class BcmAvatar {
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
@@ -220,11 +221,11 @@ export class BcmAvatar {
         "defaultValue": "Bcm.Size.medium"
       },
       "color": {
-        "type": "any",
-        "mutable": true,
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -234,11 +235,12 @@ export class BcmAvatar {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"slate\""
       },
       "status": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",

package/dist/collection/components/atoms/badge/badge.js

@@ -12,72 +12,57 @@ 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 { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import { Bcm } from '../../../models/bcm';
-import { Generate } from '../../../helper/generate';
-import { SlotTemplate } from '../../../templates/slot-template';
-import { ColorHelper } from '../../../helper/color-helper';
-import { IsLoad } from '../../../decorators/is-load-decorator';
+import { IsLoad } from "@bcm/decorator";
+import { ColorHelper, Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
 export class BcmBadge {
   constructor() {
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald"
+    };
     this._id = Generate.UID();
-    this.hidden = false;
     this.blink = false;
     this.value = undefined;
-    this.color = undefined;
+    this.color = "slate";
     this.size = Bcm.Size.medium;
     this.status = undefined;
-    this._slot = undefined;
-  }
-  setStyleVariables() {
-    const { status, value } = this;
-    let { color } = this;
-    const statusColors = {
-      'info': 'blue',
-      'error': 'red',
-      'warning': 'amber',
-      'success': 'emerald',
-      'default': 'slate'
-    };
-    !!status && (color = statusColors[status]);
-    !color && (color = 'slate');
-    const prefix = `--bcm-badge`;
-    const spacing = !!value && value.length > 1 ? '8' : '4';
-    return {
-      [`${prefix}-color`]: ColorHelper.reverseColor(ColorHelper.dsColor(`${color}`)),
-      [`${prefix}-background-color`]: ColorHelper.dsColor(`${color}`),
-      [`${prefix}-spacing`]: `${spacing}px`
-    };
   }
   render() {
-    let { blink, value, size, _slot, hidden } = this;
-    const dotClass = cs('bcm-badge__dot', 'bcm-badge__dot-size-' + size, 
-    // 'size-2',
-    {
-      'bcm-badge__dot-blink': blink
-    });
-    const hostClasses = cs('bcm-badge', {
-      hidden
-    });
-    return (h(Host, { class: hostClasses, style: this.setStyleVariables() }, h("span", { hidden: true }, h("slot", null)), h("div", { class: dotClass }, !!value && h("span", { class: "bcm-badge__dot-text" }, value)), h(SlotTemplate, { value: _slot })));
+    var _a;
+    let { blink, value, size, status } = this;
+    const textLength = (value === null || value === void 0 ? void 0 : value.length) || 0;
+    const color = (status && this.statusColors[status]) || ((_a = this.color) === null || _a === void 0 ? void 0 : _a.split("-")[0]) || "slate";
+    const tone = /* this.color.split("-")[1] || */ "600";
+    const defaultColors = Generate.getTwColor({ color, defaultTone: tone });
+    return (h(Host, { class: cs("bcm-ui-element bcm-ui-content-display bcm-badge", "tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-font-medium tw-shadow-border empty:tw-inline-block", {
+        "tw-text-size-2": size === Bcm.Size.small,
+        "tw-text-size-3": size === Bcm.Size.medium,
+        "tw-text-size-4": size === Bcm.Size.large,
+        "tw-animate-blink": blink,
+        "tw-px-2": textLength > 1,
+      }, textLength > 0
+        ? {
+          "tw-min-w-[16px] tw-py-0.5": size === Bcm.Size.small,
+          "tw-min-w-[24px] tw-py-1": size === Bcm.Size.medium,
+          "tw-min-w-[32px] tw-py-1.5": size === Bcm.Size.large,
+        }
+        : {
+          "tw-h-1 tw-w-1": size === Bcm.Size.small,
+          "tw-h-2 tw-w-2": size === Bcm.Size.medium,
+          "tw-h-3 tw-w-3": size === Bcm.Size.large,
+        }), style: Object.assign(Object.assign({}, defaultColors), { color: ColorHelper.reverseColor(defaultColors["--bcm-color-default"]), backgroundColor: defaultColors["--bcm-color-default"] }) }, h("slot", null, value)));
   }
   static get is() { return "bcm-badge"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["badge.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["badge.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -93,27 +78,9 @@ export class BcmBadge {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "blink": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -131,7 +98,7 @@ export class BcmBadge {
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -147,11 +114,11 @@ export class BcmBadge {
         "reflect": false
       },
       "color": {
-        "type": "any",
-        "mutable": true,
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -161,18 +128,19 @@ export class BcmBadge {
           "text": ""
         },
         "attribute": "color",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"slate\""
       },
       "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"
             }
           }
         },
@@ -188,14 +156,14 @@ export class BcmBadge {
       },
       "status": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "StatusTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -207,23 +175,6 @@ export class BcmBadge {
         },
         "attribute": "status",
         "reflect": false
-      },
-      "_slot": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "slot",
-        "reflect": false
       }
     };
   }