@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-50898.0 → 0.0.0-bugfix-dev-KB-50898.1

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { UserInterface, DateUtils as DateUtils$1, Action, WaitingChangeException, ApplicationContext, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, StringUtils as StringUtils$1, TimeFormatter, DataUnit, HTMLBuilder, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, FieldComparator, ArrayUtils as ArrayUtils$1, OverflowWatcher, OVERFLOWED_CLASS_NAME } from '@sankhyalabs/core';
+import { UserInterface, DateUtils as DateUtils$1, Action, WaitingChangeException, ApplicationContext, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, StringUtils as StringUtils$1, TimeFormatter, DataUnit, HTMLBuilder, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, FieldComparator, ArrayUtils as ArrayUtils$1, OverflowWatcher, OVERFLOWED_CLASS_NAME, KeyboardManager } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -1133,6 +1133,7 @@ const EzAlertList$1 = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this._container = undefined;
     this.alerts = [];
     this.enableDragAndDrop = undefined;
     this.enableExpand = true;
@@ -1141,7 +1142,9 @@ const EzAlertList$1 = class extends HTMLElement$1 {
     this.expanded = false;
   }
   observeOpened() {
-    this.manageOverlay();
+    if (this.opened) {
+      this.manageOverlay();
+    }
   }
   /**
    * Retorna o id do alerta a partir do título e do índice.
@@ -1268,7 +1271,7 @@ const EzAlertList$1 = class extends HTMLElement$1 {
   }
   get _element() { return this; }
   static get watchers() { return {
-    "opened": ["observeOpened"]
+    "_container": ["observeOpened"]
   }; }
   static get style() { return ezAlertListCss; }
 };
@@ -125680,10 +125683,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
   observeConfig(config) {
-    if (!config) {
-      return;
-    }
-    this._gridController.setColumnsState(config.columns);
+    this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
   updatePaginationTooltip() {
     if (!this._refPaginationLabelTooltip)
@@ -125741,21 +125741,29 @@ const EzGrid$1 = class extends HTMLElement$1 {
     return newConfig;
   }
   positionSelectionCounter() {
-    var _a;
-    if (this._gridSelectionCounter == undefined) {
+    var _a, _b;
+    if (!this._gridSelectionCounter)
       return;
-    }
-    if (this._showSelectionCounter) {
-      const boundingContainer = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      if (boundingContainer == undefined) {
-        return;
-      }
-      const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
-    }
-    else {
+    if (!this._showSelectionCounter) {
       this._gridSelectionCounter.style.bottom = '';
+      return;
+    }
+    const containerRect = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const selectionRect = (_b = this._gridSelectionCounter) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!containerRect || !selectionRect)
+      return;
+    const positionBottom = containerRect.bottom - 30;
+    this._gridSelectionCounter.style.bottom = document.body.clientHeight - positionBottom + 'px';
+    this._gridSelectionCounter.style.left = this.calculatePositionLeft(containerRect, selectionRect);
+  }
+  calculatePositionLeft(containerRect, selectionRect) {
+    let selectionStart = containerRect.left + (containerRect.width / 2);
+    const containerRightEdge = containerRect.left + this._container.clientWidth;
+    const selectionEnd = (selectionStart - (selectionRect.width / 2)) + selectionRect.width;
+    if (selectionEnd > containerRightEdge) {
+      selectionStart = containerRightEdge - (selectionRect.width / 2);
     }
+    return `${selectionStart}px`;
   }
   setEvents() {
     window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
@@ -126802,12 +126810,6 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc')
-      this.ezModalAction.emit(ModalAction$1.CANCEL);
-    if (event.key === 'Enter')
-      this.ezModalAction.emit(ModalAction$1.OK);
-  }
   cancelIsVisible() {
     return (this.cancelButtonStatus !== ModalButtonStatus$1.HIDDEN && this.cancelButtonLabel != undefined);
   }
@@ -126818,6 +126820,10 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction$1.LOAD);
     });
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezModalAction.emit.bind(ModalAction$1.OK))
+      .bind("Escape", this.ezModalAction.emit.bind(ModalAction$1.CANCEL))
+      .bind("Esc", this.ezModalAction.emit.bind(ModalAction$1.CANCEL));
   }
   focusLast() {
     if (this._okButton == undefined) {
@@ -127366,11 +127372,11 @@ const EzPopup$1 = class extends HTMLElement$1 {
   observeConfig() {
     this.manageOverflow();
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc')
-      this.opened = false;
-    if (event.key === 'Enter')
-      this.ezPopupAction.emit("OK");
+  componentDidLoad() {
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezPopupAction.emit.bind("OK"))
+      .bind("Escape", () => this.opened = false)
+      .bind("Esc", () => this.opened = false);
   }
   manageOverflow() {
     if (this.opened) {
@@ -127850,6 +127856,9 @@ const EzSearch$1 = class extends HTMLElement$1 {
     if (typeof value === "string" || value instanceof String) {
       return this._visibleOptions.find(o => o.value === value);
     }
+    if (value) {
+      return Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
+    }
     return value;
   }
   updateVisibleOptions() {
@@ -127948,7 +127957,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
   }
   scrollToOption(opt) {
     window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`div#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
+      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`div#item_${this.replaceHighlight(opt.value).replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
       if (liElem)
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });
@@ -127991,15 +128000,22 @@ const EzSearch$1 = class extends HTMLElement$1 {
     this._source = [];
     this.updateVisibleOptions();
   }
+  replaceHighlight(value) {
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    return (value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
+  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
-    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString()))
-      || (currentValue == undefined && newOption != undefined && "value" in newOption)) {
-      const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
+    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) === null || _b === void 0 ? void 0 : _b.toString()))
+      || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
+      const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
       this.value = adjustedOpt;
     }
     else {
+      this.setInputValue();
       this.resetOptions();
     }
     this._visibleOptions = [];
@@ -128109,7 +128125,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
       return;
     }
     this._lookupMode = true;
-    this.value = value;
+    this.value = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
   }
   loadOptionValue(argument) {
     var _a;
@@ -128464,22 +128480,38 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
     evt.stopPropagation();
     this.closeDropdown();
   }
+  resolveOffsetParentRect() {
+    var _a, _b;
+    const offsetParentRect = (_b = (_a = this.dropdownParent) === null || _a === void 0 ? void 0 : _a.offsetParent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const rectWithoutScroll = {
+      top: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.top) + scrollTop,
+      left: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.left) + scrollLeft,
+      bottom: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.bottom) + scrollTop,
+      right: (offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.right) + scrollLeft,
+      width: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.width,
+      height: offsetParentRect === null || offsetParentRect === void 0 ? void 0 : offsetParentRect.height
+    };
+    this.offsetParentRect = rectWithoutScroll;
+  }
   /**
    * Método responsável em posicionar o dropdown na tela.
    * Faz com que o dropdown se ajuste automaticamente ao espaco na tela
    */
   positionDropdown() {
+    var _a, _b, _c, _d, _e, _f;
     const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
     const rightButtonRect = _rightButton.getBoundingClientRect();
     const dropdownParentRect = _dropdownParent.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rightButtonRect.bottom;
-    const spaceAbove = rightButtonRect.top;
-    const spaceRight = window.innerWidth - rightButtonRect.right;
+    const spaceBelow = window.innerHeight - (rightButtonRect.bottom + ((_a = this.offsetParentRect) === null || _a === void 0 ? void 0 : _a.top));
+    const spaceAbove = rightButtonRect.top + ((_b = this.offsetParentRect) === null || _b === void 0 ? void 0 : _b.top);
+    const spaceRight = window.innerWidth - (rightButtonRect.left + ((_c = this.offsetParentRect) === null || _c === void 0 ? void 0 : _c.left));
     const spaceLeft = rightButtonRect.left;
     const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
     const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
-    let top = `${rightButtonRect.bottom + window.scrollY}px`;
-    let left = `${rightButtonRect.left + window.scrollX}px`;
+    let top = `${rightButtonRect.bottom - ((_d = this.offsetParentRect) === null || _d === void 0 ? void 0 : _d.top) + window.scrollY}px`;
+    let left = `${rightButtonRect.left - ((_e = this.offsetParentRect) === null || _e === void 0 ? void 0 : _e.left) + window.scrollX}px`;
     let bottom = 'auto';
     if (hasSpaceBelow) {
       bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
@@ -128487,7 +128519,7 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
       _dropdownParent.style.maxHeight = `${spaceAbove}px`;
     }
     if (hasSpaceRight) {
-      left = `${rightButtonRect.right - dropdownParentRect.width + window.scrollX}px`;
+      left = `${rightButtonRect.right - dropdownParentRect.width - ((_f = this.offsetParentRect) === null || _f === void 0 ? void 0 : _f.left) + window.scrollX}px`;
     }
     _dropdownParent.style.top = top;
     _dropdownParent.style.bottom = bottom;
@@ -128500,6 +128532,9 @@ const EzSplitButton$1 = class extends HTMLElement$1 {
   componentWillLoad() {
     this.setEvents();
   }
+  componentWillRender() {
+    this.resolveOffsetParentRect();
+  }
   componentDidLoad() {
     if (this._element)
       ElementIDUtils.addIDInfo(this._element);
@@ -129342,17 +129377,25 @@ const SplitPanel = class extends HTMLElement$1 {
     };
     return style;
   }
-  getGridTemplate() {
-    let template = '';
+  calcFreeSpacePercentage() {
     const inUseSpacePercentage = this._items.reduce((accumulator, currentValue) => {
       var _a;
       return accumulator + (((_a = currentValue.size) === null || _a === void 0 ? void 0 : _a.includes('%')) ? Number(currentValue.size.replace("%", "")) : 0);
     }, 0);
-    const itemsWithPercentageAmount = this._items.filter((item) => item.size === undefined).length;
+    const itemsWithoutSizeAmount = this._items.filter((item) => item.size === undefined).length;
+    if (!itemsWithoutSizeAmount || !inUseSpacePercentage) {
+      return null;
+    }
+    const freeSpacePercentage = ((100 - inUseSpacePercentage) / itemsWithoutSizeAmount);
+    return freeSpacePercentage;
+  }
+  getGridTemplate() {
+    let template = '';
+    const freeSpacePercentage = this.calcFreeSpacePercentage();
     this._items.forEach((col, index) => {
       let size = col.size || '1fr';
-      if (!col.size && inUseSpacePercentage > 0) {
-        size = `${(100 - inUseSpacePercentage) / itemsWithPercentageAmount}%`;
+      if (!col.size && freeSpacePercentage) {
+        size = `${freeSpacePercentage}%`;
       }
       if (index === this._items.length - 1) {
         template += ` ${size}`;
@@ -130392,7 +130435,7 @@ const TreeItem = (props) => {
     itemsList.push(treeItem);
   }
   return (h("ul", { class: level === 1 ? "first-level" : undefined },
-    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? 'tree-item-error' : ""}`, onClick: () => available && itemClick(treeItem) }, {
+    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem) }, {
       disabled,
       selected: treeItem.id === selectedId,
       [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
@@ -130400,11 +130443,25 @@ const TreeItem = (props) => {
       h("div", { class: "item-label-container" },
         h("div", { class: "item-icon-box" }, expandable &&
           h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })),
-        h("label", { class: "item-label" }, treeItem.label)),
-      h("div", { class: `tree-item-badge ${(treeItem.id !== selectedId) ? treeItem.badge : null}` }, treeItem.badge === 'error' ? (h("ez-icon", { id: `${treeItem.id}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" })) : null)),
+        h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)),
+      getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)),
     expanded
       && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };
+function getBadgeElement(itemId, badge, isSelectedItem) {
+  if (badge == undefined) {
+    return;
+  }
+  if (typeof badge === "string") {
+    return h("div", { class: `tree-item-badge ${isSelectedItem ? null : badge}` }, badge === "error" &&
+      h("ez-icon", { id: `${itemId}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" }));
+  }
+  if (badge.type === "text") {
+    return h("div", { id: `${itemId}-badge-text`, class: "tree-item-badge-text" }, badge.text);
+  }
+  return h("div", null,
+    h("ez-icon", { id: `${itemId}-badge-icon`, class: "tree-item-badge-icon", style: { "--ez-icon--color": `var(--ez-tree__badge--icon-color--${badge.iconColor || "default"})` }, iconName: badge.iconName }));
+}
 
 class Node$1 {
   constructor(tree, item, parent, isPlaceHolder = false) {
@@ -130648,7 +130705,7 @@ class Tree extends Node$1 {
   }
 }
 
-const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item-badge{width:16px;height:16px;background:transparent;border-radius:50%;transition:all 300ms ease-in-out;display:flex;align-items:center;justify-content:center}.tree-item-badge-error-icon{--ez-icon--color:white}.tree-item-badge.error{background:var(--color--error)}.tree-item-badge.warning{background:var(--color--warning)}.tree-item-badge.success{background:var(--color--success)}.item-label-container{display:flex;align-items:center}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding);justify-content:space-between}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
+const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree--font-weight--bold:var(--text-weight--large, 600);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);--ez-tree__badge--icon-color--default:var(--title--primary, #2B3A54);--ez-tree__badge--icon-color--error:var(--color--error, #da4453);--ez-tree__badge--icon-color--success:var(--color-alert--success-800, #157a00);--ez-tree__badge--icon-color--warning:var(--color--warning, #f2d410);--ez-tree__badge--icon-color--disabled:var(--text--disable, #AFB6C0);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item-badge{width:16px;height:16px;background:transparent;border-radius:50%;transition:all 300ms ease-in-out;display:flex;align-items:center;justify-content:center}.tree-item-badge-error-icon{--ez-icon--color:white}.tree-item-badge-text{font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item-badge.error{background:var(--color--error)}.tree-item-badge.warning{background:var(--color--warning)}.tree-item-badge.success{background:var(--color--success)}.item-label-container{display:flex;align-items:center}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding);justify-content:space-between}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.item-label--bold{font-weight:var(--ez-tree--font-weight--bold)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
 
 const EzTree$1 = class extends HTMLElement$1 {
   constructor() {
@@ -131586,7 +131643,7 @@ const MultiSelectionBoxMessage$1 = class extends HTMLElement$1 {
 
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
-const EzAlertList = /*@__PURE__*/proxyCustomElement(EzAlertList$1, [1,"ez-alert-list",{"alerts":[1040],"enableDragAndDrop":[516,"enable-drag-and-drop"],"enableExpand":[516,"enable-expand"],"itemRightSlotBuilder":[16],"opened":[1540],"expanded":[1540]}]);
+const EzAlertList = /*@__PURE__*/proxyCustomElement(EzAlertList$1, [1,"ez-alert-list",{"alerts":[1040],"enableDragAndDrop":[516,"enable-drag-and-drop"],"enableExpand":[516,"enable-expand"],"itemRightSlotBuilder":[16],"opened":[1540],"expanded":[1540],"_container":[32]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
 const EzBadge = /*@__PURE__*/proxyCustomElement(EzBadge$1, [1,"ez-badge",{"size":[513],"label":[513],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"position":[1040],"hasSlot":[32]}]);
 const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]);
@@ -131611,11 +131668,11 @@ const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[5
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"listMode":[1,"list-mode"],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"itemLeftSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"heightMode":[1,"height-mode"],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"],"scrim":[1]}]);
-const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]},[[8,"keydown","handleKeyDown"]]]);
+const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]);
 const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionList, [2,"ez-multi-selection-list",{"columnName":[1,"column-name"],"dataSource":[16],"useOptions":[1028,"use-options"],"options":[1040],"isTextSearch":[4,"is-text-search"],"filteredOptions":[32],"displayOptions":[32],"viewScenario":[32],"displayOptionToCheckAllItems":[32]}]);
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
-const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]},[[8,"keydown","handleKeyDown"]]]);
+const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
 const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
 const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"options":[1040],"suppressSearch":[4,"suppress-search"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);

package/dist/esm/ez-alert-list.entry.js

@@ -6,6 +6,7 @@ const ezAlertListCss = ":host {\n  display: flex;\n\n  /* Alert List */\n  \n  /
 const EzAlertList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this._container = undefined;
     this.alerts = [];
     this.enableDragAndDrop = undefined;
     this.enableExpand = true;
@@ -14,7 +15,9 @@ const EzAlertList = class {
     this.expanded = false;
   }
   observeOpened() {
-    this.manageOverlay();
+    if (this.opened) {
+      this.manageOverlay();
+    }
   }
   /**
    * Retorna o id do alerta a partir do título e do índice.
@@ -141,7 +144,7 @@ const EzAlertList = class {
   }
   get _element() { return getElement(this); }
   static get watchers() { return {
-    "opened": ["observeOpened"]
+    "_container": ["observeOpened"]
   }; }
 };
 EzAlertList.style = ezAlertListCss;

package/dist/esm/ez-grid.entry.js

@@ -120763,10 +120763,7 @@ const EzGrid = class {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
   observeConfig(config) {
-    if (!config) {
-      return;
-    }
-    this._gridController.setColumnsState(config.columns);
+    this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
   updatePaginationTooltip() {
     if (!this._refPaginationLabelTooltip)
@@ -120824,21 +120821,29 @@ const EzGrid = class {
     return newConfig;
   }
   positionSelectionCounter() {
-    var _a;
-    if (this._gridSelectionCounter == undefined) {
+    var _a, _b;
+    if (!this._gridSelectionCounter)
       return;
-    }
-    if (this._showSelectionCounter) {
-      const boundingContainer = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      if (boundingContainer == undefined) {
-        return;
-      }
-      const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
-    }
-    else {
+    if (!this._showSelectionCounter) {
       this._gridSelectionCounter.style.bottom = '';
+      return;
     }
+    const containerRect = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const selectionRect = (_b = this._gridSelectionCounter) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!containerRect || !selectionRect)
+      return;
+    const positionBottom = containerRect.bottom - 30;
+    this._gridSelectionCounter.style.bottom = document.body.clientHeight - positionBottom + 'px';
+    this._gridSelectionCounter.style.left = this.calculatePositionLeft(containerRect, selectionRect);
+  }
+  calculatePositionLeft(containerRect, selectionRect) {
+    let selectionStart = containerRect.left + (containerRect.width / 2);
+    const containerRightEdge = containerRect.left + this._container.clientWidth;
+    const selectionEnd = (selectionStart - (selectionRect.width / 2)) + selectionRect.width;
+    if (selectionEnd > containerRightEdge) {
+      selectionStart = containerRightEdge - (selectionRect.width / 2);
+    }
+    return `${selectionStart}px`;
   }
   setEvents() {
     window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));

package/dist/esm/ez-modal-container.entry.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-baa5e267.js';
+import { KeyboardManager } from '@sankhyalabs/core';
 
 var ModalAction;
 (function (ModalAction) {
@@ -31,12 +32,6 @@ const EzModalContainer = class {
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc')
-      this.ezModalAction.emit(ModalAction$1.CANCEL);
-    if (event.key === 'Enter')
-      this.ezModalAction.emit(ModalAction$1.OK);
-  }
   cancelIsVisible() {
     return (this.cancelButtonStatus !== ModalButtonStatus$1.HIDDEN && this.cancelButtonLabel != undefined);
   }
@@ -47,6 +42,10 @@ const EzModalContainer = class {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction$1.LOAD);
     });
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezModalAction.emit.bind(ModalAction$1.OK))
+      .bind("Escape", this.ezModalAction.emit.bind(ModalAction$1.CANCEL))
+      .bind("Esc", this.ezModalAction.emit.bind(ModalAction$1.CANCEL));
   }
   focusLast() {
     if (this._okButton == undefined) {

package/dist/esm/ez-popup.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-baa5e267.js';
-import { FloatingManager } from '@sankhyalabs/core';
+import { KeyboardManager, FloatingManager } from '@sankhyalabs/core';
 
 const ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--large, 24px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--extra-large, 24px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index, 24);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{box-sizing:border-box;width:100%;height:calc(100% - 44px)}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
@@ -25,11 +25,11 @@ const EzPopup = class {
   observeConfig() {
     this.manageOverflow();
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc')
-      this.opened = false;
-    if (event.key === 'Enter')
-      this.ezPopupAction.emit("OK");
+  componentDidLoad() {
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezPopupAction.emit.bind("OK"))
+      .bind("Escape", () => this.opened = false)
+      .bind("Esc", () => this.opened = false);
   }
   manageOverflow() {
     if (this.opened) {

package/dist/esm/ez-scroller_3.entry.js

@@ -242,7 +242,7 @@ const TreeItem = (props) => {
     itemsList.push(treeItem);
   }
   return (h("ul", { class: level === 1 ? "first-level" : undefined },
-    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? 'tree-item-error' : ""}`, onClick: () => available && itemClick(treeItem) }, {
+    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem) }, {
       disabled,
       selected: treeItem.id === selectedId,
       [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
@@ -250,11 +250,25 @@ const TreeItem = (props) => {
       h("div", { class: "item-label-container" },
         h("div", { class: "item-icon-box" }, expandable &&
           h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })),
-        h("label", { class: "item-label" }, treeItem.label)),
-      h("div", { class: `tree-item-badge ${(treeItem.id !== selectedId) ? treeItem.badge : null}` }, treeItem.badge === 'error' ? (h("ez-icon", { id: `${treeItem.id}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" })) : null)),
+        h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)),
+      getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)),
     expanded
       && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };
+function getBadgeElement(itemId, badge, isSelectedItem) {
+  if (badge == undefined) {
+    return;
+  }
+  if (typeof badge === "string") {
+    return h("div", { class: `tree-item-badge ${isSelectedItem ? null : badge}` }, badge === "error" &&
+      h("ez-icon", { id: `${itemId}-badge-error`, class: "tree-item-badge-error-icon", size: "x-small", style: { color: 'white' }, iconName: "alert-circle" }));
+  }
+  if (badge.type === "text") {
+    return h("div", { id: `${itemId}-badge-text`, class: "tree-item-badge-text" }, badge.text);
+  }
+  return h("div", null,
+    h("ez-icon", { id: `${itemId}-badge-icon`, class: "tree-item-badge-icon", style: { "--ez-icon--color": `var(--ez-tree__badge--icon-color--${badge.iconColor || "default"})` }, iconName: badge.iconName }));
+}
 
 class Node {
   constructor(tree, item, parent, isPlaceHolder = false) {
@@ -498,7 +512,7 @@ class Tree extends Node {
   }
 }
 
-const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item-badge{width:16px;height:16px;background:transparent;border-radius:50%;transition:all 300ms ease-in-out;display:flex;align-items:center;justify-content:center}.tree-item-badge-error-icon{--ez-icon--color:white}.tree-item-badge.error{background:var(--color--error)}.tree-item-badge.warning{background:var(--color--warning)}.tree-item-badge.success{background:var(--color--success)}.item-label-container{display:flex;align-items:center}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding);justify-content:space-between}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
+const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree--font-weight--bold:var(--text-weight--large, 600);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);--ez-tree__badge--icon-color--default:var(--title--primary, #2B3A54);--ez-tree__badge--icon-color--error:var(--color--error, #da4453);--ez-tree__badge--icon-color--success:var(--color-alert--success-800, #157a00);--ez-tree__badge--icon-color--warning:var(--color--warning, #f2d410);--ez-tree__badge--icon-color--disabled:var(--text--disable, #AFB6C0);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item-badge{width:16px;height:16px;background:transparent;border-radius:50%;transition:all 300ms ease-in-out;display:flex;align-items:center;justify-content:center}.tree-item-badge-error-icon{--ez-icon--color:white}.tree-item-badge-text{font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item-badge.error{background:var(--color--error)}.tree-item-badge.warning{background:var(--color--warning)}.tree-item-badge.success{background:var(--color--success)}.item-label-container{display:flex;align-items:center}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding);justify-content:space-between}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.item-label--bold{font-weight:var(--ez-tree--font-weight--bold)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
 
 const EzTree = class {
   constructor(hostRef) {