@sankhyalabs/ezui 5.8.1 → 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/collection/components/ez-popup/ez-popup.css

@@ -162,6 +162,11 @@
   flex-wrap: nowrap;
 }
 
+.ez-popup__size-limit--x-small {
+  min-width: 350px;
+  max-width: 560px;
+}
+
 @media screen and (min-width: 320px) {
   .col--sd-1 {
     width: 8.33333%;

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

@@ -3,11 +3,12 @@ import { FloatingManager } from '@sankhyalabs/core';
 export class EzPopup {
   constructor() {
     this._sizeClasses = {
-      "x-small": "col--sd-3",
+      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
       "small": "col--sd-5",
       "medium": "col--sd-6",
       "large": "col--sd-9",
-      "x-large": "col--sd-11"
+      "x-large": "col--sd-11",
+      "default": "ez-popup__size-limit--x-small",
     };
     this.size = "medium";
     this.opened = false;

package/dist/custom-elements/index.js

@@ -123772,6 +123772,7 @@ class AgGridController {
       }
       this._gridOptions = {
         localeText: gridTerms,
+        enableRangeSelection: this._multipleSelection,
         rowSelection: this._multipleSelection ? 'multiple' : 'single',
         sortingOrder: ['desc', 'asc', null],
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
@@ -124927,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;
   }
   /**
@@ -124956,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;
@@ -124969,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();
     }
   }
   /**
@@ -125020,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) {
@@ -125042,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');
@@ -125172,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 };
           }
         });
@@ -125289,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) {
@@ -125308,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];
       }
@@ -125320,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) {
@@ -125339,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];
       }
@@ -125365,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, '_');
@@ -125421,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);
     }
@@ -125438,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);
@@ -125449,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) }))))));
   }
@@ -126091,7 +126086,7 @@ const EzPopover$1 = class extends HTMLElement$1 {
   static get style() { return ezPopoverCss; }
 };
 
-const ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--most-visible, 3);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--large, 24px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--extra-large, 24px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:grid;grid-template-rows:auto 1fr}.popup__expandable-content{box-sizing:border-box;width:100%;min-height:100%;height:100%}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+const ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--most-visible, 3);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--large, 24px);--ez-popup__header--padding-bottom:var(--space--medium, 12px);--ez-popup__title--font-family:var(--font-pattern, \"Roboto\");--ez-popup__title--font-size:var(--title--extra-large, 24px);--ez-popup__title--color:var(--title--primary, #2b3a54);--ez-popup__title--font-weight:var(--text-weight--large, 600);--ez-popup__btn__close--icon-color:var(--title--primary, #2b3a54);--ez-popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--ez-popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;height:100%;display:flex;flex-wrap:wrap;overflow:hidden;outline:none;background:#FFFF;color:var(--ez-popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--ez-popup__container--padding)}.popup__container--auto{height:auto}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:grid;grid-template-rows:auto 1fr}.popup__expandable-content{box-sizing:border-box;width:100%;min-height:100%;height:100%}.popup__header{width:100%;display:flex}.popup__header--padding{padding-bottom:var(--ez-popup__header--padding-bottom)}.popup__title{display:flex;margin:0;width:100%;font-family:var(--ez-popup__title--font-family);font-size:var(--ez-popup__title--font-size);font-weight:var(--ez-popup__title--font-weight);color:var(--ez-popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--ez-popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--ez-popup__btn__close--icon);mask-image:var(--ez-popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}.ez-popup__size-limit--x-small{min-width:350px;max-width:560px}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
 
 const EzPopup$1 = class extends HTMLElement$1 {
   constructor() {
@@ -126100,11 +126095,12 @@ const EzPopup$1 = class extends HTMLElement$1 {
     this.__attachShadow();
     this.ezClosePopup = createEvent(this, "ezClosePopup", 7);
     this._sizeClasses = {
-      "x-small": "col--sd-3",
+      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
       "small": "col--sd-5",
       "medium": "col--sd-6",
       "large": "col--sd-9",
-      "x-large": "col--sd-11"
+      "x-large": "col--sd-11",
+      "default": "ez-popup__size-limit--x-small",
     };
     this.size = "medium";
     this.opened = false;
@@ -128720,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"]}]);

package/dist/esm/ez-grid.entry.js

@@ -119285,6 +119285,7 @@ class AgGridController {
       }
       this._gridOptions = {
         localeText: gridTerms,
+        enableRangeSelection: this._multipleSelection,
         rowSelection: this._multipleSelection ? 'multiple' : 'single',
         sortingOrder: ['desc', 'asc', null],
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,