@sankhyalabs/ezui 5.19.2 → 5.20.0-dev.10

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

@@ -4,7 +4,7 @@ export class EzAlertList {
   constructor() {
     this.alerts = [];
     this.enableDragAndDrop = undefined;
-    this.enableExpand = undefined;
+    this.enableExpand = true;
     this.itemRightSlotBuilder = undefined;
     this.opened = true;
     this.expanded = false;
@@ -12,67 +12,129 @@ export class EzAlertList {
   observeOpened() {
     this.manageOverlay();
   }
+  /**
+   * Retorna o id do alerta a partir do título e do índice.
+   */
+  alertId(title, index) {
+    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
+    return `alert-${index}-${concatTitle(title)}`;
+  }
+  /**
+   * Retorna o título do alerta a partir do id.
+   */
+  getAlertTitle(id) {
+    var _a;
+    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  }
+  /**
+    * Retorna o texto do título do alerta.
+    */
+  getTitleText(item) {
+    var _a;
+    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
+    return `${title}${(title && item.label) ? ':' : ''}`;
+  }
+  /**
+   * Gerencia a exibição do conteúdo expandido.
+   */
+  toggleExpandContainer() {
+    if (!this.enableExpand) {
+      return;
+    }
+    ;
+    this.expanded = !this.expanded;
+    this._container.classList.toggle('expanded', this.expanded);
+    if (this.expanded) {
+      this.updatePosition(this.getBoundingRight(), this.getBoundingBottom());
+    }
+    else {
+      this.updatePosition(`10px`, `10px`);
+    }
+  }
   /**
    * Gerencia a exibição do overlay usando FloatingManager do Core.
    */
-  async manageOverlay() {
-    if (this.opened) {
-      this._overlayId = FloatingManager.float(this._container, this._overlayRef, {
-        autoClose: false,
-        isFixed: !this.enableDragAndDrop,
-        bottom: '10px',
-        right: '10px'
-      });
+  manageOverlay() {
+    if (this.opened && this._container) {
+      this._overlayId = FloatingManager.float(this._container, this._overlayRef, this.getFloatOptions());
     }
     else {
+      if (this._overlayId === undefined)
+        return;
       FloatingManager.close(this._overlayId);
       this._overlayId = undefined;
     }
   }
-  componentDidRender() {
-    this.manageOverlay();
+  /**
+   * Atualiza a posição da lista.
+   */
+  updatePosition(right, bottom) {
     if (this.opened) {
-      this._container.focus();
+      FloatingManager.updateFloatPosition(this._container, this._overlayRef, Object.assign(Object.assign({}, this.getFloatOptions()), { right,
+        bottom }));
     }
   }
-  componentWillLoad() {
-    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+  ;
+  /**
+   * Retorna valores padrões do componente
+   */
+  getFloatOptions() {
+    return {
+      autoClose: false,
+      isFixed: true,
+      bottom: '10px',
+      right: '10px',
+    };
   }
-  alertId(title, index) {
-    const concatTitle = (title) => { var _a; return (_a = title === null || title === void 0 ? void 0 : title.split(' ').join('-')) !== null && _a !== void 0 ? _a : ""; };
-    return `alert-${index}-${concatTitle(title)}`;
+  ;
+  /**
+   * Retorna o valor para o alinhamento horizontal do componente.
+   */
+  getBoundingRight() {
+    const docWidth = document.body.clientWidth;
+    const boxWidth = this._container.getBoundingClientRect().width;
+    return ((docWidth - boxWidth) / 2) + 'px';
   }
-  getAlertTitle(id) {
-    var _a;
-    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  /**
+   * Retorna o valor para o alinhamento vertical do componente.
+   */
+  getBoundingBottom() {
+    const docHeight = document.body.clientHeight;
+    const boxHeight = this._container.getBoundingClientRect().height;
+    return ((docHeight - boxHeight) / 2) + 'px';
   }
-  getTitleText(item) {
-    var _a;
-    const title = (_a = this.getAlertTitle(item.id)) !== null && _a !== void 0 ? _a : '';
-    return `${title}${(title && item.label) ? ':' : ''}`;
+  componentDidLoad() {
+    this.manageOverlay();
+    if (this.opened && this._container) {
+      this._container.focus();
+    }
+  }
+  componentWillLoad() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
   }
   render() {
-    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: "alert-list__container", ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, h("ez-button", { mode: "icon", size: "small", iconName: "expand", "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), onClick: () => { }, title: this.expanded ? 'Resumir' : 'Expandir' }), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
-        this.opened = false;
-      }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
-        return (h("a", { href: "#", style: {
-            fontFamily: "var(--font-pattern, 'Roboto')",
-            fontSize: 'var(--text--medium, 14px)',
-            fontWeight: 'var(--text-weight--medium, 400)',
-            color: 'var(--color--primary, #008561)',
-            marginRight: '4px',
-            cursor: 'pointer',
-            display: 'flex',
-            width: 'max-content',
-            textDecoration: 'none'
-          } }, this.getTitleText(item)));
-      }, dataSource: this.alerts.map((alert, index) => {
-        var _a;
-        return {
-          id: this.alertId(alert.title, index),
-          label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
-        };
-      }) })))))));
+    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), this.opened ?
+      (h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: `alert-list__container ${this.expanded ? 'expanded' : ''}`, ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, this.enableExpand && (h("ez-button", { mode: "icon", size: "small", iconName: "expand", onClick: () => this.toggleExpandContainer(), "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), title: this.expanded ? 'Resumir' : 'Expandir' })), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+          this.opened = false;
+        }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { itemSlotBuilder: this.itemRightSlotBuilder, hoverFeedback: true, itemLeftSlotBuilder: item => {
+          return (h("a", { href: "#", style: {
+              fontFamily: "var(--font-pattern, 'Roboto')",
+              fontSize: 'var(--text--medium, 14px)',
+              fontWeight: 'var(--text-weight--medium, 400)',
+              color: 'var(--color--primary, #008561)',
+              marginRight: '4px',
+              cursor: 'pointer',
+              display: 'flex',
+              width: 'max-content',
+              textDecoration: 'none'
+            } }, this.getTitleText(item)));
+        }, dataSource: this.alerts.map((alert, index) => {
+          var _a;
+          return {
+            id: this.alertId(alert.title, index),
+            label: (_a = alert.detail) !== null && _a !== void 0 ? _a : "",
+          };
+        }) })))))) : null));
   }
   static get is() { return "ez-alert-list"; }
   static get encapsulation() { return "shadow"; }
@@ -140,7 +202,8 @@ export class EzAlertList {
           "text": "Define se o componente pode ser expandido."
         },
         "attribute": "enable-expand",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "true"
       },
       "itemRightSlotBuilder": {
         "type": "unknown",

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -42,6 +42,9 @@
   padding: 12px;
   z-index: 0;
   position: relative;
+  container-type: inline-size;
+  container-name: box;
+  white-space: pre-line;
 }
 
 .card-item:hover {
@@ -77,17 +80,20 @@
 }
 
 .card-item__details-left {
+  white-space: pre-line;
   cursor: pointer;
   width: 50%;
 }
 
 .card-item__details-right {
+  white-space: pre-line;
   width: 50%;
   cursor: pointer;
 }
 
 .card-item__detail:not(:last-child) {
   cursor: pointer;
+  white-space: pre-line;
 
   /*public*/
   padding-bottom: var(--ez-card-item__detail--padding-bottom);
@@ -124,4 +130,33 @@
   outline: 2px solid var(--ez-card-item__highlight--color);
   box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), 
                4px 0px 0px 0px var(--ez-card-item__highlight--color);
+}
+
+@container box (max-width: 550px) {
+  .card-item__details {
+    flex-direction: column;
+  }
+
+  .card-item__details-left {
+    width: 100%;
+  }
+  
+  .card-item__details-right {
+    width: 100%;
+  }
+}
+
+@container box (max-width: 200px) {
+  .card-item__title {
+    font-size: 10px;
+  }
+
+  .card-item__detail-label {
+    font-size: 10px;
+  }
+
+  .card-item__detail-value {
+    font-size: 10px;
+  }
+
 }

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

@@ -1,7 +1,6 @@
-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;
@@ -9,7 +8,6 @@ export class EzComboBox {
     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;
@@ -22,7 +20,6 @@ export class EzComboBox {
     this.enabled = true;
     this.options = undefined;
     this.errorMessage = undefined;
-    this.searchMode = undefined;
     this.showSelectedValue = false;
     this.showOptionValue = false;
     this.suppressSearch = false;
@@ -46,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;
         }
@@ -209,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);
     }
@@ -284,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();
@@ -307,9 +304,6 @@ export class EzComboBox {
       this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
-    else {
-      this.controlListWithOnlyOne();
-    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -328,7 +322,6 @@ export class EzComboBox {
         this.updateVisibleOptions();
         if (this._tabPressed) {
           this._tabPressed = false;
-          this.controlEmptySearch();
         }
       }
       else {
@@ -336,10 +329,6 @@ export class EzComboBox {
       }
     }
   }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
   selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
@@ -351,10 +340,6 @@ export class EzComboBox {
     else {
       this.resetOptions();
     }
-    if (this.searchMode) {
-      this._visibleOptions = [];
-      this.clearSource();
-    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -373,7 +358,7 @@ export class EzComboBox {
     }
     else {
       window.setTimeout(() => {
-        this.setInputValue(false);
+        this.setInputValue();
       }, this._deboucingTime);
     }
     this.resetOptions();
@@ -390,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;
@@ -502,12 +400,7 @@ export class EzComboBox {
         });
       }
     }
-    if (this.searchMode) {
-      this.updateSource([]);
-    }
-    else {
-      this.loadOptions(SearchMode.PRELOAD);
-    }
+    this.loadOptions(SearchMode.PRELOAD);
   }
   componentDidRender() {
     var _a;
@@ -517,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);
@@ -537,13 +429,7 @@ export class EzComboBox {
   // Event handlers
   //---------------------------------------------
   handlerIconClick() {
-    this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
-  }
-  buildNumberArgument(argument) {
-    if (this.isTextSearch) {
-      return NaN;
-    }
-    return Number(argument || undefined);
+    this.showOptions();
   }
   onTextInputChangeHandler(event) {
     var _a;
@@ -560,36 +446,12 @@ export class EzComboBox {
     }
     this._criteria = argument;
     if (argument) {
-      if (this.searchMode) {
-        this._showLoading = false;
-        this.clearSource();
-        const enoughChars = argument.length >= this.limitCharsToSearch;
-        const argumentNumber = this.buildNumberArgument(argument);
-        if (enoughChars || !isNaN(argumentNumber)) {
-          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() {
@@ -599,9 +461,7 @@ export class EzComboBox {
     }
   }
   onTextInputClickHandler() {
-    if (!this.searchMode) {
-      this.showOptions();
-    }
+    this.showOptions();
   }
   keyDownHandler(event) {
     this._tabPressed = false;
@@ -633,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.
@@ -650,11 +509,8 @@ export class EzComboBox {
     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
@@ -788,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,

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

@@ -100,9 +100,6 @@ export class EzDateInput {
     this._calendar.hide();
   }
   handleBlur() {
-    if (!this._changePending) {
-      return;
-    }
     try {
       const strValue = this._textInput.value;
       const newValue = DateUtils.strToDate(strValue);

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -152,9 +152,6 @@ export class EzDateTimeInput {
   }
   handleBlur() {
     var _a, _b;
-    if (!this._changePending) {
-      return;
-    }
     try {
       const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
       const newValue = this.getParsedDateTime();

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 &&
@@ -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
+      }];
+  }
 }