@sankhyalabs/ezui 5.9.0 → 5.10.0

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

@@ -11,6 +11,7 @@ export class EzList {
     this.ezDraggable = false;
     this.ezSelectable = false;
     this.itemSlotBuilder = undefined;
+    this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
   }
   /**
@@ -40,12 +41,7 @@ export class EzList {
         let newList = [...this._listGroupItems];
         newList.forEach(groupItem => {
           groupItem.items.forEach(item => {
-            if (item.label == selectedItem.label) {
-              item.selected = true;
-            }
-            else {
-              item.selected = false;
-            }
+            item.selected = item.id === selectedItem.id;
           });
         });
         this._listGroupItems = newList;
@@ -53,26 +49,21 @@ export class EzList {
       else {
         let newList = [...this._listItems];
         newList.forEach(item => {
-          if (item.label === selectedItem.label) {
-            item.selected = true;
-          }
-          else {
-            item.selected = false;
-          }
+          item.selected = item.id === selectedItem.id;
         });
         this._listItems = newList;
       }
       if (scrollToOption) {
         let liElem = this.useGroups
-          ? this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
-          : this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
+          ? this._groupContainer.querySelector('li#item_' + selectedItem.id)
+          : this._itemContainer.querySelector('li#item_' + selectedItem.id);
         if (liElem) {
           liElem.scrollIntoView();
         }
       }
     }
     else {
-      this.removeSelection();
+      await this.removeSelection();
     }
   }
   /**
@@ -104,16 +95,46 @@ export class EzList {
     }
     return this._listItems;
   }
+  /**
+   * Limpa a seleção atual
+   */
+  async removeSelection() {
+    if (this.useGroups) {
+      let newList = [...this._listGroupItems];
+      newList.forEach(groupItem => {
+        groupItem.items.forEach(item => {
+          item.selected = false;
+        });
+      });
+      this._listGroupItems = newList;
+    }
+    else {
+      let newList = [...this._listItems];
+      newList.forEach(item => {
+        item.selected = false;
+      });
+      this._listItems = newList;
+    }
+  }
+  applyUUID(item) {
+    if (!item.id) {
+      item.id = StringUtils.generateUUID();
+    }
+  }
   createList() {
     if (this.useGroups) {
       let list = this.dataSource.map(item => item);
       list.forEach(itemGroup => {
+        itemGroup.items.map(this.applyUUID);
         this.sortGroup(itemGroup);
       });
       this._listGroupItems = list;
     }
     else {
-      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : this.dataSource.map(item => item);
+      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : this.dataSource.map(item => {
+        this.applyUUID(item);
+        return item;
+      });
     }
   }
   sortGroup(itemGroup) {
@@ -126,24 +147,6 @@ export class EzList {
       }
     }
   }
-  removeSelection() {
-    if (this.useGroups) {
-      let newList = [...this._listGroupItems];
-      newList.forEach(groupItem => {
-        groupItem.items.forEach(item => {
-          item.selected = false;
-        });
-      });
-      this._listGroupItems = newList;
-    }
-    else {
-      let newList = [...this._listItems];
-      newList.forEach(item => {
-        item.selected = false;
-      });
-      this._listItems = newList;
-    }
-  }
   buildIdDraggableListAndSelectable() {
     const shadow = this._element.shadowRoot;
     const draggableList = shadow.querySelectorAll('.draggable-list');
@@ -256,7 +259,7 @@ export class EzList {
       if (((_a = newGroup.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
         let newItem;
         newGroup.items.forEach((item, index) => {
-          if (item.label === this._dragStartItem.item.label) {
+          if (item.id === this._dragStartItem.item.id) {
             newItem = { item: item, index: index };
           }
         });
@@ -373,7 +376,7 @@ export class EzList {
     if (this.useGroups) {
       this._listGroupItems.every((group, groupIndex, listGroupItems) => {
         let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
+        let itemIndex = group.items.findIndex(item => item.id == selectedItem.id);
         if (itemIndex != undefined && itemIndex != -1) {
           if (itemIndex === group.items.length - 1) {
             if (groupIndex + 1 <= listGroupItems.length - 1) {
@@ -392,7 +395,7 @@ export class EzList {
       });
     }
     else {
-      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
+      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
       if (itemIndex >= 0 && itemIndex < this._listItems.length) {
         nextItem = this._listItems[itemIndex + 1];
       }
@@ -404,7 +407,7 @@ export class EzList {
     if (this.useGroups) {
       this._listGroupItems.every((group, groupIndex, listGroupItems) => {
         let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
+        let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
         if (itemIndex != undefined && itemIndex != -1) {
           if (itemIndex === 0) {
             if (groupIndex - 1 >= 0) {
@@ -423,7 +426,7 @@ export class EzList {
       });
     }
     else {
-      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
+      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
       if (itemIndex > 0 && itemIndex < this._listItems.length) {
         previousItem = this._listItems[itemIndex - 1];
       }
@@ -449,12 +452,6 @@ export class EzList {
     });
     event.stopPropagation();
   }
-  getItemId(itemLabel) {
-    if (itemLabel) {
-      return itemLabel.replace(/[^a-z0-9_]/gi, '_');
-    }
-    return undefined;
-  }
   getDivGroupId(groupName) {
     if (groupName) {
       return 'group-' + groupName.replace(/[^a-z0-9_]/gi, '_');
@@ -505,14 +502,11 @@ export class EzList {
       groupOverlay.setAttribute('style', 'display:none');
     });
   }
-  getContainerItemBuilder(item, group, className) {
-    if (this.itemSlotBuilder == undefined) {
-      return;
-    }
-    const customContent = this.itemSlotBuilder(item, group);
-    if (customContent == undefined) {
+  getContainerItemBuilder(slotPosition, item, group, className) {
+    var _a, _b;
+    const customContent = slotPosition === 'left' ? (_a = this.itemLeftSlotBuilder) === null || _a === void 0 ? void 0 : _a.call(this, item, group) : (_b = this.itemSlotBuilder) === null || _b === void 0 ? void 0 : _b.call(this, item, group);
+    if (customContent == undefined)
       return;
-    }
     if (typeof customContent !== 'string') {
       return h("div", { class: className }, customContent);
     }
@@ -522,10 +516,10 @@ export class EzList {
     return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, this._listGroupItems.map(group => {
-      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
-        }, key: 'item_' + this.getItemId(item.label) }, {
+        }, key: 'item_' + item.id }, {
         [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
       }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onClick: () => {
           this.setSelection(item);
@@ -533,17 +527,17 @@ export class EzList {
           group.sort ? undefined : this.removeOverClass();
         }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
           group.sort ? undefined : this.onDragOverItem(event);
-        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, 'slot-item') : undefined))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
           this.onDragOverLastIndex(event);
         }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
     }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
         this.keyDownHandler(event);
-      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,
         'hover-feedback': this.hoverFeedback,
-      }, key: 'item_' + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => {
+      }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => {
         this.setSelection(item);
-      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), this.itemSlotBuilder ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
         this.onDragOverLastIndex(event);
       }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
@@ -667,17 +661,11 @@ export class EzList {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "(item: ListItem, group?: ListGroup) => HTMLElement | string",
+          "original": "SlotBuilder",
           "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
           "references": {
-            "ListItem": {
-              "location": "local"
-            },
-            "ListGroup": {
+            "SlotBuilder": {
               "location": "local"
-            },
-            "HTMLElement": {
-              "location": "global"
             }
           }
         },
@@ -688,6 +676,25 @@ export class EzList {
           "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
         }
       },
+      "itemLeftSlotBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SlotBuilder",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "SlotBuilder": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita gerar conte\u00FAdo din\u00E2mico \u00E0 esquerda do item da lista.\n* Observa\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
+      },
       "hoverFeedback": {
         "type": "boolean",
         "mutable": true,
@@ -882,6 +889,22 @@ export class EzList {
           "text": "Obt\u00E9m a lista de items ou grupos.",
           "tags": []
         }
+      },
+      "removeSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa a sele\u00E7\u00E3o atual",
+          "tags": []
+        }
       }
     };
   }

package/dist/custom-elements/index.js

@@ -124928,6 +124928,7 @@ const EzList$1 = class extends HTMLElement$1 {
     this.ezDraggable = false;
     this.ezSelectable = false;
     this.itemSlotBuilder = undefined;
+    this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
   }
   /**
@@ -124957,12 +124958,7 @@ const EzList$1 = class extends HTMLElement$1 {
         let newList = [...this._listGroupItems];
         newList.forEach(groupItem => {
           groupItem.items.forEach(item => {
-            if (item.label == selectedItem.label) {
-              item.selected = true;
-            }
-            else {
-              item.selected = false;
-            }
+            item.selected = item.id === selectedItem.id;
           });
         });
         this._listGroupItems = newList;
@@ -124970,26 +124966,21 @@ const EzList$1 = class extends HTMLElement$1 {
       else {
         let newList = [...this._listItems];
         newList.forEach(item => {
-          if (item.label === selectedItem.label) {
-            item.selected = true;
-          }
-          else {
-            item.selected = false;
-          }
+          item.selected = item.id === selectedItem.id;
         });
         this._listItems = newList;
       }
       if (scrollToOption) {
         let liElem = this.useGroups
-          ? this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
-          : this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
+          ? this._groupContainer.querySelector('li#item_' + selectedItem.id)
+          : this._itemContainer.querySelector('li#item_' + selectedItem.id);
         if (liElem) {
           liElem.scrollIntoView();
         }
       }
     }
     else {
-      this.removeSelection();
+      await this.removeSelection();
     }
   }
   /**
@@ -125021,16 +125012,46 @@ const EzList$1 = class extends HTMLElement$1 {
     }
     return this._listItems;
   }
+  /**
+   * Limpa a seleção atual
+   */
+  async removeSelection() {
+    if (this.useGroups) {
+      let newList = [...this._listGroupItems];
+      newList.forEach(groupItem => {
+        groupItem.items.forEach(item => {
+          item.selected = false;
+        });
+      });
+      this._listGroupItems = newList;
+    }
+    else {
+      let newList = [...this._listItems];
+      newList.forEach(item => {
+        item.selected = false;
+      });
+      this._listItems = newList;
+    }
+  }
+  applyUUID(item) {
+    if (!item.id) {
+      item.id = StringUtils$1.generateUUID();
+    }
+  }
   createList() {
     if (this.useGroups) {
       let list = this.dataSource.map(item => item);
       list.forEach(itemGroup => {
+        itemGroup.items.map(this.applyUUID);
         this.sortGroup(itemGroup);
       });
       this._listGroupItems = list;
     }
     else {
-      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : this.dataSource.map(item => item);
+      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : this.dataSource.map(item => {
+        this.applyUUID(item);
+        return item;
+      });
     }
   }
   sortGroup(itemGroup) {
@@ -125043,24 +125064,6 @@ const EzList$1 = class extends HTMLElement$1 {
       }
     }
   }
-  removeSelection() {
-    if (this.useGroups) {
-      let newList = [...this._listGroupItems];
-      newList.forEach(groupItem => {
-        groupItem.items.forEach(item => {
-          item.selected = false;
-        });
-      });
-      this._listGroupItems = newList;
-    }
-    else {
-      let newList = [...this._listItems];
-      newList.forEach(item => {
-        item.selected = false;
-      });
-      this._listItems = newList;
-    }
-  }
   buildIdDraggableListAndSelectable() {
     const shadow = this._element.shadowRoot;
     const draggableList = shadow.querySelectorAll('.draggable-list');
@@ -125173,7 +125176,7 @@ const EzList$1 = class extends HTMLElement$1 {
       if (((_a = newGroup.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
         let newItem;
         newGroup.items.forEach((item, index) => {
-          if (item.label === this._dragStartItem.item.label) {
+          if (item.id === this._dragStartItem.item.id) {
             newItem = { item: item, index: index };
           }
         });
@@ -125290,7 +125293,7 @@ const EzList$1 = class extends HTMLElement$1 {
     if (this.useGroups) {
       this._listGroupItems.every((group, groupIndex, listGroupItems) => {
         let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
+        let itemIndex = group.items.findIndex(item => item.id == selectedItem.id);
         if (itemIndex != undefined && itemIndex != -1) {
           if (itemIndex === group.items.length - 1) {
             if (groupIndex + 1 <= listGroupItems.length - 1) {
@@ -125309,7 +125312,7 @@ const EzList$1 = class extends HTMLElement$1 {
       });
     }
     else {
-      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
+      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
       if (itemIndex >= 0 && itemIndex < this._listItems.length) {
         nextItem = this._listItems[itemIndex + 1];
       }
@@ -125321,7 +125324,7 @@ const EzList$1 = class extends HTMLElement$1 {
     if (this.useGroups) {
       this._listGroupItems.every((group, groupIndex, listGroupItems) => {
         let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
+        let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
         if (itemIndex != undefined && itemIndex != -1) {
           if (itemIndex === 0) {
             if (groupIndex - 1 >= 0) {
@@ -125340,7 +125343,7 @@ const EzList$1 = class extends HTMLElement$1 {
       });
     }
     else {
-      let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
+      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
       if (itemIndex > 0 && itemIndex < this._listItems.length) {
         previousItem = this._listItems[itemIndex - 1];
       }
@@ -125366,12 +125369,6 @@ const EzList$1 = class extends HTMLElement$1 {
     });
     event.stopPropagation();
   }
-  getItemId(itemLabel) {
-    if (itemLabel) {
-      return itemLabel.replace(/[^a-z0-9_]/gi, '_');
-    }
-    return undefined;
-  }
   getDivGroupId(groupName) {
     if (groupName) {
       return 'group-' + groupName.replace(/[^a-z0-9_]/gi, '_');
@@ -125422,14 +125419,11 @@ const EzList$1 = class extends HTMLElement$1 {
       groupOverlay.setAttribute('style', 'display:none');
     });
   }
-  getContainerItemBuilder(item, group, className) {
-    if (this.itemSlotBuilder == undefined) {
-      return;
-    }
-    const customContent = this.itemSlotBuilder(item, group);
-    if (customContent == undefined) {
+  getContainerItemBuilder(slotPosition, item, group, className) {
+    var _a, _b;
+    const customContent = slotPosition === 'left' ? (_a = this.itemLeftSlotBuilder) === null || _a === void 0 ? void 0 : _a.call(this, item, group) : (_b = this.itemSlotBuilder) === null || _b === void 0 ? void 0 : _b.call(this, item, group);
+    if (customContent == undefined)
       return;
-    }
     if (typeof customContent !== 'string') {
       return h("div", { class: className }, customContent);
     }
@@ -125439,10 +125433,10 @@ const EzList$1 = class extends HTMLElement$1 {
     return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, this._listGroupItems.map(group => {
-      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+      return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
-        }, key: 'item_' + this.getItemId(item.label) }, {
+        }, key: 'item_' + item.id }, {
         [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`),
       }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onClick: () => {
           this.setSelection(item);
@@ -125450,17 +125444,17 @@ const EzList$1 = class extends HTMLElement$1 {
           group.sort ? undefined : this.removeOverClass();
         }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
           group.sort ? undefined : this.onDragOverItem(event);
-        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, 'slot-item') : undefined))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
           this.onDragOverLastIndex(event);
         }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
     }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
         this.keyDownHandler(event);
-      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + this.getItemId(item.label), class: {
+      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,
         'hover-feedback': this.hoverFeedback,
-      }, key: 'item_' + this.getItemId(item.label) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => {
+      }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils$1.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onClick: () => {
         this.setSelection(item);
-      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), this.itemSlotBuilder ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
+      }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
         this.onDragOverLastIndex(event);
       }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
   }
@@ -128722,7 +128716,7 @@ const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-vie
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"selectionToastConfig":[16],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"columnfilterDataSource":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_originalRecords":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
-const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"listMode":[1,"list-mode"],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32]}]);
+const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"listMode":[1,"list-mode"],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"itemLeftSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"heightMode":[1,"height-mode"],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"],"scrim":[1]}]);
 const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]);