@sankhyalabs/ezui 2.14.1 → 2.14.2

package/dist/custom-elements/index.js

@@ -119262,336 +119262,52 @@ 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 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)}.hidden{display:none}";
 
-const ENTER_KEY = 'Enter';
+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 = '';
+    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);
+   * Desabilita um ou mais itens.
+   */
+  async disableItem(id) {
+    [].concat(id).forEach(item => this._tree.disableItem(item));
   }
   /**
-   * 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();
-    }
+   * Habilita um ou mais itens.
+   */
+  async enableItem(id) {
+    [].concat(id).forEach(item => this._tree.enableItem(item));
   }
   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);
+    if (event.key === ENTER_KEY) {
+      this._tree.applyFilter(this.filterText);
     }
   }
-  //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") }))));
+    ElementIDUtils.addIDInfoIfNotExists(this._element);
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "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), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver }))));
   }
   get _element() { return this; }
-  static get watchers() { return {
-    "binder": ["handleBinderChange"]
-  }; }
   static get style() { return ezGuideNavigatorCss; }
 };
 
@@ -120462,7 +120178,7 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
   static get style() { return ezNumberInputCss; }
 };
 
-const ezPopoverCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--more-visible, 2);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:100%}";
+const ezPopoverCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 3);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:100%}";
 
 let EzPopover$1 = class extends HTMLElement$1 {
   constructor() {
@@ -120566,7 +120282,7 @@ let EzPopover$1 = class extends HTMLElement$1 {
    */
   async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
     const useOverlay = this.overlayType !== "none";
-    const overlayClassName = `ez-scrim ez-scrim-${this.overlayType}`;
+    const overlayClassName = `ez-scrim ez-scrim--${this.overlayType}`;
     let floatingOptions = {
       autoClose: this.autoClose,
       top,
@@ -122001,6 +121717,9 @@ const defaultTooltipResolver = (item, _enabled, _level) => {
 
 const TreeItem = (props) => {
   const { node, selectedId, itemClick, iconClick, iconResolver, tooltipResolver, itemsList } = props;
+  if (!node.visible) {
+    return;
+  }
   const treeItem = node.item;
   const level = props.level || 1;
   const disabled = node.isDisabled();
@@ -122010,15 +121729,15 @@ const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
-  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) }, {
+  return (h("ul", { class: level === 1 ? "first-level" : undefined },
+    h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), 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), onClick: () => available && iconClick(treeItem) })),
-      h("label", { class: "item-label", title: treeItem.disabled ? (treeItem.tooltip || treeItem.label) : treeItem.label }, treeItem.label)),
+      h("label", { class: "item-label" }, treeItem.label)),
     expanded
       && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };
@@ -122026,6 +121745,7 @@ const TreeItem = (props) => {
 class Node$1 {
   constructor(tree, item, parent, isPlaceHolder = false) {
     this.children = new Map();
+    this.visible = true;
     this.item = item;
     this.parent = parent;
     this._tree = tree;
@@ -122046,7 +121766,7 @@ class Node$1 {
     if (this.isPlaceHolder) {
       return;
     }
-    this.item = Object.assign(Object.assign({}, newItem), { expanded: this.item.expanded });
+    this.item = Object.assign({}, newItem);
     this._isLazyLoad = typeof this.item.children === "function" || this.item.childrenCount > 0;
     const oldChildren = this.children;
     this.children = new Map();
@@ -122143,8 +121863,13 @@ class Tree extends Node$1 {
     return this._disabledValues.get(id);
   }
   load(items) {
+    if (items === this._currentItems) {
+      return;
+    }
+    this._currentItems = items;
     const oldChildren = this.children;
     this.children = new Map();
+    this._disabledValues.clear();
     items.forEach(item => {
       const node = oldChildren.get(item.id);
       if (node) {
@@ -122156,6 +121881,11 @@ class Tree extends Node$1 {
       }
     });
   }
+  setFilterPattern(pattern) {
+    this._filterPattern = StringUtils$1.replaceAccentuatedCharsKeepSymbols(pattern);
+    this.applyFilter(this);
+    this._changeCallback();
+  }
   updateItem(item) {
     if (item == undefined) {
       return;
@@ -122169,11 +121899,35 @@ class Tree extends Node$1 {
   }
   async open(path) {
     return new Promise(async (resolve) => {
-      await this.walk(this, path, node => node.item.expanded = true);
+      await this.walkPath(this, path, node => node.item.expanded = true);
       resolve();
     });
   }
-  async walk(parent, path, callback, currentLevel = 0) {
+  applyFilter(node) {
+    node.children.forEach((value) => {
+      this.applyFilter(value);
+    });
+    if (node.item == undefined) {
+      return;
+    }
+    const normalizedLabel = StringUtils$1.replaceAccentuatedCharsKeepSymbols(node.item.label);
+    let isVisible = false;
+    if (normalizedLabel.includes(this._filterPattern)) {
+      isVisible = true;
+    }
+    else {
+      const childrenArray = Array.from(node.children.values());
+      for (let i = 0; i < childrenArray.length; i++) {
+        if (childrenArray[i].visible) {
+          isVisible = true;
+          node.item.expanded = true;
+          break;
+        }
+      }
+    }
+    node.visible = isVisible;
+  }
+  async walkPath(parent, path, callback, currentLevel = 0) {
     return new Promise(async (resolve) => {
       const levels = path.split(">>").map(item => item.trim());
       if (levels.length > currentLevel) {
@@ -122183,7 +121937,7 @@ class Tree extends Node$1 {
             await this.loadLevel(node);
           }
           callback(node);
-          await this.walk(node, path, callback, currentLevel + 1);
+          await this.walkPath(node, path, callback, currentLevel + 1);
         }
       }
       resolve();
@@ -122218,7 +121972,6 @@ let EzTree$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezChange = createEvent(this, "ezChange", 7);
     this.ezOpenItem = createEvent(this, "ezOpenItem", 7);
-    this._tree = new Tree(() => forceUpdate(this));
     this._onItemClick = (item) => {
       this.value = item;
     };
@@ -122226,6 +121979,7 @@ let EzTree$1 = class extends HTMLElement$1 {
       this.openClose(item);
       this.value = item;
     };
+    this._tree = new Tree(() => forceUpdate(this));
     /**
      * Define os itens apresentados na árvore.
      */
@@ -122234,10 +121988,6 @@ 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.
@@ -122293,8 +122043,16 @@ let EzTree$1 = class extends HTMLElement$1 {
       node.item.expanded = true;
     }
   }
-  observeItems() {
-    return this._tree.load(this.items || []);
+  /**
+   * Efetua a seleção de um item.
+   */
+  async applyFilter(pattern) {
+    this._tree.setFilterPattern(pattern);
+  }
+  observeItems(newValue, oldValue) {
+    if (newValue != oldValue) {
+      this._tree.load(this.items || []);
+    }
   }
   observeValue() {
     var _a;
@@ -122431,7 +122189,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, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver, 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 || defaultTooltipResolver, itemsList: this._visibleItems });
         })));
   }
   get _element() { return this; }
@@ -122919,7 +122677,7 @@ const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-fi
 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 EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"binder":[16],"open":[1540],"items":[32],"filterText":[32]}]);
+const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"open":[1540],"items":[16],"tooltipResolver":[16],"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]}]);
@@ -122938,7 +122696,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":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[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],"_tree":[32],"_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) => {