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

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

@@ -0,0 +1,696 @@
+import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
+import { forceUpdate, h, Host } from '@stencil/core';
+import { defaultIconResolver, defaultTooltipResolver } from './subcomponents';
+import { TreeItem } from './subcomponents/TreeItem';
+import { Tree } from './types/Tree';
+export class EzTree {
+  constructor() {
+    this._onItemClick = (item) => {
+      this.value = item;
+    };
+    this._onIconClick = (item) => {
+      this.openClose(item);
+      this.value = item;
+    };
+    this._tree = new Tree(() => forceUpdate(this));
+    this._waintingForLoad = undefined;
+    this.items = [];
+    this.value = undefined;
+    this.selectedId = undefined;
+    this.iconResolver = defaultIconResolver;
+    this.tooltipResolver = undefined;
+  }
+  /**
+   * 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;
+    }
+  }
+  /**
+   * Efetua a seleção de um item.
+   */
+  async applyFilter(pattern) {
+    this._tree.setFilterPattern(pattern);
+  }
+  /**
+   * Atualiza um item
+   */
+  async updateItem(item) {
+    var _a;
+    this._tree.updateItem(item);
+    const node = (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getNode(this.selectedId);
+    if (node == undefined) {
+      this.value = this._visibleItems ? this._visibleItems[0] : undefined;
+    }
+  }
+  /**
+   * Obtem um item pelo id
+   */
+  async getItem(id) {
+    return new Promise(resolve => {
+      const node = this._tree.getNode(id);
+      resolve(node === null || node === void 0 ? void 0 : node.item);
+    });
+  }
+  /**
+   * Obtem um array do caminho de itens da seleção atual.
+   * @returns Retorna um array do caminho de itens da seleção atual.
+   */
+  async getCurrentPath() {
+    var _a, _b, _c;
+    const node = (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getNode(this.selectedId);
+    if (node == undefined) {
+      return;
+    }
+    const currentPath = [];
+    let parentNode;
+    let parentItem = (_b = node.parent) === null || _b === void 0 ? void 0 : _b.item;
+    currentPath.push(this.getItemPathAttrs(node.item));
+    while (parentItem != undefined) {
+      currentPath.unshift(this.getItemPathAttrs(parentItem));
+      parentNode = this._tree.getNode(parentItem.id);
+      parentItem = (_c = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent) === null || _c === void 0 ? void 0 : _c.item;
+    }
+    return currentPath;
+  }
+  /**
+   * Obtem o item pai a partir de um id
+   */
+  async getParent(id) {
+    return new Promise(resolve => {
+      var _a;
+      const node = this._tree.getNode(id);
+      if (node) {
+        resolve((_a = node.parent) === null || _a === void 0 ? void 0 : _a.item);
+      }
+      resolve(undefined);
+    });
+  }
+  observeItems(newValue, oldValue) {
+    if (ObjectUtils.objectToString(newValue) !== ObjectUtils.objectToString(oldValue)) {
+      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) {
+      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();
+    }
+  }
+  getItemPathAttrs({ id, label }) {
+    return { id, label };
+  }
+  openClose(item) {
+    if (item == undefined) {
+      return;
+    }
+    const expanded = !item.expanded;
+    item.expanded = expanded;
+    if (expanded) {
+      this.ezOpenItem.emit(item);
+    }
+    this._tree.updateItem(item);
+  }
+  previousLevel() {
+    var _a;
+    if (!this.value) {
+      return;
+    }
+    if (this.value.expanded) {
+      this.value.expanded = false;
+      this._tree.updateItem(this.value);
+    }
+    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;
+      this._tree.updateItem(this.value);
+    }
+  }
+  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() {
+    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;
+    }
+  }
+  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, iconClick: this._onIconClick, iconResolver: this.iconResolver, tooltipResolver: this.tooltipResolver || defaultTooltipResolver, itemsList: this._visibleItems });
+        })));
+  }
+  static get is() { return "ez-tree"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tree.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tree.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<ITreeItem>",
+          "resolved": "ITreeItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define os itens apresentados na \u00E1rvore."
+        },
+        "defaultValue": "[]"
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ITreeItem",
+          "resolved": "ITreeItem",
+          "references": {
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o item selecionado na \u00E1rvore."
+        }
+      },
+      "selectedId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Forma alternativa para atribuir o item selecionado por seu ID."
+        },
+        "attribute": "selected-id",
+        "reflect": true
+      },
+      "iconResolver": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: ITreeItem, expanded: boolean, level: number) => string",
+          "resolved": "(item: ITreeItem, expanded: boolean, level: number) => string",
+          "references": {
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma fun\u00E7\u00E3o que vai resolver o \u00EDcone daquele item. Retorna o nome do \u00EDcone da lib de icones do DS."
+        },
+        "defaultValue": "defaultIconResolver"
+      },
+      "tooltipResolver": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(item: ITreeItem, enabled: boolean, level: number) => string",
+          "resolved": "(item: ITreeItem, enabled: boolean, level: number) => string",
+          "references": {
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma fun\u00E7\u00E3o que vai resolver o `tooltip` ou `title` daquele item."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_tree": {},
+      "_waintingForLoad": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando um item \u00E9 selecionado na \u00E1rvore."
+        },
+        "complexType": {
+          "original": "ITreeItem",
+          "resolved": "ITreeItem",
+          "references": {
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        }
+      }, {
+        "method": "ezOpenItem",
+        "name": "ezOpenItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando um item \u00E9 aberto na \u00E1rvore."
+        },
+        "complexType": {
+          "original": "ITreeItem",
+          "resolved": "ITreeItem",
+          "references": {
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "selectItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Efetua a sele\u00E7\u00E3o de um item.",
+          "tags": []
+        }
+      },
+      "openItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Realiza a abertura de um item, incluindo a hieraquia acima.\nObserva\u00E7\u00E3o para carga din\u00E2mica (Lazyload): O item solicitado j\u00E1 deve\nestar carregado na lista. Nos casos onde o item ainda n\u00E3o esteja \ncarregado o id pode ser uma string no formato \"id1>>id2>>id3\",\ntornando poss\u00EDvel a carga a partir de um ponto j\u00E1 carregado.",
+          "tags": []
+        }
+      },
+      "disableItem": {
+        "complexType": {
+          "signature": "(id: string | Array<string>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Desabilita um ou mais itens.",
+          "tags": []
+        }
+      },
+      "enableItem": {
+        "complexType": {
+          "signature": "(id: string | Array<string>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Habilita um ou mais itens.",
+          "tags": []
+        }
+      },
+      "addChild": {
+        "complexType": {
+          "signature": "(item: ITreeItem, parentId?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Adiciona um ou mais itens. Opcionalmente pode-se determinar a qual\nitem da \u00E1rvore ser\u00E1 anexado o item. Caso n\u00E3o informado parentId,\nadiciona no item selecionado.\nObserva\u00E7\u00E3o para carga din\u00E2mica (Lazyload): O parentId deve ser\num item carregado atualmente na \u00E1rvore.",
+          "tags": []
+        }
+      },
+      "applyFilter": {
+        "complexType": {
+          "signature": "(pattern: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Efetua a sele\u00E7\u00E3o de um item.",
+          "tags": []
+        }
+      },
+      "updateItem": {
+        "complexType": {
+          "signature": "(item: ITreeItem) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza um item",
+          "tags": []
+        }
+      },
+      "getItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<ITreeItem>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          },
+          "return": "Promise<ITreeItem>"
+        },
+        "docs": {
+          "text": "Obtem um item pelo id",
+          "tags": []
+        }
+      },
+      "getCurrentPath": {
+        "complexType": {
+          "signature": "() => Promise<Array<ITreeItem>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "Node": {
+              "location": "import",
+              "path": "./types/Node"
+            }
+          },
+          "return": "Promise<ITreeItem[]>"
+        },
+        "docs": {
+          "text": "Obtem um array do caminho de itens da sele\u00E7\u00E3o atual.",
+          "tags": [{
+              "name": "returns",
+              "text": "Retorna um array do caminho de itens da sele\u00E7\u00E3o atual."
+            }]
+        }
+      },
+      "getParent": {
+        "complexType": {
+          "signature": "(id: string) => Promise<ITreeItem>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ITreeItem": {
+              "location": "import",
+              "path": "./interfaces/ITreeItem"
+            }
+          },
+          "return": "Promise<ITreeItem>"
+        },
+        "docs": {
+          "text": "Obtem o item pai a partir de um id",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "observeItems"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "onKeyDownListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/ez-tree/interfaces/ITree.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-tree/interfaces/ITreeItem.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-tree/subcomponents/DefaultIconResolver.js

@@ -0,0 +1,8 @@
+const ICON_EXPANDED = "chevron-down";
+const ICON_COLAPSED = "chevron-right";
+export const defaultIconResolver = (item, expanded, _level) => {
+  if (expanded) {
+    return item.iconExpanded || ICON_EXPANDED;
+  }
+  return item.iconContracted || ICON_COLAPSED;
+};