@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-76362.0 → 0.0.0-bugfix-dev-KB-75609.0

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

@@ -21,10 +21,10 @@
   --ez-list__item--color: var(--title--primary, #2b3a54);
 
   /* @doc Define o estilo borda inferior do item da lista. */
-  --ez-list__item--border-bottom: none;
+  --ez-list__item--border-bottom;
 
   /* @doc Define a cor da borda inferior do item da lista. */
-  --ez-list__item--border-bottom-color: none;
+  --ez-list__item--border-bottom-color;
 
   /* @doc Define o estilo do texto do item da lista. */
   --ez-list__item--font-family: var(--font-pattern, "Roboto");
@@ -110,7 +110,7 @@ p {
   display: grid;
   grid-template-columns: minmax(0px, auto) minmax(0px, auto);
   place-items: center;
-  border-top: 1px solid #fff;
+  border-top: 1px dashed #fff;
   justify-content: space-between;
 
   /*public*/
@@ -177,7 +177,7 @@ p {
 
 .draggable-list li > div {
   /*public*/
-  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);
+  padding: var(--space--3xs, 4px) var(--space--3xs, 4px);
   margin: var(--ez-list__item--margin);
 }
 
@@ -347,7 +347,7 @@ p {
   max-height: 100%;
   outline: none;
   scrollbar-width: thin;
-  overflow: auto;
+
   /*public*/
   scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
 }

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

@@ -1,11 +1,10 @@
-import { ElementIDUtils, KeyboardManager, StringUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { Fragment, Host, h } from '@stencil/core';
 export class EzList {
   constructor() {
     this._listItemsHistory = [];
     this._listItems = [];
     this._listGroupItems = [];
-    this._selectedItem = undefined;
     this.dataSource = [];
     this.listMode = 'regular';
     this.useGroups = false;
@@ -14,19 +13,6 @@ export class EzList {
     this.itemSlotBuilder = undefined;
     this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
-    this.disableShortcuts = false;
-  }
-  /**
-   * Seleciona o próximo item.
-   */
-  async selectNextItem() {
-    this.nextOption();
-  }
-  /**
-   * Seleciona o item anterior.
-   */
-  async selectPreviousItem() {
-    this.previousOption();
   }
   /**
    * Limpa o histórico da lista.
@@ -50,8 +36,23 @@ export class EzList {
    */
   async setSelection(selectedItem, scrollToOption) {
     if (selectedItem && this.ezSelectable) {
-      this._selectedItem = Object.assign({}, selectedItem);
       this.ezSelectItem.emit(selectedItem);
+      if (this.useGroups) {
+        let newList = [...this._listGroupItems];
+        newList.forEach(groupItem => {
+          groupItem.items.forEach(item => {
+            item.selected = item.id === selectedItem.id;
+          });
+        });
+        this._listGroupItems = newList;
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.forEach(item => {
+          item.selected = item.id === selectedItem.id;
+        });
+        this._listItems = newList;
+      }
       if (scrollToOption) {
         let liElem = this.useGroups
           ? this._groupContainer.querySelector('li#item_' + selectedItem.id)
@@ -69,7 +70,21 @@ export class EzList {
    * Obtém o item selecionado.
    */
   async getSelection() {
-    return this._selectedItem;
+    let selectedItem;
+    if (this.useGroups) {
+      this._listGroupItems.every(group => {
+        let item = group.items.find(item => item.selected == true);
+        if (item) {
+          selectedItem = item;
+          return false;
+        }
+        return true;
+      });
+    }
+    else {
+      selectedItem = this._listItems.find(item => item.selected == true);
+    }
+    return selectedItem;
   }
   /**
    * Obtém a lista de items ou grupos.
@@ -84,7 +99,22 @@ export class EzList {
    * Limpa a seleção atual
    */
   async removeSelection() {
-    this._selectedItem = undefined;
+    if (this.useGroups) {
+      let newList = [...this._listGroupItems];
+      newList.forEach(groupItem => {
+        groupItem.items.forEach(item => {
+          item.selected = false;
+        });
+      });
+      this._listGroupItems = newList;
+    }
+    else {
+      let newList = [...this._listItems];
+      newList.forEach(item => {
+        item.selected = false;
+      });
+      this._listItems = newList;
+    }
   }
   applyUUID(item) {
     if (!item.id) {
@@ -144,10 +174,6 @@ export class EzList {
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
-    this.bindKeyboardManager();
-  }
-  disconnectCallback() {
-    this.unbindKeyboardManager();
   }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
@@ -340,58 +366,92 @@ export class EzList {
     if (this.useGroups) {
       this.setSelection(this._listGroupItems[0].items[0]);
     }
-    else {
+    {
       this.setSelection(this._listItems[0]);
     }
   }
-  getFlatedItems() {
+  nextOption(selectedItem) {
+    let nextItem = undefined;
     if (this.useGroups) {
-      const itemsGroups = this._listGroupItems.map(({ items }) => items).flat();
-      return itemsGroups;
-    }
-    return this._listItems;
-  }
-  getSelectedIndex(items) {
-    const itemIndex = items.findIndex(item => { var _a; return item.id === ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.id); });
-    return itemIndex;
-  }
-  nextOption() {
-    if (!this._selectedItem) {
-      this.selectFirstItem();
-      return;
+      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
+        let item = undefined;
+        let itemIndex = group.items.findIndex(item => item.id == selectedItem.id);
+        if (itemIndex != undefined && itemIndex != -1) {
+          if (itemIndex === group.items.length - 1) {
+            if (groupIndex + 1 <= listGroupItems.length - 1) {
+              item = { label: listGroupItems[groupIndex + 1].items[0].label };
+            }
+          }
+          else {
+            item = { label: group.items[itemIndex + 1].label };
+          }
+        }
+        if (item != undefined) {
+          nextItem = item;
+          return false;
+        }
+        return true;
+      });
     }
-    const items = this.getFlatedItems();
-    const itemIndex = this.getSelectedIndex(items);
-    if (itemIndex < (items.length - 1)) {
-      const nextItem = items[itemIndex + 1];
-      this.setSelection(nextItem, true);
+    else {
+      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
+      if (itemIndex >= 0 && itemIndex < this._listItems.length) {
+        nextItem = this._listItems[itemIndex + 1];
+      }
     }
+    this.setSelection(nextItem, true);
   }
-  previousOption() {
-    const items = this.getFlatedItems();
-    const itemIndex = this.getSelectedIndex(items);
-    if (itemIndex > 0) {
-      const previousItem = items[itemIndex - 1];
-      this.setSelection(previousItem, true);
+  previousOption(selectedItem) {
+    let previousItem = undefined;
+    if (this.useGroups) {
+      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
+        let item = undefined;
+        let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
+        if (itemIndex != undefined && itemIndex != -1) {
+          if (itemIndex === 0) {
+            if (groupIndex - 1 >= 0) {
+              item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
+            }
+          }
+          else {
+            item = { label: group.items[itemIndex - 1].label };
+          }
+        }
+        if (item != undefined) {
+          previousItem = item;
+          return false;
+        }
+        return true;
+      });
     }
-  }
-  bindKeyboardManager() {
-    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
-    if (this.disableShortcuts) {
-      return;
+    else {
+      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
+      if (itemIndex > 0 && itemIndex < this._listItems.length) {
+        previousItem = this._listItems[itemIndex - 1];
+      }
     }
-    this._keyboardManager
-      .bind("ArrowDown", () => this.nextOption())
-      .bind("ArrowUp", () => this.previousOption())
-      .bind("shift+Tab", () => this.previousOption())
-      .bind("Tab", () => this.nextOption());
+    this.setSelection(previousItem, true);
   }
-  unbindKeyboardManager() {
-    this._keyboardManager
-      .unbind("ArrowDown")
-      .unbind("ArrowUp")
-      .unbind("shift+Tab")
-      .unbind("Tab");
+  keyDownHandler(event) {
+    if (!event.ctrlKey) {
+      event.preventDefault();
+    }
+    this.getSelection().then(selectedItem => {
+      if (selectedItem) {
+        switch (event.key) {
+          case 'ArrowDown':
+            this.nextOption(selectedItem);
+            break;
+          case 'ArrowUp':
+            this.previousOption(selectedItem);
+            break;
+        }
+      }
+      else {
+        this.selectFirstItem();
+      }
+    });
+    event.stopPropagation();
   }
   getDivGroupId(groupName) {
     if (groupName) {
@@ -456,46 +516,38 @@ export class EzList {
   doubleClickItem(item) {
     this.ezDoubleClick.emit(item);
   }
-  onClickItem(item) {
-    this.setSelection(item);
-    this.ezClickItem.emit(item);
-  }
   render() {
-    return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0 }, this._listGroupItems.map(group => {
-      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => {
-        var _a;
-        return (h("li", Object.assign({ id: 'item_' + item.id, class: {
-            'selectable-container': this.ezSelectable,
-            'hover-feedback': this.hoverFeedback,
-          }, key: 'item_' + item.id }, {
-          [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
-        }), h("div", { class: 'draggable' + (((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.id) === item.id ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => {
-            this.doubleClickItem(item);
-          }, onClick: () => {
-            this.onClickItem(item);
-          }, onDragLeave: () => {
-            group.sort ? undefined : this.removeOverClass();
-          }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
-            group.sort ? undefined : this.onDragOverItem(event);
-          }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item'))));
-      })), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
-          this.onDragOverLastIndex(event);
-        }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
-    }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0 }, h("ul", { class: "draggable-list" }, this._listItems.map((item, index) => {
-      var _a, _b;
-      return (h("li", Object.assign({ id: 'item_' + item.id, class: {
+    return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
+        this.keyDownHandler(event);
+      } }, this._listGroupItems.map(group => {
+      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
-          'selected-item': ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.id) === item.id,
-          'hover-feedback': this.hoverFeedback && ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b.id) !== item.id,
-        }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onDblClick: () => {
+          'hover-feedback': this.hoverFeedback,
+        }, key: 'item_' + item.id }, {
+        [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => {
           this.doubleClickItem(item);
         }, onClick: () => {
-          this.onClickItem(item);
-        }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))));
-    }), this.ezDraggable &&
-      h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+          this.setSelection(item);
+        }, onDragLeave: () => {
+          group.sort ? undefined : this.removeOverClass();
+        }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
+          group.sort ? undefined : this.onDragOverItem(event);
+        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
           this.onDragOverLastIndex(event);
-        }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
+        }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
+    }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+        this.keyDownHandler(event);
+      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
+        'selectable-container': this.ezSelectable,
+        'hover-feedback': this.hoverFeedback,
+      }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onDblClick: () => {
+        this.doubleClickItem(item);
+      }, onClick: () => {
+        this.setSelection(item);
+      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+        this.onDragOverLastIndex(event);
+      }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
   static get is() { return "ez-list"; }
   static get encapsulation() { return "scoped"; }
@@ -668,32 +720,13 @@ export class EzList {
         "attribute": "hover-feedback",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "disableShortcuts": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Desabilita os atalhos de teclado."
-        },
-        "attribute": "disable-shortcuts",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
       "_listItems": {},
-      "_listGroupItems": {},
-      "_selectedItem": {}
+      "_listGroupItems": {}
     };
   }
   static get events() {
@@ -741,25 +774,6 @@ export class EzList {
             }
           }
         }
-      }, {
-        "method": "ezClickItem",
-        "name": "ezClickItem",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido sempre que um item da lista for clicado."
-        },
-        "complexType": {
-          "original": "ListItem",
-          "resolved": "ListItem",
-          "references": {
-            "ListItem": {
-              "location": "local"
-            }
-          }
-        }
       }, {
         "method": "ezCheckChange",
         "name": "ezCheckChange",
@@ -802,38 +816,6 @@ export class EzList {
   }
   static get methods() {
     return {
-      "selectNextItem": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Seleciona o pr\u00F3ximo item.",
-          "tags": []
-        }
-      },
-      "selectPreviousItem": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Seleciona o item anterior.",
-          "tags": []
-        }
-      },
       "clearHistory": {
         "complexType": {
           "signature": "() => Promise<void>",

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

@@ -9,12 +9,6 @@
   --ez-popover__box--background-color: var(--background--xlight, #fff);
   /*@doc Define a camada de visibilidade do popover.*/
   --ez-popover__box--z-index: var(--most-visible, 3);
-  /*@doc Define a altura do popover.*/
-  --ez-popover__height: fit-content;
-  /*@doc Define a altura máxima do popover.*/
-  --ez-popover__max-height: fit-content;
-  /*@doc Define a margin do popover.*/
-  --ez-popover__margin: 0;
 
   /***************
      host style  
@@ -30,14 +24,13 @@
   z-index: var(--ez-popover__box--z-index);
   display: flex;
   flex-direction: column;
-  
+
+  height: fit-content;
+
   /*public*/
-  height: var(--ez-popover__height);
-  max-height: var(--ez-popover__max-height);
   background-color: var(--ez-popover__box--background-color);
   border-radius: var(--ez-popover__box--border-radius);
   box-shadow: var(--ez-popover__box--box-shadow);
-  margin: var(--ez-popover__margin);
 }
 
 .popover__box--fit-content {

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

@@ -9,10 +9,6 @@
   --ez-popup__container--color: var(--title--primary, #2b3a54);
   /*@doc Define o espaçamento do container do popup.*/
   --ez-popup__container--padding: var(--space--large, 24px);
-  /*@doc Define a largura do container do popup.*/
-  --ez-popup__container--width: 100%;
-  /*@doc Define a altura do container do popup.*/
-  --ez-popup__container--height: 100%;
 
   /* Popup Header */
   /*@doc Define o espaçamento inferior do cabeçalho do popup.*/
@@ -60,9 +56,9 @@
 }
 
 .popup__container {
-  width: var(--ez-popup__container--width);
+  width: 100%;
   max-height: 90%;
-  height: var(--ez-popup__container--height);
+  height: 100%;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;

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

@@ -62,14 +62,7 @@ export class EzPopup {
     });
   }
   getGridSize() {
-    if (!this.size) {
-      return this._sizeClasses["medium"];
-    }
-    if (!this._sizeClasses[this.size]) {
-      this._element.style.setProperty("--ez-popup__container--width", this.size);
-      return "";
-    }
-    return this._sizeClasses[this.size];
+    return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
   handlePopupHeight() {
     return this.heightMode === 'auto' ? 'popup__container--auto' : '';
@@ -103,8 +96,8 @@ export class EzPopup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | string",
-          "resolved": "string",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {}
         },
         "required": false,

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

@@ -85,7 +85,7 @@
   --ez-search__scrollbar--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a largura da barra de rolagem do componente.*/
   --ez-search__scrollbar--width: var(--space--medium, 12px);
-  
+
   /***************
      host style  
   ***************/

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

@@ -372,7 +372,7 @@ export class EzSearch {
   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, '');
+    return String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
   }
   selectOption(newOption) {
     var _a, _b;

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -51,6 +51,20 @@
   /*@doc Define o espaçamento direito do label.*/
   --text-area__label--padding-right: 12px;
 
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --text-area__scrollbar--width: var(--space--medium, 12px);
+
   /***************
   host style  
   ***************/
@@ -77,6 +91,9 @@ textarea {
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);
   margin-top: calc(var(--space--medium, 12px) + 4px);
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
 }
 
 textarea:focus {
@@ -92,6 +109,38 @@ textarea:disabled {
   cursor: not-allowed;
 }
 
+textarea::-webkit-scrollbar {
+  background-color: var(--text-area__scrollbar--color-background);
+
+  width: var(--text-area__scrollbar--width);
+  max-width: var(--text-area__scrollbar--width);
+  min-width: var(--text-area__scrollbar--width);
+}
+
+textarea::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-default);
+  border-radius: var(--text-area__scrollbar--border-radius);
+}
+
+textarea::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-background);
+  border-radius: var(--text-area__scrollbar--border-radius);
+}
+
+textarea::-webkit-scrollbar-thumb:vertical:hover,
+textarea::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-hover);
+}
+
+textarea::-webkit-scrollbar-thumb:vertical:active,
+textarea::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-clicked);
+}
+
 .textarea {
   /*private*/
   width: 100%;