@sankhyalabs/ezui 2.7.6 → 2.9.0

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

@@ -0,0 +1,80 @@
+import { Component, h, Prop, Event, Element } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+export class EzBreadcrumb {
+  constructor() {
+    /**
+     * 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}`)}` }))));
+      }))));
+  }
+  static get is() { return "ez-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-breadcrumb.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-breadcrumb.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<IBreadcrumbItem>",
+        "resolved": "IBreadcrumbItem[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "IBreadcrumbItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Lista de itens do breadcrumb."
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezClick",
+      "name": "ezClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitido quando um item do breadcrumb \u00E9 selecionado."
+      },
+      "complexType": {
+        "original": "IBreadcrumbItem",
+        "resolved": "IBreadcrumbItem",
+        "references": {
+          "IBreadcrumbItem": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,154 @@
+:host {
+  /* Geral */
+  /*@doc Define o arredondamento dos retangulos.*/
+  --ez-tree--border-radius: var(--border--radius-small, 8px);
+  /*@doc Define a largura da identação de cada nível.*/
+  --ez-tree--padding-inline-start: 20px;
+  /*@doc Define a margem do componente.*/
+  --ez-tree--margin: var(--space--extra-small, 3px);
+  
+  /* Fontes e cor de ícones*/
+  /*@doc Define a família da fonte.*/
+  --ez-tree--font-family: var(--font-pattern, Arial);
+  /*@doc Define o tamanho da fonte.*/
+  --ez-tree--font-size: var(--text--medium, 14px);
+  /*@doc Define o peso da fonte.*/
+  --ez-tree--selected--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o peso da fonte.*/
+  --ez-tree--font-weight: var(--text-weight--small, 400);
+  /*@doc Define a cor da fonte e do ícone.*/
+  --ez-tree--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor da fonte e do ícone quando selecionado.*/
+  --ez-tree--selected--color: var(--color--primary, #008561);
+  /*@doc Define a cor da fonte e do ícone quando desabilitado.*/
+  --ez-tree--disabled--color: var(--text--disable, #AFB6C0);
+
+  /* Item */
+  /*@doc Define a altura de cada item.*/
+  --ez-tree__tree-item--height: var(--size-medium, 18px);
+  /*@doc Define o espaçamento interno do item.*/
+  --ez-tree__tree-item--padding: var(--space--small, 6px);
+  /*@doc Define a cor de background.*/
+  --ez-tree__tree-item--background-color: var(--background--xlight, #FFFFFF);
+  /*@doc Define a cor de background quando selecionado.*/
+  --ez-tree__tree-item--selected--background-color: var(--color--primary-300, #E2F4EF);
+  /*@doc Define a cor de background com o mouse sobre o item.*/
+  --ez-tree__tree-item--hover--background-color: var(--background--medium, #F0F3F7);
+  /*@doc Define a cor de background quando deabilitado.*/
+  --ez-tree__tree-item--disabled--background-color: var(--ez-tree__tree-Item--background-color);
+  
+  /* Box do ícone */
+  /*@doc Define a altura do box do ícone.*/
+  --ez-tree__item-icon-box--height: var(--ez-tree__tree-item--height);
+  /*@doc Define a largura do box do ícone.*/
+  --ez-tree__item-icon-box--width: var(--size-medium, 18px);
+  /*@doc Define o espaçamento interno do ícone.*/
+  --ez-tree__item-icon-box--padding: var(--ez-tree__tree-item--padding);
+
+  /*private*/
+  display: flex;
+  flex-direction: column;
+
+  /*public*/
+  margin: 0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);
+  outline: none;
+}
+
+ul {
+  /*private*/
+  list-style-type: none;
+  margin: 0;
+
+  /*public*/
+  padding-inline-start: var(--ez-tree--padding-inline-start);
+}
+
+ul.first-level {
+  /*private*/
+  padding-inline-start: 0;
+}
+
+.tree-item {
+  /*private*/
+  display: flex;
+  align-items: center;
+  
+  /*public*/
+  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] {
+  /*public*/
+  background-color: var(--ez-tree__tree-item--selected--background-color);
+}
+
+.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);
+}
+
+.item-icon-box {
+  /*private*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /*public*/
+  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 {
+  /*public*/
+  --ez-icon--color: var(--ez-tree--color);
+}
+
+.tree-item[selected] .item-icon {
+  /*public*/
+  --ez-icon--color: var(--ez-tree--selected--color);
+}
+
+.tree-item[disabled] .item-icon {
+  /*public*/
+  --ez-icon--color: var(--ez-tree--disabled--color);
+}
+
+.item-label {
+  /*private*/
+  cursor: inherit;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  
+  /*public*/
+  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 {
+  /*public*/
+  color: var(--ez-tree--selected--color);
+  font-weight: var(--ez-tree--selected--font-weight);
+}
+
+.tree-item[disabled] .item-label {
+  /*public*/
+  color: var(--ez-tree--disabled--color);
+}

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 }))));
+};