bromcom-ui 2.12.3 → 3.0.0-alpha.0

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

@@ -1,210 +0,0 @@
-/*!
- * 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-dc98a2ca.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-b43c3d3b.js');
-require('./number-helper-a708fa79.js');
-require('./string-helper-9cdfb273.js');
-require('./validators-84d8ae28.js');
-require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-1d1fcf21.js');
-const index = require('./index-5279dea2.js');
-require('./colors-56282b00.js');
-require('./utils-fc077139.js');
-require('./colors-250d0982.js');
-require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-033055fc.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.Shape.ellipse;
-    this.size = bcm.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 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.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, "aria-label": this.alt || this.name || "Avatar" });
-      }
-      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-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) {
-    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.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, 700);
-    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-button-group.cjs.entry.js

@@ -1,92 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-c591ecec.js');
-const generate = require('./generate-b43c3d3b.js');
-const bcm = require('./bcm-1d1fcf21.js');
-const index$1 = require('./index-95ae50d0.js');
-const stringHelper = require('./string-helper-9cdfb273.js');
-require('./package-033055fc.js');
-require('./colors-250d0982.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}";
-
-const BcmButtonGroup = class {
-  constructor(hostRef) {
-    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.type = 'button';
-    this.color = undefined;
-    this.disabled = undefined;
-    this.direction = bcm.Bcm$1.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.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 generate.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 = index$1.classnames('bcm-button-group', {
-      'bcm-button-group__vertical': this.direction === bcm.Bcm$1.Direction.vertical,
-    });
-    return (index.h(index.Host, { class: hostClasses }, index.h("slot", null)));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmButtonGroup.style = buttonGroupCss;
-
-exports.bcm_button_group = BcmButtonGroup;