bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

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

@@ -2,71 +2,46 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-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 { ColorHelper, Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import { badgeStyle } from "./badge.style";
 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.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
+    const { blink, value, size, color, status } = this;
+    const _color = this.statusColors[status] || color;
+    const { tone, colorName } = ColorHelper.parseColor(_color);
+    const dc = Generate.getTwColor({
+      color: colorName,
+      tones: {
+        [tone]: ["bg"],
+      },
+      variable: "--bcm-badge",
     });
-    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 })));
+    const style = Object.assign(Object.assign({}, dc), (dc["--bcm-badge-bg"] && { "--bcm-badge-text": ColorHelper.reverseColor(dc["--bcm-badge-bg"]) }));
+    const { base, dotText, host } = badgeStyle({ size, blink });
+    return (h(Host, { class: host(), role: "status", "aria-live": "polite" }, h("div", { class: base(), style: style }, h("span", { class: dotText(), role: "presentation", "aria-hidden": "true" }, value), h("span", { class: "tw-sr-only" }, value)), h("slot", null)));
   }
   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",
@@ -82,27 +57,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",
@@ -120,7 +77,7 @@ export class BcmBadge {
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -137,7 +94,7 @@ export class BcmBadge {
       },
       "color": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -154,14 +111,14 @@ export class BcmBadge {
       },
       "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"
             }
           }
         },
@@ -177,14 +134,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"
             }
           }
         },
@@ -196,23 +153,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
       }
     };
   }

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

@@ -0,0 +1,51 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const badgeStyle = tv({
+  slots: {
+    host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal ",
+    base: [
+      "bcm-badge__dot",
+      "tw-flex tw-items-center tw-justify-center tw-flex-row",
+      "tw-rounded-full tw-text-center",
+      "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",
+      "tw-whitespace-nowrap",
+    ],
+    dotText: "empty:tw-hidden",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-2 tw-gap-1",
+        base: "bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5",
+        dotText: "tw-px-1.5 tw-min-w-4",
+      },
+      medium: {
+        host: "tw-text-3 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2",
+        dotText: "tw-px-1.5 tw-min-w-5",
+      },
+      large: {
+        host: "tw-text-4 tw-gap-2",
+        base: "bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5",
+        dotText: "tw-px-2 tw-min-w-6",
+      },
+    },
+    blink: {
+      true: {
+        base: [
+          "bcm-badge__dot-blink tw-relative",
+          "after:tw-content-[''] after:tw-absolute after:tw-top-0 after:tw-left-0 after:tw-z-[-1]",
+          "after:tw-w-full after:tw-h-full after:tw-bg-[--bcm-badge-bg] after:tw-opacity-75 after:tw-rounded-full",
+          "after:tw-animate-blink after:tw-pointer-events-none",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    blink: false,
+  },
+});

package/dist/collection/components/atoms/button/button.css

@@ -176,6 +176,21 @@
   --bcm-button-link-color-disabled: var(--bcm-new-ds-color-slate-400);
   --bcm-button-link-background-color-disabled: var(--bcm-new-ds-color-transparent);
   --bcm-button-link-border-disabled: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-color-default: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-link-background-color-default: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-border-default: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-color-hover: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-link-background-color-hover: var(--bcm-new-ds-color-slate-200);
+  --bcm-button-ghost-link-border-hover: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-color-focus-visible: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-link-background-color-focus-visible: var(--bcm-new-ds-color-slate-300);
+  --bcm-button-ghost-link-border-focus-visible: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-color-active: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-link-background-color-active: var(--bcm-new-ds-color-slate-300);
+  --bcm-button-ghost-link-border-active: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-color-disabled: var(--bcm-new-ds-color-slate-500);
+  --bcm-button-ghost-link-background-color-disabled: var(--bcm-new-ds-color-transparent);
+  --bcm-button-ghost-link-border-disabled: var(--bcm-new-ds-color-transparent);
 }
 .bcm-button.full-width {
   width: 100%;
@@ -354,6 +369,46 @@
   background-color: var(--bcm-button-link-background-color-default);
   border-color: var(--bcm-button-link-border-default);
 }
+.bcm-button__container-kind-ghost-link {
+  color: var(--bcm-button-ghost-link-color-default);
+  background-color: var(--bcm-button-ghost-link-background-color-default);
+  border-color: var(--bcm-button-ghost-link-border-default);
+}
+.bcm-button__container-kind-ghost-link:hover {
+  color: var(--bcm-button-ghost-link-color-hover);
+  background-color: var(--bcm-button-ghost-link-background-color-hover);
+  border-color: var(--bcm-button-ghost-link-border-hover);
+}
+.bcm-button__container-kind-ghost-link:focus-visible {
+  color: var(--bcm-button-ghost-link-color-focus-visible);
+  background-color: var(--bcm-button-ghost-link-background-color-focus-visible);
+  border-color: var(--bcm-button-ghost-link-border-focus-visible);
+}
+.bcm-button__container-kind-ghost-link:active {
+  color: var(--bcm-button-ghost-link-color-active);
+  background-color: var(--bcm-button-ghost-link-background-color-active);
+  border-color: var(--bcm-button-ghost-link-border-active);
+}
+.bcm-button__container-kind-ghost-link:disabled {
+  color: var(--bcm-button-ghost-link-color-disabled);
+  background-color: var(--bcm-button-ghost-link-background-color-disabled);
+  border-color: var(--bcm-button-ghost-link-border-disabled);
+}
+.bcm-button__container-kind-ghost-link.checked {
+  color: var(--bcm-button-ghost-link-color-active);
+  background-color: var(--bcm-button-ghost-link-background-color-active);
+  border-color: var(--bcm-button-ghost-link-border-active);
+}
+.bcm-button__container-kind-ghost-link.disabled {
+  color: var(--bcm-button-ghost-link-color-disabled);
+  background-color: var(--bcm-button-ghost-link-background-color-disabled);
+  border-color: var(--bcm-button-ghost-link-border-disabled);
+}
+.bcm-button__container-kind-ghost-link .bcm-button__container-loading {
+  color: var(--bcm-button-ghost-link-color-default);
+  background-color: var(--bcm-button-ghost-link-background-color-default);
+  border-color: var(--bcm-button-ghost-link-border-default);
+}
 .bcm-button__container[disabled] {
   cursor: not-allowed;
 }

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

@@ -261,7 +261,7 @@ export class BcmButton {
         "mutable": true,
         "complexType": {
           "original": "KindTypes",
-          "resolved": "\"ghost\" | \"link\" | \"solid\"",
+          "resolved": "\"ghost\" | \"ghost-link\" | \"link\" | \"solid\"",
           "references": {
             "KindTypes": {
               "location": "import",

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

@@ -14,14 +14,14 @@ export class BcmIcon {
   getIcon() {
     const { icon } = this;
     if (icon in customIconList) {
-      const _icon = getAssetPath("/assets/icon/" + customIconList[icon]);
-      return (h("div", { class: "tw-h-fit tw-w-fit tw-flex tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+      const _icon = getAssetPath("./static/" + customIconList[icon]);
+      return (h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
     }
     return h("i", { class: `${icon}` });
   }
   render() {
     const { /*icon,*/ hidden } = this;
-    return (h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon()));
+    return h(Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
   }
   static get is() { return "bcm-icon"; }
   static get originalStyleUrls() {
@@ -34,6 +34,7 @@ export class BcmIcon {
       "$": ["icon.css"]
     };
   }
+  static get assetsDirs() { return ["static"]; }
   static get properties() {
     return {
       "hidden": {

package/dist/collection/{assets/icon → components/atoms/icon/static}/message-bot.svg

@@ -1,10 +1,10 @@
 <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1215_817)">
-<path d="M13.8 4.8807C13.3877 4.8807 13.2435 5.17186 13.2087 5.2307H12.4V3.15039C12.4 2.18395 11.6169 1.40039 10.65 1.40039H4.35C3.38312 1.40039 2.6 2.18395 2.6 3.15039V5.2307H1.79128C1.7565 5.19133 1.61234 4.8807 1.2 4.8807C0.826813 4.8807 0.5 5.18083 0.5 5.5807C0.5 5.98102 0.827469 6.26102 1.2 6.26102C1.61234 6.26102 1.7565 5.97008 1.79128 5.9307H2.6V8.71102C2.6 9.67745 3.38356 10.461 4.35 10.461L5.4 10.4807V12.318C5.4 12.4101 5.45906 12.6004 5.6625 12.6004C5.71765 12.6004 5.77183 12.5827 5.81772 12.5495L8.55 10.4807L10.65 10.4808C11.6164 10.4808 12.4 9.69727 12.4 8.73083V5.9307H13.2089C13.2444 6.00945 13.3888 6.2807 13.8 6.2807C14.1732 6.2807 14.5 5.98058 14.5 5.60039C14.5 5.20008 14.1741 4.8807 13.8 4.8807ZM11 7.00039C11 7.38692 10.6865 7.70039 10.3 7.70039H4.7C4.31281 7.70039 4 7.38758 4 7.00039V4.20039C4 3.81386 4.31347 3.50039 4.7 3.50039H10.3C10.6865 3.50039 11 3.81386 11 4.20039V7.00039ZM5.4 4.8807C5.01347 4.8807 4.7 5.19417 4.7 5.5807C4.7 5.96723 5.01347 6.2807 5.4 6.2807C5.78653 6.2807 6.1 5.96723 6.1 5.5807C6.1 5.2132 5.78719 4.8807 5.4 4.8807ZM9.6 4.8807C9.21347 4.8807 8.9 5.19417 8.9 5.5807C8.9 5.96723 9.21347 6.2807 9.6 6.2807C9.98653 6.2807 10.3 5.96723 10.3 5.5807C10.3 5.2132 9.98719 4.8807 9.6 4.8807Z" fill="white"/>
+<path d="M13.8 4.8807C13.3877 4.8807 13.2435 5.17186 13.2087 5.2307H12.4V3.15039C12.4 2.18395 11.6169 1.40039 10.65 1.40039H4.35C3.38312 1.40039 2.6 2.18395 2.6 3.15039V5.2307H1.79128C1.7565 5.19133 1.61234 4.8807 1.2 4.8807C0.826813 4.8807 0.5 5.18083 0.5 5.5807C0.5 5.98102 0.827469 6.26102 1.2 6.26102C1.61234 6.26102 1.7565 5.97008 1.79128 5.9307H2.6V8.71102C2.6 9.67745 3.38356 10.461 4.35 10.461L5.4 10.4807V12.318C5.4 12.4101 5.45906 12.6004 5.6625 12.6004C5.71765 12.6004 5.77183 12.5827 5.81772 12.5495L8.55 10.4807L10.65 10.4808C11.6164 10.4808 12.4 9.69727 12.4 8.73083V5.9307H13.2089C13.2444 6.00945 13.3888 6.2807 13.8 6.2807C14.1732 6.2807 14.5 5.98058 14.5 5.60039C14.5 5.20008 14.1741 4.8807 13.8 4.8807ZM11 7.00039C11 7.38692 10.6865 7.70039 10.3 7.70039H4.7C4.31281 7.70039 4 7.38758 4 7.00039V4.20039C4 3.81386 4.31347 3.50039 4.7 3.50039H10.3C10.6865 3.50039 11 3.81386 11 4.20039V7.00039ZM5.4 4.8807C5.01347 4.8807 4.7 5.19417 4.7 5.5807C4.7 5.96723 5.01347 6.2807 5.4 6.2807C5.78653 6.2807 6.1 5.96723 6.1 5.5807C6.1 5.2132 5.78719 4.8807 5.4 4.8807ZM9.6 4.8807C9.21347 4.8807 8.9 5.19417 8.9 5.5807C8.9 5.96723 9.21347 6.2807 9.6 6.2807C9.98653 6.2807 10.3 5.96723 10.3 5.5807C10.3 5.2132 9.98719 4.8807 9.6 4.8807Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_1215_817">
-<rect width="14" height="14" fill="white" transform="translate(0.5)"/>
+<rect width="14" height="14" fill="currentColor" transform="translate(0.5)"/>
 </clipPath>
 </defs>
 </svg>

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

@@ -238,7 +238,7 @@ export class BcmDropdown {
         "mutable": true,
         "complexType": {
           "original": "KindTypes",
-          "resolved": "\"ghost\" | \"link\" | \"solid\"",
+          "resolved": "\"ghost\" | \"ghost-link\" | \"link\" | \"solid\"",
           "references": {
             "KindTypes": {
               "location": "import",

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

@@ -233,20 +233,20 @@ export class BcmInput {
   }
   validationRange() {
     const { min, max, value } = this;
-    if (value) {
-      if (min && max) {
+    if (value !== undefined) {
+      if ((min !== undefined) && (max !== undefined)) {
         if (value < min || value > max) {
           this.setCaption(StringHelper.getMessage('between', [min, max]), "error");
           return false;
         }
       }
-      else if (min) {
+      else if (min !== undefined) {
         if (value < min) {
           this.setCaption(StringHelper.getMessage('min', [min]), "error");
           return false;
         }
       }
-      else if (max) {
+      else if (max !== undefined) {
         if (value > max) {
           this.setCaption(StringHelper.getMessage('max', [max]), "error");
           return false;
@@ -284,7 +284,6 @@ export class BcmInput {
   whatchHasFocus() {
     const { type, focused, valueCache, inValid } = this;
     if (type == Bcm.InputType.number && inValid) {
-      console.log("whatchHasFocus");
       if (focused) {
         this.value = '';
       }
@@ -310,7 +309,6 @@ export class BcmInput {
     eyeDropper
       .open()
       .then((color) => {
-      console.log("color: ", color.sRGBHex);
       this.setValue(color.sRGBHex);
     })
       .catch((error) => {