@sankhyalabs/ezui 2.7.6 → 2.8.0

package/dist/custom-elements/index.js

@@ -69111,7 +69111,7 @@ var zIndexChangedCallback = function (o) {
  * Abstract scene graph node.
  * Each node can have zero or one parent and belong to zero or one scene.
  */
-var Node$1 = /** @class */ (function (_super) {
+var Node$1$1 = /** @class */ (function (_super) {
     __extends$2N(Node, _super);
     function Node() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -70001,7 +70001,7 @@ var Shape$1 = /** @class */ (function (_super) {
         SceneChangeDetection({ redraw: RedrawType.MINOR, checkDirtyOnAssignment: true })
     ], Shape.prototype, "fillShadow", void 0);
     return Shape;
-}(Node$1));
+}(Node$1$1));
 
 /**
  * Wraps the native Canvas element and overrides its CanvasRenderingContext2D to
@@ -73620,7 +73620,7 @@ var Group$1 = /** @class */ (function (_super) {
         })
     ], Group.prototype, "opacity", void 0);
     return Group;
-}(Node$1));
+}(Node$1$1));
 
 var __values$o = function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
@@ -73649,7 +73649,7 @@ var EnterNode$1 = /** @class */ (function () {
         if (this.next === null) {
             return this.parent.insertBefore(node, null);
         }
-        if (!Node$1.isNode(this.next)) {
+        if (!Node$1$1.isNode(this.next)) {
             throw new Error(this.next + " is not a Node.");
         }
         return this.parent.insertBefore(node, this.next);
@@ -73723,7 +73723,7 @@ var Selection$1 = /** @class */ (function () {
      */
     Selection.prototype.selectByClass = function (Class) {
         return this.select(function (node) {
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73737,7 +73737,7 @@ var Selection$1 = /** @class */ (function () {
     };
     Selection.prototype.selectByTag = function (tag) {
         return this.select(function (node) {
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73752,7 +73752,7 @@ var Selection$1 = /** @class */ (function () {
     Selection.prototype.selectAllByClass = function (Class) {
         return this.selectAll(function (node) {
             var nodes = [];
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73768,7 +73768,7 @@ var Selection$1 = /** @class */ (function () {
     Selection.prototype.selectAllByTag = function (tag) {
         return this.selectAll(function (node) {
             var nodes = [];
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var children = node.children;
                 var n = children.length;
                 for (var i = 0; i < n; i++) {
@@ -73855,7 +73855,7 @@ var Selection$1 = /** @class */ (function () {
     };
     Selection.prototype.remove = function () {
         return this.each(function (node) {
-            if (Node$1.isNode(node)) {
+            if (Node$1$1.isNode(node)) {
                 var parent_1 = node.parent;
                 if (parent_1) {
                     parent_1.removeChild(node);
@@ -82601,7 +82601,7 @@ var ClipRect = /** @class */ (function (_super) {
         ScenePathChangeDetection()
     ], ClipRect.prototype, "height", void 0);
     return ClipRect;
-}(Node$1));
+}(Node$1$1));
 
 var __extends$2f = (function () {
     var extendStatics = function (d, b) {
@@ -121058,6 +121058,375 @@ let EzToast$1 = class extends HTMLElement$1 {
   static get style() { return ezToastCss; }
 };
 
+const ICON_EXPANDED = "chevron-down";
+const ICON_COLAPSED = "chevron-right";
+const defaultIconResolver = (item, expanded, _level) => {
+  if (expanded) {
+    return item.iconExpanded || ICON_EXPANDED;
+  }
+  return item.iconContracted || ICON_COLAPSED;
+};
+
+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 }))));
+};
+
+class Node$1 {
+  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$1(tree, item, this));
+    }
+  }
+  addPlaceHolder() {
+    this.children.clear();
+    const id = this.item.id;
+    this.children.set(id, new Node$1(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());
+  }
+}
+
+class Tree extends Node$1 {
+  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();
+      });
+    });
+  }
+}
+
+const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;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]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{cursor:pointer;background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{cursor:unset;background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;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{--ez-icon--color:var(--ez-tree--color)}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;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{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
+
+let EzTree$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezOpenItem = createEvent(this, "ezOpenItem", 7);
+    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 });
+        })));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "items": ["observeItems"],
+    "value": ["observeValue"]
+  }; }
+  static get style() { return ezTreeCss; }
+};
+
 class RemoteFile {
   constructor(file) {
     this.file = file;
@@ -121549,6 +121918,7 @@ const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edi
 const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
+const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[16],"value":[1040],"iconResolver":[16],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
 const defineCustomElements = (opts) => {
@@ -121588,6 +121958,7 @@ const defineCustomElements = (opts) => {
   EzTextInput,
   EzTimeInput,
   EzToast,
+  EzTree,
   EzUpload,
   EzViewStack
     ].forEach(cmp => {
@@ -121598,4 +121969,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzFileItem, EzFilterInput, EzForm, EzGrid, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzUpload, EzViewStack, defineCustomElements };
+export { EzActionsButton, EzAlert, EzApplication, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzFileItem, EzFilterInput, EzForm, EzGrid, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, defineCustomElements };