@sankhyalabs/ezui 2.10.1 → 2.12.0

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { FloatingManager, ElementIDUtils, StringUtils as StringUtils$1, DateUtils as DateUtils$1, TimeFormatter, UserInterface, Action, WaitingChangeException, ApplicationContext, DataUnitAction, DataUnit, ObjectUtils as ObjectUtils$1, NumberUtils as NumberUtils$1, DataType, SortMode, JSUtils, MaskFormatter } from '@sankhyalabs/core';
+import { FloatingManager, ElementIDUtils, StringUtils as StringUtils$1, DateUtils as DateUtils$1, TimeFormatter, ObjectUtils as ObjectUtils$1, Action, WaitingChangeException, ApplicationContext, UserInterface, DataUnitAction, DataUnit, NumberUtils as NumberUtils$1, DataType, SortMode, JSUtils, MaskFormatter } from '@sankhyalabs/core';
 
 var DialogType;
 (function (DialogType) {
@@ -2072,6 +2072,503 @@ let EzDialog$1 = class extends HTMLElement$1 {
   static get style() { return ezDialogCss; }
 };
 
+const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {
+  return (h("div", { class: "ez-dropdown__item-wrapper", title: item.label },
+    getContentLeft(item, hasIcon),
+    h("span", { class: "ez-dropdown__item-label" }, item.label),
+    getContentRight(item, hasChildren, isLockedLevels, onSubActionClick)));
+};
+const getContentLeft = (item, hasIcon) => {
+  if (item == undefined || !hasIcon) {
+    return;
+  }
+  if (item.iconName) {
+    return (h("ez-icon", Object.assign({ class: "ez-dropdown__icon-left", iconName: item.iconName, size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownItemIcon` })));
+  }
+  return (h("ez-icon", { class: "ez-dropdown__icon-left ez-dropdown__hidden", size: "medium" }));
+};
+const getContentRight = (item, hasChildren, isLockedLevels, onClick) => {
+  var _a, _b;
+  if (item == undefined) {
+    return;
+  }
+  if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && item.subAction != undefined && Object.keys(item.subAction).length > 0) {
+    return (h("span", Object.assign({ onClick: () => onClick(item), title: item.subAction.label, class: `ez-dropdown__link ez-dropdown__link--${item.subAction.type || "primary"}` }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.subAction.id}_ezDropdownItemSubAction` }), item.subAction.label));
+  }
+  if (isLockedLevels || !hasChildren) {
+    return;
+  }
+  if (((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+    return (h("ez-icon", Object.assign({ class: "ez-dropdown__icon-right", iconName: "chevron-right", size: "medium" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownIconOpenChildren` })));
+  }
+  return (h("ez-icon", { class: "ez-dropdown__icon-right ez-dropdown__hidden", size: "medium" }));
+};
+
+class SubmenuControl {
+  constructor() { }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Método responsável por fechar submenus abertos e abrir o submenu desejado.
+   * @param menu - Item de menu selecionado para abrir o submenu.
+   */
+  show(menu) {
+    const submenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(".ez-dropdown__submenu");
+    if (menu == undefined || submenu == undefined) {
+      return;
+    }
+    submenu.classList.remove("ez-dropdown__submenu--hide");
+    this.setPosition(menu);
+    this.setScrollContainer(menu);
+    this.setMaxHeight(submenu);
+  }
+  /**
+   * Método responsável por fechar um determinado submenu aberto.
+   * @param menu - Item de menu selecionado com o submenu aberto.
+   */
+  hide(menu) {
+    if (menu == undefined) {
+      return;
+    }
+    const submenuSelector = ".ez-dropdown__submenu:not(.ez-dropdown__submenu--hide)";
+    const submenuElement = menu.querySelector(submenuSelector);
+    this.reset(submenuElement);
+    this.hideChild(submenuElement);
+  }
+  /**
+   * Método responsável por fechar todos os submenus filhos de um determinado submenu.
+   * @param submenu - Elemento HTML do submenu pai.
+   */
+  hideChild(submenu) {
+    if (submenu == undefined) {
+      return;
+    }
+    submenu.querySelectorAll(".ez-dropdown__submenu")
+      .forEach((child) => {
+      this.reset(child);
+    });
+  }
+  /**
+   * Método responsável por posicionar o submenu na tela.
+   * @param menu - Item da lista selecionado para abrir o submenu.
+   */
+  setPosition(menu) {
+    const submenu = menu === null || menu === void 0 ? void 0 : menu.querySelector(".ez-dropdown__submenu");
+    const dropdown = menu === null || menu === void 0 ? void 0 : menu.closest(".ez-dropdown");
+    if (submenu == undefined || dropdown == undefined) {
+      return;
+    }
+    submenu.style.top = this.getPositionTop(menu);
+    submenu.style.left = this.getPositionRight(dropdown);
+    const bounding = submenu === null || submenu === void 0 ? void 0 : submenu.getBoundingClientRect();
+    const docWidth = document.body.clientWidth;
+    if ((bounding === null || bounding === void 0 ? void 0 : bounding.right) > docWidth) {
+      this.updatePosition(dropdown, submenu);
+    }
+  }
+  /**
+   * Método responsável por controlar a altura máxima do dropdown.
+   * @param element - Elemento HTML pai do dropdown que será renderizado.
+   */
+  setMaxHeight(element) {
+    var _a;
+    const parentElement = (element === null || element === void 0 ? void 0 : element.shadowRoot) || element;
+    const dropdown = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".ez-dropdown");
+    const docHeight = document.body.clientHeight;
+    let submenu;
+    let bounding;
+    if ((parentElement === null || parentElement === void 0 ? void 0 : parentElement["tagName"]) != undefined) {
+      submenu = parentElement;
+      bounding = submenu === null || submenu === void 0 ? void 0 : submenu.getBoundingClientRect();
+    }
+    else {
+      bounding = dropdown === null || dropdown === void 0 ? void 0 : dropdown.getBoundingClientRect();
+    }
+    if (dropdown == undefined || bounding == undefined) {
+      return;
+    }
+    /**
+     * Menu aberto irá ultrapassar a altura da página?
+     */
+    if ((bounding.y + bounding.height) > docHeight) {
+      /**
+       * Menu aberto é um submenu?
+       * Sim: realiza o calculo com base na altura do menu pai
+       * Não: recalcula a altura do menu para atualizar a barra de rolagem
+       */
+      if (submenu != undefined) {
+        const dropdownParent = submenu.closest(".ez-dropdown");
+        const boundingParent = dropdownParent === null || dropdownParent === void 0 ? void 0 : dropdownParent.getBoundingClientRect();
+        const marginTop = parseFloat(((_a = getComputedStyle(submenu)) === null || _a === void 0 ? void 0 : _a.marginTop) || "0");
+        if (dropdownParent == undefined || boundingParent == undefined) {
+          return;
+        }
+        /**
+         * Submenu aberto ao ser reposicionado ficará acima da altura do menu pai?
+         * Sim: posiciona o submenu na altura do menu pai e recalcula a sua altura para atualizar a barra de rolagem
+         * Não: posiciona o submenu entre a altura do menu pai e o rodapé da página
+         */
+        if ((boundingParent.y + bounding.height) > docHeight) {
+          submenu.style.top = (boundingParent.y - marginTop) + "px";
+          dropdown.style.maxHeight = (docHeight - boundingParent.y) + "px";
+        }
+        else {
+          submenu.style.top = (docHeight - bounding.height - marginTop) + "px";
+        }
+      }
+      else {
+        let maxHeight = docHeight - bounding.y;
+        if (maxHeight < 0) {
+          maxHeight = bounding.height - docHeight;
+        }
+        dropdown.style.maxHeight = maxHeight + "px";
+      }
+    }
+    this.setSpacerContainer(dropdown);
+  }
+  /**
+   * Método responsável por atribuir a classe de espaçamento entre o conteúdo e o scroll.
+   * @param dropdown - Elemento HTML pai do container que receberá a classe.
+   */
+  setSpacerContainer(dropdown) {
+    const container = dropdown === null || dropdown === void 0 ? void 0 : dropdown.querySelector(".ez-dropdown__container");
+    if (container == undefined) {
+      return;
+    }
+    if (container.scrollHeight > container.clientHeight) {
+      container.classList.add("ez-dropdown__container--spacer");
+    }
+    else {
+      container.classList.remove("ez-dropdown__container--spacer");
+    }
+  }
+  /**
+   * Método responsável por resetar um determinado submenu aberto.
+   * @param submenu - Elemento HTML do submenu que será resetado.
+   */
+  reset(submenu) {
+    if (submenu == undefined) {
+      return;
+    }
+    submenu.classList.add("ez-dropdown__submenu--hide");
+    submenu.style.left = "";
+    submenu.style.top = "";
+    const dropdown = submenu.querySelector(".ez-dropdown");
+    this.resetDropdown(dropdown);
+  }
+  /**
+   * Método responsável por resetar um determinado dropdown renderizado.
+   * @param dropdown - Elemento HTML do dropdown que será resetado.
+   */
+  resetDropdown(dropdown) {
+    if (dropdown == undefined) {
+      return;
+    }
+    dropdown.style.maxHeight = "";
+    this.setSpacerContainer(dropdown);
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  /**
+   * Método responsável por controlar o scroll do container do submenu aberto.
+   * @param menu - Item da lista selecionado para abrir o submenu.
+   */
+  setScrollContainer(menu) {
+    const container = menu === null || menu === void 0 ? void 0 : menu.closest(".ez-dropdown__container");
+    if (container == undefined) {
+      return;
+    }
+    container.onscroll = this.onScrollContainer.bind(this);
+  }
+  /**
+   * Método responsável por fechar os submenus filhos ao movimentar o scroll.
+   * @param event - Evento de scroll disparado pelo Elemento HTML pai.
+   */
+  onScrollContainer(event) {
+    const target = event === null || event === void 0 ? void 0 : event.target;
+    this.hideChild(target);
+  }
+  /**
+   * Método responsável por retornar a posição superior (top) de um elemento HTML na tela.
+   * @param hostElement - Elemento HTML que será capturado o valor de sua posição superior (top) na tela.
+   * @returns Valor da posição superior (top) de um determinado elemento HTML.
+   */
+  getPositionTop(hostElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return;
+    }
+    return boundingHost.y + "px";
+  }
+  /**
+   * Método responsável por retornar a posição direita (right) de um elemento HTML na tela.
+   * @param hostElement - Elemento HTML que será capturado o valor de sua posição direita (right) na tela.
+   * @returns Valor da posição direita (right) de um determinado elemento HTML.
+   */
+  getPositionRight(hostElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return;
+    }
+    return (boundingHost.x + boundingHost.width) + "px";
+  }
+  /**
+   * Método responsável por retornar a posição esquerda (left) de um elemento HTML desconsiderando a largura de outro elemento HTML.
+   * @param hostElement - Elemento HTML que será capturado o valor de sua posição esquerda (left) na tela.
+   * @param targetElement - Elemento HTML que será capturado o valor de sua largura (width).
+   * @returns Valor da posição esquerda (left) de um determinado elemento HTML desconsiderando a largura de outro elemento HTML.
+   */
+  getPositionLeft(hostElement, targetElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    const boundingTarget = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
+    if (boundingHost == undefined || boundingTarget == undefined) {
+      return;
+    }
+    return (boundingHost.x - boundingTarget.width) + "px";
+  }
+  /**
+   * Método responsável por atualizar a posição de um elemento HTML que renderizou fora da tela.
+   * @param hostElement - Elemento HTML que será a referência de posição dentro da tela.
+   * @param targetElement - Elemento HTML que será reposicionado na tela.
+   */
+  updatePosition(hostElement, targetElement) {
+    const boundingHost = hostElement === null || hostElement === void 0 ? void 0 : hostElement.getBoundingClientRect();
+    const boundingTarget = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
+    if (boundingHost == undefined || boundingTarget == undefined) {
+      return;
+    }
+    if (boundingHost.x < boundingTarget.right) {
+      targetElement.style.left = this.getPositionLeft(hostElement, targetElement);
+      this.updatePosition(hostElement, targetElement);
+    }
+  }
+}
+
+const ezDropdownCss = ":host{--ez-dropdown--z-index:var(--more-visible, 2);--ez-dropdown--padding:var(--space--small, 6px);--ez-dropdown--box-shadow:var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));--ez-dropdown--border-radius:var(--border--radius-medium, 12px);--ez-dropdown--background-color:var(--background--xlight, #fff);--ez-dropdown--font-family:var(--font-pattern, 'Roboto');--ez-dropdown--max-width:320px;--ez-dropdown--max-height:440px;--ez-dropdown__item--padding:var(--space--small, 6px);--ez-dropdown__item--gap:var(--space--small, 6px);--ez-dropdown__item--border-radius:var(--border--radius-small, 6px);--ez-dropdown__item--color:var(--title--primary, #2b3a54);--ez-dropdown__item--font-weight:var(--text-weight--medium, 400);--ez-dropdown__item--font-size:var(--text--medium, 14px);--ez-dropdown__item--line-height:calc(var(--ez-dropdown__item--font-size) + 4px);--ez-dropdown__item--background-color:var(--background--medium, #f0f3f7);--ez-dropdown__item--transition:var(--transition, .2s linear);--ez-dropdown__item-label--margin-right:var(--space--medium, 12px);--ez-dropdown__icon--size:var(--icon--medium, 18px);--ez-dropdown__divider--background-color:var(--color--disable-secondary, #f2f5f8);--ez-dropdown__divider--margin:var(--space--extra-small, 3px) 0;--ez-dropdown__group-label--color:var(--text--secondary, #A2ABB9);--ez-dropdown__group-label--font-weight:var(--text-weight--large, 600);--ez-dropdown__group-label--font-size:var(--text--small, 12px);--ez-dropdown__group-label--line-height:var(--text--medium, 14px);--ez-dropdown__group-label--padding:var(--space--small, 6px);--ez-dropdown__submenu--z-index:var(--most-visible, 3);--ez-dropdown__link--font-weight:var(--text-weight--large, 600);--ez-dropdown__link--primary--color:var(--color--primary, #008561);--ez-dropdown__link--critical--color:var(--color-alert--error-800, #BD0025);--ez-dropdown__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-dropdown__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-dropdown__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-dropdown__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-dropdown__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-dropdown__scrollbar--width:var(--space--small, 6px);--ez-dropdown__scrollbar--padding-right:var(--space--extra-small, 3px);display:flex;flex-direction:column;height:fit-content;user-select:none;box-sizing:border-box;position:fixed;z-index:var(--ez-dropdown--z-index)}:host *{box-sizing:border-box}.ez-dropdown{display:flex;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 *{font-family:var(--ez-dropdown--font-family)}.ez-dropdown__container{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;flex:auto;scrollbar-color:var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background)}.ez-dropdown__container::-webkit-scrollbar{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{background-color:var(--ez-dropdown__scrollbar--color-background);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb{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{background-color:var(--ez-dropdown__scrollbar--color-hover)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-dropdown__scrollbar--color-clicked)}.ez-dropdown__container--spacer{padding-right:var(--ez-dropdown__scrollbar--padding-right)}.ez-dropdown__item{display:flex;align-items:center;background-color:transparent;border-radius:var(--ez-dropdown__item--border-radius);transition:var(--ez-dropdown__item--transition)}.ez-dropdown__item:hover{background-color:var(--ez-dropdown__item--background-color)}.ez-dropdown__item-wrapper{display:flex;align-items:center;position:relative;cursor:pointer;width:100%;margin:0;white-space:nowrap;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{display:flex;justify-content:center;align-items:center;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{display:flex;align-items:center;flex:auto;overflow:hidden;gap:var(--ez-dropdown__item--gap)}.ez-dropdown__item-label{text-align:left;text-overflow:ellipsis;overflow:hidden;flex:auto}.ez-dropdown__item-label:not(:last-child){margin-right:var(--ez-dropdown__item-label--margin-right)}.ez-dropdown__item-content+.ez-dropdown__link{margin-left:var(--ez-dropdown__item-label--margin-right);margin-right:var(--ez-dropdown__item--padding)}.ez-dropdown__item-builder{flex:auto}.ez-dropdown__divider{width:100%;height:2px;border-radius:1px;border:none;display:block;background-color:var(--ez-dropdown__divider--background-color);margin:var(--ez-dropdown__divider--margin)}.ez-dropdown__hidden{visibility:hidden}.ez-dropdown__group{display:flex;flex-direction:column}.ez-dropdown__group-label{display:block;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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{margin-left:auto}.ez-dropdown__submenu{position:fixed;z-index:var(--ez-dropdown__submenu--z-index);margin-top:calc(var(--ez-dropdown__item--padding) * -1)}.ez-dropdown__submenu--hide{display:none}.ez-dropdown__link{display:block;margin-left:auto;cursor:pointer;text-overflow:ellipsis;overflow:hidden;font-weight:var(--ez-dropdown__link--font-weight);max-width:calc(var(--ez-dropdown--max-width) * 0.43)}.ez-dropdown__link--primary{color:var(--ez-dropdown__link--primary--color)}.ez-dropdown__link--critical{color:var(--ez-dropdown__link--critical--color)}.ez-dropdown__link:hover{text-decoration:underline}";
+
+let EzDropdown$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezClick = createEvent(this, "ezClick", 7);
+    this.ezSubActionClick = createEvent(this, "ezSubActionClick", 7);
+    this._itemList = {};
+    this._submenuList = [];
+    this._openedMenuList = {};
+    /**
+     * Limitador de níveis de menu + submenu.
+     * Valor 0, null ou undefined desativa o limitador.
+     */
+    this._levelLimits = 3;
+    /**
+    * Lista de itens que vão ser apresentados no dropdown.
+    */
+    this.items = [];
+  }
+  //---------------------------------------------
+  // 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$1.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] = {};
+    }
+  }
+  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
+          ? h("div", { class: "ez-dropdown__item-builder", innerHTML: this.itemBuilder(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]: `${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", { class: "ez-dropdown__divider" }), 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()));
+  }
+  get _element() { return this; }
+  static get style() { return ezDropdownCss; }
+};
+
 const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";
 
 let EzFileItem$1 = class extends HTMLElement$1 {
@@ -2217,284 +2714,6 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
   static get style() { return ezFilterInputCss; }
 };
 
-class FormMetadata {
-  constructor() {
-    this._sheets = new Map();
-    this._requiredFields = [];
-    this._cleanOnCopyFields = [];
-    this._defaultValues = {};
-  }
-  getSheet(name) {
-    return this._sheets.get(name);
-  }
-  getAllSheets() {
-    return this._sheets;
-  }
-  addSheet(sheet) {
-    this._sheets.set(sheet.name, sheet);
-    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
-    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
-    this._defaultValues = sheet.defaultValues;
-  }
-  getRequiredFields() {
-    return this._requiredFields;
-  }
-  getCleanOnCopyFields() {
-    return this._cleanOnCopyFields;
-  }
-  getDefaultValues() {
-    return this._defaultValues;
-  }
-}
-const isRequiredField = (descriptor, config) => {
-  if (descriptor.required) {
-    //Se for required pelo descritor não olha pra configuração.
-    return true;
-  }
-  return config === null || config === void 0 ? void 0 : config.required;
-};
-const isReadOnlyField = (descriptor, config) => {
-  if (descriptor.readOnly) {
-    //Se for readOnly pelo descritor não olha pra configuração.
-    return true;
-  }
-  return config === null || config === void 0 ? void 0 : config.readOnly;
-};
-const buildFromDataUnit = (dataUnit) => {
-  var _a, _b;
-  const unitMD = dataUnit.metadata;
-  const metadata = new FormMetadata();
-  if (unitMD) {
-    const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
-    const items = new Map();
-    (_b = unitMD === null || unitMD === void 0 ? void 0 : unitMD.fields) === null || _b === void 0 ? void 0 : _b.forEach((descriptor) => {
-      if (descriptor.visible !== false) {
-        resolveFieldGroup(items, null, descriptor);
-      }
-    });
-    let defaultValues = {};
-    visibleFields
-      .filter(descriptor => descriptor.defaultValue)
-      .map((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
-    metadata.addSheet({
-      label: unitMD.label,
-      name: unitMD.name,
-      items: Array.from(items.values()),
-      requiredFields: visibleFields
-        .filter(descriptor => descriptor.required)
-        .map(descriptor => descriptor.name),
-      cleanOnCopyFields: visibleFields
-        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
-        .map(descriptor => descriptor.name),
-      defaultValues
-    });
-  }
-  return metadata;
-};
-function getTabConfig(tab, sheets) {
-  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
-  return tabConfig || { label: tab, visible: true };
-}
-function sortTabs(a, b) {
-  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
-}
-function resolveFieldGroup(items, field, descriptor) {
-  const fieldMD = { config: field, descriptor: descriptor };
-  let group = (field === null || field === void 0 ? void 0 : field.group) || descriptor.group;
-  if (group) {
-    const key = `group::${group}`;
-    if (!items.has(key)) {
-      items.set(key, { label: group, items: [fieldMD] });
-    }
-    else {
-      items.get(key).items.push(fieldMD);
-    }
-  }
-  else {
-    items.set((field === null || field === void 0 ? void 0 : field.name) || descriptor.name, fieldMD);
-  }
-}
-const buildFromConfig = (config, dataUnit) => {
-  var _a, _b;
-  const sheets = new Map();
-  const hiddenTabs = new Map();
-  const requiredFields = [];
-  const cleanOnCopyFields = [];
-  const defaultValues = {};
-  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
-    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
-      hiddenTabs.set(tab.label, tab);
-    }
-  });
-  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
-    var _a, _b, _c, _d;
-    if (field.visible !== false) {
-      const tabConfig = getTabConfig(field.tab || "__main", sheets);
-      if (hiddenTabs.has(tabConfig.label)) {
-        return;
-      }
-      const descriptor = dataUnit.getField(field.name);
-      if (descriptor && tabConfig.visible) {
-        if (!sheets.has(tabConfig)) {
-          sheets.set(tabConfig, new Map());
-        }
-        const tabItens = sheets.get(tabConfig);
-        if (isRequiredField(descriptor, field)) {
-          requiredFields.push(field.name);
-        }
-        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
-        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
-          cleanOnCopyFields.push(field.name);
-        }
-        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
-        if (defaultValue) {
-          defaultValues[field.name] = field.defaultValue;
-        }
-        resolveFieldGroup(tabItens, field, descriptor);
-      }
-    }
-  });
-  const metadata = new FormMetadata();
-  Array.from(sheets.entries())
-    .sort(sortTabs)
-    .forEach(([key, value]) => {
-    metadata.addSheet({
-      label: (key.label === "__main") ? "Principal" : key.label,
-      name: key.label,
-      items: Array.from(value.values()),
-      requiredFields,
-      cleanOnCopyFields,
-      defaultValues
-    });
-  });
-  return metadata;
-};
-
-const buildTextArea = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
-    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
-};
-
-const buildTextInput = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
-};
-
-const buildSwitch = (fieldConfig) => {
-  return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
-};
-const buildCheckBox = (fieldConfig) => {
-  return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
-};
-function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
-    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
-}
-
-const buildComboBox = ({ name, label, readOnly, required }, properties) => {
-  const prop = properties === null || properties === void 0 ? void 0 : properties.options;
-  let options;
-  if (typeof prop === "string") {
-    const parsed = JSON.parse(prop);
-    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
-  }
-  else {
-    options = prop;
-  }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
-};
-
-const buildSearch = ({ name, label, readOnly, required }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
-};
-
-const buildFile = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-
-const buildDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-const buildTime = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-const buildTimeDate = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
-};
-
-const buildDecimal = ({ name, label, readOnly }, properties) => {
-  const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
-  const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
-};
-const buildInteger = ({ name, label, readOnly }) => {
-  return buildNumeric(name, label, readOnly, 0, 0);
-};
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
-}
-
-const uiBuilders = new Map();
-uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
-uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
-uiBuilders.set(UserInterface.SWITCH, buildSwitch);
-uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
-uiBuilders.set(UserInterface.SEARCH, buildSearch);
-uiBuilders.set(UserInterface.FILE, buildFile);
-uiBuilders.set(UserInterface.DATE, buildDate);
-uiBuilders.set(UserInterface.TIME, buildTime);
-uiBuilders.set(UserInterface.DATETIME, buildTimeDate);
-uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
-uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
-const buildField = (field) => {
-  const descriptor = field.descriptor;
-  const config = Object.assign({}, field.config);
-  let builder;
-  let props;
-  if (descriptor) {
-    if (!config.label) {
-      config.label = descriptor.label;
-    }
-    if (!config.name) {
-      config.name = descriptor.name;
-    }
-    // Forçamos uma avaliação priorizando o descriptor.
-    config.required = isRequiredField(descriptor, config);
-    config.readOnly = isReadOnlyField(descriptor, config);
-    props = descriptor.properties;
-    builder = uiBuilders.get(descriptor.userInterface);
-  }
-  if (config.required) {
-    config.label = `${config.label} (obrigatório) *`;
-  }
-  if (!builder) {
-    builder = buildTextInput;
-  }
-  return builder(config, props);
-};
-
-const FormItem = ({ source }) => {
-  if ("items" in source) {
-    const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
-  }
-  else {
-    return buildField(source);
-  }
-};
-
-const FormSheet = ({ store, source, dataElementId }) => {
-  return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
-    h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
-};
-
 /**
  * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
  *
@@ -2818,45 +3037,6 @@ function createStore(reducer, preloadedState, enhancer) {
   }, _ref2[$$observable] = observable, _ref2;
 }
 
-const inicialState = {};
-///////////////////////////////     REDUCERS     ///////////////////////////////
-function formReducer(state = inicialState, action) {
-  switch (action.type) {
-    case FormActions.METADATA_LOADED:
-      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
-    case FormActions.CHANGE_TAB:
-      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
-    default:
-      return state;
-  }
-}
-/////////////////////////////// ACTION CREATORS ///////////////////////////////
-function loadMetadata(formMetadata) {
-  return {
-    type: FormActions.METADATA_LOADED,
-    payload: formMetadata
-  };
-}
-function changeTab(currentSheet) {
-  return {
-    type: FormActions.CHANGE_TAB,
-    payload: currentSheet.tabKey
-  };
-}
-///////////////////////////////    SELECTORS    ///////////////////////////////
-function selectFormMetadata(state) {
-  return state.formMetadata;
-}
-function selectCurrentSheet(state) {
-  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
-}
-///////////////////////////////      TYPES      ///////////////////////////////
-var FormActions;
-(function (FormActions) {
-  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
-  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
-})(FormActions || (FormActions = {}));
-
 class DataBinder {
   constructor(dataUnit) {
     this._invalidFields = new Map();
@@ -3063,7 +3243,187 @@ class Bind {
   }
 }
 
-const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}.dynamic-content ez-collapsible-box{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}";
+const inicialState = {};
+///////////////////////////////     REDUCERS     ///////////////////////////////
+function formReducer(state = inicialState, action) {
+  switch (action.type) {
+    case FormActions.METADATA_LOADED:
+      return Object.assign(Object.assign({}, state), { formMetadata: action.payload, currentSheet: undefined });
+    case FormActions.CHANGE_TAB:
+      return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
+    default:
+      return state;
+  }
+}
+/////////////////////////////// ACTION CREATORS ///////////////////////////////
+function loadMetadata(formMetadata) {
+  return {
+    type: FormActions.METADATA_LOADED,
+    payload: formMetadata
+  };
+}
+function changeTab(currentSheet) {
+  return {
+    type: FormActions.CHANGE_TAB,
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
+  };
+}
+///////////////////////////////    SELECTORS    ///////////////////////////////
+function selectFormMetadata(state) {
+  return state.formMetadata;
+}
+function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
+function selectCurrentSheet(state) {
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
+}
+///////////////////////////////      TYPES      ///////////////////////////////
+var FormActions;
+(function (FormActions) {
+  FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
+  FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
+})(FormActions || (FormActions = {}));
+
+class FormMetadata {
+  constructor() {
+    this._sheets = new Map();
+    this._requiredFields = [];
+    this._cleanOnCopyFields = [];
+    this._defaultValues = {};
+  }
+  getSheet(name) {
+    return this._sheets.get(name);
+  }
+  getAllSheets() {
+    return this._sheets;
+  }
+  addSheet(sheet) {
+    this._sheets.set(sheet.name, sheet);
+    this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
+    this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
+    this._defaultValues = sheet.defaultValues;
+  }
+  getRequiredFields() {
+    return this._requiredFields;
+  }
+  getCleanOnCopyFields() {
+    return this._cleanOnCopyFields;
+  }
+  getDefaultValues() {
+    return this._defaultValues;
+  }
+}
+const buildFromDataUnit = (dataUnit) => {
+  const unitMD = dataUnit.metadata;
+  const metadata = new FormMetadata();
+  if (unitMD) {
+    const visibleFields = (unitMD.fields || []).filter(descriptor => descriptor.visible !== false);
+    const fields = visibleFields.map(descriptor => buildFormField(descriptor));
+    let defaultValues = {};
+    visibleFields
+      .filter(descriptor => descriptor.defaultValue)
+      .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
+    metadata.addSheet({
+      name: unitMD.name,
+      label: unitMD.label,
+      fields,
+      requiredFields: visibleFields
+        .filter(descriptor => descriptor.required)
+        .map(descriptor => descriptor.name),
+      cleanOnCopyFields: visibleFields
+        .filter(descriptor => { var _a, _b; return ((_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy) || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum); })
+        .map(descriptor => descriptor.name),
+      defaultValues
+    });
+  }
+  return metadata;
+};
+const buildFromConfig = (config, dataUnit) => {
+  var _a, _b;
+  const sheets = new Map();
+  const hiddenTabs = new Map();
+  const requiredFields = [];
+  const cleanOnCopyFields = [];
+  const defaultValues = {};
+  (_a = config === null || config === void 0 ? void 0 : config.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
+    if (!hiddenTabs.has(tab.label) && tab.visible === false) {
+      hiddenTabs.set(tab.label, tab);
+    }
+  });
+  (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
+    var _a, _b, _c, _d;
+    if (field.visible !== false) {
+      const tabConfig = getTabConfig(field.tab || "__main", sheets);
+      if (hiddenTabs.has(tabConfig.label)) {
+        return;
+      }
+      const descriptor = dataUnit.getField(field.name);
+      if (descriptor && tabConfig.visible) {
+        if (!sheets.has(tabConfig)) {
+          sheets.set(tabConfig, []);
+        }
+        const formField = buildFormField(descriptor, field);
+        sheets.get(tabConfig).push(formField);
+        if (formField.required) {
+          requiredFields.push(field.name);
+        }
+        const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
+          cleanOnCopyFields.push(field.name);
+        }
+        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
+        if (defaultValue) {
+          defaultValues[field.name] = field.defaultValue;
+        }
+      }
+    }
+  });
+  const metadata = new FormMetadata();
+  Array.from(sheets.entries())
+    .sort(sortTabs)
+    .forEach(([key, fields]) => {
+    metadata.addSheet({
+      label: (key.label === "__main") ? "Principal" : key.label,
+      name: key.label,
+      fields,
+      requiredFields,
+      cleanOnCopyFields,
+      defaultValues
+    });
+  });
+  return metadata;
+};
+const buildFormField = (descriptor, config) => {
+  let { name, label, group } = Object.assign({}, config);
+  let { readOnly, required } = Object.assign({}, config);
+  let props;
+  let userInterface;
+  if (descriptor) {
+    label = label || descriptor.label;
+    name = name || descriptor.name;
+    required = descriptor.required || (config === null || config === void 0 ? void 0 : config.required);
+    readOnly = descriptor.readOnly || (config === null || config === void 0 ? void 0 : config.readOnly);
+    props = descriptor.properties;
+    userInterface = descriptor.userInterface;
+  }
+  return {
+    name, label, group,
+    readOnly, required,
+    props,
+    userInterface: userInterface || UserInterface.SHORTTEXT
+  };
+};
+const getTabConfig = (tab, sheets) => {
+  const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
+  return tabConfig || { label: tab, visible: true };
+};
+const sortTabs = (a, b) => {
+  return a[0].label == '__main' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+};
+
+const ezFormCss = ".sc-ez-form-h{display:flex;flex-direction:column;width:100%}.dynamic-content.sc-ez-form ez-collapsible-box.sc-ez-form{--ez-collapsible-box__header--padding-right:var(--space-small, 6px);--ez-collapsible-box__header--padding-left:var(--space-small, 6px)}.multi-level__container.sc-ez-form{display:grid;grid-template-columns:minmax(20%, 300px) auto;width:100%}";
 
 let EzForm$1 = class extends HTMLElement$1 {
   constructor() {
@@ -3147,17 +3507,40 @@ let EzForm$1 = class extends HTMLElement$1 {
       }
     });
   }
+  resolveLevel(items) {
+    if (!this.levelResolver) {
+      return items;
+    }
+    return this.levelResolver(items);
+  }
+  getMultiLevelContent(sheets, currentSheet, currentSheetId) {
+    const treeItems = this.resolveLevel(sheets.map(sheet => {
+      const item = {
+        id: sheet.name,
+        label: sheet.label
+      };
+      return item;
+    }));
+    return (h("div", { class: "multi-level__container" }, h("div", null, h("ez-tree", { selectedId: currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.name, items: treeItems, onEzChange: (evt) => {
+        var _a;
+        const selectedItem = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.id;
+        if (selectedItem && selectedItem !== (currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.name)) {
+          this._store.dispatch(changeTab(selectedItem));
+        }
+      } })), h("div", null, this.buildFormContent(currentSheetId, currentSheet))));
+  }
   getDynamicContent() {
-    var _a;
+    var _a, _b;
     const formMD = selectFormMetadata(this._store.getState());
     if (!formMD)
       return null;
-    const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
-    if (!currentSheet) {
-      return null;
-    }
     const allSheets = Array.from(formMD.getAllSheets().values());
-    const result = [];
+    const currentSheetId = selectCurrentSheetId((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
+    const currentSheet = selectCurrentSheet((_b = this._store) === null || _b === void 0 ? void 0 : _b.getState());
+    if (this.multiLevel) {
+      return this.getMultiLevelContent(allSheets, currentSheet, currentSheetId);
+    }
+    let result = [];
     if (allSheets.length > 1) {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
@@ -3165,12 +3548,25 @@ let EzForm$1 = class extends HTMLElement$1 {
       const idTabSelector = `selector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet.label), false)}_selectorContainer`;
-    result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
+    result = result.concat(this.buildFormContent(currentSheetId, currentSheet));
     return result;
   }
+  buildFormContent(sheetId, currentSheet) {
+    const fields = currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.fields;
+    if (this.contentBuilder != undefined) {
+      const customContent = this.contentBuilder(sheetId, fields);
+      if (customContent != undefined) {
+        return h("div", { "innerHTML": customContent });
+      }
+    }
+    if (currentSheet == undefined) {
+      return;
+    }
+    const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
+    return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": idFormSheet }, h("ez-form-view", { class: "ez-row ez-padding-vertical--small", fields: fields })));
+  }
   processMetadata() {
-    if (!this.isStatic() && this.dataUnit) {
+    if (!this.isStatic() && this.dataUnit && this._store) {
       const metadata = this.config != undefined && Object.values(this.config).length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
       this._store.dispatch(loadMetadata(metadata));
     }
@@ -3210,7 +3606,7 @@ let EzForm$1 = class extends HTMLElement$1 {
     }
     if (action.type === Action.RECORDS_ADDED) {
       const metadata = selectFormMetadata(this._store.getState());
-      const defaultValues = metadata.getDefaultValues();
+      const defaultValues = metadata === null || metadata === void 0 ? void 0 : metadata.getDefaultValues();
       if (defaultValues) {
         const records = action.payload;
         return new DataUnitAction(Action.RECORDS_ADDED, records.map(record => {
@@ -3265,6 +3661,138 @@ let EzForm$1 = class extends HTMLElement$1 {
   static get style() { return ezFormCss; }
 };
 
+const buildSwitch = (field) => {
+  return buildField(field.name, field.label, field.readOnly, true);
+};
+const buildCheckBox = (field) => {
+  return buildField(field.name, field.label, field.readOnly, false);
+};
+function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
+    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
+}
+
+const buildComboBox = ({ name, label, readOnly, required, props }) => {
+  const prop = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
+};
+
+const buildDate = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+const buildTime = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+const buildDateTime = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+
+const buildFile = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
+    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+};
+
+const buildDecimal = ({ name, label, readOnly, props }) => {
+  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
+  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
+};
+const buildInteger = ({ name, label, readOnly }) => {
+  return buildNumeric(name, label, readOnly, 0, 0);
+};
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+}
+
+const buildSearch = ({ name, label, readOnly, required }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
+};
+
+const buildTextArea = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
+    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
+};
+
+const buildTextInput = ({ name, label, readOnly }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
+    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
+};
+
+const uiBuilders = new Map();
+uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
+uiBuilders.set(UserInterface.SWITCH, buildSwitch);
+uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
+uiBuilders.set(UserInterface.DATE, buildDate);
+uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.DATETIME, buildDateTime);
+uiBuilders.set(UserInterface.FILE, buildFile);
+uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
+uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
+uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
+const fieldBuilder = (field) => {
+  const builder = uiBuilders.get(field.userInterface) || buildTextInput;
+  const label = field.required ? `${field.label} (obrigatório) *` : field.label;
+  return builder(Object.assign(Object.assign({}, field), { label }));
+};
+
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
+
+let EzFormView$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  groupFields(fields) {
+    const result = new Map();
+    fields.forEach(item => {
+      const groupLabel = item.group;
+      if (groupLabel) {
+        let groupFields = result.get(groupLabel);
+        if (groupFields == undefined) {
+          groupFields = [];
+          result.set(groupLabel, groupFields);
+        }
+        groupFields.push(item);
+      }
+      else {
+        result.set(item.name, item);
+      }
+    });
+    return result;
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
+    if (this.fields == undefined) {
+      return;
+    }
+    return (h(Host, null, Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
+      if (Array.isArray(value)) {
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
+      }
+      else {
+        return fieldBuilder(value);
+      }
+    })));
+  }
+  get _element() { return this; }
+  static get style() { return ezFormViewCss; }
+};
+
 /**
           * @ag-grid-community/all-modules - Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue * @version v28.1.1
           * @link https://www.ag-grid.com/
@@ -120216,9 +120744,12 @@ let EzTabselector$1 = class extends HTMLElement$1 {
   }
   componentWillRender() {
     if (!this._processedTabs) {
-      this._processedTabs = [];
       if (this.tabs) {
-        if (typeof this.tabs === "string") {
+        if (Array.isArray(this.tabs)) {
+          this._processedTabs = [...this.tabs];
+        }
+        else {
+          this._processedTabs = [];
           this.tabs.split(",").forEach((label) => {
             label = label.trim();
             this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
@@ -121131,8 +121662,12 @@ const defaultIconResolver = (item, expanded, _level) => {
   return item.iconContracted || ICON_COLAPSED;
 };
 
+const defaultTooltipResolver = (item, _enabled, _level) => {
+  return item.tooltip || item.label;
+};
+
 const TreeItem = (props) => {
-  const { node, selectedId, itemClick, iconResolver, itemsList } = props;
+  const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList } = props;
   const treeItem = node.item;
   const level = props.level || 1;
   const disabled = node.isDisabled();
@@ -121142,17 +121677,17 @@ const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
-  return (h("ul", { title: treeItem.label, class: level === 1 ? "first-level" : undefined },
+  return (h("ul", { title: tooltipResolver(treeItem, !disabled, level), class: level === 1 ? "first-level" : undefined },
     h("li", Object.assign({ class: "tree-item", onClick: () => available && itemClick(treeItem) }, {
       disabled,
       selected: treeItem.id === selectedId,
       [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
     }),
       h("div", { class: "item-icon-box" }, expandable &&
-        h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level) })),
+        h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })),
       h("label", { class: "item-label" }, treeItem.label)),
     expanded
-      && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, level: level + 1, iconResolver: iconResolver, itemsList: itemsList }))));
+      && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };
 
 class Node$1 {
@@ -121174,6 +121709,31 @@ class Node$1 {
       this._childrenLoaded = true;
     }
   }
+  refresh(newItem) {
+    if (this.isPlaceHolder) {
+      return;
+    }
+    this.item = Object.assign(Object.assign({}, newItem), { expanded: this.item.expanded });
+    this._isLazyLoad = typeof this.item.children === "function" || this.item.childrenCount > 0;
+    const oldChildren = this.children;
+    this.children = new Map();
+    if (Array.isArray(this.item.children)) {
+      Array.from(this.item.children).forEach(item => {
+        const node = oldChildren.get(item.id);
+        if (node) {
+          node.refresh(item);
+          this.children.set(item.id, node);
+        }
+        else {
+          this.addChild(this._tree, Object.assign({}, item));
+        }
+      });
+      this._childrenLoaded = true;
+    }
+    else {
+      this._childrenLoaded = false;
+    }
+  }
   isDisabled() {
     if (this.isPlaceHolder) {
       return false;
@@ -121184,10 +121744,7 @@ class Node$1 {
     if (this.isPlaceHolder) {
       return;
     }
-    this.item.children = children;
-    this._childrenLoaded = true;
-    this.children.clear();
-    children.forEach(item => this.addChild(this._tree, Object.assign({}, item)));
+    this.refresh(Object.assign(Object.assign({}, this.item), { children }));
   }
   addChild(tree, item) {
     if (!this.children.has(item.id)) {
@@ -121253,8 +121810,29 @@ class Tree extends Node$1 {
     return this._disabledValues.get(id);
   }
   load(items) {
-    this.children.clear();
-    items.forEach(item => this.addChild(this, Object.assign({}, item)));
+    const oldChildren = this.children;
+    this.children = new Map();
+    items.forEach(item => {
+      const node = oldChildren.get(item.id);
+      if (node) {
+        node.refresh(item);
+        this.children.set(item.id, node);
+      }
+      else {
+        this.addChild(this, Object.assign({}, item));
+      }
+    });
+  }
+  updateItem(item) {
+    if (item == undefined) {
+      return;
+    }
+    const node = this.getNode(item.id);
+    if (node == undefined) {
+      return;
+    }
+    Object.keys(item).forEach(attrib => node.item[attrib] = item[attrib]);
+    this._changeCallback();
   }
   async open(path) {
     return new Promise(async (resolve) => {
@@ -121298,7 +121876,7 @@ class Tree extends Node$1 {
   }
 }
 
-const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding)}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{cursor:pointer;background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{cursor:unset;background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
+const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding)}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
 
 let EzTree$1 = class extends HTMLElement$1 {
   constructor() {
@@ -121309,6 +121887,9 @@ let EzTree$1 = class extends HTMLElement$1 {
     this.ezOpenItem = createEvent(this, "ezOpenItem", 7);
     this._tree = new Tree(() => forceUpdate(this));
     this._onItemClick = (item) => {
+      this.value = item;
+    };
+    this._onIconClick = (item) => {
       this.openClose(item);
       this.value = item;
     };
@@ -121320,6 +121901,10 @@ let EzTree$1 = class extends HTMLElement$1 {
      * Define uma função que vai resolver o ícone daquele item. Retorna o nome do ícone da lib de icones do DS.
      */
     this.iconResolver = defaultIconResolver;
+    /**
+     * Define uma função que vai resolver o `tooltip` ou `title` daquele item.
+     */
+    this.tooltipResolver = defaultTooltipResolver;
   }
   /**
    * Efetua a seleção de um item.
@@ -121379,7 +121964,9 @@ let EzTree$1 = class extends HTMLElement$1 {
     this._tree.load(this.items);
   }
   observeValue() {
+    var _a;
     this.ezChange.emit(this.value);
+    this.selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
   }
   onKeyDownListener(event) {
     if (!this.value) {
@@ -121422,7 +122009,7 @@ let EzTree$1 = class extends HTMLElement$1 {
     if (expanded) {
       this.ezOpenItem.emit(item);
     }
-    forceUpdate(this);
+    this._tree.updateItem(item);
   }
   previousLevel() {
     var _a;
@@ -121431,7 +122018,7 @@ let EzTree$1 = class extends HTMLElement$1 {
     }
     if (this.value.expanded) {
       this.value.expanded = false;
-      forceUpdate(this);
+      this._tree.updateItem(this.value);
     }
     else {
       const node = this._tree.getNode(this.value.id);
@@ -121454,19 +122041,50 @@ let EzTree$1 = class extends HTMLElement$1 {
     }
     else {
       this.value.expanded = true;
-      forceUpdate(this);
+      this._tree.updateItem(this.value);
     }
   }
-  nextItem() {
-    const nextIndex = this._visibleItems.indexOf(this.value) + 1;
-    if (nextIndex < this._visibleItems.length) {
+  indexOf(id) {
+    if (id == undefined) {
+      return -1;
+    }
+    for (let i = 0; i < this._visibleItems.length; i++) {
+      const item = this._visibleItems[i];
+      if (item.id === id) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  selectNextItem(indexIncrement) {
+    var _a;
+    const nextIndex = this.indexOf((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) + indexIncrement;
+    if (nextIndex > -1 && nextIndex < this._visibleItems.length) {
       this.value = this._visibleItems[nextIndex];
     }
   }
+  nextItem() {
+    this.selectNextItem(1);
+  }
   previousItem() {
-    const nextIndex = this._visibleItems.indexOf(this.value) - 1;
-    if (nextIndex > -1) {
-      this.value = this._visibleItems[nextIndex];
+    this.selectNextItem(-1);
+  }
+  connectedCallback() {
+    if (this.items) {
+      this._tree.load(this.items);
+    }
+  }
+  componentWillRender() {
+    var _a;
+    if (!this.selectedId || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) === this.selectedId) {
+      return;
+    }
+    const node = this._tree.getNode(this.selectedId);
+    if (node) {
+      this.value = node.item;
+    }
+    else {
+      this.selectedId = undefined;
     }
   }
   render() {
@@ -121480,7 +122098,7 @@ let EzTree$1 = class extends HTMLElement$1 {
       :
         this._tree.getChildren().map(node => {
           var _a;
-          return h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconResolver: this.iconResolver, itemsList: this._visibleItems });
+          return h(TreeItem, { selectedId: (_a = this.value) === null || _a === void 0 ? void 0 : _a.id, node: node, itemClick: this._onItemClick, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver, itemsList: this._visibleItems });
         })));
   }
   get _element() { return this; }
@@ -121962,9 +122580,11 @@ const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-bo
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
+const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]);
 const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513]}]);
-const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16]}]);
+const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"multiLevel":[4,"multi-level"],"levelResolver":[16],"contentBuilder":[16]}]);
+const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16]}]);
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32]}]);
@@ -121984,7 +122604,7 @@ const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edi
 const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
-const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[16],"value":[1040],"iconResolver":[16],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
+const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[16],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
 const defineCustomElements = (opts) => {
@@ -122004,9 +122624,11 @@ const defineCustomElements = (opts) => {
   EzDateInput,
   EzDateTimeInput,
   EzDialog,
+  EzDropdown,
   EzFileItem,
   EzFilterInput,
   EzForm,
+  EzFormView,
   EzGrid,
   EzIcon,
   EzList,
@@ -122037,4 +122659,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzFileItem, EzFilterInput, EzForm, EzGrid, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };
+export { EzActionsButton, EzAlert, EzApplication, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };