@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-6165.0 → 0.0.0-bugfix-dev-KB-17130.0

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -1,28 +1,25 @@
-import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager, ObjectUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
-import { ApplicationUtils, CSSVarsUtils } from "../../utils";
-import { REQUIRED_INFO } from "../../utils/constants";
+import { CSSVarsUtils } from "../../utils";
 export class EzComboBox {
   constructor() {
     this._changeDeboucingTimeout = null;
-    this._limitCharsToSearch = 3;
     this._deboucingTime = 300;
     this._maxWidthValue = 0;
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
-    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
     this._lookupMode = false;
     this._preSelection = undefined;
     this._visibleOptions = undefined;
     this._startLoading = false;
     this._showLoading = true;
     this._criteria = undefined;
+    this.limitCharsToSearch = 3;
     this.value = undefined;
     this.label = undefined;
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
-    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -30,7 +27,9 @@ export class EzComboBox {
     this.suppressEmptyOption = false;
     this.canShowError = true;
     this.mode = "regular";
+    this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
   }
   observeErrorMessage() {
     var _a;
@@ -44,7 +43,7 @@ export class EzComboBox {
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
       try {
-        if (this.searchMode && typeof newValue === "string") {
+        if (typeof newValue === "string") {
           this.setInputValue();
           return;
         }
@@ -207,7 +206,7 @@ export class EzComboBox {
   }
   updateVisibleOptions() {
     let opts = this._source || [];
-    if (!this.searchMode && this._criteria) {
+    if (this._criteria) {
       const upperCriteria = this._criteria.toUpperCase();
       opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
     }
@@ -282,7 +281,7 @@ export class EzComboBox {
     return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
   }
   nextOption() {
-    if (this.searchMode && !this.isOptionsVisible()) {
+    if (!this.isOptionsVisible()) {
       return;
     }
     this.showOptions();
@@ -305,9 +304,6 @@ export class EzComboBox {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
-    else {
-      this.controlListWithOnlyOne();
-    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -326,7 +322,6 @@ export class EzComboBox {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
-          this.controlEmptySearch();
         }
       }
       else {
@@ -334,10 +329,6 @@ export class EzComboBox {
       }
     }
   }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -349,11 +340,6 @@ export class EzComboBox {
     else {
       this.resetOptions();
     }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-      this.clearSource();
-    }
-    this.setFocus();
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -389,93 +375,6 @@ export class EzComboBox {
   clearSearch() {
     this.value = null;
   }
-  controlListWithOnlyOne() {
-    var _a;
-    if (this.searchMode) {
-      const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
-      if ((source === null || source === void 0 ? void 0 : source.length) === 1) {
-        this.selectOption(source[0]);
-      }
-    }
-  }
-  controlEmptySearch() {
-    var _a;
-    if (this.searchMode) {
-      if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
-        this.clearSearch();
-        ApplicationUtils.info(this._textEmptyList);
-      }
-      else {
-        this.controlListWithOnlyOne();
-      }
-    }
-  }
-  validateDescriptionValue() {
-    if (!this.searchMode || StringUtils.isEmpty(this.value)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    if (StringUtils.isEmpty(value)) {
-      return;
-    }
-    this.loadDescriptionValue(value);
-  }
-  async loadDescriptionValue(argument) {
-    var _a, _b;
-    if (argument == undefined) {
-      return;
-    }
-    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this.loadOptionValue(argument);
-      return;
-    }
-    const searchArgument = {
-      mode: SearchMode.PREDICTIVE,
-      argument
-    };
-    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
-    if (source == undefined) {
-      return;
-    }
-    if (source instanceof Promise) {
-      source.then((result) => {
-        this.setDescriptionValue(result);
-      });
-    }
-    else {
-      this.setDescriptionValue(source);
-    }
-  }
-  setDescriptionValue(source) {
-    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
-    if (value == undefined || !Object.keys(value).length) {
-      this.showNoResultMessage();
-      return;
-    }
-    this._lookupMode = true;
-    this.value = value;
-  }
-  loadOptionValue(argument) {
-    var _a;
-    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
-    if (source != undefined) {
-      this.selectOption(source);
-    }
-    else {
-      this.showNoResultMessage();
-    }
-  }
-  async showNoResultMessage() {
-    this.clearSearch();
-    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
-  }
-  getFieldLabel() {
-    var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
-  }
   resetOptions() {
     this.hideOptions();
     this._criteria = undefined;
@@ -501,12 +400,7 @@ export class EzComboBox {
         });
       }
     }
-    if (this.searchMode) {
-      this.updateSource([]);
-    }
-    else {
-      this.loadOptions(SearchMode.PRELOAD);
-    }
+    this.loadOptions(SearchMode.PRELOAD);
   }
   componentDidRender() {
     var _a;
@@ -516,7 +410,6 @@ export class EzComboBox {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
-    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -536,7 +429,7 @@ export class EzComboBox {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
+    this.showOptions();
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -548,40 +441,17 @@ export class EzComboBox {
       return;
     }
     const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = Number(argument || undefined);
     if (!this._criteria) {
       this._textInput.value = event.data || argument;
     }
     this._criteria = argument;
     if (argument) {
-      if (this.searchMode) {
-        this._showLoading = false;
-        this.clearSource();
-        if (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
-          this._showLoading = true;
-          this._changeDeboucingTimeout = window.setTimeout(() => {
-            this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
-          }, this._deboucingTime);
-          this.showOptions();
-        }
-        else {
-          this.hideOptions();
-        }
-      }
-      else {
-        this.updateVisibleOptions();
-        this.showOptions();
-      }
+      this.updateVisibleOptions();
+      this.showOptions();
     }
     else {
       this.hideOptions();
-      if (this.searchMode) {
-        this._showLoading = false;
-        this.clearSource();
-      }
-      else {
-        this.updateVisibleOptions();
-      }
+      this.updateVisibleOptions();
     }
   }
   clearDeboucingTimeout() {
@@ -591,9 +461,7 @@ export class EzComboBox {
     }
   }
   onTextInputClickHandler() {
-    if (!this.searchMode) {
-      this.showOptions();
-    }
+    this.showOptions();
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -625,7 +493,6 @@ export class EzComboBox {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -635,17 +502,15 @@ export class EzComboBox {
     //event.stopPropagation();
   }
   onTextInputFocusOutHandler() {
-    this.cancelPreselection();
+    if (this.hideErrorOnFocusOut)
+      this.cancelPreselection();
   }
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   render() {
-    var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
-      ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
       && this._visibleOptions.length === 0
       && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
       && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.showOptionValue
@@ -666,6 +531,24 @@ export class EzComboBox {
   }
   static get properties() {
     return {
+      "limitCharsToSearch": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o limite de caracteres m\u00EDnimo para realizar uma pesquisa"
+        },
+        "attribute": "limit-chars-to-search",
+        "reflect": false,
+        "defaultValue": "3"
+      },
       "value": {
         "type": "string",
         "mutable": true,
@@ -761,23 +644,6 @@ export class EzComboBox {
         "attribute": "error-message",
         "reflect": true
       },
-      "searchMode": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true ativa o modo pesquisa do ez-combo-box."
-        },
-        "attribute": "search-mode",
-        "reflect": false
-      },
       "showSelectedValue": {
         "type": "boolean",
         "mutable": false,
@@ -914,6 +780,24 @@ export class EzComboBox {
         "reflect": true,
         "defaultValue": "\"regular\""
       },
+      "hideErrorOnFocusOut": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente."
+        },
+        "attribute": "hide-error-on-focus-out",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "listOptionsPosition": {
         "type": "unknown",
         "mutable": false,
@@ -932,6 +816,24 @@ export class EzComboBox {
           "tags": [],
           "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
         }
+      },
+      "isTextSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a pesquisa \u00E9 do tipo texto."
+        },
+        "attribute": "is-text-search",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -48,7 +48,7 @@
   --dialog__success--background-color: var(--color--alert-success-500, #00523c);
   
   /*@doc Define a camada que o dialog será exibido.*/
-  --dialog-z-index: var(--most-visible, 3);
+  --dialog-z-index: var(--elevation--100, 100);
   /*@doc Contém a imagem do ícone de alerta.*/
   --dialog--warning__image: url('data: image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg"><path d="M 7.5,0 0,13 h 15 z m 0,2.73684 5.1341,8.89476 H 2.36591 Z M 6.81818,5.47368 V 8.21053 H 8.18182 V 5.47368 Z m 0,4.10527 V 10.9474 H 8.18182 V 9.57895"/></svg>');
   /*@doc Contém a imagem do ícone crítico.*/

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

@@ -1,4 +1,4 @@
-import { h, forceUpdate } from "@stencil/core";
+import { h, forceUpdate, } from '@stencil/core';
 import { DialogType } from "./DialogType";
 import { ElementIDUtils, FloatingManager } from "@sankhyalabs/core";
 class Message {
@@ -17,10 +17,12 @@ class Message {
 }
 export class EzDialog {
   constructor() {
+    this.PRIMARY_BUTTON_ID = "EZ_DIALOG_PRIMARY_BUTTON";
     this.labelConfirm = 'Sim';
     this.labelCancel = 'Não';
     this.btnConfirmDanger = false;
     this._messageQueue = [];
+    this._canFocusOnPrimaryBtn = false;
     this.confirm = false;
     this.dialogType = undefined;
     this.message = undefined;
@@ -29,8 +31,17 @@ export class EzDialog {
     this.ezTitle = undefined;
     this.beforeClose = undefined;
   }
-  observeConfig() {
+  observeConfig(newValue, oldValue) {
     this.manageOverflow();
+    //Eh preciso verificar se gouve de fato mudança do estado opened de FALSE para TRUE
+    if (newValue && !oldValue) {
+      this._canFocusOnPrimaryBtn = true;
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      this.handleButtonClick(false);
+    }
   }
   manageOverflow() {
     if (this.opened) {
@@ -146,17 +157,32 @@ export class EzDialog {
   }
   componentDidRender() {
     this.manageOverlay();
+    this.focusOnDialog();
+    this.handleFocusOnPrimaryButton();
+  }
+  focusOnDialog() {
     const dialog = this._element.shadowRoot.querySelector('.overlay .dialog');
     if (dialog instanceof HTMLDivElement) {
       dialog.style.outline = 'none';
       dialog.focus();
     }
   }
+  handleFocusOnPrimaryButton() {
+    if (this._canFocusOnPrimaryBtn) {
+      this.focusOnPrimaryButton();
+      this._canFocusOnPrimaryBtn = false;
+    }
+  }
+  focusOnPrimaryButton() {
+    const btnConfirm = this._element.shadowRoot.querySelector(`#${this.PRIMARY_BUTTON_ID}`);
+    const buttonElement = btnConfirm === null || btnConfirm === void 0 ? void 0 : btnConfirm.shadowRoot.querySelector('button');
+    buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
+  }
   render() {
     if (this.opened && this._currentMessage) {
       return (h("div", { class: "overlay", ref: ref => this._overlayRef = ref }, h("div", { tabindex: "-1", class: "dialog" }, this.getTypeIndicatorElement(this._currentMessage), h("div", { class: this.getClassContainer(this._currentMessage) }, h("div", { class: "title__container" }, h("div", { class: "title__box" }, this.getIconElement(this._currentMessage), h("div", { class: this.getClassTitleLabel(this._currentMessage), innerHTML: this._currentMessage.title, "data-element-id": ElementIDUtils.getInternalIDInfo("title") })), h("button", { class: "btn-close", onClick: () => this.handleButtonClick(false), "data-element-id": ElementIDUtils.getInternalIDInfo("buttonClose") })), h("div", { class: "message", innerHTML: this._currentMessage.message, "data-element-id": ElementIDUtils.getInternalIDInfo("message") }), this._currentMessage.confirm &&
-        h("div", { class: "button-yes-no__container" }, h("ez-button", { class: "button__cancel", "data-element-id": ElementIDUtils.getInternalIDInfo("cancel"), label: this._currentMessage.labelCancel, onClick: () => this.handleButtonClick(false) }), h("ez-button", { class: !this._currentMessage.btnConfirmDanger ? "button__confirm" : "button__confirm--danger", "data-element-id": ElementIDUtils.getInternalIDInfo("confirm"), label: this._currentMessage.labelConfirm, onClick: () => this.handleButtonClick(true) })), !this._currentMessage.confirm &&
-        h("div", { class: "button__confirm--container" }, h("ez-button", { label: 'Ok', "data-element-id": ElementIDUtils.getInternalIDInfo("ok"), class: "button__confirm", onClick: () => this.handleButtonClick(true) }))))));
+        h("div", { class: "button-yes-no__container" }, h("ez-button", { class: "button__cancel", "data-element-id": ElementIDUtils.getInternalIDInfo("cancel"), label: this._currentMessage.labelCancel, onClick: () => this.handleButtonClick(false) }), h("ez-button", { id: this.PRIMARY_BUTTON_ID, class: !this._currentMessage.btnConfirmDanger ? "button__confirm" : "button__confirm--danger", "data-element-id": ElementIDUtils.getInternalIDInfo("confirm"), label: this._currentMessage.labelConfirm, onClick: () => this.handleButtonClick(true) })), !this._currentMessage.confirm &&
+        h("div", { class: "button__confirm--container" }, h("ez-button", { id: this.PRIMARY_BUTTON_ID, label: 'Ok', "data-element-id": ElementIDUtils.getInternalIDInfo("ok"), class: "button__confirm", onClick: () => this.handleButtonClick(true) }))))));
     }
     return null;
   }
@@ -398,4 +424,13 @@ export class EzDialog {
         "methodName": "observeConfig"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -12,10 +12,8 @@
   --ez-dropdown--background-color: var(--background--xlight, #fff);
   /*@doc Define a fonte do componente.*/
   --ez-dropdown--font-family: var(--font-pattern, 'Roboto');
-  /*@doc Define a largura máxima do componente.*/
-  --ez-dropdown--max-width: 320px;
   /*@doc Define a altura máxima do componente.*/
-  --ez-dropdown--max-height: 440px;
+  --ez-dropdown--max-height: 415px;
 
   /* item*/
   /*@doc Define o espaçamento interno de cada item do componente.*/
@@ -120,6 +118,9 @@
   border-radius: var(--ez-dropdown--border-radius);
   background-color: var(--ez-dropdown--background-color);
   max-width: var(--ez-dropdown--max-width);
+}
+
+.ez-dropdown__max-height {
   max-height: var(--ez-dropdown--max-height);
 }
 

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

@@ -16,6 +16,11 @@ export class EzDropdown {
     this.value = undefined;
     this.itemBuilder = undefined;
   }
+  handleClickOutside(event) {
+    if (!this._element.contains(event.target)) {
+      this.ezOutsideClick.emit();
+    }
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -94,13 +99,13 @@ export class EzDropdown {
       this._itemList[item.id] = {};
     }
   }
-  getContainerItemBuilder(item, level) {
+  getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren) {
     if (this.itemBuilder == undefined) {
       return;
     }
     const customContent = this.itemBuilder(item, level);
     if (customContent == undefined) {
-      return;
+      return this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren);
     }
     if (typeof customContent !== "string") {
       return (h("div", { class: "ez-dropdown__item-builder" }, customContent));
@@ -121,7 +126,7 @@ export class EzDropdown {
       var _a;
       return (item.type !== "divider"
         ? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
-          ? this.getContainerItemBuilder(item, level)
+          ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
           : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
           !isLockedLevels &&
           hasChildren &&
@@ -137,7 +142,7 @@ export class EzDropdown {
     const hasGroup = this.hasGroup(branchItems);
     const hasIcon = this.hasIcon(branchItems);
     const hasChildren = this.hasChildren(branchItems);
-    return (h("div", { class: "ez-dropdown", "data-level": level }, h("div", { class: "ez-dropdown__container" }, Object.keys(itemsByGroup)
+    return (h("div", { class: "ez-dropdown ez-dropdown__max-height", "data-level": level }, h("div", { class: "ez-dropdown__container" }, Object.keys(itemsByGroup)
       .map((groupLabel) => {
       return (h("div", Object.assign({ class: "ez-dropdown__group" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownGroup`) }), groupLabel !== "noGroup" &&
         h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel), hasGroup &&
@@ -350,7 +355,31 @@ export class EzDropdown {
             }
           }
         }
+      }, {
+        "method": "ezOutsideClick",
+        "name": "ezOutsideClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando ocorrer um click fora do componente."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClickOutside",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }