@sankhyalabs/ezui 2.12.0 → 2.14.0-develop.1

package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.js

@@ -0,0 +1,230 @@
+import { Component, Prop, State, h, Host, Method, Element, Watch } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { Guide, HIERARCHY_SEPARATOR } from './Guide';
+const ENTER_KEY = 'Enter';
+export class EzGuideNavigator {
+  constructor() {
+    //TODO: Quando a filtragem for feita dentro da árvore, não será mais necessário 
+    this.guide = new Guide();
+    //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+    //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+    //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+    /**
+     * Provedor de dados para o guide navigator.
+    */
+    this.binder = null;
+    /**
+     * Define se o menu de navegação está aberto.
+    */
+    this.open = true;
+    //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+    //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+    //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+    /**
+     * Lista de itens do menu de navegação.
+    */
+    this.items = [];
+    /**
+     * Valor do campo de pesquisa usado na filtragem de guias.
+     */
+    this.filterText = '';
+  }
+  /**
+   * Habilita itens específicos a partir de uma lista de ID's.
+  */
+  async enableOnly(id, customTooltip) {
+    //TODO: Levar para a árvore
+    this._tree.items = await this.guide.enableItemsById(id, customTooltip);
+  }
+  /**
+   * Habilita todos os itens do menu de navegação.
+  */
+  async enableAll() {
+    //TODO: Levar para a árvore
+    this._tree.items = await this.guide.enableAllItems();
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  handleBinderChange(newBinder, oldBinder) {
+    if (newBinder != oldBinder) {
+      this.initTree();
+    }
+  }
+  async handleToggleSidebar() {
+    this.open = !this.open;
+    if (this.open) {
+      await this.initTree();
+      this.filterItems();
+    }
+    ;
+  }
+  handleSelectTreeItem({ detail: parent }) {
+    if (!parent.expanded)
+      return;
+    //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+    //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+    //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+    this.binder.fetchItems(parent.id).then(async (children) => {
+      if (!(children === null || children === void 0 ? void 0 : children.length))
+        return;
+      await this.guide.addChildren(parent, children);
+      const { list } = await this.guide.getItemsByLabel(this.filterText, 'label', parent);
+      this._tree.items = list;
+      this._tree.openItem(parent.hierarchyId || parent.id);
+    });
+    this.binder.onSelectItem(parent);
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  handleFilterTree(event) {
+    if (event.key === ENTER_KEY)
+      this.filterItems();
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  async setTreeIems(list, first) {
+    var _a;
+    this._tree.items = list;
+    if (first && !(first === null || first === void 0 ? void 0 : first.disabled)) {
+      const parentHierarchyId = ((_a = first.hierarchy) === null || _a === void 0 ? void 0 : _a.slice(0, -1).join(HIERARCHY_SEPARATOR)) || first.id;
+      await this._tree.openItem(parentHierarchyId);
+      await this._tree.selectItem(first.id);
+    }
+    else {
+      this._tree.selectItem(null);
+    }
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  filterItems() {
+    this.guide.getItemsByLabel(this.filterText).then(async ({ list, first }) => {
+      this.setTreeIems(list, first);
+    });
+  }
+  //TODO: Destituir esse binder. Rediscutida a arquitetura desse componente
+  //vimos que o binder só dificulta a vida de quem vai usar... assim teremos
+  //apenas uma lista de IGuideItems e o resto fica como a própria árvore...
+  async initTree() {
+    if (!this.binder)
+      return;
+    const binderItems = await this.binder.fetchItems();
+    await this.guide.setList(binderItems);
+    const guideItems = await this.guide.getList();
+    this.setTreeIems(guideItems);
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element);
+    this.initTree();
+  }
+  render() {
+    return (h(Host, null, this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") },
+      h("div", { role: "search", class: "ez-guide-navigator__actions" },
+        h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => (this.filterText = event.detail), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }),
+        h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })),
+      h("ez-tree", { ref: element => (this._tree = element), onEzChange: evt => this.handleSelectTreeItem(evt), "data-element-id": ElementIDUtils.getInternalIDInfo("tree") }))) : (h("ez-sidebar-button", { onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }))));
+  }
+  static get is() { return "ez-guide-navigator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-guide-navigator.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-guide-navigator.css"]
+  }; }
+  static get properties() { return {
+    "binder": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IGuideBinder",
+        "resolved": "IGuideBinder",
+        "references": {
+          "IGuideBinder": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Provedor de dados para o guide navigator."
+      },
+      "defaultValue": "null"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o menu de navega\u00E7\u00E3o est\u00E1 aberto."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "items": {},
+    "filterText": {}
+  }; }
+  static get methods() { return {
+    "enableOnly": {
+      "complexType": {
+        "signature": "(id: Array<string>, customTooltip: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Habilita itens espec\u00EDficos a partir de uma lista de ID's.",
+        "tags": []
+      }
+    },
+    "enableAll": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Habilita todos os itens do menu de navega\u00E7\u00E3o.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "_element"; }
+  static get watchers() { return [{
+      "propName": "binder",
+      "methodName": "handleBinderChange"
+    }]; }
+}

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

@@ -81,7 +81,7 @@ export class EzTree {
     }
   }
   observeItems() {
-    this._tree.load(this.items);
+    return this._tree.load(this.items || []);
   }
   observeValue() {
     var _a;
@@ -129,7 +129,7 @@ export class EzTree {
     if (expanded) {
       this.ezOpenItem.emit(item);
     }
-    this._tree.updateItem(item);
+    forceUpdate(this);
   }
   previousLevel() {
     var _a;
@@ -138,7 +138,7 @@ export class EzTree {
     }
     if (this.value.expanded) {
       this.value.expanded = false;
-      this._tree.updateItem(this.value);
+      forceUpdate(this);
     }
     else {
       const node = this._tree.getNode(this.value.id);
@@ -161,7 +161,7 @@ export class EzTree {
     }
     else {
       this.value.expanded = true;
-      this._tree.updateItem(this.value);
+      forceUpdate(this);
     }
   }
   indexOf(id) {
@@ -232,7 +232,7 @@ export class EzTree {
   static get properties() { return {
     "items": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "Array<ITreeItem>",
         "resolved": "ITreeItem[]",

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

@@ -19,7 +19,7 @@ export const TreeItem = (props) => {
     }),
       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" }, treeItem.label)),
+      h("label", { class: "item-label", title: treeItem.disabled ? (treeItem.tooltip || treeItem.label) : treeItem.label }, treeItem.label)),
     expanded
       && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList }))));
 };

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

@@ -37,17 +37,6 @@ export class Tree extends Node {
       }
     });
   }
-  updateItem(item) {
-    if (item == undefined) {
-      return;
-    }
-    const node = this.getNode(item.id);
-    if (node == undefined) {
-      return;
-    }
-    Object.keys(item).forEach(attrib => node.item[attrib] = item[attrib]);
-    this._changeCallback();
-  }
   async open(path) {
     return new Promise(async (resolve) => {
       await this.walk(this, path, node => node.item.expanded = true);

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

@@ -110,18 +110,18 @@ export const EzForm: {
   new (): EzForm;
 };
 
-interface EzFormView extends Components.EzFormView, HTMLElement {}
-export const EzFormView: {
-  prototype: EzFormView;
-  new (): EzFormView;
-};
-
 interface EzGrid extends Components.EzGrid, HTMLElement {}
 export const EzGrid: {
   prototype: EzGrid;
   new (): EzGrid;
 };
 
+interface EzGuideNavigator extends Components.EzGuideNavigator, HTMLElement {}
+export const EzGuideNavigator: {
+  prototype: EzGuideNavigator;
+  new (): EzGuideNavigator;
+};
+
 interface EzIcon extends Components.EzIcon, HTMLElement {}
 export const EzIcon: {
   prototype: EzIcon;