@sankhyalabs/ezui 2.11.0 → 2.13.0

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

@@ -0,0 +1,200 @@
+import { ObjectUtils } from '@sankhyalabs/core';
+export const HIERARCHY_SEPARATOR = '>>';
+export 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.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.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.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.copy(list);
+      resolve(list);
+    });
+  }
+}

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

@@ -0,0 +1,53 @@
+:host {
+	/* Label Container */
+	/*@doc Define o espaçamento interno do container de label*/
+	--ez-guide-navigator--padding: 0 var(--space--large);
+	/*@doc Define a cor de shadow box do container de label*/
+	--ez-guide-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
+	/*@doc Define a cor de fundo do container de label*/
+	--ez-guide-navigator--background-color: var(--color--inverted);
+	/*@doc Define o border radius do container de label*/
+	--ez-guide-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
+	
+	
+	/*Labels Actions */
+	/*@doc Define o espaçamento entre as ações*/
+	--ez-guide-navigator--actions-gap: var(--space--medium);
+	/*@doc Define a margem vertical do elemento*/
+	--ez-guide-navigator--actions-margin: var(--space--medium) 0 var(--space--medium);
+}
+
+.inverted {
+	transform: rotate(180deg);
+}
+
+.ez-guide-navigator {
+	/* public */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	/* private */
+	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 {
+	/* public */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	/* private */
+	gap: var(--ez-guide-navigator--actions-gap);
+	margin: var(--ez-guide-navigator--actions-margin)
+}

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-tabselector/ez-tabselector.js

@@ -68,9 +68,12 @@ export class EzTabselector {
   }
   componentWillRender() {
     if (!this._processedTabs) {
-      this._processedTabs = [];
       if (this.tabs) {
-        if (typeof this.tabs === "string") {
+        if (Array.isArray(this.tabs)) {
+          this._processedTabs = [...this.tabs];
+        }
+        else {
+          this._processedTabs = [];
           this.tabs.split(",").forEach((label) => {
             label = label.trim();
             this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });

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

@@ -86,17 +86,11 @@ ul.first-level {
 }
 
 .tree-item:hover {
-  /*private*/
-  cursor: pointer;
-
   /*public*/
   background-color: var(--ez-tree__tree-item--hover--background-color);
 }
 
 .tree-item[disabled], .tree-item[disabled]:hover {
-  /*private*/
-  cursor: unset;
-
   /*public*/
   background-color: var(--ez-tree__tree-item--disabled--background-color);
 }
@@ -118,12 +112,20 @@ ul.first-level {
   --ez-icon--color: var(--ez-tree--color);
 }
 
+.item-icon:hover {
+  /*private*/
+  cursor: pointer;
+}
+
 .tree-item[selected] .item-icon {
   /*public*/
   --ez-icon--color: var(--ez-tree--selected--color);
 }
 
 .tree-item[disabled] .item-icon {
+  /*private*/
+  cursor: unset;
+
   /*public*/
   --ez-icon--color: var(--ez-tree--disabled--color);
 }