@sankhyalabs/ezui 5.22.0-dev.8 → 5.22.0-dev.81

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

@@ -1,5 +1,6 @@
 import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { Fragment, Host, h } from '@stencil/core';
+import { processListOnDrop } from './ezListHelper';
 export class EzList {
   constructor() {
     this._listItemsHistory = [];
@@ -13,6 +14,7 @@ export class EzList {
     this.itemSlotBuilder = undefined;
     this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
+    this.enableMultipleSelection = false;
   }
   /**
    * Limpa o histórico da lista.
@@ -25,65 +27,108 @@ export class EzList {
    */
   async scrollToTop() {
     if (this.useGroups) {
-      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
+      this._element.querySelector('.group-container').scrollTop = 0;
     }
     else {
-      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
+      this._element.querySelector('.items-container').scrollTop = 0;
     }
   }
   /**
    * Aplica seleção nas linhas da lista.
    */
-  async setSelection(selectedItem, scrollToOption) {
-    if (selectedItem && this.ezSelectable) {
-      this.ezSelectItem.emit(selectedItem);
-      if (this.useGroups) {
-        let newList = [...this._listGroupItems];
-        newList.forEach(groupItem => {
-          groupItem.items.forEach(item => {
-            item.selected = item.id === selectedItem.id;
-          });
-        });
-        this._listGroupItems = newList;
-      }
-      else {
-        let newList = [...this._listItems];
-        newList.forEach(item => {
-          item.selected = item.id === selectedItem.id;
-        });
-        this._listItems = newList;
-      }
-      if (scrollToOption) {
-        let liElem = this.useGroups
-          ? this._groupContainer.querySelector('li#item_' + selectedItem.id)
-          : this._itemContainer.querySelector('li#item_' + selectedItem.id);
-        if (liElem) {
-          liElem.scrollIntoView();
-        }
-      }
-    }
-    else {
+  async setSelection(selectedItem, scrollToOption, shitkey, ctrlKey) {
+    if (!selectedItem || !this.ezSelectable) {
       await this.removeSelection();
+      return;
+    }
+    if (this.useGroups) {
+      this.setSelectionWithGroups(selectedItem, scrollToOption);
+      return;
+    }
+    if (this.enableMultipleSelection && ctrlKey) {
+      this.setSelectionMultiple(selectedItem);
+      return;
+    }
+    if (this.enableMultipleSelection && shitkey) {
+      this.setSelectionRange(selectedItem);
+      return;
     }
+    this.setSelectionSingleItem(selectedItem, scrollToOption);
+    this.emitSelectedItems(selectedItem);
+  }
+  emitSelectedItems(singleItem, listItem) {
+    this.ezSelectItem.emit(singleItem);
+    this.ezSelectMultipleItems.emit(listItem !== null && listItem !== void 0 ? listItem : [singleItem]);
+  }
+  setSelectionRange(selectedItem) {
+    const lastSelectedIndex = this._listItems.findIndex(item => item.selected);
+    const seletedItemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
+    if (lastSelectedIndex < 0 || lastSelectedIndex === seletedItemIndex) {
+      this.setSelectionSingleItem(selectedItem);
+      return;
+    }
+    const minorIndex = Math.min(lastSelectedIndex, seletedItemIndex);
+    const majorIndex = Math.max(lastSelectedIndex, seletedItemIndex);
+    let newList = [...this._listItems];
+    newList.forEach((item, index) => {
+      item.selected = (index >= minorIndex && index <= majorIndex);
+    });
+    this._listItems = [...newList];
+    const selectedList = this._listItems.filter(item => item.selected);
+    this.emitSelectedItems(selectedItem, selectedList);
+  }
+  setSelectionMultiple(selectedItem) {
+    let newList = [...this._listItems];
+    newList.forEach(item => {
+      item.selected = (item.id === selectedItem.id) ? !item.selected : item.selected;
+    });
+    this._listItems = [...newList];
+    const selectedList = this._listItems.filter(item => item.selected);
+    this.emitSelectedItems(selectedItem, selectedList);
+  }
+  setSelectionSingleItem(selectedItem, scrollToOption) {
+    this.emitSelectedItems(selectedItem);
+    let newList = [...this._listItems];
+    newList.forEach(item => {
+      item.selected = item.id === selectedItem.id;
+    });
+    this._listItems = newList;
+    if (!scrollToOption)
+      return;
+    let liElem = this._itemContainer.querySelector('li#item_' + selectedItem.id);
+    if (liElem)
+      liElem.scrollIntoView();
+  }
+  setSelectionWithGroups(selectedItem, scrollToOption) {
+    this.emitSelectedItems(selectedItem);
+    let newList = [...this._listGroupItems];
+    newList.forEach(groupItem => {
+      groupItem.items.forEach(item => {
+        item.selected = item.id === selectedItem.id;
+      });
+    });
+    this._listGroupItems = newList;
+    if (!scrollToOption)
+      return;
+    let liElem = this._groupContainer.querySelector('li#item_' + selectedItem.id);
+    if (liElem)
+      liElem.scrollIntoView();
   }
   /**
    * Obtém o item selecionado.
    */
   async getSelection() {
+    if (!this.useGroups)
+      return this._listItems.find(item => item.selected == true);
     let selectedItem;
-    if (this.useGroups) {
-      this._listGroupItems.every(group => {
-        let item = group.items.find(item => item.selected == true);
-        if (item) {
-          selectedItem = item;
-          return false;
-        }
-        return true;
-      });
-    }
-    else {
-      selectedItem = this._listItems.find(item => item.selected == true);
-    }
+    this._listGroupItems.every(group => {
+      let item = group.items.find(item => item.selected == true);
+      if (item) {
+        selectedItem = item;
+        return false;
+      }
+      return true;
+    });
     return selectedItem;
   }
   /**
@@ -107,14 +152,11 @@ export class EzList {
         });
       });
       this._listGroupItems = newList;
+      return;
     }
-    else {
-      let newList = [...this._listItems];
-      newList.forEach(item => {
-        item.selected = false;
-      });
-      this._listItems = newList;
-    }
+    let newList = [...this._listItems];
+    newList.forEach(item => item.selected = false);
+    this._listItems = newList;
   }
   applyUUID(item) {
     if (!item.id) {
@@ -148,8 +190,7 @@ export class EzList {
     }
   }
   buildIdDraggableListAndSelectable() {
-    const shadow = this._element.shadowRoot;
-    const draggableList = shadow.querySelectorAll('.draggable-list');
+    const draggableList = this._element.querySelectorAll('.draggable-list');
     draggableList === null || draggableList === void 0 ? void 0 : draggableList.forEach((draggable, index) => {
       var _a, _b;
       let suffix = 'draggableList';
@@ -159,7 +200,7 @@ export class EzList {
       }
       ElementIDUtils.addIDInfoIfNotExists(draggable, suffix);
     });
-    const selectable = shadow.querySelectorAll('.selectable-container');
+    const selectable = this._element.querySelectorAll('.selectable-container');
     selectable === null || selectable === void 0 ? void 0 : selectable.forEach((item) => {
       ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
     });
@@ -177,78 +218,88 @@ export class EzList {
     ElementIDUtils.addIDInfo(this._element);
   }
   onDrop(ev, dragEndItem) {
+    ev.stopPropagation();
     this.removeOverClass();
+    if (!this._dragStartItem)
+      return;
+    if (this.useGroups) {
+      this.onDropWithGroups(dragEndItem);
+      return;
+    }
+    this._listItems = [...processListOnDrop(this.buildDragHandlerConfig(dragEndItem.index, false))];
+    this._listItemsHistory = [...this._listItems];
+    this.ezChange.emit(this._listItems);
+  }
+  buildDragHandlerConfig(targetIndex, moveToFinal) {
+    return {
+      listItems: this._listItems,
+      dragItem: this._dragStartItem,
+      enableMultipleSelection: this.enableMultipleSelection,
+      targetIndex,
+      moveToFinal,
+      clearSelection: () => this.setSelection(undefined)
+    };
+  }
+  ;
+  onDropWithGroups(dragEndItem) {
     this.setSelection(undefined);
-    if (this._dragStartItem) {
-      if (this.useGroups) {
-        let newList = [...this._listGroupItems];
-        let groupEnd = this._listGroupItems.find(group => dragEndItem.groupName == group.group);
-        //Remove item arrastado
-        newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
-        //Adiciona item arrastado
-        if (groupEnd.sort) {
-          newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
-          newList
-            .find(group => group.group == dragEndItem.groupName)
-            .items.sort(function (a, b) {
-            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-          });
-          if (groupEnd.sort === 'DSC') {
-            newList.find(group => group.group == dragEndItem.groupName).items.reverse();
-          }
-        }
-        else {
-          let indexForAdd = dragEndItem.index > this._dragStartItem.index ? dragEndItem.index - 1 : dragEndItem.index;
-          newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
-        }
-        this._listGroupItems = newList;
-        this.ezChange.emit(this._listGroupItems);
-      }
-      else {
-        let newList = [...this._listItems];
-        newList.splice(this._dragStartItem.index, 1);
-        newList.splice(dragEndItem.index, 0, this._dragStartItem.item);
-        this._listItems = newList;
-        this._listItemsHistory = newList;
-        this.ezChange.emit(this._listItems);
+    let newList = [...this._listGroupItems];
+    let groupEnd = this._listGroupItems.find(group => dragEndItem.groupName == group.group);
+    //Remove item arrastado
+    newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+    //Adiciona item arrastado
+    if (groupEnd.sort) {
+      newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
+      newList
+        .find(group => group.group == dragEndItem.groupName)
+        .items.sort(function (a, b) {
+        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+      });
+      if (groupEnd.sort === 'DSC') {
+        newList.find(group => group.group == dragEndItem.groupName).items.reverse();
       }
     }
-    ev.stopPropagation();
+    else {
+      let indexForAdd = dragEndItem.index > this._dragStartItem.index ? dragEndItem.index - 1 : dragEndItem.index;
+      newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
+    }
+    this._listGroupItems = newList;
+    this.ezChange.emit(this._listGroupItems);
   }
   onDropLastIndex(ev, groupDropped) {
+    ev.stopPropagation();
     this.removeOverClass();
+    if (!this._dragStartItem)
+      return;
+    if (this.useGroups) {
+      this.onDropLastItemWithGroups(groupDropped);
+      return;
+    }
+    const lastIndex = this._listItems.length - 1;
+    this._listItems = [...processListOnDrop(this.buildDragHandlerConfig(lastIndex, true))];
+    this._listItemsHistory = [...this._listItems];
+    this.ezChange.emit(this._listItems);
+  }
+  onDropLastItemWithGroups(groupDropped) {
     this.setSelection(undefined);
-    if (this._dragStartItem) {
-      if (this.useGroups) {
-        let newList = [...this._listGroupItems];
-        let groupEnd = this._listGroupItems.find(group => groupDropped.group == group.group);
-        //Remove item arrastado
-        newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
-        //Adiciona item arrastado
-        newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
-        if (groupEnd.sort) {
-          newList
-            .find(group => group.group == groupDropped.group)
-            .items.sort(function (a, b) {
-            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
-          });
-          if (groupEnd.sort === 'DSC') {
-            newList.find(group => group.group == groupDropped.group).items.reverse();
-          }
-        }
-        this._listGroupItems = newList;
-        this.ezChange.emit(this._listGroupItems);
-      }
-      else {
-        let newList = [...this._listItems];
-        newList.splice(this._dragStartItem.index, 1);
-        newList.push(this._dragStartItem.item);
-        this._listItems = newList;
-        this._listItemsHistory = newList;
-        this.ezChange.emit(this._listItems);
+    let newList = [...this._listGroupItems];
+    let groupEnd = this._listGroupItems.find(group => groupDropped.group == group.group);
+    //Remove item arrastado
+    newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+    //Adiciona item arrastado
+    newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
+    if (groupEnd.sort) {
+      newList
+        .find(group => group.group == groupDropped.group)
+        .items.sort(function (a, b) {
+        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+      });
+      if (groupEnd.sort === 'DSC') {
+        newList.find(group => group.group == groupDropped.group).items.reverse();
       }
     }
-    ev.stopPropagation();
+    this._listGroupItems = newList;
+    this.ezChange.emit(this._listGroupItems);
   }
   onDropGroup(groupSelected) {
     var _a;
@@ -286,19 +337,13 @@ export class EzList {
     if (this.useGroups) {
       this.hideOverlays();
     }
-    if (this._draggingElement) {
-      try {
-        this._element.shadowRoot.removeChild(this._draggingElement);
-      }
-      catch (err) { }
-      this._draggingElement = undefined;
-    }
   }
   addOverClass(element) {
     if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains('draggable')) {
       element.classList.add('over');
+      return;
     }
-    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains('draggable-list')) {
+    if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains('draggable-list')) {
       this.addOverClass(element.parentElement);
     }
   }
@@ -354,84 +399,94 @@ export class EzList {
       window.clearTimeout(this._changeDeboucingTimeout);
     }
     if (this.useGroups) {
-      this._dragStartItem = { groupName: group.group, item: item, index: index };
-      this._changeDeboucingTimeout = window.setTimeout(() => {
-        this.showOverlays(group);
-      }, 10);
-    }
-    else {
-      this._dragStartItem = { item: item.item, index: item.index };
+      this.onDragStartWithGroups(group, item, index);
+      return;
     }
+    this._dragStartItem = { item: item.item, index: item.index };
+  }
+  onDragStartWithGroups(group, item, index) {
+    this._dragStartItem = { groupName: group.group, item: item, index: index };
+    this._changeDeboucingTimeout = window.setTimeout(() => {
+      this.showOverlays(group);
+    }, 10);
   }
   selectFirstItem() {
     if (this.useGroups) {
       this.setSelection(this._listGroupItems[0].items[0]);
     }
-    {
+    else {
       this.setSelection(this._listItems[0]);
     }
   }
   nextOption(selectedItem) {
-    let nextItem = undefined;
     if (this.useGroups) {
-      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
-        let item = undefined;
-        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) {
-              item = { label: listGroupItems[groupIndex + 1].items[0].label };
-            }
-          }
-          else {
-            item = { label: group.items[itemIndex + 1].label };
+      this.setSelection(this.nextOptionWithGroups(selectedItem), true);
+      return;
+    }
+    let nextItem = undefined;
+    let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
+    if (itemIndex >= 0 && itemIndex < this._listItems.length) {
+      nextItem = this._listItems[itemIndex + 1];
+    }
+    this.setSelection(nextItem, true);
+  }
+  nextOptionWithGroups(selectedItem) {
+    let nextItem = undefined;
+    this._listGroupItems.every((group, groupIndex, listGroupItems) => {
+      let item = undefined;
+      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) {
+            item = { label: listGroupItems[groupIndex + 1].items[0].label };
           }
         }
-        if (item != undefined) {
-          nextItem = item;
-          return false;
+        else {
+          item = { label: group.items[itemIndex + 1].label };
         }
-        return true;
-      });
-    }
-    else {
-      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
-      if (itemIndex >= 0 && itemIndex < this._listItems.length) {
-        nextItem = this._listItems[itemIndex + 1];
       }
-    }
-    this.setSelection(nextItem, true);
+      if (item != undefined) {
+        nextItem = item;
+        return false;
+      }
+      return true;
+    });
+    return nextItem;
   }
   previousOption(selectedItem) {
-    let previousItem = undefined;
     if (this.useGroups) {
-      this._listGroupItems.every((group, groupIndex, listGroupItems) => {
-        let item = undefined;
-        let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
-        if (itemIndex != undefined && itemIndex != -1) {
-          if (itemIndex === 0) {
-            if (groupIndex - 1 >= 0) {
-              item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
-            }
-          }
-          else {
-            item = { label: group.items[itemIndex - 1].label };
+      this.setSelection(this.previousOptionWithGroups(selectedItem), true);
+      return;
+    }
+    let previousItem = undefined;
+    let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
+    if (itemIndex > 0 && itemIndex < this._listItems.length) {
+      previousItem = this._listItems[itemIndex - 1];
+    }
+    this.setSelection(previousItem, true);
+  }
+  previousOptionWithGroups(selectedItem) {
+    let previousItem = undefined;
+    this._listGroupItems.every((group, groupIndex, listGroupItems) => {
+      let item = undefined;
+      let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
+      if (itemIndex != undefined && itemIndex != -1) {
+        if (itemIndex === 0) {
+          if (groupIndex - 1 >= 0) {
+            item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
           }
         }
-        if (item != undefined) {
-          previousItem = item;
-          return false;
+        else {
+          item = { label: group.items[itemIndex - 1].label };
         }
-        return true;
-      });
-    }
-    else {
-      let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
-      if (itemIndex > 0 && itemIndex < this._listItems.length) {
-        previousItem = this._listItems[itemIndex - 1];
       }
-    }
-    this.setSelection(previousItem, true);
+      if (item != undefined) {
+        previousItem = item;
+        return false;
+      }
+      return true;
+    });
+    return previousItem;
   }
   keyDownHandler(event) {
     if (!event.ctrlKey) {
@@ -473,11 +528,11 @@ export class EzList {
     }
   }
   onDragOverItem(event) {
-    if (this._dragStartItem) {
-      event.preventDefault();
-      this.addOverClass(event.target);
-      event.stopPropagation();
-    }
+    if (!this._dragStartItem)
+      return;
+    event.preventDefault();
+    this.addOverClass(event.target);
+    event.stopPropagation();
   }
   onDragOverLastIndex(ev) {
     ev.preventDefault();
@@ -517,41 +572,32 @@ export class EzList {
   doubleClickItem(item) {
     this.ezDoubleClick.emit(item);
   }
-  render() {
-    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_' + item.id, class: {
+  buildItem(item, evt) {
+    return { id: item.id, label: item.label, check: evt.detail };
+  }
+  renderListWithGroups() {
+    return 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_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
         }, 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 ' : ''), onDblClick: () => {
-          this.doubleClickItem(item);
-        }, onClick: () => {
-          this.setSelection(item);
-        }, onDragLeave: () => {
-          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(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 => {
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => 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(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(this.buildItem(item, evt)) }))), !!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)));
+    }));
+  }
+  renderList() {
+    return 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_' + item.id, 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_' + 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 }), onDblClick: () => {
-        this.doubleClickItem(item);
-      }, 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, !!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) }))))));
+      }, 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 ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: (event) => this.setSelection(item, false, event.shiftKey, (event.altKey || event.metaKey)), onDragStart: () => this.onDragStart({ item: item, index: index }), onDragOver: event => this.onDragOverItem(event), onDragLeave: () => this.removeOverClass(), 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) })));
+  }
+  render() {
+    return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? this.renderListWithGroups() : this.renderList()));
   }
   static get is() { return "ez-list"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["ez-list.css"]
@@ -721,6 +767,24 @@ export class EzList {
         "attribute": "hover-feedback",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "enableMultipleSelection": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Habilita sele\u00E7\u00E3o de m\u00FAltiplos items."
+        },
+        "attribute": "enable-multiple-selection",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -775,6 +839,25 @@ export class EzList {
             }
           }
         }
+      }, {
+        "method": "ezSelectMultipleItems",
+        "name": "ezSelectMultipleItems",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido sempre que um ou v\u00E1rios item da lista for selecionado."
+        },
+        "complexType": {
+          "original": "ListItem[]",
+          "resolved": "ListItem[]",
+          "references": {
+            "ListItem": {
+              "location": "local"
+            }
+          }
+        }
       }, {
         "method": "ezCheckChange",
         "name": "ezCheckChange",
@@ -851,13 +934,19 @@ export class EzList {
       },
       "setSelection": {
         "complexType": {
-          "signature": "(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>",
+          "signature": "(selectedItem: ListItem, scrollToOption?: boolean, shitkey?: boolean, ctrlKey?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
             }, {
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {