@sankhyalabs/ezui 2.11.0 → 2.13.0

package/dist/custom-elements/index.js

@@ -2772,7 +2772,7 @@ const buildFromDataUnit = (dataUnit) => {
     let defaultValues = {};
     visibleFields
       .filter(descriptor => descriptor.defaultValue)
-      .map((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
+      .forEach((descriptor) => defaultValues[descriptor.name] = descriptor.defaultValue);
     metadata.addSheet({
       label: unitMD.label,
       name: unitMD.name,
@@ -3337,15 +3337,19 @@ function loadMetadata(formMetadata) {
 function changeTab(currentSheet) {
   return {
     type: FormActions.CHANGE_TAB,
-    payload: currentSheet.tabKey
+    payload: typeof currentSheet === "string" ? currentSheet : currentSheet.tabKey
   };
 }
 ///////////////////////////////    SELECTORS    ///////////////////////////////
 function selectFormMetadata(state) {
   return state.formMetadata;
 }
+function selectCurrentSheetId(state) {
+  return state.currentSheet;
+}
 function selectCurrentSheet(state) {
-  return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
+  const currentSheetId = selectCurrentSheetId(state);
+  return currentSheetId ? state.formMetadata.getSheet(currentSheetId) : Array.from(state.formMetadata.getAllSheets().values())[0];
 }
 ///////////////////////////////      TYPES      ///////////////////////////////
 var FormActions;
@@ -3560,7 +3564,7 @@ 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 ezFormCss = "ez-form.sc-ez-form{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() {
@@ -3644,17 +3648,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 };
@@ -3662,12 +3689,24 @@ 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) {
+    if (this.contentBuilder != undefined) {
+      const customContent = this.contentBuilder(sheetId, currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.items, buildField);
+      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(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet });
+  }
   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));
     }
@@ -3707,7 +3746,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 => {
@@ -119231,6 +119270,339 @@ let EzGrid$1 = class extends HTMLElement$1 {
   static get style() { return ezGridCss; }
 };
 
+const HIERARCHY_SEPARATOR = '>>';
+class Guide {
+  constructor(list) {
+    this.originalList = [];
+    this.guideMap = new Map();
+    this.hierarchiesAlreadyLoaded = new Set();
+    if (list === null || list === void 0 ? void 0 : list.length)
+      this.setList(list);
+  }
+  /**
+    * Converte uma lista de objetos IGuideItem em um objeto IGuideMap com sua hierarquia.
+    * @param list Uma lista de objetos IGuideItem representando a lista de itens.
+    * @param hierarquiaList Uma lista opcional de strings que representa a hierarquia dos itens pai.
+    * @param indexReferences Uma lista opcional de números que representa as referências de índice da lista original.
+    * @returns Uma Promise que resolve para um objeto IGuideMap com os itens e sua hierarquia.
+  */
+  convertArrayToMap(list, hierarchyList = [], indexReferences = []) {
+    return new Promise(resolve => {
+      list.forEach(async (item, index) => {
+        const updatedHierarchyList = [...hierarchyList, item.id];
+        const key = updatedHierarchyList.join(HIERARCHY_SEPARATOR);
+        const currentIndexReferences = [...indexReferences, index];
+        const children = Array.isArray(item.children) ? item.children : [];
+        item = Object.assign(Object.assign({}, item), { parentId: hierarchyList[hierarchyList.length - 1], indexReferences: currentIndexReferences, hierarchy: updatedHierarchyList, hierarchyId: key });
+        delete item.children;
+        this.guideMap.set(key, item);
+        if (children.length)
+          await this.convertArrayToMap(children, updatedHierarchyList, currentIndexReferences);
+      });
+      resolve(this.guideMap);
+    });
+  }
+  /**
+    * Converte um objeto IGuideMap em uma lista de objetos IGuideItem com sua hierarquia.
+    * @param map Um objeto IGuideMap opcional que representa o mapa de itens com sua hierarquia.
+    * @returns Uma Promise que resolve para uma lista de objetos IGuideItem com sua hierarquia.
+  */
+  convertMapToArray(map = this.guideMap) {
+    return new Promise(resolve => {
+      const array = [];
+      const itemsById = {};
+      map.forEach(value => {
+        var _a;
+        const item = Object.assign({}, value);
+        if (((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+          delete item.children;
+        }
+        itemsById[item.id] = item;
+      });
+      Object.values(itemsById).forEach(item => {
+        if (item.parentId) {
+          const parent = itemsById[item.parentId];
+          if (Array.isArray(parent.children)) {
+            parent.children.push(item);
+          }
+          else {
+            parent.children = [item];
+          }
+        }
+        else {
+          array.push(item);
+        }
+      });
+      resolve(array);
+    });
+  }
+  /**
+    * Obtém a lista selecionada de itens com base na lista original e na lista de índice selecionada.
+    * @param originalList Uma lista de objetos IGuideItem representando a lista original de itens.
+    * @param selectedIndexList Uma matriz representando a lista de índices selecionada.
+    * @returns Uma lista de objetos IGuideItem representando a lista selecionada de itens.
+  */
+  getSelectedList(originalList, selectedIndexList) {
+    const selectedList = [];
+    selectedIndexList.forEach(selectedIndex => {
+      if (!selectedIndex.length)
+        return;
+      const [parentIndex, childIndex] = selectedIndex;
+      if (childIndex === undefined) {
+        selectedList.push(originalList[parentIndex]);
+      }
+      else {
+        const parent = originalList[parentIndex];
+        const child = parent.children[childIndex];
+        const selectedParent = selectedList.find(item => item.id === parent.id);
+        if (selectedParent) {
+          selectedParent.children.push(child);
+        }
+        else {
+          selectedList.push(Object.assign(Object.assign({}, parent), { children: [child] }));
+        }
+      }
+    });
+    return selectedList;
+  }
+  /**
+    * Define a lista de itens para o Map guideMap.
+    * @param list Uma lista de objetos IGuideItem representando a lista de itens.
+    * @returns Uma Promise que resolve quando a lista é convertida para o Map.
+  */
+  setList(list) {
+    return new Promise(async (resolve) => {
+      this.guideMap.clear();
+      if (!this.originalList.length) {
+        this.originalList = ObjectUtils$1.copy(list);
+      }
+      await this.convertArrayToMap(list);
+      resolve();
+    });
+  }
+  /**
+    * Obtém a lista de itens com sua hierarquia.
+    * @returns Uma Promise que resolve para uma lista de objetos IGuideItem com sua hierarquia.
+  */
+  getList() {
+    return this.convertMapToArray();
+  }
+  /**
+    * Adiciona filhos a um item pai no guia.
+    * @param parent Um objeto IGuideItem que representa o item pai.
+    * @param children Uma lista de objetos IGuideItem representando os itens filhos.
+    * @returns Uma Promise que resolve para uma lista de objetos IGuideItem com sua hierarquia.
+  */
+  addChildren(parent, children) {
+    return new Promise(async (resolve, reject) => {
+      if (parent.disabled)
+        return reject('Parent is disabled');
+      if (!parent.hierarchy || !parent.hierarchyId)
+        return reject('Hierarchy not found');
+      if (this.hierarchiesAlreadyLoaded.has(parent.hierarchyId))
+        return resolve([]);
+      await this.convertArrayToMap(children, parent.hierarchy);
+      const list = await this.getList();
+      this.originalList = ObjectUtils$1.copy(list);
+      this.hierarchiesAlreadyLoaded.add(parent.hierarchyId);
+      resolve(list);
+    });
+  }
+  /**
+      * Obtém os itens a partir de um campo corresponde à string de consulta.
+      * @param query Uma string que representa a consulta para corresponder ao rótulo.
+      * @param fieldName Uma string opcional que representa o nome do campo para corresponder à consulta.
+      * @returns Uma Promise que resolve para um objeto com o primeiro item encontrado e uma matriz de itens correspondentes com sua hierarquia.
+     */
+  getItemsByLabel(query, fieldName = 'label', selectedItem) {
+    return new Promise(async (resolve) => {
+      var _a;
+      const mapResults = [];
+      let firstOcorrence;
+      const itemFromMap = this.guideMap.get(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.hierarchyId);
+      if (itemFromMap)
+        itemFromMap.expanded = true;
+      for (const item of this.guideMap.values()) {
+        const label = ((_a = item === null || item === void 0 ? void 0 : item[fieldName]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        if (label.includes(query.toLowerCase())) {
+          if (!firstOcorrence)
+            firstOcorrence = item;
+          mapResults.push(item.indexReferences);
+        }
+      }
+      const updatedList = this.getSelectedList(this.originalList, mapResults);
+      resolve({
+        first: firstOcorrence,
+        list: updatedList,
+      });
+    });
+  }
+  /**
+    * Habilita todos os objetos IGuideItem.
+    * @returns Uma Promise que resolve com o array atualizado de objetos IGuideItem.
+  */
+  enableAllItems() {
+    return new Promise(async (resolve) => {
+      for (const item of this.guideMap.values())
+        item.disabled = false;
+      const list = await this.getList();
+      this.originalList = ObjectUtils$1.copy(list);
+      resolve(list);
+    });
+  }
+  /**
+    * Ativa somente objetos IGuideItem com base em uma matriz de IDs.
+    * @param ids Um array de IDs para habilitar.
+    * @param customTooltip Uma string para definir o tooltip de itens desabilitados.
+    * @returns Uma Promise que resolve com o array atualizado de objetos IGuideItem.
+  */
+  enableItemsById(ids = [], customTooltip = '') {
+    return new Promise(async (resolve) => {
+      for (const item of this.guideMap.values()) {
+        const isEnabled = ids.includes(item.id);
+        item.disabled = !isEnabled;
+        item.tooltip = isEnabled ? item.tooltip : customTooltip;
+      }
+      const list = await this.getList();
+      this.originalList = ObjectUtils$1.copy(list);
+      resolve(list);
+    });
+  }
+}
+
+const ezGuideNavigatorCss = ":host{--ez-guide-navigator--padding:0 var(--space--large);--ez-guide-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-guide-navigator--background-color:var(--color--inverted);--ez-guide-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-guide-navigator--actions-gap:var(--space--medium);--ez-guide-navigator--actions-margin:var(--space--medium) 0 var(--space--medium)}.inverted{transform:rotate(180deg)}.ez-guide-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:var(--ez-guide-navigator--padding);background-color:var(--ez-guide-navigator--background-color);-webkit-box-shadow:var(--ez-guide-navigator--box-shadow);box-shadow:var(--ez-guide-navigator--box-shadow);border-radius:var(--ez-guide-navigator--border-radius)}.ez-guide-navigator__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-guide-navigator--actions-gap);margin:var(--ez-guide-navigator--actions-margin)}";
+
+const ENTER_KEY = 'Enter';
+let EzGuideNavigator$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    //TODO: Quando a filtragem for feita dentro da árvore, não será mais necessário 
+    this.guide = new Guide();
+    //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+    //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+    //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+    /**
+     * Provedor de dados para o guide navigator.
+    */
+    this.binder = null;
+    /**
+     * Define se o menu de navegação está aberto.
+    */
+    this.open = true;
+    //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+    //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+    //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+    /**
+     * Lista de itens do menu de navegação.
+    */
+    this.items = [];
+    /**
+     * Valor do campo de pesquisa usado na filtragem de guias.
+     */
+    this.filterText = '';
+  }
+  /**
+   * Habilita itens específicos a partir de uma lista de ID's.
+  */
+  async enableOnly(id, customTooltip) {
+    //TODO: Levar para a árvore
+    this._tree.items = await this.guide.enableItemsById(id, customTooltip);
+  }
+  /**
+   * Habilita todos os itens do menu de navegação.
+  */
+  async enableAll() {
+    //TODO: Levar para a árvore
+    this._tree.items = await this.guide.enableAllItems();
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  handleBinderChange(newBinder, oldBinder) {
+    if (newBinder != oldBinder) {
+      this.initTree();
+    }
+  }
+  async handleToggleSidebar() {
+    this.open = !this.open;
+    if (this.open) {
+      await this.initTree();
+      this.filterItems();
+    }
+  }
+  handleSelectTreeItem({ detail: parent }) {
+    if (!parent.expanded)
+      return;
+    //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+    //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+    //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+    this.binder.fetchItems(parent.id).then(async (children) => {
+      if (!(children === null || children === void 0 ? void 0 : children.length))
+        return;
+      await this.guide.addChildren(parent, children);
+      const { list } = await this.guide.getItemsByLabel(this.filterText, 'label', parent);
+      this._tree.items = list;
+      this._tree.openItem(parent.hierarchyId || parent.id);
+    });
+    this.binder.onSelectItem(parent);
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  handleFilterTree(event) {
+    if (event.key === ENTER_KEY)
+      this.filterItems();
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  async setTreeIems(list, first) {
+    var _a;
+    this._tree.items = list;
+    if (first && !(first === null || first === void 0 ? void 0 : first.disabled)) {
+      const parentHierarchyId = ((_a = first.hierarchy) === null || _a === void 0 ? void 0 : _a.slice(0, -1).join(HIERARCHY_SEPARATOR)) || first.id;
+      await this._tree.openItem(parentHierarchyId);
+      await this._tree.selectItem(first.id);
+    }
+    else {
+      this._tree.selectItem(null);
+    }
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  filterItems() {
+    this.guide.getItemsByLabel(this.filterText).then(async ({ list, first }) => {
+      this.setTreeIems(list, first);
+    });
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  async initTree() {
+    if (!this.binder)
+      return;
+    const binderItems = await this.binder.fetchItems();
+    await this.guide.setList(binderItems);
+    const guideItems = await this.guide.getList();
+    this.setTreeIems(guideItems);
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element);
+    this.initTree();
+  }
+  render() {
+    return (h(Host, null, this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") }, h("div", { role: "search", class: "ez-guide-navigator__actions" }, h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => (this.filterText = event.detail), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }), h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })), h("ez-tree", { ref: element => (this._tree = element), onEzChange: evt => this.handleSelectTreeItem(evt), "data-element-id": ElementIDUtils.getInternalIDInfo("tree") }))) : (h("ez-sidebar-button", { onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }))));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "binder": ["handleBinderChange"]
+  }; }
+  static get style() { return ezGuideNavigatorCss; }
+};
+
 const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-account-outline:before{content:\"\\ea03\"}.ez-icon-account:before{content:\"\\ea04\"}.ez-icon-actions-sprite-v1:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-antecipação:before{content:\"\\ea0b\"}.ez-icon-apps:before{content:\"\\ea0c\"}.ez-icon-arrow_back:before{content:\"\\ea0d\"}.ez-icon-arrow_downward:before{content:\"\\ea0e\"}.ez-icon-baixa:before{content:\"\\ea0f\"}.ez-icon-balance:before{content:\"\\ea10\"}.ez-icon-bell-inverted:before{content:\"\\ea11\"}.ez-icon-bell:before{content:\"\\ea12\"}.ez-icon-boleto:before{content:\"\\ea13\"}.ez-icon-business-center:before{content:\"\\ea14\"}.ez-icon-calendar-clock:before{content:\"\\ea15\"}.ez-icon-calendar:before{content:\"\\ea16\"}.ez-icon-cash-remove:before{content:\"\\ea17\"}.ez-icon-check-circle-inverted:before{content:\"\\ea18\"}.ez-icon-check-circle:before{content:\"\\ea19\"}.ez-icon-check:before{content:\"\\ea1a\"}.ez-icon-chevron-down:before{content:\"\\ea1b\"}.ez-icon-chevron-left:before{content:\"\\ea1c\"}.ez-icon-chevron-right:before{content:\"\\ea1d\"}.ez-icon-chevron-up:before{content:\"\\ea1e\"}.ez-icon-circle--medium:before{content:\"\\ea1f\"}.ez-icon-circle:before{content:\"\\ea20\"}.ez-icon-cleaning:before{content:\"\\ea21\"}.ez-icon-clipboard:before{content:\"\\ea22\"}.ez-icon-close:before{content:\"\\ea23\"}.ez-icon-cobrar:before{content:\"\\ea24\"}.ez-icon-code:before{content:\"\\ea25\"}.ez-icon-configuration:before{content:\"\\ea26\"}.ez-icon-copy:before{content:\"\\ea27\"}.ez-icon-credit_card:before{content:\"\\ea28\"}.ez-icon-crop:before{content:\"\\ea29\"}.ez-icon-custom:before{content:\"\\ea2a\"}.ez-icon-delete:before{content:\"\\ea2b\"}.ez-icon-description:before{content:\"\\ea2c\"}.ez-icon-dividir:before{content:\"\\ea2d\"}.ez-icon-docx:before{content:\"\\ea2e\"}.ez-icon-dot-notification:before{content:\"\\ea2f\"}.ez-icon-dots-horizontal:before{content:\"\\ea30\"}.ez-icon-dots-vertical:before{content:\"\\ea31\"}.ez-icon-drag-indicator:before{content:\"\\ea32\"}.ez-icon-dual-chevron-down:before{content:\"\\ea33\"}.ez-icon-dual-chevron-up:before{content:\"\\ea34\"}.ez-icon-edit-file:before{content:\"\\ea35\"}.ez-icon-edit-table:before{content:\"\\ea36\"}.ez-icon-edit-time:before{content:\"\\ea37\"}.ez-icon-edit:before{content:\"\\ea38\"}.ez-icon-email:before{content:\"\\ea39\"}.ez-icon-estorno:before{content:\"\\ea3a\"}.ez-icon-exe:before{content:\"\\ea3b\"}.ez-icon-expand:before{content:\"\\ea3c\"}.ez-icon-expandir_card:before{content:\"\\ea3d\"}.ez-icon-extrato:before{content:\"\\ea3e\"}.ez-icon-eye-off:before{content:\"\\ea3f\"}.ez-icon-eye:before{content:\"\\ea40\"}.ez-icon-favorite:before{content:\"\\ea41\"}.ez-icon-figma:before{content:\"\\ea42\"}.ez-icon-file-download:before{content:\"\\ea43\"}.ez-icon-file-upload:before{content:\"\\ea44\"}.ez-icon-filter:before{content:\"\\ea45\"}.ez-icon-find-file:before{content:\"\\ea46\"}.ez-icon-find-page:before{content:\"\\ea47\"}.ez-icon-format-color-fill:before{content:\"\\ea48\"}.ez-icon-generic:before{content:\"\\ea49\"}.ez-icon-gif:before{content:\"\\ea4a\"}.ez-icon-graph_bar:before{content:\"\\ea4b\"}.ez-icon-handshake:before{content:\"\\ea4c\"}.ez-icon-help-inverted:before{content:\"\\ea4d\"}.ez-icon-help:before{content:\"\\ea4e\"}.ez-icon-hide_menu:before{content:\"\\ea4f\"}.ez-icon-home:before{content:\"\\ea50\"}.ez-icon-icons104:before{content:\"\\ea51\"}.ez-icon-language:before{content:\"\\ea52\"}.ez-icon-launch:before{content:\"\\ea53\"}.ez-icon-lightbulb:before{content:\"\\ea54\"}.ez-icon-list:before{content:\"\\ea55\"}.ez-icon-location:before{content:\"\\ea56\"}.ez-icon-lock-outline:before{content:\"\\ea57\"}.ez-icon-lock:before{content:\"\\ea58\"}.ez-icon-menu:before{content:\"\\ea59\"}.ez-icon-mid:before{content:\"\\ea5a\"}.ez-icon-minus:before{content:\"\\ea5b\"}.ez-icon-money-off:before{content:\"\\ea5c\"}.ez-icon-money:before{content:\"\\ea5d\"}.ez-icon-more:before{content:\"\\ea5e\"}.ez-icon-mp3:before{content:\"\\ea5f\"}.ez-icon-mp4:before{content:\"\\ea60\"}.ez-icon-north-west:before{content:\"\\ea61\"}.ez-icon-number:before{content:\"\\ea62\"}.ez-icon-ordem-ascendente:before{content:\"\\ea63\"}.ez-icon-ordem-descendente:before{content:\"\\ea64\"}.ez-icon-parcelar:before{content:\"\\ea65\"}.ez-icon-pause:before{content:\"\\ea66\"}.ez-icon-payments:before{content:\"\\ea67\"}.ez-icon-pdf:before{content:\"\\ea68\"}.ez-icon-play:before{content:\"\\ea69\"}.ez-icon-plus:before{content:\"\\ea6a\"}.ez-icon-png:before{content:\"\\ea6b\"}.ez-icon-power:before{content:\"\\ea6c\"}.ez-icon-pptx:before{content:\"\\ea6d\"}.ez-icon-print:before{content:\"\\ea6e\"}.ez-icon-push-pin:before{content:\"\\ea6f\"}.ez-icon-rateio:before{content:\"\\ea70\"}.ez-icon-receipt:before{content:\"\\ea71\"}.ez-icon-recolher_card:before{content:\"\\ea72\"}.ez-icon-restore:before{content:\"\\ea73\"}.ez-icon-return:before{content:\"\\ea74\"}.ez-icon-save:before{content:\"\\ea75\"}.ez-icon-search:before{content:\"\\ea76\"}.ez-icon-settings-inverted:before{content:\"\\ea77\"}.ez-icon-settings:before{content:\"\\ea78\"}.ez-icon-share:before{content:\"\\ea79\"}.ez-icon-shield:before{content:\"\\ea7a\"}.ez-icon-show_menu:before{content:\"\\ea7b\"}.ez-icon-south-east:before{content:\"\\ea7c\"}.ez-icon-sync:before{content:\"\\ea7d\"}.ez-icon-table:before{content:\"\\ea7e\"}.ez-icon-tag_code:before{content:\"\\ea7f\"}.ez-icon-text:before{content:\"\\ea80\"}.ez-icon-timeline:before{content:\"\\ea81\"}.ez-icon-timer-outline:before{content:\"\\ea82\"}.ez-icon-tune:before{content:\"\\ea83\"}.ez-icon-txt:before{content:\"\\ea84\"}.ez-icon-un-pin:before{content:\"\\ea85\"}.ez-icon-unfold_less:before{content:\"\\ea86\"}.ez-icon-unfold_more:before{content:\"\\ea87\"}.ez-icon-user-circle:before{content:\"\\ea88\"}.ez-icon-warning-outline:before{content:\"\\ea89\"}.ez-icon-warning_triangle:before{content:\"\\ea8a\"}.ez-icon-whatshot:before{content:\"\\ea8b\"}.ez-icon-xlsx:before{content:\"\\ea8c\"}.ez-icon-zip:before{content:\"\\ea8d\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
 let EzIcon$1 = class extends HTMLElement$1 {
@@ -120713,9 +121085,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 });
@@ -121628,8 +122003,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();
@@ -121639,17 +122018,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("label", { class: "item-label" }, treeItem.label)),
+        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", title: treeItem.disabled ? (treeItem.tooltip || treeItem.label) : treeItem.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 {
@@ -121671,6 +122050,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;
@@ -121681,10 +122085,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)) {
@@ -121750,8 +122151,18 @@ 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));
+      }
+    });
   }
   async open(path) {
     return new Promise(async (resolve) => {
@@ -121795,7 +122206,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() {
@@ -121806,6 +122217,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;
     };
@@ -121817,6 +122231,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.
@@ -121873,10 +122291,12 @@ let EzTree$1 = class extends HTMLElement$1 {
     }
   }
   observeItems() {
-    this._tree.load(this.items);
+    return 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) {
@@ -121954,16 +122374,47 @@ let EzTree$1 = class extends HTMLElement$1 {
       forceUpdate(this);
     }
   }
-  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() {
@@ -121977,7 +122428,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; }
@@ -122462,8 +122913,9 @@ const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"co
 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 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 EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"binder":[16],"open":[1540],"items":[32],"filterText":[32]}]);
 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]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);
@@ -122482,7 +122934,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":[1040],"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) => {
@@ -122507,6 +122959,7 @@ const defineCustomElements = (opts) => {
   EzFilterInput,
   EzForm,
   EzGrid,
+  EzGuideNavigator,
   EzIcon,
   EzList,
   EzLoadingBar,
@@ -122536,4 +122989,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, 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, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };