bromcom-ui 2.9.1-rc.0 → 2.9.1-rc.2

package/dist/components/bcm-modal.js

@@ -16,9 +16,10 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.close = createEvent(this, "bcm-close", 7);
-    this.modalBeforeClose = createEvent(this, "bcm-modal-before-close", 7);
-    this.modalBeforeOpen = createEvent(this, "bcm-modal-before-open", 7);
+    this.close = createEvent(this, "bcm-close", 3);
+    this.modalClose = createEvent(this, "bcm-modal-close", 3);
+    this.modalBeforeClose = createEvent(this, "bcm-modal-before-close", 3);
+    this.modalBeforeOpen = createEvent(this, "bcm-modal-before-open", 3);
     this.modalSlots = {};
     this._id = Generate.UID();
     this.isShow = false;
@@ -67,6 +68,7 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (obj === null || obj === void 0 ? void 0 : obj.force) {
       this.isShow = false;
       this.close.emit(); // Deprecated
+      this.modalClose.emit();
       return;
     }
     this.modalBeforeClose.emit(this.el);
@@ -103,6 +105,7 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (e.target === this.el) {
       this.isShow = false;
       this.close.emit(); // Deprecated
+      this.modalClose.emit();
     }
   }
   _openHandler() {
@@ -155,7 +158,7 @@ const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "fullWidth": [1028, "full-width"],
     "hide": [64],
     "show": [64]
-  }, [[8, "click", "handleSubmit"], [4, "keydown", "keyboardNavigation"], [4, "bcm-modal-before-open", "showModal"], [4, "bcm-modal-before-close", "hideModal"]]]);
+  }, [[8, "click", "handleSubmit"], [4, "keydown", "keyboardNavigation"], [0, "bcm-modal-before-open", "showModal"], [0, "bcm-modal-before-close", "hideModal"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/bcm-shortcut.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmShortcut extends Components.BcmShortcut, HTMLElement {}
+export const BcmShortcut: {
+  prototype: BcmShortcut;
+  new (): BcmShortcut;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-shortcut.js

@@ -0,0 +1,76 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { a as Bcm } from './bcm.js';
+import { c as classnames } from './index2.js';
+
+const osKeys = {
+  ctrl: "⌘",
+  alt: "⌥",
+  shift: "⇧",
+  del: "⌫",
+  delete: "⌫",
+  backspace: "⌦",
+  enter: "⏎",
+  return: "⏎",
+};
+const BcmShortcut$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.isMac = /Mac/.test(window.navigator.userAgent);
+    this.hotkey = undefined;
+    this.color = "slate";
+    this.size = Bcm.Size.small;
+  }
+  getHotkey(key) {
+    if (!key) {
+      return "";
+    }
+    if (this.isMac && (key.includes(" ") || key.includes("+"))) {
+      const keys = key.split(/[\s+]+/);
+      return keys.map(k => osKeys[k] || k).join("");
+    }
+    else {
+      return key;
+    }
+  }
+  render() {
+    const { size, color, hotkey } = this;
+    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-content-display", "tw-block tw-h-fit tw-w-fit tw-rounded tw-border tw-border-solid tw-px-1", "tw-border-default-300 tw-bg-default-100 tw-text-default-700", "tw-text-center tw-font-medium tw-capitalize", {
+        "tw-text-2": size === Bcm.Size.small,
+        "tw-text-3": size === Bcm.Size.medium,
+        "tw-text-4": size === Bcm.Size.large,
+      }), style: Object.assign({}, Generate.getTwColor({ color })) }, this.getHotkey(hotkey)));
+  }
+}, [0, "bcm-shortcut", {
+    "hotkey": [1],
+    "color": [1],
+    "size": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-shortcut"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-shortcut":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmShortcut$1);
+      }
+      break;
+  } });
+}
+
+const BcmShortcut = BcmShortcut$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmShortcut, defineCustomElement };

package/dist/components/generate.js

@@ -5,7 +5,7 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
-const version = "2.9.1-rc.0";
+const version = "2.9.1-rc.2";
 
 /**
  * 'status' prop predefined values

package/dist/components/index.d.ts

@@ -74,6 +74,7 @@ export { BcmSelect as BcmSelect } from '../types/components/other_deprecated/sel
 export { BcmSelectBox as BcmSelectBox } from '../types/components/other_deprecated/select/select-box';
 export { BcmSelectGroup as BcmSelectGroup } from '../types/components/other_deprecated/select/group';
 export { BcmSelectOption as BcmSelectOption } from '../types/components/other_deprecated/select/option';
+export { BcmShortcut as BcmShortcut } from '../types/components/other/shortcut/shortcut';
 export { BcmSkeleton as BcmSkeleton } from '../types/components/molecules/skeleton/skeleton';
 export { BcmStep as BcmStep } from '../types/components/molecules/stepper/step';
 export { BcmStepper as BcmStepper } from '../types/components/molecules/stepper/stepper';

package/dist/components/index.js

@@ -82,6 +82,7 @@ export { BcmSelect, defineCustomElement as defineCustomElementBcmSelect } from '
 export { BcmSelectBox, defineCustomElement as defineCustomElementBcmSelectBox } from './bcm-select-box.js';
 export { BcmSelectGroup, defineCustomElement as defineCustomElementBcmSelectGroup } from './bcm-select-group.js';
 export { BcmSelectOption, defineCustomElement as defineCustomElementBcmSelectOption } from './bcm-select-option.js';
+export { BcmShortcut, defineCustomElement as defineCustomElementBcmShortcut } from './bcm-shortcut.js';
 export { BcmSkeleton, defineCustomElement as defineCustomElementBcmSkeleton } from './bcm-skeleton.js';
 export { BcmStep, defineCustomElement as defineCustomElementBcmStep } from './bcm-step.js';
 export { BcmStepper, defineCustomElement as defineCustomElementBcmStepper } from './bcm-stepper.js';

package/dist/components/list.js

@@ -112,7 +112,7 @@ const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selecte
       item.items.map((item) => (h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
 };
 
-const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, }) => {
+const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
@@ -126,7 +126,7 @@ const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, ch
       'flex-direction': 'column',
     };
   };
-  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } },
+  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
     data && searchable && (h("section", { class: "bcm-list__container-search" },
       h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
     h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } },
@@ -858,8 +858,10 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.bcmChecklist = createEvent(this, "bcm-checklist", 7);
     this.bcmSelected = createEvent(this, "bcm-selected", 7);
     this.change = createEvent(this, "bcm-change", 7);
-    this.open = createEvent(this, "bcm-open", 7);
-    this.close = createEvent(this, "bcm-close", 7);
+    this.open = createEvent(this, "bcm-open", 3);
+    this.close = createEvent(this, "bcm-close", 3);
+    this.listClose = createEvent(this, "bcm-list-close", 7);
+    this.listOpen = createEvent(this, "bcm-list-open", 7);
     this.debounce = null;
     this.debounceHandler = Generate.debounceInput(() => this.listenResize(), 300, false);
     this._id = Generate.UID();
@@ -1043,6 +1045,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     else {
       this.listScrollToTop();
       this.close.emit();
+      this.listClose.emit();
       await delay(100);
       this.unSelectOther();
     }
@@ -1560,6 +1563,13 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  handleTransitionEnd(e) {
+    const { isOpen, type } = this;
+    const propertName = e === null || e === void 0 ? void 0 : e.propertyName;
+    if (isOpen && type == "select" && propertName == "transform") {
+      this.listOpen.emit();
+    }
+  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
@@ -1587,7 +1597,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "--min-height": openedType ? "inherit" : this.minHeight,
       } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: classnames("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: classnames("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: classnames(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: classnames(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   get el() { return this; }
   static get watchers() { return {

package/dist/components/skeleton.js

@@ -2,41 +2,84 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
 import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import './bcm.js';
+import { c as ce } from './index5.js';
+
+const skeletonStyle = ce({
+  slots: {
+    host: "tw-flex tw-flex-row tw-items-center tw-justify-center tw-flex-shrink-0 tw-relative tw-overflow-hidden tw-bg-gray-200",
+  },
+  variants: {
+    variant: {
+      rect: {
+        host: "tw-rounded",
+      },
+      circle: {
+        host: "tw-rounded-full",
+      },
+    },
+    effect: {
+      pulse: {
+        host: "tw-animate-pulse",
+      },
+      ping: {
+        host: "tw-animate-ping",
+      },
+      none: {
+        host: "tw-animate-none",
+      },
+    },
+    hidden: {
+      true: {
+        host: "tw-hidden",
+      },
+      false: {
+        host: "tw-flex",
+      },
+    }
+  },
+  defaultVariants: {
+    variant: "rect",
+    effect: "pulse",
+    hidden: false,
+  },
+});
 
 const BcmSkeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this._id = Generate.UID();
-    this.loading = true;
-  }
-  componentDidLoad() {
-    var _a;
-    const parentElement = (_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement;
-    if (parentElement) {
-      const hidden = document.createElement("span");
-      hidden.setAttribute("id", `${this._id}-span`);
-      hidden.classList.add("tw-hidden");
-      hidden.innerHTML = `<slot />`;
-      parentElement.appendChild(hidden);
-      if (parentElement.isConnected) {
-        this.loading = false;
-        parentElement.querySelector(`#${this._id}-span`).remove();
-      }
-    }
+    this.effect = "pulse";
+    this.variant = "rect";
+    this.hidden = false;
+    this.width = "100%";
+    this.height = "16px";
+    this.marginBottom = null;
+    this.customStyles = {};
   }
   render() {
-    const SkeletonAnimate = () => {
-      return (h("div", { class: "tw-mx-auto tw-w-full tw-max-w-sm tw-rounded-md tw-border tw-border-blue-300 tw-p-4 tw-shadow" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-flex tw-animate-pulse tw-space-x-4" }, h("div", { class: "tw-h-10 tw-w-10 tw-rounded-full tw-bg-slate-200" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-col-span-2 tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-col-span-1 tw-h-2 tw-rounded tw-bg-slate-200" })), h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }))))));
-    };
-    return this.loading ? h(SkeletonAnimate, null) : h("slot", null);
+    const { variant, effect, width, height, marginBottom, customStyles, hidden } = this;
+    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, (width ? { width } : {})), (height ? { height } : {})), (marginBottom ? { marginBottom } : {})), (typeof customStyles === "string" ? JSON.parse(customStyles) : customStyles));
+    const { host } = skeletonStyle({ variant, effect, hidden });
+    return (h(Host, { class: host(), style: style }));
   }
-  get el() { return this; }
-}, [4, "bcm-skeleton", {
+}, [0, "bcm-skeleton", {
     "_id": [1537, "id"],
-    "loading": [1028]
+    "effect": [513],
+    "variant": [513],
+    "hidden": [516],
+    "width": [1],
+    "height": [1],
+    "marginBottom": [1, "margin-bottom"],
+    "customStyles": [1, "custom-styles"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/esm/{_commonjsHelpers-7002e5de.js → _commonjsHelpers-be0d4ec8.js}

@@ -37,4 +37,4 @@ function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { commonjsGlobal as a, getDefaultExportFromCjs as b, createCommonjsModule as c, getAugmentedNamespace as g };
+export { commonjsGlobal as a, getAugmentedNamespace as b, createCommonjsModule as c, getDefaultExportFromCjs as g };

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

@@ -2,11 +2,11 @@
  * 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-c80869fa.js';
-import './package-20c9971a.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { G as Generate } from './generate-3dda60a9.js';
+import './package-7587ad35.js';
+import './colors-e1c31f79.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}";
 

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

@@ -2,14 +2,14 @@
  * 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, S as StatusProps, T as TypeProps } from './generate-c80869fa.js';
-import { c as classnames } from './index-00c8a8f7.js';
-import { c as createStore } from './index-7e71bbc8.js';
-import { S as StringHelper } from './string-helper-b0e05041.js';
-import './package-20c9971a.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-3dda60a9.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { c as createStore } from './index-f38e3364.js';
+import { S as StringHelper } from './string-helper-5bd646f2.js';
+import './package-7587ad35.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
 import './bcm-d45dc47d.js';
 
 const { state } = createStore({

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

@@ -2,11 +2,11 @@
  * 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-c80869fa.js';
-import './package-20c9971a.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { G as Generate } from './generate-3dda60a9.js';
+import './package-7587ad35.js';
+import './colors-e1c31f79.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)}";
 

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

@@ -2,9 +2,9 @@
  * 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 { c as classnames } from './index-00c8a8f7.js';
-import './_commonjsHelpers-7002e5de.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import './_commonjsHelpers-be0d4ec8.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/esm/bcm-avatar_2.entry.js

@@ -2,20 +2,21 @@
  * 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-845ba523.js';
-import './validators-81296897.js';
-import { G as Generate } from './generate-c80869fa.js';
-import './number-helper-2eb7011a.js';
-import './string-helper-b0e05041.js';
-import './element-dragger-89bb52fd.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { C as ColorHelper } from './color-helper-c4fa9ebc.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-3dda60a9.js';
+import './number-helper-76d8d225.js';
+import './string-helper-5bd646f2.js';
+import './validators-a0f4d029.js';
+import './element-dragger-7ea06c76.js';
 import { a as Bcm } from './bcm-d45dc47d.js';
 import { c as ce } from './index-3bc8c6e3.js';
 import './colors-1d7854ea.js';
-import './utils-57652744.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
-import './package-20c9971a.js';
+import './utils-b3338faf.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-7587ad35.js';
 
 const avatarStyle = ce({
   slots: {

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-0615c2b8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 
 const BcmBox = class {
   constructor(hostRef) {

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

@@ -2,12 +2,12 @@
  * 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 { c as classnames } from './index-00c8a8f7.js';
-import { G as Generate } from './generate-c80869fa.js';
-import './_commonjsHelpers-7002e5de.js';
-import './package-20c9971a.js';
-import './colors-ebea297f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { G as Generate } from './generate-3dda60a9.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-7587ad35.js';
+import './colors-e1c31f79.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

@@ -2,14 +2,14 @@
  * 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-c80869fa.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import { G as Generate, s as snq } from './generate-3dda60a9.js';
 import { B as Bcm } from './bcm-d45dc47d.js';
-import { c as classnames } from './index-00c8a8f7.js';
-import { S as StringHelper } from './string-helper-b0e05041.js';
-import './package-20c9971a.js';
-import './colors-ebea297f.js';
-import './_commonjsHelpers-7002e5de.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { S as StringHelper } from './string-helper-5bd646f2.js';
+import './package-7587ad35.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.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}";