@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,349 @@
+:host {
+  /* dropdown */
+  /*@doc Define a posição do componente.*/
+  --ez-dropdown--z-index: var(--more-visible, 2);
+  /*@doc Define o espaçamento interno do componente.*/
+  --ez-dropdown--padding: var(--space--small, 6px);
+  /*@doc Define a sombra externa do componente.*/
+  --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
+  /*@doc Define o raio da borda do componente.*/
+  --ez-dropdown--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define cor de fundo do componente.*/
+  --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;
+
+  /* item*/
+  /*@doc Define o espaçamento interno de cada item do componente.*/
+  --ez-dropdown__item--padding: var(--space--small, 6px);
+  /*@doc Define o espaçamento entre os elementos internos do item do componente.*/
+  --ez-dropdown__item--gap: var(--space--small, 6px);
+  /*@doc Define o raio da borda de cada item do componente.*/
+  --ez-dropdown__item--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a cor do texto de cada item do componente.*/
+  --ez-dropdown__item--color: var(--title--primary, #2b3a54);
+  /*@doc Define o peso do texto de cada item do componente.*/
+  --ez-dropdown__item--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define o tamanho da fonte de cada item do componente.*/
+  --ez-dropdown__item--font-size: var(--text--medium, 14px);
+  /*@doc Define a altura do texto de cada item do componente.*/
+  --ez-dropdown__item--line-height: calc(var(--ez-dropdown__item--font-size) + 4px);
+  /*@doc Define a cor de fundo no hover de cada item do componente.*/
+  --ez-dropdown__item--background-color: var(--background--medium, #f0f3f7);
+  /*@doc Define o efeito de transição do hover de cada item do componente.*/
+  --ez-dropdown__item--transition: var(--transition, .2s linear);
+
+  /* item-label */
+  /*@doc Define o espaçamento direito externo de cada label do componente.*/
+  --ez-dropdown__item-label--margin-right: var(--space--medium, 12px);
+
+  /* icon */
+  /*@doc Define o tamanho da área de cada ícone do componente.*/
+  --ez-dropdown__icon--size: var(--icon--medium, 18px);
+
+  /* divider */
+  /*@doc Define a cor de fundo do divider do componente.*/
+  --ez-dropdown__divider--background-color: var(--color--disable-secondary, #f2f5f8);
+  /*@doc Define o espaçamento externo do divider do componente.*/
+  --ez-dropdown__divider--margin: var(--space--extra-small, 3px) 0;
+
+  /* group-label */
+  /*@doc Define a cor do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--color: var(--text--secondary, #A2ABB9);
+  /*@doc Define o peso do texto do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o tamanho da fonte do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--font-size: var(--text--small, 12px);
+  /*@doc Define a altura do texto do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--line-height: var(--text--medium, 14px);
+  /*@doc Define o espaçamento interno do título de cada grupo do componente.*/
+  --ez-dropdown__group-label--padding: var(--space--small, 6px);
+
+  /* submenu */
+  /*@doc Define a posição do submenu do componente.*/
+  --ez-dropdown__submenu--z-index: var(--most-visible, 3);
+
+  /* link (subAction) */
+  /*@doc Define o peso do texto de cada link do componente.*/
+  --ez-dropdown__link--font-weight: var(--text-weight--large, 600);
+  /*@doc Define a cor utilizada como padrão para ações secundárias.*/
+  --ez-dropdown__link--primary--color: var(--color--primary, #008561);
+  /*@doc Define a cor utilizada para ações destrutivas como um excluir.*/
+  --ez-dropdown__link--critical--color: var(--color-alert--error-800, #BD0025);
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-dropdown__scrollbar--width: var(--space--small, 6px);
+  /*@doc Define o espaçamento interno direito quando houver barra de rolagem.*/
+  --ez-dropdown__scrollbar--padding-right: var(--space--extra-small, 3px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  user-select: none;
+  box-sizing: border-box;
+  position: fixed;
+
+  /*public*/
+  z-index: var(--ez-dropdown--z-index);
+}
+
+:host * {
+  box-sizing: border-box;
+}
+
+.ez-dropdown {
+  /*private*/
+  display: flex;
+
+  /*public*/
+  padding: var(--ez-dropdown--padding);
+  box-shadow: var(--ez-dropdown--box-shadow);
+  border-radius: var(--ez-dropdown--border-radius);
+  background-color: var(--ez-dropdown--background-color);
+  max-width: var(--ez-dropdown--max-width);
+  max-height: var(--ez-dropdown--max-height);
+}
+
+.ez-dropdown * {
+  /*public*/
+  font-family: var(--ez-dropdown--font-family);
+}
+
+.ez-dropdown__container {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  flex: auto;
+
+  /*public*/
+  scrollbar-color: var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background);
+}
+
+.ez-dropdown__container::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-background);
+  width: var(--ez-dropdown__scrollbar--width);
+  max-width: var(--ez-dropdown__scrollbar--width);
+  min-width: var(--ez-dropdown__scrollbar--width);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-background);
+  border-radius: var(--ez-dropdown__scrollbar--border-radius);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-default);
+  border-radius: var(--ez-dropdown__scrollbar--border-radius);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:hover,
+.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-hover);
+}
+
+.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,
+.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-dropdown__scrollbar--color-clicked);
+}
+
+.ez-dropdown__container--spacer {
+  /*public*/
+  padding-right: var(--ez-dropdown__scrollbar--padding-right);
+}
+
+.ez-dropdown__item {
+  /*private*/
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+
+  /*public*/
+  border-radius: var(--ez-dropdown__item--border-radius);
+  transition: var(--ez-dropdown__item--transition);
+}
+
+.ez-dropdown__item:hover {
+  /*public*/
+  background-color: var(--ez-dropdown__item--background-color);
+}
+
+.ez-dropdown__item-wrapper {
+  /*private*/
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+
+  /*public*/
+  gap: var(--ez-dropdown__item--gap);
+  color: var(--ez-dropdown__item--color);
+  font-weight: var(--ez-dropdown__item--font-weight);
+  font-size: var(--ez-dropdown__item--font-size);
+  line-height: var(--ez-dropdown__item--line-height);
+  padding: var(--ez-dropdown__item--padding);
+}
+
+.ez-dropdown__item-wrapper ez-icon {
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /*public*/
+  width: var(--ez-dropdown__icon--size);
+  height: var(--ez-dropdown__icon--size);
+  min-width: var(--ez-dropdown__icon--size);
+  min-height: var(--ez-dropdown__icon--size);
+}
+
+.ez-dropdown__item-content {
+  /*private*/
+  display: flex;
+  align-items: center;
+  flex: auto;
+  overflow: hidden;
+
+  /*public*/
+  gap: var(--ez-dropdown__item--gap);
+}
+
+.ez-dropdown__item-label {
+  /* private */
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: auto;
+}
+
+.ez-dropdown__item-label:not(:last-child) {
+  /*public*/
+  margin-right: var(--ez-dropdown__item-label--margin-right);
+}
+
+.ez-dropdown__item-content + .ez-dropdown__link {
+  /*public*/
+  margin-left: var(--ez-dropdown__item-label--margin-right);
+  margin-right: var(--ez-dropdown__item--padding);
+}
+
+.ez-dropdown__item-builder {
+  /* private */
+  flex: auto;
+}
+
+.ez-dropdown__divider {
+  /*private*/
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  border: none;
+  display: block;
+
+  /*public*/
+  background-color: var(--ez-dropdown__divider--background-color);
+  margin: var(--ez-dropdown__divider--margin);
+}
+
+.ez-dropdown__hidden {
+  /*private*/
+  visibility: hidden;
+}
+
+.ez-dropdown__group {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.ez-dropdown__group-label {
+  /*private*/
+  display: block;
+  width: 100%;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /*public*/
+  color: var(--ez-dropdown__group-label--color);
+  font-weight: var(--ez-dropdown__group-label--font-weight);
+  font-size: var(--ez-dropdown__group-label--font-size);
+  line-height: var(--ez-dropdown__group-label--line-height);
+  padding: var(--ez-dropdown__group-label--padding);
+}
+
+.ez-dropdown__icon-right {
+  /*private*/
+  margin-left: auto;
+}
+
+.ez-dropdown__submenu {
+  /*private*/
+  position: fixed;
+
+  /*public*/
+  z-index: var(--ez-dropdown__submenu--z-index);
+  margin-top: calc(var(--ez-dropdown__item--padding) * -1);
+}
+
+.ez-dropdown__submenu--hide {
+  /*private*/
+  display: none;
+}
+
+.ez-dropdown__link {
+  /*private*/
+  display: block;
+  margin-left: auto;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  /*public*/
+  font-weight: var(--ez-dropdown__link--font-weight);
+  max-width: calc(var(--ez-dropdown--max-width) * 0.43);
+}
+
+.ez-dropdown__link--primary {
+  /*public*/
+  color: var(--ez-dropdown__link--primary--color);
+}
+
+.ez-dropdown__link--critical {
+  /*public*/
+  color: var(--ez-dropdown__link--critical--color);
+}
+
+.ez-dropdown__link:hover {
+  /*private*/
+  text-decoration: underline;
+}

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

@@ -0,0 +1,356 @@
+import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import { DropdownItem } from './structure/DropdownItem';
+import { SubmenuControl } from './structure/SubmenuControl';
+export class EzDropdown {
+  constructor() {
+    this._itemList = {};
+    this._submenuList = [];
+    this._openedMenuList = {};
+    /**
+     * Limitador de níveis de menu + submenu.
+     * Valor 0, null ou undefined desativa o limitador.
+     */
+    this._levelLimits = 3;
+    this.items = [];
+    this.value = undefined;
+    this.itemBuilder = undefined;
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren) {
+    return (h(DropdownItem, { item: item, hasIcon: hasIcon, hasChildren: hasChildren, isLockedLevels: isLockedLevels, onSubActionClick: this.onSubActionClick.bind(this) }));
+  }
+  getMaxOrder(items) {
+    if (items == undefined || items.length === 0) {
+      return -1;
+    }
+    return Math.max(...items.map((item) => {
+      var _a;
+      const order = (_a = item.group) === null || _a === void 0 ? void 0 : _a["order"];
+      return order != undefined && order >= 0 ? order : -1;
+    }));
+  }
+  hasIcon(items) {
+    return items === null || items === void 0 ? void 0 : items.some((item) => (item.iconName || "") !== "");
+  }
+  hasGroup(items) {
+    return items === null || items === void 0 ? void 0 : items.some((item) => (item.group || "") !== "");
+  }
+  hasChildren(items) {
+    return items === null || items === void 0 ? void 0 : items.some((item) => (item.children || []).length > 0);
+  }
+  isLockedLevels(level) {
+    if (!this._levelLimits) {
+      return false;
+    }
+    return level === (this._levelLimits + 1);
+  }
+  getItemsByGroup(items, level) {
+    let itemsByGroup = {};
+    const maxOrder = this.getMaxOrder(items);
+    items.forEach((item) => {
+      const label = item.group && item.group["label"] != undefined ? item.group["label"] || "noGroup" : item.group || "noGroup";
+      const order = item.group && item.group["order"] != undefined ? item.group["order"] : item.group ? (maxOrder + 1) : (maxOrder + 2);
+      let groupObj = itemsByGroup[label];
+      if (groupObj == undefined) {
+        groupObj = {
+          items: [],
+          order
+        };
+      }
+      this.validateItem(item, level);
+      groupObj.items.push(item);
+      itemsByGroup[label] = groupObj;
+    });
+    return ObjectUtils.sortByProperty(itemsByGroup, "order");
+  }
+  validateItem(item, level) {
+    if (this._itemList == undefined) {
+      this._itemList = {};
+    }
+    if (item.type == undefined) {
+      item.type = "item";
+    }
+    if (item.id == undefined) {
+      const itemId = `level_${level}_${item.type}`;
+      const counter = Object.keys(this._itemList).filter((key) => key.includes(itemId)).length;
+      item.id = `${itemId}_${counter + 1}`;
+    }
+    if (item.label == undefined) {
+      item.label = "";
+    }
+    if (item.subAction != undefined) {
+      if (item.subAction.id == undefined) {
+        const subId = `subAction_${item.id}`;
+        item.subAction.id = subId;
+      }
+      if (item.subAction.label == undefined) {
+        item.subAction.label = "";
+      }
+    }
+    if (this._itemList[item.id] == undefined) {
+      this._itemList[item.id] = {};
+    }
+  }
+  getContainerItemBuilder(item, level) {
+    if (this.itemBuilder == undefined) {
+      return;
+    }
+    const customContent = this.itemBuilder(item, level);
+    if (customContent == undefined) {
+      return;
+    }
+    if (typeof customContent !== "string") {
+      return (h("div", { class: "ez-dropdown__item-builder" }, customContent));
+    }
+    return (h("div", { class: "ez-dropdown__item-builder", innerHTML: customContent }));
+  }
+  getItemsRender(groupItems, level, hasIcon, hasChildren) {
+    if (groupItems == undefined) {
+      return;
+    }
+    let counterLevel = level;
+    let isLockedLevels = false;
+    if (hasChildren) {
+      counterLevel++;
+      isLockedLevels = this.isLockedLevels(counterLevel);
+    }
+    return groupItems.map((item) => {
+      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.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+          !isLockedLevels &&
+          hasChildren &&
+          h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
+        : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+    });
+  }
+  renderDropdown(branchItems = this.items, level = 1) {
+    if (branchItems == undefined || this.isLockedLevels(level)) {
+      return;
+    }
+    const itemsByGroup = this.getItemsByGroup(branchItems, level);
+    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)
+      .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 &&
+        groupLabel === "noGroup" &&
+        h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownDivider`) })), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
+    }))));
+  }
+  hasOpenedSubmenu(level) {
+    const openedLevels = Object.keys(this._openedMenuList);
+    return openedLevels.includes(level.toString())
+      || openedLevels.some((openedLevel) => Number(openedLevel) > level);
+  }
+  hasSubmenuOpened() {
+    var _a;
+    return (_a = this._submenuList) === null || _a === void 0 ? void 0 : _a.some((submenu) => !submenu.classList.contains("ez-dropdown__submenu--hide"));
+  }
+  setEvents() {
+    document.removeEventListener('click', this.onHideAllSubmenu.bind(this));
+    document.addEventListener('click', this.onHideAllSubmenu.bind(this));
+    document.removeEventListener('scroll', this.onSubmenuReposition.bind(this));
+    document.addEventListener('scroll', this.onSubmenuReposition.bind(this));
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  onShowSubmenu(evt, item) {
+    var _a;
+    if (evt == undefined) {
+      return;
+    }
+    const menu = this._itemList[item.id];
+    if (!(menu === null || menu === void 0 ? void 0 : menu.classList.contains("ez-dropdown__item"))) {
+      return;
+    }
+    const level = Number(menu.dataset.level || "0");
+    if (this.hasOpenedSubmenu(level)) {
+      this._submenuControl.hide(this._openedMenuList[level]);
+      delete this._openedMenuList[level];
+    }
+    if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+      return;
+    }
+    this._openedMenuList[menu.dataset.level] = menu;
+    this._submenuControl.show(menu);
+  }
+  onItemClick(evt, item) {
+    const target = evt === null || evt === void 0 ? void 0 : evt.target;
+    if (target === null || target === void 0 ? void 0 : target.classList.contains("ez-dropdown__link")) {
+      return;
+    }
+    this.value = item;
+    this.ezClick.emit(item);
+  }
+  onSubActionClick(item) {
+    this.ezSubActionClick.emit(item.subAction);
+  }
+  onHideAllSubmenu(evt = undefined) {
+    const target = evt === null || evt === void 0 ? void 0 : evt.target;
+    if (this.hasSubmenuOpened() && (target == undefined || (!target.closest(".ez-dropdown") && target.tagName !== "EZ-DROPDOWN"))) {
+      this._openedMenuList = {};
+      this._submenuList.forEach(this._submenuControl.reset.bind(this._submenuControl));
+    }
+  }
+  onSubmenuReposition() {
+    if (this._openedMenuList != undefined) {
+      Object.keys(this._openedMenuList).forEach((key) => {
+        const menu = this._openedMenuList[key];
+        this._submenuControl.setPosition(menu);
+      });
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+    this._submenuControl = new SubmenuControl();
+    this._submenuControl.setMaxHeight(this._element);
+  }
+  componentDidUpdate() {
+    this._submenuControl.setMaxHeight(this._element);
+  }
+  componentDidRender() {
+    this.setEvents();
+  }
+  render() {
+    return (h(Host, null, this.renderDropdown()));
+  }
+  static get is() { return "ez-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-dropdown.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<IDropdownItem>",
+          "resolved": "IDropdownItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de itens que v\u00E3o ser apresentados no dropdown."
+        },
+        "defaultValue": "[]"
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IDropdownItem",
+          "resolved": "IDropdownItem",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\u00DAltimo item que recebeu o click."
+        }
+      },
+      "itemBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: IDropdownItem, level: number) => HTMLElement | string",
+          "resolved": "(item: IDropdownItem, level: number) => string | HTMLElement",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezClick",
+        "name": "ezClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando ocorrer um click em um item da lista,\no IDropdownItem que recebeu o click deve ser enviado como data do evento."
+        },
+        "complexType": {
+          "original": "IDropdownItem",
+          "resolved": "IDropdownItem",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        }
+      }, {
+        "method": "ezSubActionClick",
+        "name": "ezSubActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando ocorrer um click em uma a\u00E7\u00E3o secundaria do item, \no IDropdownSubAction deve ser enviado como data do evento."
+        },
+        "complexType": {
+          "original": "IDropdownSubAction",
+          "resolved": "IDropdownSubAction",
+          "references": {
+            "IDropdownSubAction": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+}