bromcom-ui 2.12.3-rc.2 → 2.12.3

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

@@ -0,0 +1,205 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { C as ColorHelper } from './color-helper-74614f24.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-d009624a.js';
+import './number-helper-b7a7a318.js';
+import './string-helper-3592bdc2.js';
+import './validators-5519219e.js';
+import './element-dragger-89bb52fd.js';
+import { B as Bcm } from './bcm-a50d55ba.js';
+import { c as ce } from './index-3bc8c6e3.js';
+import './colors-1d7854ea.js';
+import './utils-57652744.js';
+import './colors-dd598eea.js';
+import './_commonjsHelpers-82aa9212.js';
+import './package-7549581c.js';
+
+const avatarStyle = 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) {
+    registerInstance(this, hostRef);
+    this._id = Generate.UID();
+    this.image = undefined;
+    this.name = undefined;
+    this.alt = undefined;
+    this.shape = Bcm.Shape.ellipse;
+    this.size = Bcm.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 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.getTwColor({
+      color: color,
+      tones: {
+        200: ["bg"],
+        700: ["text"],
+      },
+      variable: "--bcm-avatar",
+    });
+    const customSize = !Object.keys(Bcm.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 h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt, "aria-label": this.alt || this.name || "Avatar" });
+      }
+      else if (this.name) {
+        return this.getFirstLetters(this.name);
+      }
+      else {
+        return this.renderDefaultIcon();
+      }
+    };
+    return (h(Host, { role: "img", "aria-label": this.alt || this.name || "Avatar", class: base(), style: Object.assign(Object.assign({}, dc), customSize) }, h(RenderContent, null), status && h("bcm-badge", { class: badge(), status: status, blink: blink, "aria-hidden": "true" }), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+const badgeStyle = 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-z-10",
+      "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) {
+    registerInstance(this, hostRef);
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald",
+    };
+    this._id = Generate.UID();
+    this.blink = false;
+    this.value = undefined;
+    this.color = undefined;
+    this.size = Bcm.Size.medium;
+    this.status = undefined;
+  }
+  render() {
+    const { blink, value, size, color, status } = this;
+    const _color = this.statusColors[status] || color;
+    const { tone, colorName } = ColorHelper.parseColor(_color, 700);
+    const dc = 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.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)));
+  }
+  get el() { return getElement(this); }
+};
+
+export { BcmAvatar as bcm_avatar, BcmBadge as bcm_badge };

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

@@ -3,11 +3,11 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { c as classnames } from './index-00c8a8f7.js';
-import { G as Generate } from './generate-b30859e0.js';
-import './_commonjsHelpers-7002e5de.js';
-import './package-8f0a3af5.js';
-import './colors-ed4e7579.js';
+import { c as classnames } from './index-f549811f.js';
+import { G as Generate } from './generate-d009624a.js';
+import './_commonjsHelpers-82aa9212.js';
+import './package-7549581c.js';
+import './colors-dd598eea.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/esm/bcm-button-group.entry.js

@@ -0,0 +1,88 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { G as Generate, s as snq } from './generate-d009624a.js';
+import { a as Bcm } from './bcm-a50d55ba.js';
+import { c as classnames } from './index-f549811f.js';
+import { S as StringHelper } from './string-helper-3592bdc2.js';
+import './package-7549581c.js';
+import './colors-dd598eea.js';
+import './_commonjsHelpers-82aa9212.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}";
+
+const BcmButtonGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmChange = createEvent(this, "bcm-change", 7);
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.type = 'button';
+    this.color = undefined;
+    this.disabled = undefined;
+    this.direction = Bcm.Direction.horizontal;
+  }
+  componentWillLoad() {
+    const { size, color } = this;
+    const buttons = this.getButtons();
+    (buttons === null || buttons === void 0 ? void 0 : buttons.length) &&
+      buttons.forEach(button => {
+        let buttonDisabled = StringHelper.elementBooleanCheck(this.el.getAttribute('disabled')) || button.getAttribute('disabled');
+        color && button.setAttribute('color', color);
+        // type && button.setAttribute('type', type);
+        size && button.setAttribute('size', size);
+        buttonDisabled && (button.disabled = true);
+      });
+  }
+  getButtons() {
+    return snq(() => Array.from(this.el.querySelectorAll('bcm-button')), []);
+  }
+  radioControl(id) {
+    const buttons = this.getButtons();
+    (buttons === null || buttons === void 0 ? void 0 : buttons.length) &&
+      buttons.forEach(button => {
+        button.checked = button.id == id;
+      });
+  }
+  checkboxControl(id) {
+    const buttons = this.getButtons();
+    (buttons === null || buttons === void 0 ? void 0 : buttons.length) &&
+      buttons.forEach(button => {
+        button.checked = button.id == id ? (button.checked = !button.checked) : button.checked;
+      });
+  }
+  listenButton({ target }) {
+    if (target.id) {
+      switch (this.type) {
+        case 'radio':
+          this.radioControl(target.id);
+          break;
+        case 'checkbox':
+          this.checkboxControl(target.id);
+          break;
+      }
+      this.handleChange();
+    }
+  }
+  handleChange() {
+    const obj = this.getButtons()
+      .filter(Boolean)
+      .map(button => ({
+      id: button.id,
+      checked: button.checked,
+    }));
+    this.bcmChange.emit(obj);
+  }
+  render() {
+    const hostClasses = classnames('bcm-button-group', {
+      'bcm-button-group__vertical': this.direction === Bcm.Direction.vertical,
+    });
+    return (h(Host, { class: hostClasses }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+BcmButtonGroup.style = buttonGroupCss;
+
+export { BcmButtonGroup as bcm_button_group };