@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-78812.3 → 0.0.0-bugfix-dev-KB-76362.1

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

@@ -1,10 +1,11 @@
-import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, KeyboardManager, 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;
@@ -13,6 +14,19 @@ 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.
@@ -36,23 +50,8 @@ 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)
@@ -70,21 +69,7 @@ export class EzList {
    * Obtém o item selecionado.
    */
   async getSelection() {
-    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;
+    return this._selectedItem;
   }
   /**
    * Obtém a lista de items ou grupos.
@@ -99,22 +84,7 @@ export class EzList {
    * Limpa a seleção atual
    */
   async removeSelection() {
-    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;
-    }
+    this._selectedItem = undefined;
   }
   applyUUID(item) {
     if (!item.id) {
@@ -174,6 +144,10 @@ export class EzList {
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
+    this.bindKeyboardManager();
+  }
+  disconnectCallback() {
+    this.unbindKeyboardManager();
   }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
@@ -366,92 +340,58 @@ export class EzList {
     if (this.useGroups) {
       this.setSelection(this._listGroupItems[0].items[0]);
     }
-    {
+    else {
       this.setSelection(this._listItems[0]);
     }
   }
-  nextOption(selectedItem) {
-    let nextItem = undefined;
+  getFlatedItems() {
     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 === 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;
-      });
-    }
-    else {
-      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
-      if (itemIndex >= 0 && itemIndex < this._listItems.length) {
-        nextItem = this._listItems[itemIndex + 1];
-      }
+      const itemsGroups = this._listGroupItems.map(({ items }) => items).flat();
+      return itemsGroups;
     }
-    this.setSelection(nextItem, true);
+    return this._listItems;
   }
-  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;
-      });
+  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;
     }
-    else {
-      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
-      if (itemIndex > 0 && itemIndex < this._listItems.length) {
-        previousItem = this._listItems[itemIndex - 1];
-      }
+    const items = this.getFlatedItems();
+    const itemIndex = this.getSelectedIndex(items);
+    if (itemIndex < (items.length - 1)) {
+      const nextItem = items[itemIndex + 1];
+      this.setSelection(nextItem, true);
     }
-    this.setSelection(previousItem, true);
   }
-  keyDownHandler(event) {
-    if (!event.ctrlKey) {
-      event.preventDefault();
+  previousOption() {
+    const items = this.getFlatedItems();
+    const itemIndex = this.getSelectedIndex(items);
+    if (itemIndex > 0) {
+      const previousItem = items[itemIndex - 1];
+      this.setSelection(previousItem, true);
     }
-    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();
+  }
+  bindKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
+    if (this.disableShortcuts) {
+      return;
+    }
+    this._keyboardManager
+      .bind("ArrowDown", () => this.nextOption())
+      .bind("ArrowUp", () => this.previousOption())
+      .bind("shift+Tab", () => this.previousOption())
+      .bind("Tab", () => this.nextOption());
+  }
+  unbindKeyboardManager() {
+    this._keyboardManager
+      .unbind("ArrowDown")
+      .unbind("ArrowUp")
+      .unbind("shift+Tab")
+      .unbind("Tab");
   }
   getDivGroupId(groupName) {
     if (groupName) {
@@ -516,38 +456,46 @@ 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, 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: {
+    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: {
           '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 ' : ''), onDblClick: () => {
+          '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: () => {
           this.doubleClickItem(item);
         }, onClick: () => {
-          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.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.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, 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) }))))));
+        }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
   static get is() { return "ez-list"; }
   static get encapsulation() { return "scoped"; }
@@ -720,13 +668,32 @@ 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": {}
+      "_listGroupItems": {},
+      "_selectedItem": {}
     };
   }
   static get events() {
@@ -774,6 +741,25 @@ 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",
@@ -816,6 +802,38 @@ 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-modal/ez-modal.css

@@ -23,10 +23,6 @@
   background: rgba(0, 4, 12, 0.1);
 }
 
-.modal__screen-none{
-  background: none;
-}
-
 .modal__screen-medium{
   backdrop-filter: blur(4px);
   background: rgba(0, 4, 12, 0.4)

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

@@ -211,8 +211,8 @@ export class EzModal {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"medium\" | \"light\" | \"none\"",
-          "resolved": "\"light\" | \"medium\" | \"none\"",
+          "original": "\"medium\" | \"light\"",
+          "resolved": "\"light\" | \"medium\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -16,7 +16,6 @@ export class EzNumberInput {
     this.precision = undefined;
     this.prettyPrecision = undefined;
     this.mode = "regular";
-    this.autoFocus = false;
   }
   /**
    * Aplica o foco no campo.
@@ -157,17 +156,11 @@ export class EzNumberInput {
     const textValue = this.getTextValue(this.value) || '';
     if ((this._value || '') !== textValue) {
       this._value = textValue;
-      this._textInput.value = this._value;
     }
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -347,24 +340,6 @@ export class EzNumberInput {
         "attribute": "mode",
         "reflect": true,
         "defaultValue": "\"regular\""
-      },
-      "autoFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
-        },
-        "attribute": "auto-focus",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

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

@@ -9,6 +9,12 @@
   --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  
@@ -24,13 +30,14 @@
   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,6 +9,10 @@
   --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.*/
@@ -18,7 +22,7 @@
   /*@doc Define a família da fonte do título do popup.*/
   --ez-popup__title--font-family: var(--font-pattern, "Roboto");
   /*@doc Define o tamanho da fonte do título do popup.*/
-  --ez-popup__title--font-size: var(--title--large, 20px);
+  --ez-popup__title--font-size: var(--title--extra-large, 24px);
   /*@doc Define a cor da fonte do título do popup.*/
   --ez-popup__title--color: var(--title--primary, #2b3a54);
   /*@doc Define o peso da fonte do título do popup.*/
@@ -56,9 +60,9 @@
 }
 
 .popup__container {
-  width: 100%;
+  width: var(--ez-popup__container--width);
   max-height: 90%;
-  height: 100%;
+  height: var(--ez-popup__container--height);
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;

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  
   ***************/