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

package/dist/collection/components/ez-grid/ez-grid.js

@@ -94,10 +94,7 @@ export class EzGrid {
     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)
@@ -155,21 +152,29 @@ export class EzGrid {
     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/collection/components/ez-modal-container/ez-modal-container.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { KeyboardManager } from "@sankhyalabs/core";
 import ModalAction from "./modal-action";
 import ModalButtonStatus from "./modal-button-status";
 export class EzModalContainer {
@@ -11,12 +12,6 @@ export class EzModalContainer {
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc')
-      this.ezModalAction.emit(ModalAction.CANCEL);
-    if (event.key === 'Enter')
-      this.ezModalAction.emit(ModalAction.OK);
-  }
   cancelIsVisible() {
     return (this.cancelButtonStatus !== ModalButtonStatus.HIDDEN && this.cancelButtonLabel != undefined);
   }
@@ -27,6 +22,10 @@ export class EzModalContainer {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction.LOAD);
     });
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezModalAction.emit.bind(ModalAction.OK))
+      .bind("Escape", this.ezModalAction.emit.bind(ModalAction.CANCEL))
+      .bind("Esc", this.ezModalAction.emit.bind(ModalAction.CANCEL));
   }
   focusLast() {
     if (this._okButton == undefined) {
@@ -194,13 +193,4 @@ export class EzModalContainer {
         }
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/ez-popup/ez-popup.js

@@ -1,5 +1,5 @@
 import { Host, h, Fragment } from "@stencil/core";
-import { FloatingManager } from '@sankhyalabs/core';
+import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
 export class EzPopup {
   constructor() {
     this._sizeClasses = {
@@ -19,11 +19,11 @@ export class EzPopup {
   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) {
@@ -198,13 +198,4 @@ export class EzPopup {
         "methodName": "observeConfig"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/ez-search/ez-search.js

@@ -207,6 +207,9 @@ export class EzSearch {
     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() {
@@ -305,7 +308,7 @@ export class EzSearch {
   }
   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" });
     });
@@ -348,15 +351,22 @@ export class EzSearch {
     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 = [];
@@ -466,7 +476,7 @@ export class EzSearch {
       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;

package/dist/collection/components/ez-split-button/ez-split-button.js

@@ -65,22 +65,38 @@ export class EzSplitButton {
     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`;
@@ -88,7 +104,7 @@ export class EzSplitButton {
       _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;
@@ -101,6 +117,9 @@ export class EzSplitButton {
   componentWillLoad() {
     this.setEvents();
   }
+  componentWillRender() {
+    this.resolveOffsetParentRect();
+  }
   componentDidLoad() {
     if (this._element)
       ElementIDUtils.addIDInfo(this._element);

package/dist/collection/components/ez-split-panel/ez-split-panel.js

@@ -104,17 +104,25 @@ export class SplitPanel {
     };
     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}`;

package/dist/collection/components/ez-tree/ez-tree.css

@@ -24,6 +24,8 @@
   --ez-tree--selected--color: var(--color--primary, #008561);
   /*@doc Define a cor da fonte e do ícone quando desabilitado.*/
   --ez-tree--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Usado em fontes com peso maior (bold)*/
+  --ez-tree--font-weight--bold: var(--text-weight--large, 600);
 
   /* Item */
   /*@doc Define a altura de cada item.*/
@@ -47,6 +49,18 @@
   /*@doc Define o espaçamento interno do ícone.*/
   --ez-tree__item-icon-box--padding: var(--ez-tree__tree-item--padding);
 
+  /* Badge ícone - Cores */
+  /*@doc Cor de ícone de badge padrão.*/
+  --ez-tree__badge--icon-color--default: var(--title--primary, #2B3A54);
+  /*@doc Cor de ícone de badge de erro.*/
+  --ez-tree__badge--icon-color--error: var(--color--error, #da4453);
+  /*@doc Cor de ícone de badge sucesso.*/
+  --ez-tree__badge--icon-color--success: var(--color-alert--success-800, #157a00);
+  /*@doc Cor de ícone de badge de aviso.*/
+  --ez-tree__badge--icon-color--warning: var(--color--warning, #f2d410);
+  /*@doc Cor de ícone de badge desabilitado.*/
+  --ez-tree__badge--icon-color--disabled: var(--text--disable, #AFB6C0);  
+ 
   /*private*/
   display: flex;
   flex-direction: column;
@@ -85,6 +99,14 @@ ul.first-level {
   --ez-icon--color: white;
 }
 
+.tree-item-badge-text{
+  /*public*/
+  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);
 }
@@ -180,6 +202,10 @@ ul.first-level {
   color: var(--ez-tree--color);
 }
 
+.item-label--bold {
+  font-weight: var(--ez-tree--font-weight--bold);
+}
+
 .tree-item[selected] .item-label {
   /*public*/
   color: var(--ez-tree--selected--color);

package/dist/collection/components/ez-tree/interfaces/ITreeItemBadge.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-tree/subcomponents/TreeItem.js

@@ -14,11 +14,24 @@ export const TreeItem = (props) => {
   if (available) {
     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) }, {
+  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) }, {
     disabled,
     selected: treeItem.id === selectedId,
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
   }), 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)), expanded
+    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.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 }));
+}