@sankhyalabs/ezui 7.1.0-dev.2 → 7.1.0-dev.20

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -213,7 +213,7 @@ input:read-only {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--ez-text-input__label--padding-right));
+  width: calc(100% - (var(--ez-text-input__label--padding-right) + var(--ez-text-input__label--padding-left)));
   left: var(--ez-text-input--space--medium);
 
   /*public*/
@@ -245,7 +245,7 @@ input:read-only {
   text-align: left;
   left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--ez-text-input__icon--width));
+  width: calc(100% - (var(--ez-text-input__icon--width) + var(--ez-text-input__label--padding-right)));
 }
 
 .input__label--left.hasError {
@@ -255,7 +255,7 @@ input:read-only {
 .input__label--right {
   /*public*/
   right: var(--ez-text-input__icon--width);
-  width: calc(100% - var(--ez-text-input__icon--width));
+  width: calc(100% - (var(--ez-text-input__icon--width) + var(--ez-text-input__label--padding-left)));
 }
 .input__label--right.hasError {
   width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));

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

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
 export class EzTooltip {
   constructor() {
     this._opened = false;
+    this._eventsRegistered = false;
     this.message = undefined;
     this.anchoringElement = undefined;
     this.placement = 'bottom';
@@ -99,6 +100,7 @@ export class EzTooltip {
     this._mouseLeaveHandler = () => this.closeTooltip();
     element.addEventListener('mouseenter', this._mouseEnterHandler);
     element.addEventListener('mouseleave', this._mouseLeaveHandler);
+    this._eventsRegistered = true;
   }
   removeEvents(element = this.anchoringElement) {
     if (!element) {
@@ -110,10 +112,19 @@ export class EzTooltip {
     if (this._mouseLeaveHandler) {
       element.removeEventListener('mouseleave', this._mouseLeaveHandler);
     }
+    this._eventsRegistered = false;
+  }
+  initializeTooltip() {
+    if (this._element && this.anchoringElement && !this._eventsRegistered) {
+      this.setEvents();
+      this.addInfoId();
+    }
+  }
+  connectedCallback() {
+    this.initializeTooltip();
   }
   componentDidLoad() {
-    this.setEvents();
-    this.addInfoId();
+    this.initializeTooltip();
   }
   addInfoId() {
     if (this._element) {

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

@@ -8,6 +8,9 @@
   --ez-tree--margin: var(--space--extra-small, 3px);
   /*@doc Define a margem da direita do componente.*/
   --ez-tree--margin-right: 0px;
+
+  /*@doc Define se o texto dos itens pode ser selecionado pelo usuário.*/
+  --ez-tree--user-select: auto;
   
   /* Fontes e cor de ícones*/
   /*@doc Define a família da fonte.*/
@@ -197,6 +200,7 @@ ul.first-level {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  user-select: var(--ez-tree--user-select);
   
   /*public*/
   font-family: var(--ez-tree--font-family);

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

@@ -7,11 +7,18 @@ import initI18n from '../../utils/i18n';
 export class EzTree {
   constructor() {
     this._onItemClick = (item) => {
-      this._onIconClick(item);
+      if (!this.selectable) {
+        this.openClose(item);
+        return;
+      }
+      if (this.value && this.value.id === item.id) {
+        this.value = undefined;
+        return;
+      }
+      this.value = item;
     };
     this._onIconClick = (item) => {
       this.openClose(item);
-      this.value = item;
     };
     this._tree = new Tree(() => forceUpdate(this));
     this._waintingForLoad = undefined;
@@ -21,6 +28,7 @@ export class EzTree {
     this.iconResolver = defaultIconResolver;
     this.tooltipResolver = undefined;
     this.enableHierarchicalFilter = true;
+    this.selectable = true;
   }
   /**
    * Efetua a seleção de um item.
@@ -71,10 +79,14 @@ export class EzTree {
       parentId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
     }
     this._tree.addChildAt(parentId, item);
+    this.addItemInIndexedList(parentId, item);
     const node = this._tree.getNode(parentId);
     if (node) {
       node.item.expanded = true;
     }
+    else {
+      this.collapseAll();
+    }
   }
   /**
    * Efetua a seleção de um item.
@@ -97,12 +109,48 @@ export class EzTree {
   /**
    * Atualiza um item
    */
-  async updateItem(item) {
-    var _a;
-    this._tree.updateItem(item);
+  async updateItem(item, config) {
+    var _a, _b, _c;
+    if (Array.isArray(item)) {
+      item.forEach(i => this.updateItem(i, config));
+      return;
+    }
+    if (config === null || config === void 0 ? void 0 : config.updatedBySelectedId) {
+      Object.assign(item, { id: this.selectedId });
+    }
+    this._tree.updateItem((config === null || config === void 0 ? void 0 : config.forceDefaultValues) ? this.applyDefaultValues(item) : item);
+    this.updateItemInIndexedList(item, config === null || config === void 0 ? void 0 : config.forceDefaultValues);
     const node = (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getNode(this.selectedId);
     if (node == undefined) {
       this.value = this._visibleItems ? this._visibleItems[0] : undefined;
+      this._tree.collapseAll();
+    }
+    if (((_b = this.value) === null || _b === void 0 ? void 0 : _b.id) === item.id) {
+      this.value = item;
+      this.ezChange.emit(this.value);
+      return;
+    }
+    const childSelected = this.getItemById((_c = this.value) === null || _c === void 0 ? void 0 : _c.id, [item]);
+    if (childSelected) {
+      this.value = childSelected;
+      this.ezChange.emit(this.value);
+    }
+  }
+  /**
+   * Remove um item da árvore pelo seu ID.
+   * Se o item removido estiver selecionado, a seleção será limpa.
+   */
+  async removeItem(id) {
+    var _a;
+    id = id !== null && id !== void 0 ? id : this.selectedId;
+    if (!id) {
+      return;
+    }
+    this._tree.removeItem(id);
+    this.removeItemFromIndexedList(id);
+    this.ezRemoveItem.emit(id);
+    if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.id) === id) {
+      this.value = undefined;
     }
   }
   /**
@@ -190,6 +238,75 @@ export class EzTree {
       event.preventDefault();
     }
   }
+  getItemById(id, items) {
+    for (const treeItem of items) {
+      if (treeItem.id === id) {
+        return treeItem;
+      }
+      else if (treeItem.children && Array.isArray(treeItem.children)) {
+        const itemFound = this.getItemById(id, treeItem.children);
+        if (itemFound) {
+          return itemFound;
+        }
+      }
+    }
+    return undefined;
+  }
+  addItemInIndexedList(parentId, item, items) {
+    var _a, _b;
+    items = (_a = items !== null && items !== void 0 ? items : this.items) !== null && _a !== void 0 ? _a : [];
+    if (!parentId) {
+      items.push(item);
+    }
+    const itemFound = this.getItemById(parentId, items);
+    itemFound.children = ((_b = itemFound.children) !== null && _b !== void 0 ? _b : []);
+    itemFound.children.push(item);
+    itemFound.childrenCount = itemFound.children.length;
+  }
+  applyDefaultValues(item) {
+    if (item.disabled === undefined) {
+      item.disabled = false;
+    }
+    if (item.expanded === undefined) {
+      item.expanded = false;
+    }
+    return item;
+  }
+  updateItemInIndexedList(item, forceDefaultValues = false) {
+    if (!item || !this.items) {
+      return;
+    }
+    const itemFound = this.getItemById(item.id, this.items);
+    if (itemFound) {
+      Object.assign(itemFound, forceDefaultValues ? this.applyDefaultValues(item) : item);
+    }
+  }
+  removeItemFromIndexedList(id, items) {
+    var _a;
+    items = (_a = items !== null && items !== void 0 ? items : this.items) !== null && _a !== void 0 ? _a : [];
+    if (!id) {
+      return false;
+    }
+    const rootIndex = items.findIndex(item => item.id === id);
+    if (rootIndex !== -1) {
+      items.splice(rootIndex, 1);
+      return true;
+    }
+    for (const treeItem of items) {
+      if (treeItem.children && Array.isArray(treeItem.children)) {
+        const childIndex = treeItem.children.findIndex(child => child.id === id);
+        if (childIndex !== -1) {
+          treeItem.children.splice(childIndex, 1);
+          treeItem.childrenCount = treeItem.children.length;
+          return true;
+        }
+        if (this.removeItemFromIndexedList(id, treeItem.children)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
   getItemPathAttrs({ id, label }) {
     return { id, label };
   }
@@ -427,6 +544,24 @@ export class EzTree {
         "attribute": "enable-hierarchical-filter",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se os itens da \u00E1rvore s\u00E3o selecion\u00E1veis."
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -497,6 +632,21 @@ export class EzTree {
             }
           }
         }
+      }, {
+        "method": "ezRemoveItem",
+        "name": "ezRemoveItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao remover um item da \u00E1rvore."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -662,10 +812,13 @@ export class EzTree {
       },
       "updateItem": {
         "complexType": {
-          "signature": "(item: ITreeItem) => Promise<void>",
+          "signature": "(item: ITreeItem | ITreeItem[], config?: Partial<UpdateItemConfig>) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -674,6 +827,13 @@ export class EzTree {
             "ITreeItem": {
               "location": "import",
               "path": "./interfaces/ITreeItem"
+            },
+            "Partial": {
+              "location": "global"
+            },
+            "UpdateItemConfig": {
+              "location": "import",
+              "path": "./types/UpdateItemConfig"
             }
           },
           "return": "Promise<void>"
@@ -683,6 +843,25 @@ export class EzTree {
           "tags": []
         }
       },
+      "removeItem": {
+        "complexType": {
+          "signature": "(id?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove um item da \u00E1rvore pelo seu ID.\nSe o item removido estiver selecionado, a sele\u00E7\u00E3o ser\u00E1 limpa.",
+          "tags": []
+        }
+      },
       "getItem": {
         "complexType": {
           "signature": "(id: string) => Promise<ITreeItem>",

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

@@ -20,12 +20,15 @@ export const TreeItem = (props) => {
       iconClick(treeItem);
     }
   }
+  function handleIconDoubleClick(event) {
+    event.stopPropagation();
+  }
   return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem), onDblClick: () => available && itemDoubleClick(treeItem) }, {
     disabled,
     selected: treeItem.id === selectedId,
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
   }), h("div", { class: "item-label-container" }, h("div", { class: "item-icon-box" }, expandable &&
-    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: (event) => handleIconClick(event) })), h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)), getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)), expanded
+    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: (event) => handleIconClick(event), onDblClick: (event) => handleIconDoubleClick(event) })), h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)), getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)), expanded
     && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList, itemDoubleClick: itemDoubleClick }))));
 };
 function getBadgeElement(itemId, badge, isSelectedItem) {

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

@@ -69,6 +69,13 @@ export class Node {
       this.children.set(item.id, new Node(tree, item, this));
     }
   }
+  removeChild(id) {
+    if (this.children.has(id)) {
+      this.children.delete(id);
+      return true;
+    }
+    return false;
+  }
   addPlaceHolder() {
     this.children.clear();
     const id = this.item.id;

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

@@ -9,6 +9,8 @@ export class Tree extends Node {
   async addChildAt(parentId, item) {
     const parent = this.getNode(parentId);
     if (parent == undefined) {
+      this.addChild(this, item);
+      this._changeCallback();
       return;
     }
     parent.addChild(this, item);
@@ -72,6 +74,23 @@ export class Tree extends Node {
     }
     this._changeCallback();
   }
+  removeItem(id) {
+    if (!id) {
+      return;
+    }
+    const node = this.getNode(id);
+    if (!node) {
+      return;
+    }
+    if (node.parent) {
+      node.parent.removeChild(id);
+    }
+    else {
+      this.children.delete(id);
+    }
+    this._disabledValues.delete(id);
+    this._changeCallback();
+  }
   async open(path) {
     return new Promise(async (resolve) => {
       await this.walkPath(this, path, node => node.item.expanded = true);

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/form/DataBinder.js

@@ -120,7 +120,7 @@ export default class DataBinder {
   clearFieldError(fieldName) {
     var _a;
     const field = (_a = this._fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.field;
-    if (field["errorMessage"]) {
+    if (field && field["errorMessage"]) {
       field["errorMessage"] = "";
       this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
     }

package/dist/collection/utils/form/FormMetadata.js

@@ -91,14 +91,23 @@ function handleDetailTabs(dataUnit, config, sheets) {
 function handleCustomTabs(customGuides, config, sheets) {
   customGuides.forEach((guide) => {
     const tabConfig = getTabFromConfig(guide.label, config);
+    const ctxProps = {};
+    Object.entries(guide).forEach(([key, value]) => {
+      if (!isReservedKey(key)) {
+        ctxProps[key] = value;
+      }
+    });
     if (tabConfig) {
-      sheets.set(Object.assign(tabConfig, { name: guide.id, isCustom: true }), []);
+      sheets.set(Object.assign(tabConfig, { name: guide.id, isCustom: true, ctxProps }), []);
       return;
     }
-    const sheet = { label: guide.label, name: guide.id, isCustom: true, visible: true };
+    const sheet = { label: guide.label, name: guide.id, isCustom: true, visible: true, ctxProps };
     sheets.set(sheet, []);
   });
 }
+function isReservedKey(key) {
+  return ['id', 'label'].includes(key);
+}
 function parseTabToFormSheet(key, fields) {
   const i18n = getI18n();
   return {
@@ -106,6 +115,7 @@ function parseTabToFormSheet(key, fields) {
     name: key.name || key.label,
     isCustom: key.isCustom,
     isDetail: key.isDetail,
+    ctxProps: key.ctxProps,
     fields
   };
 }