bromcom-ui 2.11.1-rc.8 → 2.11.1-rc.9-1

package/dist/cjs/bcm-attendance-actions.cjs.entry.js

@@ -1,330 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index$1 = require('./index-c591ecec.js');
-require('./color-helper-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-06bf97b8.js');
-require('./number-helper-362f0e03.js');
-require('./string-helper-f9184277.js');
-require('./validators-07d7a0c9.js');
-require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-489c9b1a.js');
-const index$2 = require('./index-95ae50d0.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-92cfcafb.js');
-
-// --bcm-attendance-actions-button-bg: #F1F5F9; /* slate-100 */
-// --bcm-attendance-actions-button-text: #334155; /* slate-700 */
-// --bcm-attendance-actions-button-border: #CBD5E1; /* slate-300 */
-// --bcm-attendance-actions-button-hover-bg: #E2E8F0; /* slate-200 */
-// --bcm-attendance-actions-button-active-bg: #CBD5E1; /* slate-300 */
-// --bcm-attendance-actions-button-disabled-bg: #CBD5E1; /* slate-300 */
-// --bcm-attendance-actions-button-disabled-text: #64748B; /* slate-500 */
-const attendanceActionStyle = index.ce({
-  slots: {
-    host: ["tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-full tw-max-w-48 tw-gap-2", "bcm-ui-element bcm-attendance-actions"],
-    base: "",
-    buttonContainer: "tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-full tw-max-w-[168px]",
-    button: [
-      "",
-      "tw-button-reset",
-      "tw-flex-1 last:tw-flex-none",
-      "tw-bg-[--bcm-attendance-actions-button-bg]",
-      "tw-text-[--bcm-attendance-actions-button-text]",
-      "tw-border tw-border-solid tw-border-[--bcm-attendance-actions-button-border]",
-      "hover:tw-bg-[--bcm-attendance-actions-button-hover-bg]",
-      "active:tw-bg-[--bcm-attendance-actions-button-active-bg]",
-      "focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-z-10",
-      "tw-flex tw-flex-row tw-items-center tw-justify-center",
-      "first:tw-rounded-l last:tw-rounded-r",
-      "tw-font-medium",
-      "-tw-ml-[1px] first:tw-ml-0",
-    ],
-    dropdownButton: "",
-    mainButton: "",
-    commentIcon: "",
-  },
-  variants: {
-    selected: {
-      true: {
-        button: [
-          "tw-text-white tw-border-transparent last:tw-ml-[1px]",
-          "first:tw-justify-start",
-        ],
-        mainButton: [
-          "tw-min-w-[calc(theme(spacing.12)-1px)]"
-        ],
-      },
-      false: {
-        button: [
-          ""
-        ],
-      },
-    },
-    size: {
-      small: {
-        button: [
-          "tw-text-2",
-          "tw-min-h-6",
-          "tw-gap-2",
-        ],
-        mainButton: [
-          "tw-px-3",
-        ],
-        dropdownButton: [
-          "tw-px-2.5"
-        ],
-      },
-      medium: {
-        button: [
-          "tw-text-3",
-          "tw-min-h-8",
-          "tw-gap-2",
-        ],
-        mainButton: [
-          "tw-px-3",
-        ],
-        dropdownButton: [
-          "tw-px-2.5"
-        ],
-      },
-      large: {
-        button: [
-          "tw-text-4",
-          "tw-min-h-10",
-          "tw-gap-2.5",
-        ],
-        mainButton: [
-          "tw-px-3",
-        ],
-        dropdownButton: [
-          "tw-px-3"
-        ],
-      },
-    },
-    disabled: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      disabled: true,
-      class: {
-        buttonContainer: [
-          "tw-cursor-not-allowed tw-pointer-events-none",
-        ],
-        button: [
-          "tw-cursor-not-allowed",
-          "tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
-          "tw-text-[--bcm-attendance-actions-button-disabled-text]",
-          "tw-border-transparent",
-          "hover:tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
-        ],
-        mainButton: [
-          "tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
-          "tw-text-[--bcm-attendance-actions-button-disabled-text]",
-          "tw-border-transparent",
-          "hover:tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
-          "tw-cursor-not-allowed",
-        ],
-        host: [
-          "tw-cursor-not-allowed",
-        ],
-        commentIcon: [
-          "tw-cursor-not-allowed tw-pointer-events-none",
-        ],
-      }
-    },
-    {
-      disabled: false,
-      class: {
-        button: [
-          "tw-cursor-pointer",
-        ],
-      }
-    }
-  ],
-  defaultVariants: {
-    selected: false,
-    size: "medium",
-    disabled: false,
-  },
-});
-
-const attendanceActionsCss = "";
-
-const BcmAttendanceActions = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.change = index$1.createEvent(this, "bcm-attendance-change", 3);
-    this._id = generate.Generate.UID();
-    this.size = bcm.Bcm$1.Size.medium;
-    this.disabled = false;
-    this.data = [
-      { key: "P", value: "Present", color: "emerald", icon: "fa-solid fa-check", priority: 0 },
-      { key: "A", value: "Absent", color: "red", icon: "fa-solid fa-times", priority: 1 },
-      { key: "L", value: "Late", color: "amber", icon: "fa-solid fa-clock", priority: 2 },
-      { key: "C", value: "Other Authorised Circumstance", color: "blue", icon: "fa-solid fa-question" },
-      { key: "E", value: "Exlude", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "G", value: "Family Holiday", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "H", value: "Family Holiday (Agreed)", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "I", value: "Illness", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "J", value: "Intervier", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "M", value: "Medical / Dental", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "N", value: "No Reason yet PRovided", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "O", value: "Unauthrised Absence", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "U", value: "Late after Reg. Closed", color: "blue", icon: "fa-solid fa-minus" },
-      { key: "X", value: "Non-comp School Age Absence", color: "blue", icon: "fa-solid fa-minus" },
-    ];
-    this.lateKeys = "L";
-    this.hideComment = false;
-  }
-  get selectedItem() {
-    return this.data.find(item => item.selected);
-  }
-  get priorityButtons() {
-    return this.data.filter(item => item.priority !== undefined).sort((a, b) => a.priority - b.priority);
-  }
-  get renderButtons() {
-    const { selectedItem, priorityButtons } = this;
-    return [...(selectedItem ? [selectedItem] : priorityButtons.length ? priorityButtons : this.data.slice(0, 3))];
-  }
-  get lateKeysMap() {
-    return this.lateKeys.toLocaleLowerCase().split(",");
-  }
-  get isLate() {
-    var _a, _b;
-    return this.lateKeysMap.includes((_b = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase());
-  }
-  get dropdownMenuElement() {
-    return document.getElementById("attendance-dropdown-" + this._id);
-  }
-  get commentAreaElement() {
-    return document.getElementById("comment-" + this._id);
-  }
-  handleSelectItem(item, triggerChange = true, showComment = true) {
-    var _a, _b;
-    this.data = [...this.data.map(data => { var _a, _b; return (Object.assign(Object.assign({}, data), { selected: ((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === ((_b = data.key) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase()) })); })];
-    (_a = this.dropdownMenuElement) === null || _a === void 0 ? void 0 : _a.hide();
-    (_b = this.commentAreaElement) === null || _b === void 0 ? void 0 : _b.hide();
-    if (!this.isLate)
-      return triggerChange && this.changed();
-    !this.hideComment && showComment && this.commentArea();
-  }
-  changed() {
-    this.change.emit(this.selectedItem);
-  }
-  hasDataForKey(key) {
-    return !!this.data.find(item => item.key.toLocaleLowerCase() === key.toLocaleLowerCase());
-  }
-  handleKeyPress({ key }) {
-    if (!this.hasDataForKey(key))
-      return;
-    const item = this.data.find(item => { var _a; return ((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === (key === null || key === void 0 ? void 0 : key.toLocaleLowerCase()); });
-    this.handleSelectItem(item);
-  }
-  handleSave(lateMinutes, comment) {
-    this.data = [...this.data].map(item => {
-      var _a, _b, _c;
-      if (((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === ((_c = (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.toLocaleLowerCase())) {
-        return Object.assign(Object.assign({}, item), { lateMin: lateMinutes, comment });
-      }
-      return item;
-    });
-    this.changed();
-  }
-  dropdownMenu() {
-    var _a;
-    const dropdownMenu = generate.Generate.createComponent("bcm-attendance-actions-dropdown", {
-      id: "attendance-dropdown-" + this._id,
-      size: this.size,
-      data: this.data,
-      selectedKey: (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.key,
-      targetId: "attendance-dropdown-button-" + this._id,
-    });
-    dropdownMenu.addEventListener("bcm-attendance-actions-dropdown-change", ({ detail }) => {
-      this.handleSelectItem(detail);
-    });
-    dropdownMenu.show();
-  }
-  commentArea() {
-    var _a, _b;
-    const commentArea = generate.Generate.createComponent("bcm-attendance-actions-comment", {
-      id: "comment-" + this._id,
-      size: this.size,
-      isLate: this.isLate,
-      targetId: "comment-area-" + this._id,
-      selectedItem: this.selectedItem,
-      lateMinutes: (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.lateMin,
-      comment: (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.comment,
-    });
-    commentArea.addEventListener("bcm-attendance-actions-comment-change", ({ detail }) => {
-      this.handleSave(detail.lateMinutes, detail.comment);
-    });
-    commentArea.show();
-  }
-  async set(key, triggerChange = true) {
-    if (!this.hasDataForKey(key))
-      return;
-    const item = this.data.find(item => { var _a; return ((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === (key === null || key === void 0 ? void 0 : key.toLocaleLowerCase()); });
-    this.handleSelectItem(item, triggerChange, false);
-  }
-  async get() {
-    return this.selectedItem;
-  }
-  render() {
-    var _a, _b, _c;
-    const { selectedItem, renderButtons, disabled, hideComment, size } = this;
-    const { host, buttonContainer, button, dropdownButton, commentIcon, mainButton } = attendanceActionStyle({
-      selected: !!selectedItem,
-      size,
-      disabled,
-    });
-    const buttonStyle = !!selectedItem
-      ? generate.Generate.getTwColor({
-        color: (_a = selectedItem.color) !== null && _a !== void 0 ? _a : "blue",
-        tones: {
-          600: ["bg"],
-          700: ["hover-bg"],
-          800: ["active-bg"],
-        },
-        variable: "--bcm-attendance-actions-button",
-      })
-      : {};
-    const buttonAttributes = {
-      class: index$2.classnames(button(), mainButton()),
-      style: Object.assign({}, buttonStyle),
-      disabled,
-      type: "button",
-    };
-    const iconButtonAttributes = Object.assign(Object.assign({}, buttonAttributes), { class: index$2.classnames(button(), dropdownButton()) });
-    const isShowCommentIcon = !hideComment && !!selectedItem;
-    const commentTooltip = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.comment) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.lateMin) ? `${(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.comment) || ""}${(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.lateMin) ? ` (${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.lateMin} min) ` : ""}` : "";
-    return (index$1.h(index$1.Host, { class: host(), onKeyPress: this.handleKeyPress.bind(this) }, index$1.h("div", { class: buttonContainer() }, renderButtons === null || renderButtons === void 0 ? void 0 :
-      renderButtons.map(item => {
-        return (index$1.h("button", Object.assign({}, buttonAttributes, { onClick: () => this.handleSelectItem(item), title: item.value }), index$1.h("i", { class: index$2.classnames(item.icon || "fa-solid fa-minus", "!tw-leading-[inherit]") }), item.selected && index$1.h("span", { class: "tw-truncate" }, item.value)));
-      }), index$1.h("button", Object.assign({ id: "attendance-dropdown-button-" + this._id }, iconButtonAttributes, { onClick: () => this.dropdownMenu(), title: "More" }), index$1.h("i", { class: index$2.classnames("fa-solid fa-angle-down !tw-leading-[inherit]") }))), index$1.h("div", { id: "comment-area-" + this._id, class: index$2.classnames(commentIcon(), {
-        "tw-cursor-default": !isShowCommentIcon,
-        "tw-cursor-pointer": isShowCommentIcon,
-      }), onClick: () => isShowCommentIcon && this.commentArea() }, index$1.h("i", { title: isShowCommentIcon ? commentTooltip : "", class: index$2.classnames("fa-solid fa-comment", {
-        "tw-text-gray-400": !(((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.comment) || ((_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.lateMin)),
-        "tw-visible": isShowCommentIcon,
-        "tw-invisible": !isShowCommentIcon,
-      }) }))));
-  }
-  get el() { return index$1.getElement(this); }
-};
-BcmAttendanceActions.style = attendanceActionsCss;
-
-exports.bcm_attendance_actions = BcmAttendanceActions;

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

@@ -1,35 +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-06bf97b8.js');
-require('./package-92cfcafb.js');
-require('./colors-078851ec.js');
-require('./_commonjsHelpers-ed84c3ca.js');
-
-const attendanceCss = "@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-attendance{width:fit-content;display:inline-flex;align-items:center;flex-direction:row;gap:4px}.bcm-attendance__item{display:flex;flex-direction:row;align-items:center;gap:1px}.bcm-attendance__item-am,.bcm-attendance__item-pm{display:block;width:calc( calc( 12px + 1px ) / 2 );height:calc( 12px + 1px );background-color:var(--bcm-new-ds-color-blue-500)}.bcm-attendance__item-am:hover,.bcm-attendance__item-pm:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-attendance__item-am{border-top-left-radius:100px;border-bottom-left-radius:100px}.bcm-attendance__item-pm{border-top-right-radius:100px;border-bottom-right-radius:100px}.bcm-attendance__item-status-present{background-color:var(--bcm-new-ds-color-emerald-500)}.bcm-attendance__item-status-present:hover{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-attendance__item-status-late{background-color:var(--bcm-new-ds-color-amber-500)}.bcm-attendance__item-status-late:hover{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-attendance__item-status-absent{background-color:var(--bcm-new-ds-color-red-500)}.bcm-attendance__item-status-absent:hover{background-color:var(--bcm-new-ds-color-red-600)}.bcm-attendance__item-status-default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-attendance__item-status-default:hover{background-color:var(--bcm-new-ds-color-slate-400)}";
-
-const BcmAttendance = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this._id = generate.Generate.UID();
-    this.data = [];
-  }
-  render() {
-    const { data } = this;
-    const classPrefix = 'bcm-attendance';
-    return (index.h(index.Host, { class: classPrefix }, index.h("span", { hidden: true }, index.h("slot", null)), data.map(item => {
-      var _a, _b;
-      return index.h("div", { class: `${classPrefix}__item` }, index.h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM` }, index.h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), index.h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM` }, index.h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
-    })));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmAttendance.style = attendanceCss;
-
-exports.bcm_attendance = BcmAttendance;

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-c3a819ea.js');
-require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-06bf97b8.js');
-require('./number-helper-362f0e03.js');
-require('./string-helper-f9184277.js');
-require('./validators-07d7a0c9.js');
-require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-489c9b1a.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-92cfcafb.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-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-06bf97b8.js');
-const bcm = require('./bcm-489c9b1a.js');
-const index$1 = require('./index-95ae50d0.js');
-const stringHelper = require('./string-helper-f9184277.js');
-require('./package-92cfcafb.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}";
-
-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.Size.medium;
-    this.type = 'button';
-    this.color = undefined;
-    this.disabled = undefined;
-    this.direction = bcm.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.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.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;