@sankhyalabs/ezui 2.7.6 → 2.9.0

package/dist/custom-elements/index.js

@@ -407,6 +407,35 @@ let EzApplication$1 = class extends HTMLElement$1 {
   static get style() { return ezApplicationCss; }
 };
 
+const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}";
+
+let EzBreadcrumb$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezClick = createEvent(this, "ezClick", 7);
+    /**
+     * Lista de itens do breadcrumb.
+     */
+    this.items = [];
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
+  handleItemClick(itemSelected) {
+    this.ezClick.emit(itemSelected);
+  }
+  render() {
+    return (h("nav", { class: "breadcrumb" }, h("ol", { class: "breadcrumb__list" }, this.items.map((item, index) => {
+      const isLastItem = index === (this.items.length - 1);
+      return (h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_${item.id}`) }), item.iconName && h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${isLastItem ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })), h("p", { class: `breadcrumb__item--label ${isLastItem ? 'active' : ''}`, onClick: !isLastItem ? () => this.handleItemClick(item) : undefined }, item.label), !isLastItem && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))));
+    }))));
+  }
+  get _element() { return this; }
+  static get style() { return ezBreadcrumbCss; }
+};
+
 const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
 
 let EzButton$1 = class extends HTMLElement$1 {
@@ -69111,7 +69140,7 @@ var zIndexChangedCallback = function (o) {
  * Abstract scene graph node.
  * Each node can have zero or one parent and belong to zero or one scene.
  */
-var Node$1 = /** @class */ (function (_super) {
+var Node$1$1 = /** @class */ (function (_super) {
     __extends$2N(Node, _super);
     function Node() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -70001,7 +70030,7 @@ var Shape$1 = /** @class */ (function (_super) {
         SceneChangeDetection({ redraw: RedrawType.MINOR, checkDirtyOnAssignment: true })
     ], Shape.prototype, "fillShadow", void 0);
     return Shape;
-}(Node$1));
+}(Node$1$1));
 
 /**
  * Wraps the native Canvas element and overrides its CanvasRenderingContext2D to
@@ -73620,7 +73649,7 @@ var Group$1 = /** @class */ (function (_super) {
         })
     ], Group.prototype, "opacity", void 0);
     return Group;
-}(Node$1));
+}(Node$1$1));
 
 var __values$o = function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
@@ -73649,7 +73678,7 @@ var EnterNode$1 = /** @class */ (function () {
         if (this.next === null) {
             return this.parent.insertBefore(node, null);
         }
-        if (!Node$1.isNode(this.next)) {
+        if (!Node$1$1.isNode(this.next)) {
             throw new Error(this.next + " is not a Node.");
         }
         return this.parent.insertBefore(node, this.next);
@@ -73723,7 +73752,7 @@ var Selection$1 = /** @class */ (function () {
      */
     Selection.prototype.selectByClass = function (Class) {
         return this.select(function (node) {
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73737,7 +73766,7 @@ var Selection$1 = /** @class */ (function () {
     };
     Selection.prototype.selectByTag = function (tag) {
         return this.select(function (node) {
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73752,7 +73781,7 @@ var Selection$1 = /** @class */ (function () {
     Selection.prototype.selectAllByClass = function (Class) {
         return this.selectAll(function (node) {
             var nodes = [];
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73768,7 +73797,7 @@ var Selection$1 = /** @class */ (function () {
     Selection.prototype.selectAllByTag = function (tag) {
         return this.selectAll(function (node) {
             var nodes = [];
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73855,7 +73884,7 @@ var Selection$1 = /** @class */ (function () {
     };
     Selection.prototype.remove = function () {
         return this.each(function (node) {
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var parent_1 = node.parent;
                 if (parent_1) {
                     parent_1.removeChild(node);
@@ -82601,7 +82630,7 @@ var ClipRect = /** @class */ (function (_super) {
         ScenePathChangeDetection()
     ], ClipRect.prototype, "height", void 0);
     return ClipRect;
-}(Node$1));
+}(Node$1$1));
 
 var __extends$2f = (function () {
     var extendStatics = function (d, b) {
@@ -121058,6 +121087,375 @@ let EzToast$1 = class extends HTMLElement$1 {
   static get style() { return ezToastCss; }
 };
 
+const ICON_EXPANDED = "chevron-down";
+const ICON_COLAPSED = "chevron-right";
+const defaultIconResolver = (item, expanded, _level) => {
+  if (expanded) {
+    return item.iconExpanded || ICON_EXPANDED;
+  }
+  return item.iconContracted || ICON_COLAPSED;
+};
+
+const TreeItem = (props) => {
+  const { node, selectedId, itemClick, iconResolver, itemsList } = props;
+  const treeItem = node.item;
+  const level = props.level || 1;
+  const disabled = node.isDisabled();
+  const expanded = !disabled && treeItem.expanded;
+  const expandable = node.isExpandable();
+  const available = !disabled && !node.isPlaceHolder;
+  if (available) {
+    itemsList.push(treeItem);
+  }
+  return (h("ul", { title: treeItem.label, 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)),
+    expanded
+      && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, level: level + 1, iconResolver: iconResolver, itemsList: itemsList }))));
+};
+
+class Node$1 {
+  constructor(tree, item, parent, isPlaceHolder = false) {
+    this.children = new Map();
+    this.item = item;
+    this.parent = parent;
+    this._tree = tree;
+    this.isPlaceHolder = isPlaceHolder;
+    if (item && !isPlaceHolder) {
+      this._isLazyLoad = typeof item.children === "function" || item.childrenCount > 0;
+      if (Array.isArray(item.children)) {
+        Array.from(item.children).forEach(item => this.addChild(this._tree, item));
+        this._childrenLoaded = true;
+      }
+    }
+    else {
+      this._isLazyLoad = false;
+      this._childrenLoaded = true;
+    }
+  }
+  isDisabled() {
+    if (this.isPlaceHolder) {
+      return false;
+    }
+    return this._tree.isNodeDisabled(this.item.id, this.item.disabled);
+  }
+  updateChildren(children) {
+    if (this.isPlaceHolder) {
+      return;
+    }
+    this.item.children = children;
+    this._childrenLoaded = true;
+    this.children.clear();
+    children.forEach(item => this.addChild(this._tree, Object.assign({}, item)));
+  }
+  addChild(tree, item) {
+    if (!this.children.has(item.id)) {
+      this.children.set(item.id, new Node$1(tree, item, this));
+    }
+  }
+  addPlaceHolder() {
+    this.children.clear();
+    const id = this.item.id;
+    this.children.set(id, new Node$1(undefined, { id: `placeholder_${id}`, label: "Carregando..." }, this, true));
+  }
+  getNode(id) {
+    if (this.children.has(id)) {
+      return this.children.get(id);
+    }
+    const childrenArray = Array.from(this.children.values());
+    for (const child of childrenArray) {
+      const result = child.getNode(id);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  needLoad() {
+    return this._isLazyLoad && !this._childrenLoaded;
+  }
+  isExpandable() {
+    return this._isLazyLoad || this.children.size > 0 || Array.isArray(this.item.children);
+  }
+  getChildren() {
+    if (this.isPlaceHolder) {
+      return [];
+    }
+    if (this.needLoad()) {
+      this._tree.loadChildren(this);
+    }
+    return Array.from(this.children.values());
+  }
+}
+
+class Tree extends Node$1 {
+  constructor(changeCallback) {
+    super(undefined);
+    this._disabledValues = new Map();
+    this._changeCallback = changeCallback;
+  }
+  async addChildAt(parentId, item) {
+    const parent = this.getNode(parentId);
+    if (parent == undefined) {
+      return;
+    }
+    parent.addChild(this, item);
+    this._changeCallback();
+  }
+  setDisabled(id, value) {
+    this._disabledValues.set(id, value);
+    this._changeCallback();
+  }
+  isNodeDisabled(id, defaultValue) {
+    if (!this._disabledValues.has(id)) {
+      return defaultValue;
+    }
+    return this._disabledValues.get(id);
+  }
+  load(items) {
+    this.children.clear();
+    items.forEach(item => this.addChild(this, Object.assign({}, item)));
+  }
+  async open(path) {
+    return new Promise(async (resolve) => {
+      await this.walk(this, path, node => node.item.expanded = true);
+      resolve();
+    });
+  }
+  async walk(parent, path, callback, currentLevel = 0) {
+    return new Promise(async (resolve) => {
+      const levels = path.split(">>").map(item => item.trim());
+      if (levels.length > currentLevel) {
+        const node = parent.getNode(levels[currentLevel]);
+        if (node) {
+          if (node.needLoad()) {
+            await this.loadLevel(node);
+          }
+          callback(node);
+          await this.walk(node, path, callback, currentLevel + 1);
+        }
+      }
+      resolve();
+    });
+  }
+  async loadChildren(node) {
+    return new Promise(resolve => {
+      this.loadLevel(node).then(() => {
+        resolve();
+        this._changeCallback();
+      });
+    });
+  }
+  async loadLevel(node) {
+    return new Promise(resolve => {
+      node.addPlaceHolder();
+      const loader = node.item.children;
+      loader(node.item).then(result => {
+        node.updateChildren(result);
+        resolve();
+      });
+    });
+  }
+}
+
+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)}";
+
+let EzTree$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezOpenItem = createEvent(this, "ezOpenItem", 7);
+    this._tree = new Tree(() => forceUpdate(this));
+    this._onItemClick = (item) => {
+      this.openClose(item);
+      this.value = item;
+    };
+    /**
+     * Define os itens apresentados na árvore.
+     */
+    this.items = [];
+    /**
+     * 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;
+  }
+  /**
+   * Efetua a seleção de um item.
+   */
+  async selectItem(id) {
+    const node = this._tree.getNode(id);
+    if (node) {
+      this.value = node.item;
+    }
+    else {
+      this.value = undefined;
+    }
+  }
+  /**
+   * Realiza a abertura de um item, incluindo a hieraquia acima.
+   * Observação para carga dinâmica (Lazyload): O item solicitado já deve
+   * estar carregado na lista. Nos casos onde o item ainda não esteja
+   * carregado o id pode ser uma string no formato "id1>>id2>>id3",
+   * tornando possível a carga a partir de um ponto já carregado.
+   */
+  async openItem(id) {
+    this._waintingForLoad = true;
+    await this._tree.open(id);
+    this._waintingForLoad = false;
+  }
+  /**
+   * Desabilita um ou mais itens.
+   */
+  async disableItem(id) {
+    [].concat(id).forEach(item => this._tree.setDisabled(item, true));
+  }
+  /**
+  * Habilita um ou mais itens.
+  */
+  async enableItem(id) {
+    [].concat(id).forEach(item => this._tree.setDisabled(item, false));
+  }
+  /**
+   * Adiciona um ou mais itens. Opcionalmente pode-se determinar a qual
+   * item da árvore será anexado o item. Caso não informado parentId,
+   * adiciona no item selecionado.
+   * Observação para carga dinâmica (Lazyload): O parentId deve ser
+   * um item carregado atualmente na árvore.
+   */
+  async addChild(item, parentId) {
+    var _a;
+    if (parentId == undefined) {
+      parentId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    this._tree.addChildAt(parentId, item);
+    const node = this._tree.getNode(parentId);
+    if (node) {
+      node.item.expanded = true;
+    }
+  }
+  observeItems() {
+    this._tree.load(this.items);
+  }
+  observeValue() {
+    this.ezChange.emit(this.value);
+  }
+  onKeyDownListener(event) {
+    if (!this.value) {
+      return;
+    }
+    let stop = false;
+    switch (event.key) {
+      case "ArrowUp":
+        this.previousItem();
+        stop = true;
+        break;
+      case "ArrowDown":
+        this.nextItem();
+        stop = true;
+        break;
+      case "ArrowLeft":
+        this.previousLevel();
+        stop = true;
+        break;
+      case "ArrowRight":
+        this.nextLevel();
+        stop = true;
+        break;
+      case " ":
+        this.openClose(this.value);
+        stop = true;
+        break;
+    }
+    if (stop) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+  openClose(item) {
+    if (item == undefined) {
+      return;
+    }
+    const expanded = !item.expanded;
+    item.expanded = expanded;
+    if (expanded) {
+      this.ezOpenItem.emit(item);
+    }
+    forceUpdate(this);
+  }
+  previousLevel() {
+    var _a;
+    if (!this.value) {
+      return;
+    }
+    if (this.value.expanded) {
+      this.value.expanded = false;
+      forceUpdate(this);
+    }
+    else {
+      const node = this._tree.getNode(this.value.id);
+      const parentItem = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.item;
+      if (parentItem) {
+        this.value = parentItem;
+      }
+    }
+  }
+  nextLevel() {
+    if (!this.value) {
+      return;
+    }
+    const node = this._tree.getNode(this.value.id);
+    if (!node.isExpandable()) {
+      return;
+    }
+    if (this.value.expanded) {
+      this.nextItem();
+    }
+    else {
+      this.value.expanded = true;
+      forceUpdate(this);
+    }
+  }
+  nextItem() {
+    const nextIndex = this._visibleItems.indexOf(this.value) + 1;
+    if (nextIndex < this._visibleItems.length) {
+      this.value = this._visibleItems[nextIndex];
+    }
+  }
+  previousItem() {
+    const nextIndex = this._visibleItems.indexOf(this.value) - 1;
+    if (nextIndex > -1) {
+      this.value = this._visibleItems[nextIndex];
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezTree');
+    if (this.items == undefined) {
+      return;
+    }
+    this._visibleItems = [];
+    return (h(Host, { tabindex: "-1" }, this._waintingForLoad ?
+      h("label", null, "Carregando...")
+      :
+        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 });
+        })));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "items": ["observeItems"],
+    "value": ["observeValue"]
+  }; }
+  static get style() { return ezTreeCss; }
+};
+
 class RemoteFile {
   constructor(file) {
     this.file = file;
@@ -121518,6 +121916,7 @@ let EzViewStack$1 = class extends HTMLElement$1 {
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
+const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-breadcrumb",{"items":[1040]}]);
 const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
 const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16]}]);
@@ -121549,6 +121948,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 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) => {
@@ -121557,6 +121957,7 @@ const defineCustomElements = (opts) => {
       EzActionsButton,
   EzAlert,
   EzApplication,
+  EzBreadcrumb,
   EzButton,
   EzCalendar,
   EzCardItem,
@@ -121588,6 +121989,7 @@ const defineCustomElements = (opts) => {
   EzTextInput,
   EzTimeInput,
   EzToast,
+  EzTree,
   EzUpload,
   EzViewStack
     ].forEach(cmp => {
@@ -121598,4 +122000,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, 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, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzUpload, EzViewStack, defineCustomElements };
+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, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };

package/dist/esm/ez-breadcrumb.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7bc778b3.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}";
+
+let EzBreadcrumb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezClick = createEvent(this, "ezClick", 7);
+    /**
+     * Lista de itens do breadcrumb.
+     */
+    this.items = [];
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
+  handleItemClick(itemSelected) {
+    this.ezClick.emit(itemSelected);
+  }
+  render() {
+    return (h("nav", { class: "breadcrumb" }, h("ol", { class: "breadcrumb__list" }, this.items.map((item, index) => {
+      const isLastItem = index === (this.items.length - 1);
+      return (h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_${item.id}`) }), item.iconName && h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${isLastItem ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })), h("p", { class: `breadcrumb__item--label ${isLastItem ? 'active' : ''}`, onClick: !isLastItem ? () => this.handleItemClick(item) : undefined }, item.label), !isLastItem && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))));
+    }))));
+  }
+  get _element() { return getElement(this); }
+};
+EzBreadcrumb.style = ezBreadcrumbCss;
+
+export { EzBreadcrumb as ez_breadcrumb };