bromcom-ui 2.12.0-test.0 → 2.12.0

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

@@ -1,70 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './package-255a905d.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-
-const accordionCss = "@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:block}";
-
-const BcmAccordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._id = Generate.UID();
-    this.multi = false;
-  }
-  componentDidRender() {
-    if (!this.multi)
-      this.checkExpandedCount();
-  }
-  checkExpandedCount() {
-    var _a, _b;
-    const accordion = this.el.querySelectorAll('.bcm-expansion-panel');
-    if (accordion) {
-      const checkExpandedCount = Array.from(accordion)
-        .map((accordion) => accordion.expanded)
-        .filter(Boolean).length;
-      if (checkExpandedCount > 1) {
-        const getLastExpandedId = (_b = (_a = Array.from(accordion).filter((accordion) => accordion.expanded)) === null || _a === void 0 ? void 0 : _a.pop()) === null || _b === void 0 ? void 0 : _b.id;
-        Array.from(accordion).forEach((accordion) => {
-          if (accordion.id !== getLastExpandedId) {
-            accordion.expanded = false;
-          }
-        });
-      }
-    }
-  }
-  open(event) {
-    if (this.multi)
-      return;
-    const id = event.detail;
-    const accordion = this.el.querySelectorAll('.bcm-expansion-panel');
-    if (accordion) {
-      accordion.forEach((accordion) => {
-        if (accordion.id !== id) {
-          accordion.expanded = false;
-        }
-      });
-    }
-  }
-  isLoad(event) {
-    var _a, _b, _c;
-    if (!this.multi) {
-      var parentId = ((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id) || null;
-      var nodeName = ((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.nodeName) || null;
-      if (nodeName == 'BCM-EXPANSION-PANEL' && this._id == parentId) {
-        this.checkExpandedCount();
-      }
-    }
-  }
-  render() {
-    return (h(Host, { id: this._id }, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-BcmAccordion.style = accordionCss;
-
-export { BcmAccordion as bcm_accordion };

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

@@ -1,326 +0,0 @@
-/*!
- * 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 './color-helper-c0bb1d8a.js';
-import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './number-helper-f6f2817c.js';
-import './string-helper-85990695.js';
-import './validators-2052b679.js';
-import './element-dragger-89bb52fd.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
-import { c as classnames } from './index-b84bc8c9.js';
-import { c as ce } from './index-3bc8c6e3.js';
-import './colors-1d7854ea.js';
-import './utils-57652744.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.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 = 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) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "bcm-attendance-change", 3);
-    this._id = Generate.UID();
-    this.size = Bcm.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.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.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.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: classnames(button(), mainButton()),
-      style: Object.assign({}, buttonStyle),
-      disabled,
-      type: "button",
-    };
-    const iconButtonAttributes = Object.assign(Object.assign({}, buttonAttributes), { class: 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 (h(Host, { class: host(), onKeyPress: this.handleKeyPress.bind(this) }, h("div", { class: buttonContainer() }, renderButtons === null || renderButtons === void 0 ? void 0 :
-      renderButtons.map(item => {
-        return (h("button", Object.assign({}, buttonAttributes, { onClick: () => this.handleSelectItem(item), title: item.value }), h("i", { class: classnames(item.icon || "fa-solid fa-minus", "!tw-leading-[inherit]") }), item.selected && h("span", { class: "tw-truncate" }, item.value)));
-      }), h("button", Object.assign({ id: "attendance-dropdown-button-" + this._id }, iconButtonAttributes, { onClick: () => this.dropdownMenu(), title: "More" }), h("i", { class: classnames("fa-solid fa-angle-down !tw-leading-[inherit]") }))), h("div", { id: "comment-area-" + this._id, class: classnames(commentIcon(), {
-        "tw-cursor-default": !isShowCommentIcon,
-        "tw-cursor-pointer": isShowCommentIcon,
-      }), onClick: () => isShowCommentIcon && this.commentArea() }, h("i", { title: isShowCommentIcon ? commentTooltip : "", class: 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 getElement(this); }
-};
-BcmAttendanceActions.style = attendanceActionsCss;
-
-export { BcmAttendanceActions as bcm_attendance_actions };

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

@@ -1,31 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './package-255a905d.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.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) {
-    registerInstance(this, hostRef);
-    this._id = Generate.UID();
-    this.data = [];
-  }
-  render() {
-    const { data } = this;
-    const classPrefix = 'bcm-attendance';
-    return (h(Host, { class: classPrefix }, h("span", { hidden: true }, h("slot", null)), data.map(item => {
-      var _a, _b;
-      return h("div", { class: `${classPrefix}__item` }, h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM` }, h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM` }, h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
-    })));
-  }
-  get el() { return getElement(this); }
-};
-BcmAttendance.style = attendanceCss;
-
-export { BcmAttendance as bcm_attendance };

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

@@ -1,205 +0,0 @@
-/*!
- * 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-c0bb1d8a.js';
-import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-bcc4b036.js';
-import './number-helper-f6f2817c.js';
-import './string-helper-85990695.js';
-import './validators-2052b679.js';
-import './element-dragger-89bb52fd.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
-import { c as ce } from './index-3bc8c6e3.js';
-import './colors-1d7854ea.js';
-import './utils-57652744.js';
-import './colors-df32bb43.js';
-import './_commonjsHelpers-be0d4ec8.js';
-import './package-255a905d.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 });
-      }
-      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-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);
-    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 };