@sankhyalabs/ezui 2.7.6 → 2.8.0

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

@@ -0,0 +1,428 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { defaultIconResolver } from './subcomponents';
+import { TreeItem } from './subcomponents/TreeItem';
+import { Tree } from './types/Tree';
+export class EzTree {
+  constructor() {
+    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 });
+        })));
+  }
+  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": false,
+      "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."
+      }
+    },
+    "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"
+    }
+  }; }
+  static get states() { return {
+    "_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": []
+      }
+    }
+  }; }
+  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;
+};

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

@@ -0,0 +1,25 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export 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 }))));
+};

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

@@ -0,0 +1 @@
+export { defaultIconResolver } from "./DefaultIconResolver";

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

@@ -0,0 +1,72 @@
+export class Node {
+  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(tree, item, this));
+    }
+  }
+  addPlaceHolder() {
+    this.children.clear();
+    const id = this.item.id;
+    this.children.set(id, new Node(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());
+  }
+}

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

@@ -0,0 +1,70 @@
+import { Node } from "./Node";
+export class Tree extends Node {
+  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();
+      });
+    });
+  }
+}

package/dist/custom-elements/index.d.ts

@@ -206,6 +206,12 @@ export const EzToast: {
   new (): EzToast;
 };
 
+interface EzTree extends Components.EzTree, HTMLElement {}
+export const EzTree: {
+  prototype: EzTree;
+  new (): EzTree;
+};
+
 interface EzUpload extends Components.EzUpload, HTMLElement {}
 export const EzUpload: {
   prototype: EzUpload;