@sankhyalabs/ezui 0.0.0-bugfix-dev-kb-74998.3 → 0.0.0-bugfix-dev-KB-74246.0

package/dist/cjs/ez-list.cjs.entry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
+const ezListHelper = require('./ezListHelper-0d3970b4.js');
 
 const ezListCss = ".sc-ez-list-h {\n  \n  --ez-list__host--z-index: var(--visible, 1);\n\n  \n  --ez-list__host--border-radius: var(--border--radius-medium, 12px);\n\n  \n  --ez-list__host--padding: var(--space--medium, 12px);\n\n  \n  --ez-list__icon--padding: var(--space--small, 6px);\n\n  \n  --ez-list__icon--color: #AFB6C0;\n\n  \n  --ez-list__item--margin: 0 var(--space--small, 6px);\n\n  \n  --ez-list__item--color: var(--title--primary, #2b3a54);\n\n  \n  --ez-list__item--border-bottom;\n\n  \n  --ez-list__item--border-bottom-color;\n\n  \n  --ez-list__item--font-family: var(--font-pattern, \"Roboto\");\n\n  \n  --ez-list__item--font-size: var(--text--medium, 14px);\n  \n  \n  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);\n\n  \n  --ez-list__selectable--padding-right: var(--space--small, 6px);\n  \n  \n  --ez-list__selectable--padding-left: var(--space--small, 6px);\n\n  \n  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);\n  \n  \n  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);\n\n  \n  --ez-list__group--font-family: var(--font-pattern, \"Roboto\");\n  \n  \n  --ez-list__group--font-size: var(--text--medium, 14px);\n  \n  \n  --ez-list__group--font-weight: var(--text-weight--large, 600);\n  \n  \n  --ez-list__group--padding-bottom: var(--space-small, 6px);\n\n  \n  --ez-list__group-overlay--font-family: var(--font-pattern, \"Roboto\");\n\n  \n  --ez-list__group-overlay--font-size: var(--text--medium, 14px);\n  \n  \n  --ez-list__over--border--color: var(--color--primary, #008561);\n\n  \n  --ez-list__last-droppable-space--height: var(--space--small, 6px);\n  \n  \n  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);\n\n  \n  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');\n\n  \n  \n  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);\n  \n  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);\n  \n  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);\n  \n  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);\n  \n  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);\n  \n  --ez-list__scrollbar--width: var(--space--medium, 12px);\n\n  max-height: 100%;\n  width: 100%;\n  background-color: #fff;\n  display: flex;\n\n  \n  z-index: var(--ez-list__host--z-index);\n}\n\np.sc-ez-list {\n  margin: 0;\n}\n\n.draggable.sc-ez-list {\n  \n  width: 100%;\n  display: grid;\n  grid-template-columns: minmax(0px, auto) minmax(0px, auto);\n  place-items: center;\n  border-top: 1px dashed #fff;\n  justify-content: space-between;\n\n  \n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n}\n\n.dragging.sc-ez-list {\n  background: #FFFFFF;\n  \n\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);\n  border-radius: 6px;\n}\n\n.selectable.sc-ez-list {\n  cursor: pointer;\n\n  \n  padding-right: var(--ez-list__selectable--padding-right);\n  padding-left: var(--ez-list__selectable--padding-left);\n}\n\n.selectable-container.sc-ez-list {\n  margin: 0px !important;\n}\n\n.hover-feedback.sc-ez-list:hover {\n  background-color: var(--background--medium);\n  border-radius: var(--border--radius-regular);\n}\n\n.item-content.sc-ez-list {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.draggable-list.sc-ez-list {\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 100%;\n  scrollbar-width: thin;\n  \n  \n  color: var(--text-color);\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.draggable-list.sc-ez-list li.sc-ez-list {\n  display: flex;\n  \n  \n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n  color: var(--ez-list__item--color);\n  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);\n}\n\n.draggable-list.sc-ez-list li.sc-ez-list > div.sc-ez-list {\n  \n  padding: var(--space--3xs, 4px) var(--space--3xs, 4px);\n  margin: var(--ez-list__item--margin);\n}\n\n.over.sc-ez-list {\n  \n  border-top: 1px dashed var(--ez-list__over--border--color);\n}\n\n.last-droppable-space.sc-ez-list {\n  \n  height: var(--ez-list__last-droppable-space--height);\n}\n\n.draggable-selected.sc-ez-list {\n  \n  background-color: var(--background--strong) !important;\n}\n\n.draggable-selected.sc-ez-list div.sc-ez-list:hover {\n  \n  background-color: var(--background--strong) !important;\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar {\n  \n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-track {\n  \n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-thumb {\n  \n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover, .draggable-list.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover {\n  \n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:vertical:active, .draggable-list.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active {\n  \n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.draggable-icon.sc-ez-list {\n  align-items: flex-start;\n  display: flex;\n  outline: none;\n  border: none;\n  background-color: unset;\n}\n\n.draggable-icon.sc-ez-list::after {\n  content: '';\n  display: flex;\n  width: 18px;\n  height: 18px;\n\n  \n  background-color: var(--ez-list__icon--color);\n  -webkit-mask-image: var(--ez-list__draggable-icon--image);\n  mask-image: var(--ez-list__draggable-icon--image);\n}\n\n*.sc-ez-list {\n  box-sizing: border-box;\n}\n\n.checkbox.sc-ez-list {\n  width: fit-content;\n}\n\n.text--ellipsis.sc-ez-list {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  \n  white-space: var(--ez-list__item--white-space);\n}\n\n.group-container.sc-ez-list {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow-y: auto;\n  outline: none;\n  width: 100%;\n  scrollbar-width: thin;\n\n  \n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-name.sc-ez-list {\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  \n  color: var(--title--primary);\n  font-family: var(--ez-list__group--font-family);\n  font-size: var(--ez-list__group--font-size);\n  font-weight: var(--ez-list__group--font-weight);\n  padding-bottom: var(--ez-list__group--padding-bottom);\n}\n\n.group.sc-ez-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar {\n  \n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-track {\n  \n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-thumb {\n  \n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover, .group-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover {\n  \n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:active, .group-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active {\n  \n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.section-container.sc-ez-list {\n  display: flex;\n  position: relative;\n  height: 100%;\n}\n\n.items-container.sc-ez-list {\n  width: 100%;\n  max-height: 100%;\n  outline: none;\n  scrollbar-width: thin;\n\n  \n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-items-container.sc-ez-list {\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  outline: none;\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar {\n  \n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-track {\n  \n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-thumb {\n  \n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover, .items-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover {\n  \n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:active, .items-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active {\n  \n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.group-overlay.sc-ez-list {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  border-radius: 8px;\n  position: absolute;\n  display: none;\n  place-items: center;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  margin: 0;\n  cursor: pointer;\n\n  \n  font-family: var(--ez-list__group-overlay--font-family);\n  font-size: var(--ez-list__group-overlay--font-size);\n}\n\n.presetedHeight.sc-ez-list {\n  min-height: 100px;\n}\n\n.overlay-text.sc-ez-list {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 50px;\n  color: white;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n}\n\n.selected-item.sc-ez-list {\n  \n  background: var(--ez-list__selected-item--background-color);\n  border-radius: var(--ez-list__selected-item--border-radius);\n}\n\n.slot-item.sc-ez-list {\n  align-items: flex-end;\n}\n\n.overGroup.sc-ez-list {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-top: 6px;\n}";
 
@@ -25,6 +26,7 @@ const EzList = class {
     this.itemSlotBuilder = undefined;
     this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
+    this.enableMultipleSelection = false;
   }
   /**
    * Limpa o histórico da lista.
@@ -46,56 +48,93 @@ const EzList = class {
   /**
    * 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.ezSelectItem.emit(selectedItem);
+  }
+  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];
+    this.ezSelectItem.emit(this._listItems.filter(item => item.selected));
+  }
+  setSelectionMultiple(selectedItem) {
+    let newList = [...this._listItems];
+    newList.forEach(item => {
+      item.selected = (item.id === selectedItem.id) ? !item.selected : item.selected;
+    });
+    this._listItems = [...newList];
+    this.ezSelectItem.emit(this._listItems.filter(item => item.selected));
+  }
+  setSelectionSingleItem(selectedItem, scrollToOption) {
+    this.ezSelectItem.emit(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.ezSelectItem.emit(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;
   }
   /**
@@ -119,14 +158,11 @@ const EzList = class {
         });
       });
       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) {
@@ -188,78 +224,88 @@ const EzList = class {
     core.ElementIDUtils.addIDInfo(this._element);
   }
   onDrop(ev, dragEndItem) {
+    ev.stopPropagation();
     this.removeOverClass();
+    if (!this._dragStartItem)
+      return;
+    if (this.useGroups) {
+      this.onDropWithGroups(dragEndItem);
+      return;
+    }
+    this._listItems = [...ezListHelper.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 = [...ezListHelper.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;
@@ -297,19 +343,13 @@ const EzList = class {
     if (this.useGroups) {
       this.hideOverlays();
     }
-    if (this._draggingElement) {
-      try {
-        this._element.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);
     }
   }
@@ -365,84 +405,94 @@ const EzList = class {
       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) {
@@ -484,11 +534,11 @@ const EzList = class {
     }
   }
   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();
@@ -528,38 +578,29 @@ const EzList = class {
   doubleClickItem(item) {
     this.ezDoubleClick.emit(item);
   }
-  render() {
-    return (index.h(index.Host, { ref: el => (this._element = el) }, this.useGroups ? (index.h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
-        this.keyDownHandler(event);
-      } }, this._listGroupItems.map(group => {
-      return (index.h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, index.h("label", { draggable: false, class: "group-name", title: group.group }, group.group), index.h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, index.h("div", { class: "group-items-container" }, index.h("div", { class: "draggable-list" }, group.items.map((item, index$1) => (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 index.h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
+      return (index.h("div", { id: this.getDivGroupId(group.group), class: 'group', key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, index.h("label", { draggable: false, class: 'group-name', title: group.group }, group.group), index.h("section", { class: 'section-container', onDragOver: ev => ev.preventDefault() }, index.h("div", { class: 'group-items-container' }, index.h("div", { class: 'draggable-list' }, group.items.map((item, index$1) => (index.h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
         }, key: 'item_' + item.id }, {
         [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`ezListItem__${core.StringUtils.replaceAccentuatedChars(item.label)}`),
-      }), index.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$1), onDragOver: event => {
-          group.sort ? undefined : this.onDragOverItem(event);
-        }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index$1 }), draggable: this.ezDraggable }, index.h("div", { class: "item-content" }, this.ezDraggable ? index.h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (index.h(index.Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), index.h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (index.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')))))), index.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 ? (index.h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
-    }))) : (index.h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+      }), index.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$1), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index$1 }), draggable: this.ezDraggable }, index.h("div", { class: 'item-content' }, this.ezDraggable ? index.h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (index.h(index.Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), index.h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (index.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')))))), index.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 ? (index.h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, "Mover para ", group.group)) : undefined)));
+    }));
+  }
+  renderList() {
+    return index.h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
         this.keyDownHandler(event);
-      } }, index.h("div", { class: "draggable-list" }, this._listItems.map((item, index$1) => (index.h("li", Object.assign({ id: 'item_' + item.id, class: {
+      } }, index.h("div", { class: 'draggable-list' }, this._listItems.map((item, index$1) => (index.h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,
         'hover-feedback': this.hoverFeedback,
-      }, key: 'item_' + item.id }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`ezListItem__${core.StringUtils.replaceAccentuatedChars(item.label)}`) }), index.h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index$1 }), 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$1 }), draggable: this.ezDraggable }, index.h("div", { class: "item-content" }, this.listMode === 'regular' ? (index.h(index.Fragment, null, this.ezDraggable ? index.h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), index.h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (index.h(index.Fragment, null, this.ezDraggable ? index.h("span", { class: "draggable-icon" }) : undefined, index.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))))), index.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 }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`ezListItem__${core.StringUtils.replaceAccentuatedChars(item.label)}`) }), index.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$1 }), onDragOver: event => this.onDragOverItem(event), onDragLeave: () => this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index$1 }), draggable: this.ezDraggable }, index.h("div", { class: 'item-content' }, this.listMode === 'regular' ? (index.h(index.Fragment, null, this.ezDraggable ? index.h("span", { class: 'draggable-icon' }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), index.h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (index.h(index.Fragment, null, this.ezDraggable ? index.h("span", { class: 'draggable-icon' }) : undefined, index.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))))), index.h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) })));
+  }
+  render() {
+    return (index.h(index.Host, { ref: el => (this._element = el) }, this.useGroups ? this.renderListWithGroups() : this.renderList()));
   }
 };
 EzList.style = ezListCss;

package/dist/cjs/ez-multi-selection-list.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;display:block;width:304px;height:322px;max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{height:235px;max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
+const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;--ez-multi-selection-default-height:322px;display:block;width:304px;height:var(--ez-multi-selection-default-height);max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
 
 var ViewScenarios;
 (function (ViewScenarios) {