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

package/dist/cjs/bcm-autocomplete.cjs.entry.js

@@ -6,9 +6,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-require('./_commonjsHelpers-bd20f4c0.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+require('./_commonjsHelpers-ed84c3ca.js');
 
 const autocompleteCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:fit-content;height:fit-content}:host(.hidden){display:none}:host(.full-width){width:100%;height:100%}:host(.full-width) .bcm-autocomplete{max-height:100%;max-width:100%}.bcm-autocomplete{background-color:var(--bcm-color-grey-1);display:flex;flex-direction:column;height:100%;width:100%;min-width:256px;max-width:256px;position:relative}.bcm-autocomplete-result{position:relative}.bcm-autocomplete-result .viewport{position:absolute;overflow:hidden;height:0;transition:height 0.3s ease;background-color:#ffffff;width:100%;z-index:10000}.bcm-autocomplete-result.open .viewport{height:256px}";
 

package/dist/cjs/bcm-avatar_2.cjs.entry.js

@@ -0,0 +1,209 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-c591ecec.js');
+const colorHelper = require('./color-helper-c3a819ea.js');
+require('./validators-9f203109.js');
+const generate = require('./generate-e4ab2b4f.js');
+require('./number-helper-503ec94b.js');
+require('./string-helper-fda7cbba.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-7f703055.js');
+const index = require('./index-5279dea2.js');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-f2f16e36.js');
+
+const avatarStyle = index.ce({
+  slots: {
+    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
+    image: "tw-w-full tw-h-full",
+    badge: "",
+  },
+  variants: {
+    size: {
+      small: "bcm-avatar__size-small tw-text-1 tw-w-6 tw-h-6",
+      medium: "bcm-avatar__size-medium tw-text-2 tw-w-8 tw-h-8",
+      large: "bcm-avatar__size-large tw-text-3 tw-w-10 tw-h-10",
+    },
+    shape: {
+      ellipse: {
+        base: "bcm-avatar__shape-ellipse tw-rounded-full",
+        image: "tw-rounded-full",
+        badge: "tw-top-0 tw-right-0",
+      },
+      square: {
+        base: "bcm-avatar__shape-square tw-rounded",
+        image: "tw-rounded",
+        badge: "tw--top-0.5 tw--right-0.5",
+      },
+    },
+    status: {
+      true: {
+        base: "bcm-avatar__status tw-relative",
+        badge: "tw-absolute",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    shape: "ellipse",
+    status: false,
+  },
+});
+
+const BcmAvatar = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.image = undefined;
+    this.name = undefined;
+    this.alt = undefined;
+    this.shape = bcm.Bcm$1.Shape.ellipse;
+    this.size = bcm.Bcm$1.Size.medium;
+    this.color = undefined;
+    this.icon = "fas fa-user";
+    this.status = undefined;
+    this.blink = false;
+    this.isFallback = false;
+  }
+  getFirstLetters(name) {
+    const words = name.split(" ");
+    const initials = words.map(word => word.charAt(0).toUpperCase()).join("");
+    return initials.substring(0, 2);
+  }
+  renderDefaultIcon() {
+    return index$1.h("bcm-icon", { icon: this.icon });
+  }
+  render() {
+    const { shape, size, status, color, blink } = this;
+    const { base, badge, image } = avatarStyle({ size, shape, status: !!status });
+    const dc = generate.Generate.getTwColor({
+      color: color,
+      tones: {
+        200: ["bg"],
+        700: ["text"],
+      },
+      variable: "--bcm-avatar",
+    });
+    const customSize = !Object.keys(bcm.Bcm$1.BaseSize).includes(size)
+      ? {
+        width: `${size}px`,
+        height: `${size}px`,
+        fontSize: `${+size / 3}px`,
+      }
+      : {};
+    const RenderContent = () => {
+      if (this.isFallback) {
+        if (this.name) {
+          return this.getFirstLetters(this.name);
+        }
+        else {
+          return this.renderDefaultIcon();
+        }
+      }
+      else if (this.image) {
+        return index$1.h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt });
+      }
+      else if (this.name) {
+        return this.getFirstLetters(this.name);
+      }
+      else {
+        return this.renderDefaultIcon();
+      }
+    };
+    return (index$1.h(index$1.Host, { role: "img", "aria-label": this.alt || this.name || "Avatar", class: base(), style: Object.assign(Object.assign({}, dc), customSize) }, index$1.h(RenderContent, null), status && index$1.h("bcm-badge", { class: badge(), status: status, blink: blink, "aria-hidden": "true" }), index$1.h("slot", null)));
+  }
+  get el() { return index$1.getElement(this); }
+};
+
+const badgeStyle = index.ce({
+  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,
+  },
+});
+
+const BcmBadge = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald",
+    };
+    this._id = generate.Generate.UID();
+    this.blink = false;
+    this.value = undefined;
+    this.color = undefined;
+    this.size = bcm.Bcm$1.Size.medium;
+    this.status = undefined;
+  }
+  render() {
+    const { blink, value, size, color, status } = this;
+    const _color = this.statusColors[status] || color;
+    const { tone, colorName } = colorHelper.ColorHelper.parseColor(_color);
+    const dc = generate.Generate.getTwColor({
+      color: colorName,
+      tones: {
+        [tone]: ["bg"],
+      },
+      variable: "--bcm-badge",
+    });
+    const style = Object.assign(Object.assign({}, dc), (dc["--bcm-badge-bg"] && { "--bcm-badge-text": colorHelper.ColorHelper.reverseColor(dc["--bcm-badge-bg"]) }));
+    const { base, dotText, host } = badgeStyle({ size, blink });
+    return (index$1.h(index$1.Host, { class: host(), role: "status", "aria-live": "polite" }, index$1.h("div", { class: base(), style: style }, index$1.h("span", { class: dotText(), role: "presentation", "aria-hidden": "true" }, value), index$1.h("span", { class: "tw-sr-only" }, value)), index$1.h("slot", null)));
+  }
+  get el() { return index$1.getElement(this); }
+};
+
+exports.bcm_avatar = BcmAvatar;
+exports.bcm_badge = BcmBadge;

package/dist/cjs/bcm-box.cjs.entry.js

@@ -6,7 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
+const index = require('./index-c591ecec.js');
 
 const BcmBox = class {
   constructor(hostRef) {

package/dist/cjs/bcm-breadcrumb.cjs.entry.js

@@ -6,11 +6,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-7a3874e6.js');
-require('./_commonjsHelpers-bd20f4c0.js');
-require('./colors-e1d142ad.js');
+const index = require('./index-c591ecec.js');
+const index$1 = require('./index-95ae50d0.js');
+const generate = require('./generate-e4ab2b4f.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-f2f16e36.js');
+require('./colors-078851ec.js');
 
 const breadcrumbCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;color:var(--bcm-color-grey-7)}.bcm-breadcrumb__item{display:flex;align-items:center}.bcm-breadcrumb .seperator{cursor:default;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;margin-right:8px;color:var(--bcm-color-grey-7)}.bcm-breadcrumb bcm-link:hover{color:var(--bcm-color-grey-7)}.bcm-breadcrumb .active{color:var(--bcm-color-grey-8)}.bcm-breadcrumb .active:hover{color:var(--bcm-color-grey-8)}.bcm-breadcrumb .is-link:hover{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb .is-link:hover bcm-link,.bcm-breadcrumb .is-link:hover bcm-icon{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb__dropdown-item{position:relative;display:inline-flex}.bcm-breadcrumb__dropdown-item summary{display:inline-flex;align-items:center;cursor:pointer}.bcm-breadcrumb__dropdown-item summary>span{display:inline-flex;align-items:center}.bcm-breadcrumb__dropdown-item summary::-webkit-details-marker{display:none}.bcm-breadcrumb__dropdown-item summary:focus{outline:none}.bcm-breadcrumb__dropdown-item summary.open bcm-link,.bcm-breadcrumb__dropdown-item summary.open bcm-icon{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb__dropdown-item summary .down-icon{margin-left:4px}.bcm-breadcrumb__dropdown-submenu{position:absolute;min-width:140px;background-color:var(--bcm-color-grey-1);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);margin-top:4px}.bcm-breadcrumb__dropdown-submenu .dropdown-item{display:flex;padding:4px 8px}.bcm-breadcrumb__dropdown-submenu .dropdown-item bcm-link{width:100%}";
 

package/dist/cjs/bcm-button-group.cjs.entry.js

@@ -6,13 +6,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddfd6d8f.js');
-const generate = require('./generate-7a3874e6.js');
-const bcm = require('./bcm-ab921827.js');
-const index$1 = require('./index-fdbf5226.js');
-const stringHelper = require('./string-helper-d681e5c7.js');
-require('./colors-e1d142ad.js');
-require('./_commonjsHelpers-bd20f4c0.js');
+const index = require('./index-c591ecec.js');
+const generate = require('./generate-e4ab2b4f.js');
+const bcm = require('./bcm-7f703055.js');
+const index$1 = require('./index-95ae50d0.js');
+const stringHelper = require('./string-helper-fda7cbba.js');
+require('./package-f2f16e36.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
 
 const buttonGroupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button-group{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:fit-content;background-color:var(--bcm-new-ds-color-slate-300);border:1px solid var(--bcm-new-ds-color-slate-300);gap:1px;border-radius:4px}.bcm-button-group .bcm-button__container{border-radius:0;border:none}.bcm-button-group .bcm-button:first-child .bcm-button__container{border-top-left-radius:4px;border-bottom-left-radius:4px}.bcm-button-group .bcm-button:last-child .bcm-button__container{border-top-right-radius:4px;border-bottom-right-radius:4px}.bcm-button-group__vertical{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap}.bcm-button-group__vertical .bcm-button{width:100%}.bcm-button-group__vertical .bcm-button__container{width:100%;border-radius:0}.bcm-button-group__vertical .bcm-button:first-child .bcm-button__container{border-radius:4px 4px 0 0}.bcm-button-group__vertical .bcm-button:last-child .bcm-button__container{border-radius:0 0 4px 4px}";
 
@@ -21,11 +22,11 @@ const BcmButtonGroup = class {
     index.registerInstance(this, hostRef);
     this.bcmChange = index.createEvent(this, "bcm-change", 7);
     this._id = generate.Generate.UID();
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.type = 'button';
     this.color = undefined;
     this.disabled = undefined;
-    this.direction = bcm.Bcm$1.Direction.horizontal;
+    this.direction = bcm.Bcm.Direction.horizontal;
   }
   componentWillLoad() {
     const { size, color } = this;
@@ -80,7 +81,7 @@ const BcmButtonGroup = class {
   }
   render() {
     const hostClasses = index$1.classnames('bcm-button-group', {
-      'bcm-button-group__vertical': this.direction === bcm.Bcm$1.Direction.vertical,
+      'bcm-button-group__vertical': this.direction === bcm.Bcm.Direction.vertical,
     });
     return (index.h(index.Host, { class: hostClasses }, index.h("slot", null)));
   }