bromcom-ui 2.8.1-rc.0 → 2.8.1-rc.1

package/dist/collection/components/organism/states/bcm-list2.states.js

@@ -2,9 +2,9 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { createStore } from '@stencil/store';
-import snq from 'snq';
-import { Generate } from '../../../helper/generate';
+import { createStore } from "@stencil/store";
+import snq from "snq";
+import { Generate } from "../../../helper/generate";
 const { state } = createStore({
   value: new Map(),
 });
@@ -56,12 +56,12 @@ const setValue = val => {
   };
   state.value.set(data.id, data);
 };
-const recursive = (data, options, parentId, parentIndex = '0.') => {
+const recursive = (data, options, parentId, parentIndex = "0.") => {
   let recData = [];
   if (data && data.length > 0) {
-    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
+    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
       ? { items: snq(() => recursive(item.items, options, item.id, `${parentIndex}${index}`), []) }
-      : { items: [] }))));
+      : { items: [] })), { ct: `${parentIndex}${index}` })));
   }
   return recData;
 };
@@ -72,10 +72,10 @@ const getValue = id => snq(() => state.value.get(id), {});
 const calculateTotalItems = (dataSource, treeview) => {
   let total = 0;
   dataSource.forEach(item => {
-    if (treeview || (!treeview && item.type != 'group')) {
+    if (treeview || (!treeview && item.type != "group")) {
       total += 1;
     }
-    if ((treeview || (!treeview && item.type == 'group')) && item.items) {
+    if ((treeview || (!treeview && item.type == "group")) && item.items) {
       total += calculateTotalItems(item.items, treeview);
     }
   });
@@ -205,7 +205,7 @@ const checkedProcess = (id, item, status) => {
     const treeview = value.options.treeview;
     if (item) {
       // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
-      if (treeview || (!treeview && item.type != 'group')) {
+      if (treeview || (!treeview && item.type != "group")) {
         if (!item.disabled) {
           if (status != undefined) {
             item.checked = status;
@@ -214,7 +214,7 @@ const checkedProcess = (id, item, status) => {
             item.checked = !item.checked;
           }
           item.itemObject.checked = item.checked;
-          item.indeterminate = item.checked ? 'determinate' : 'uncheck';
+          item.indeterminate = item.checked ? "determinate" : "uncheck";
         }
       }
       if (item.items) {
@@ -241,13 +241,13 @@ const indeterminateStatus = (id, itemId, items) => {
         let allUnchecked = true;
         if (item.items) {
           item.items.map(child => {
-            (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
+            (child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
             !child.checked && (allChecked = false);
           });
         }
-        const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+        const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
         item.indeterminate = indeterminateState;
-        item.checked = indeterminateState == 'determinate' ? true : false;
+        item.checked = indeterminateState == "determinate" ? true : false;
         item.itemObject.checked = item.checked;
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
@@ -399,11 +399,12 @@ const getCheckedList = (id, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       var _a;
+      const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
       let foundChild = [];
       let foundItem = [];
       if (item.checked) {
-        checkedList.push(item.itemObject);
-        foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+        checkedList.push(newItem);
+        foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
       }
       if (item.items) {
         const found = getCheckedList(id, item.items);
@@ -416,7 +417,7 @@ const getCheckedList = (id, items) => {
       }
       if (foundChild.length > 0) {
         if (foundItem.length == 0) {
-          foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+          foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
         }
         foundItem[0].items = foundChild;
         nestedResult.push(foundItem[0]);
@@ -484,10 +485,10 @@ const setClear = (id, items) => {
       var _a, _b, _c;
       item.checked && (item.checked = false);
       item.selected && (item.selected = false);
-      item.indeterminate && (item.indeterminate = 'uncheck');
+      item.indeterminate && (item.indeterminate = "uncheck");
       ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
       ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
-      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
+      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
       if (item.items) {
         setClear(id, item.items);
       }

package/dist/collection/helper/popover-helper.js

@@ -5,7 +5,7 @@
 import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 export class Popover {
-  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { } }) {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -51,6 +51,7 @@ export class Popover {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -128,6 +129,7 @@ export class Popover {
     this.id = targetId + "-popover-box";
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }

package/dist/collection/helper/tooltip-helper.js

@@ -6,7 +6,7 @@ import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 export class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { }, }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -55,6 +55,7 @@ export class Tooltip {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -132,6 +133,7 @@ export class Tooltip {
     this.size = size;
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }

package/dist/components/bcm-list.js

@@ -193,12 +193,12 @@ const setValue = val => {
   };
   state.value.set(data.id, data);
 };
-const recursive = (data, options, parentId, parentIndex = '0.') => {
+const recursive = (data, options, parentId, parentIndex = "0.") => {
   let recData = [];
   if (data && data.length > 0) {
-    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
+    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
       ? { items: snq(() => recursive(item.items, options, item.id, `${parentIndex}${index}`), []) }
-      : { items: [] }))));
+      : { items: [] })), { ct: `${parentIndex}${index}` })));
   }
   return recData;
 };
@@ -209,10 +209,10 @@ const getValue = id => snq(() => state.value.get(id), {});
 const calculateTotalItems = (dataSource, treeview) => {
   let total = 0;
   dataSource.forEach(item => {
-    if (treeview || (!treeview && item.type != 'group')) {
+    if (treeview || (!treeview && item.type != "group")) {
       total += 1;
     }
-    if ((treeview || (!treeview && item.type == 'group')) && item.items) {
+    if ((treeview || (!treeview && item.type == "group")) && item.items) {
       total += calculateTotalItems(item.items, treeview);
     }
   });
@@ -342,7 +342,7 @@ const checkedProcess = (id, item, status) => {
     const treeview = value.options.treeview;
     if (item) {
       // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
-      if (treeview || (!treeview && item.type != 'group')) {
+      if (treeview || (!treeview && item.type != "group")) {
         if (!item.disabled) {
           if (status != undefined) {
             item.checked = status;
@@ -351,7 +351,7 @@ const checkedProcess = (id, item, status) => {
             item.checked = !item.checked;
           }
           item.itemObject.checked = item.checked;
-          item.indeterminate = item.checked ? 'determinate' : 'uncheck';
+          item.indeterminate = item.checked ? "determinate" : "uncheck";
         }
       }
       if (item.items) {
@@ -378,13 +378,13 @@ const indeterminateStatus = (id, itemId, items) => {
         let allUnchecked = true;
         if (item.items) {
           item.items.map(child => {
-            (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
+            (child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
             !child.checked && (allChecked = false);
           });
         }
-        const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+        const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
         item.indeterminate = indeterminateState;
-        item.checked = indeterminateState == 'determinate' ? true : false;
+        item.checked = indeterminateState == "determinate" ? true : false;
         item.itemObject.checked = item.checked;
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
@@ -491,11 +491,12 @@ const getCheckedList = (id, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       var _a;
+      const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
       let foundChild = [];
       let foundItem = [];
       if (item.checked) {
-        checkedList.push(item.itemObject);
-        foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+        checkedList.push(newItem);
+        foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
       }
       if (item.items) {
         const found = getCheckedList(id, item.items);
@@ -508,7 +509,7 @@ const getCheckedList = (id, items) => {
       }
       if (foundChild.length > 0) {
         if (foundItem.length == 0) {
-          foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+          foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
         }
         foundItem[0].items = foundChild;
         nestedResult.push(foundItem[0]);
@@ -576,10 +577,10 @@ const setClear = (id, items) => {
       var _a, _b, _c;
       item.checked && (item.checked = false);
       item.selected && (item.selected = false);
-      item.indeterminate && (item.indeterminate = 'uncheck');
+      item.indeterminate && (item.indeterminate = "uncheck");
       ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
       ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
-      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
+      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
       if (item.items) {
         setClear(id, item.items);
       }
@@ -933,7 +934,7 @@ class ListTagControl {
             const { count, width } = args;
             if (count > 999)
               return '999+' + pluralize('item', count);
-            if (width > 100)
+            if (width >= 100)
               return `${count} ` + pluralize('item', count) + ' selected';
             if (width < 100)
               return `+${count < 10 ? count : '9'}`;
@@ -947,7 +948,7 @@ class ListTagControl {
                 text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
                 title: snq(() => otherTags
                   .map(tag => this.values.find(value => value.id == tag.dataset.id))
-                  .sort((a, b) => +a._i - +b._i)
+                  .sort((a, b) => +a.ct - +b.ct)
                   .slice(0, 15)
                   .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
                   .toString()

package/dist/components/bcm-modal.js

@@ -10,7 +10,7 @@ import { S as SlotTemplate } from './slot-template.js';
 import { G as Generate } from './generate.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const modalCss = "@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-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-color-primary-50);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-color-primary-400);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
+const modalCss = "@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-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-color-primary-400);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
 
 const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/bcm-popover.js

@@ -14,7 +14,7 @@ import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 
 class Popover {
-  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { } }) {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -60,6 +60,7 @@ class Popover {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -135,6 +136,7 @@ class Popover {
     this.id = targetId + "-popover-box";
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }
@@ -153,9 +155,10 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
     this.color = "white";
-    this.targetId = undefined;
     this.openDelay = 0;
     this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
     this.popover = undefined;
   }
   emitShow() {
@@ -174,6 +177,7 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       trigger: this.trigger,
       openDelay: this.openDelay,
       closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
       emitShow: () => this.emitShow(),
       emitHide: () => this.emitHide(),
     });
@@ -188,6 +192,9 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popover.placement = placement;
     this.popover.color = color;
     this.popover.trigger = trigger;
+    this.popover.openDelay = this.openDelay;
+    this.popover.closeDelay = this.closeDelay;
+    this.popover.autoHide = this.autoHide;
     this.popover.update();
   }
   disconnectedCallback() {
@@ -214,9 +221,10 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "trigger": [1],
     "open": [1028],
     "color": [1],
-    "targetId": [1, "target-id"],
     "openDelay": [2, "open-delay"],
     "closeDelay": [2, "close-delay"],
+    "autoHide": [4, "auto-hide"],
+    "targetId": [1, "target-id"],
     "popover": [32],
     "show": [64],
     "hide": [64],

package/dist/components/bcm-stepper.js

@@ -201,7 +201,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const lineClasses = item => classnames("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
-      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.onStepChange(step) })),
+      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.next(step - 1) })),
       items.length > index + 1 && h("div", { class: lineClasses(item) }),
     ])), h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => h("bcm-step", Object.assign({}, item))) : h("slot", null)))));
   }

package/dist/components/generate.js

@@ -25,7 +25,7 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.8.1-rc.0";
+const version = "2.8.1-rc.1";
 
 function snq(callback, defaultValue) {
     try {

package/dist/components/menu.js

@@ -14,7 +14,7 @@ import './element-dragger.js';
 import './bcm.js';
 import { I as IsLoad } from './is-load-decorator.js';
 
-const menuCss = "@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-menu{--bcm-menu-color-default:var(--bcm-new-ds-color-slate-600);--bcm-menu-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-default:var(--bcm-new-ds-color-slate-400);--bcm-menu-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-menu-icon-color-hover:var(--bcm-new-ds-color-slate-500);--bcm-menu-color-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active:var(--bcm-new-ds-color-blue-500);--bcm-menu-icon-color-active:var(--bcm-new-ds-color-white);--bcm-menu-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-focus-visible:var(--bcm-new-ds-color-blue-600);--bcm-menu-icon-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-menu-icon-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-hover:var(--bcm-new-ds-color-blue-600);--bcm-menu-icon-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-focus-visible:var(--bcm-new-ds-color-blue-700);--bcm-menu-icon-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-active-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-active:var(--bcm-new-ds-color-blue-800);--bcm-menu-icon-color-active-active:var(--bcm-new-ds-color-white);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;position:relative;width:210px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);transition:background-color 0.1s ease-in-out, width 0.3s ease-in-out}.bcm-menu__container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:16px}.bcm-menu__item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;font:inherit;cursor:pointer;color:inherit;background-color:inherit;padding:0;margin:0;border:none;outline:none;text-decoration:none}.bcm-menu__item:hover,.bcm-menu__item:focus,.bcm-menu__item:active{outline:none;text-decoration:none}.bcm-menu__item--is-sub{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover);border-radius:4px}.bcm-menu__item--is-sub .bcm-menu__item-link-icon,.bcm-menu__item--is-sub .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:4px;transition:background-color 0.1s ease-in-out, padding 0.3s ease-in-out;color:var(--bcm-menu-color-default);background-color:var(--bcm-menu-background-color-default)}.bcm-menu__item-link-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;min-width:24px;max-width:24px}.bcm-menu__item-link-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bcm-menu__item-link-text--collapse{opacity:0}.bcm-menu__item-link-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:10px;height:100%;order:0;width:24px;transform:rotate(0deg);transition:transform 0.2s ease-in-out;margin-right:-8px}.bcm-menu__item-link-toggle--collapse{transform:rotate(-180deg)}.bcm-menu__item-link .bcm-menu__item-link-icon,.bcm-menu__item-link .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-default)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-focus-visible)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-active)}.bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-submenu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:12px;display:none}.bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu__item-submenu--open{display:flex}.bcm-menu__size-small{padding:8px;font-size:12px;line-height:calc(14px + 8px)}.bcm-menu__size-medium{padding:16px;font-size:14px;line-height:calc(16px + 8px)}.bcm-menu__size-large{padding:16px;font-size:16px;line-height:calc(18px + 8px)}.bcm-menu__collapse-button{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active);display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:14px;border-radius:100px;position:absolute;top:23px;right:-8px;width:18px;height:18px;cursor:pointer;transition:background-color 0.1s ease-in-out, transform 0.3s ease}.bcm-menu__collapse-button:hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__collapse-button:focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__collapse-button:active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__collapse-button--collapsed{transform:rotate(-180deg)}.bcm-menu__collapse{width:64px}.bcm-menu__collapse .bcm-menu__item-link{padding:4px}.bcm-menu--linked{position:absolute;z-index:10800;top:0;left:0;opacity:0;visibility:hidden;width:fit-content;min-height:50px;max-height:500px;height:auto;overflow-y:auto;padding:12px}.bcm-menu--linked.bcm-menu__open{opacity:1;visibility:visible}.bcm-menu--linked .bcm-menu__container{gap:4px}.bcm-menu--linked .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item .bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}";
+const menuCss = "@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-menu{--bcm-menu-color-default:var(--bcm-new-ds-color-slate-700);--bcm-menu-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-menu-icon-color-default:var(--bcm-new-ds-color-slate-600);--bcm-menu-color-hover:var(--bcm-new-ds-color-slate-800);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-50);--bcm-menu-icon-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-menu-color-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active:var(--bcm-color-primary-500);--bcm-menu-icon-color-active:var(--bcm-new-ds-color-white);--bcm-menu-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-focus-visible:var(--bcm-color-primary-600);--bcm-menu-icon-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-menu-icon-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-menu-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-hover:var(--bcm-color-primary-400);--bcm-menu-icon-color-active-hover:var(--bcm-new-ds-color-white);--bcm-menu-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-focus-visible:var(--bcm-color-primary-700);--bcm-menu-icon-color-active-focus-visible:var(--bcm-new-ds-color-white);--bcm-menu-color-active-active:var(--bcm-new-ds-color-white);--bcm-menu-background-color-active-active:var(--bcm-color-primary-800);--bcm-menu-icon-color-active-active:var(--bcm-new-ds-color-white);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;position:relative;width:210px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);transition:background-color 0.1s ease-in-out, width 0.3s ease-in-out}.bcm-menu__container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:16px}.bcm-menu__item{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;font:inherit;cursor:pointer;color:inherit;background-color:inherit;padding:0;margin:0;border:none;outline:none;text-decoration:none}.bcm-menu__item:hover,.bcm-menu__item:focus,.bcm-menu__item:active{outline:none;text-decoration:none}.bcm-menu__item--is-sub{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover);border-radius:4px}.bcm-menu__item--is-sub .bcm-menu__item-link-icon,.bcm-menu__item--is-sub .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:4px;transition:background-color 0.1s ease-in-out, padding 0.3s ease-in-out;color:var(--bcm-menu-color-default);background-color:var(--bcm-menu-background-color-default)}.bcm-menu__item-link-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;min-width:24px;max-width:24px}.bcm-menu__item-link-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bcm-menu__item-link-text--collapse{opacity:0}.bcm-menu__item-link-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:10px;height:100%;order:0;width:24px;transform:rotate(0deg);transition:transform 0.2s ease-in-out;margin-right:-8px}.bcm-menu__item-link-toggle--collapse{transform:rotate(-180deg)}.bcm-menu__item-link .bcm-menu__item-link-icon,.bcm-menu__item-link .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-default)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:hover:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-hover)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:active:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:focus-visible:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-focus-visible)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active){color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-icon,.bcm-menu__item-link:disabled:not(.bcm-menu__item-link--disabled):not(.bcm-menu__item-link--active) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled){color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled) .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):hover .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-hover)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):focus-visible .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-focus-visible)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-icon,.bcm-menu__item-link--active:not(.bcm-menu__item-link--disabled):active .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-active-active)}.bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu__item-submenu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;padding:12px;display:none}.bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu__item-submenu--open{display:flex}.bcm-menu__size-small{padding:8px;font-size:12px;line-height:calc(14px + 8px)}.bcm-menu__size-medium{padding:16px;font-size:14px;line-height:calc(16px + 8px)}.bcm-menu__size-large{padding:16px;font-size:16px;line-height:calc(18px + 8px)}.bcm-menu__collapse-button{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active);display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;font-size:14px;border-radius:100px;position:absolute;top:23px;right:-8px;width:18px;height:18px;cursor:pointer;transition:background-color 0.1s ease-in-out, transform 0.3s ease}.bcm-menu__collapse-button:hover{color:var(--bcm-menu-color-active-hover);background-color:var(--bcm-menu-background-color-active-hover)}.bcm-menu__collapse-button:focus-visible{color:var(--bcm-menu-color-active-focus-visible);background-color:var(--bcm-menu-background-color-active-focus-visible)}.bcm-menu__collapse-button:active{color:var(--bcm-menu-color-active-active);background-color:var(--bcm-menu-background-color-active-active)}.bcm-menu__collapse-button--collapsed{transform:rotate(-180deg)}.bcm-menu__collapse{width:64px}.bcm-menu__collapse .bcm-menu__item-link{padding:4px}.bcm-menu--linked{position:absolute;z-index:10800;top:0;left:0;opacity:0;visibility:hidden;width:fit-content;min-height:50px;max-height:500px;height:auto;overflow-y:auto;padding:12px}.bcm-menu--linked.bcm-menu__open{opacity:1;visibility:visible}.bcm-menu--linked .bcm-menu__container{gap:4px}.bcm-menu--linked .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-slate-50);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item .bcm-menu__item-submenu .bcm-menu__item-link{--bcm-menu-background-color-default:var(--bcm-new-ds-color-white);--bcm-menu-background-color-hover:var(--bcm-new-ds-color-slate-100)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled{cursor:not-allowed;color:var(--bcm-menu-color-disabled);background-color:var(--bcm-menu-background-color-disabled)}.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-icon,.bcm-menu--linked .bcm-menu__item-submenu-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-submenu-link:not(.bcm-menu--linked .bcm-menu__item-submenu-link--active) .bcm-menu__item-link--disabled .bcm-menu__item-link-toggle{color:var(--bcm-menu-icon-color-disabled)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active){background-color:var(--bcm-menu-background-color-default)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):hover{color:var(--bcm-menu-color-hover);background-color:var(--bcm-menu-background-color-hover)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):focus-visible{color:var(--bcm-menu-color-focus-visible);background-color:var(--bcm-menu-background-color-focus-visible)}.bcm-menu--linked .bcm-menu__item-link:not(:disabled) .bcm-menu--linked .bcm-menu__item-link:not(.bcm-menu--linked .bcm-menu__item-link--active):active{color:var(--bcm-menu-color-active);background-color:var(--bcm-menu-background-color-active)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/components/tooltip-helper.js

@@ -13,7 +13,7 @@ import './number-helper.js';
 import { a as Bcm } from './bcm.js';
 
 class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { }, }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -62,6 +62,7 @@ class Tooltip {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -137,6 +138,7 @@ class Tooltip {
     this.size = size;
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }

package/dist/components/tooltip.js

@@ -27,6 +27,7 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.size = Bcm.Size.medium;
     this.openDelay = 0;
     this.closeDelay = 0;
+    this.autoHide = false;
     this.targetId = undefined;
     this.tooltip = undefined;
   }
@@ -46,6 +47,7 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       size: this.size,
       openDelay: this.openDelay,
       closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
       emitShow: () => this.emitShow(),
       emitHide: () => this.emitHide(),
     });
@@ -61,6 +63,7 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.tooltip.size = this.size;
     this.tooltip.openDelay = this.openDelay;
     this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.autoHide = this.autoHide;
     this.tooltip.update();
   }
   disconnectedCallback() {
@@ -89,6 +92,7 @@ const BcmTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "size": [1],
     "openDelay": [2, "open-delay"],
     "closeDelay": [2, "close-delay"],
+    "autoHide": [4, "auto-hide"],
     "targetId": [1, "target-id"],
     "tooltip": [32],
     "show": [64],

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

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
-import { G as Generate } from './generate-3e284764.js';
+import { G as Generate } from './generate-de5e04cf.js';
 import './colors-44c95e7e.js';
 import './_commonjsHelpers-3016b722.js';
 

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

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
-import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-3e284764.js';
+import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate-de5e04cf.js';
 import { c as classnames } from './index-ed9652af.js';
 import { c as createStore } from './index-93e36fdb.js';
 import { S as StringHelper } from './string-helper-6bd24967.js';

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

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
-import { G as Generate } from './generate-3e284764.js';
+import { G as Generate } from './generate-de5e04cf.js';
 import './colors-44c95e7e.js';
 import './_commonjsHelpers-3016b722.js';
 

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

@@ -5,10 +5,10 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-39133086.js';
 import { C as ColorHelper } from './color-helper-e8ce23d7.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-3e284764.js';
-import { N as NumberHelper } from './number-helper-ca1092d7.js';
+import { G as Generate } from './generate-de5e04cf.js';
+import { N as NumberHelper } from './number-helper-8de373ee.js';
 import './string-helper-6bd24967.js';
-import './validators-c025ec38.js';
+import './validators-c8be2c83.js';
 import './element-dragger-89bb52fd.js';
 import { a as Bcm } from './bcm-9f50af9c.js';
 import { c as classnames } from './index-ed9652af.js';

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

@@ -4,7 +4,7 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
 import { c as classnames } from './index-ed9652af.js';
-import { G as Generate } from './generate-3e284764.js';
+import { G as Generate } from './generate-de5e04cf.js';
 import './_commonjsHelpers-3016b722.js';
 import './colors-44c95e7e.js';
 

package/dist/esm/bcm-button-group.entry.js

@@ -3,7 +3,7 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-39133086.js';
-import { G as Generate, s as snq } from './generate-3e284764.js';
+import { G as Generate, s as snq } from './generate-de5e04cf.js';
 import { B as Bcm } from './bcm-9f50af9c.js';
 import { c as classnames } from './index-ed9652af.js';
 import { S as StringHelper } from './string-helper-6bd24967.js';