@sankhyalabs/ezui 5.22.0-dev.64 → 5.22.0-dev.66

package/dist/custom-elements/index.js

@@ -1,6 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, forceUpdate, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
-import { UserInterface, DateUtils as DateUtils$1, Action, StringUtils as StringUtils$1, ApplicationContext, WaitingChangeException, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, HTMLBuilder, TimeFormatter, DataUnit, LockManager, LockManagerOperation, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, FieldComparator, ArrayUtils as ArrayUtils$1, OverflowWatcher, OVERFLOWED_CLASS_NAME, KeyboardManager } from '@sankhyalabs/core';
+import { UserInterface, DateUtils as DateUtils$1, Action, StringUtils as StringUtils$1, ApplicationContext, WaitingChangeException, DataUnitAction, FloatingManager, ElementIDUtils, ObjectUtils as ObjectUtils$1, JSUtils, HTMLBuilder, TimeFormatter, ArrayUtils as ArrayUtils$1, DataUnit, LockManager, LockManagerOperation, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, FieldComparator, OverflowWatcher, OVERFLOWED_CLASS_NAME, KeyboardManager } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -4288,6 +4288,375 @@ const EzDialog$1 = class extends HTMLElement$1 {
   static get style() { return ezDialogCss; }
 };
 
+function moveItems(selectedItemsList, itemsList, foward) {
+  if (!selectedItemsList.length)
+    return [...itemsList];
+  if (!itemsList.length)
+    return [];
+  const selectedIndexes = getItemsIndex(selectedItemsList, itemsList);
+  const startIndex = getMinValue(selectedIndexes);
+  const endIndex = getMaxValue(selectedIndexes);
+  return moveRange(startIndex, endIndex, foward, itemsList);
+}
+function getMinValue(numbers) {
+  if (numbers.length === 0)
+    return 0;
+  return numbers.reduce((min, current) => (current < min ? current : min), numbers[0]);
+}
+function getMaxValue(numbers) {
+  if (numbers.length === 0)
+    return 0;
+  return numbers.reduce((max, current) => (current > max ? current : max), numbers[0]);
+}
+function getItemsIndex(selectedItemsList, itemsList) {
+  return selectedItemsList.map(selectedId => itemsList.findIndex(original => original.id === selectedId));
+}
+function moveRange(startIndex, endIndex, moveForward, listItem) {
+  if (startIndex < 0 || endIndex >= listItem.length || startIndex > endIndex)
+    return listItem;
+  if (moveForward)
+    return moveFoward(endIndex, startIndex, listItem);
+  return moveBackward(startIndex, endIndex, listItem);
+}
+function moveBackward(startIndex, endIndex, listItem) {
+  if (startIndex === 0)
+    return listItem;
+  const beforeRange = listItem.slice(0, startIndex - 1);
+  const range = listItem.slice(startIndex, endIndex + 1);
+  const afterRange = listItem.slice(endIndex + 1);
+  const movedItem = listItem[startIndex - 1];
+  return [...beforeRange, ...range, movedItem, ...afterRange];
+}
+function moveFoward(endIndex, startIndex, listItem) {
+  if (endIndex === listItem.length - 1)
+    return listItem;
+  const beforeRange = listItem.slice(0, startIndex);
+  const range = listItem.slice(startIndex, endIndex + 1);
+  const afterRange = listItem.slice(endIndex + 1);
+  const movedItem = afterRange.shift();
+  return movedItem
+    ? [...beforeRange, movedItem, ...range, ...afterRange]
+    : listItem;
+}
+function transferAll({ from, to, selectedFrom, selectedTo }) {
+  to = [...to.map(i => setItemSelection(i, false)), ...from.map(i => setItemSelection(i, true))];
+  selectedFrom = [];
+  selectedTo = [...from.map(({ id }) => id)];
+  from = [];
+  return { from, to, selectedFrom, selectedTo };
+}
+function transferItems({ from, to, selectedFrom, selectedTo }) {
+  if (!from.length)
+    return { from, to, selectedFrom, selectedTo };
+  const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
+  if (!itemsToTransfer.length)
+    return { from, to, selectedFrom, selectedTo };
+  to = [
+    ...to.map(i => setItemSelection(i, false)),
+    ...itemsToTransfer.map(i => setItemSelection(i, true))
+  ];
+  const selectedFromIds = selectedFrom.map(id => id);
+  from = [...from.filter(item => !selectedFromIds.includes(item.id))];
+  selectedTo = [...selectedFrom];
+  selectedFrom = [];
+  return { from, to, selectedFrom, selectedTo };
+}
+function getItemsToTransfer(to, selectedFrom, from) {
+  const toListIds = to.map(item => item.id);
+  //Não deve transferir um item que já existe na lista destino
+  const itemsToTransferId = selectedFrom.filter((id) => !toListIds.includes(id));
+  return from.filter(({ id }) => itemsToTransferId.includes(id));
+}
+function setItemSelection(item, select) {
+  return Object.assign(Object.assign({}, item), { selected: select });
+}
+
+/**
+ * O dragElement é posicionado ANTERIORMENTE ao targetIndex.
+ * Ex: no array: ["A", "B", "C", "D", "E"]
+ * se o dragItem for "B" e o targetIndex 3 (referente à "D"),
+ * "B" será posicionado logo antes de "D".
+ * O resultado será: ["A", "C", "B", "D", "E"]
+ *
+ * @param configs
+ */
+function processListOnDrop(configs) {
+  let newList;
+  if (hasToMoveMultipleItems(configs)) {
+    newList = processMoveMultipleItems(configs);
+  }
+  else {
+    newList = processMoveSingleItem(configs);
+    configs.clearSelection();
+  }
+  return newList;
+}
+function hasToMoveMultipleItems(configs) {
+  const { enableMultipleSelection, listItems, dragItem, moveToFinal, targetIndex } = configs;
+  if (!enableMultipleSelection)
+    return false;
+  const selectedItemsIndexes = getSelectedIndices(listItems);
+  if (selectedItemsIndexes.length <= 1)
+    return false;
+  if (!selectedItemsIndexes.includes(dragItem.index))
+    return false;
+  if (!isContinuousSequence(selectedItemsIndexes))
+    return false;
+  if (moveToFinal)
+    return true;
+  return !selectedItemsIndexes.includes(targetIndex);
+}
+function processMoveSingleItem(configs) {
+  const { listItems, dragItem, targetIndex, moveToFinal } = configs;
+  const newList = [...listItems];
+  newList.splice(dragItem.index, 1);
+  if (moveToFinal) {
+    newList.push(dragItem.item);
+  }
+  else {
+    const adjustedIndex = (targetIndex > dragItem.index) ? Math.max(0, targetIndex - 1) : targetIndex;
+    newList.splice(adjustedIndex, 0, dragItem.item);
+  }
+  return newList;
+}
+function processMoveMultipleItems(configs) {
+  const { listItems, moveToFinal, targetIndex } = configs;
+  const selectedItems = listItems.filter(item => item.selected);
+  const selectedItemsIndexes = getSelectedIndices(listItems);
+  const minorIndex = Math.min(...selectedItemsIndexes);
+  const majorIndex = Math.max(...selectedItemsIndexes);
+  const qtdToMove = selectedItems.length;
+  const newList = [...listItems];
+  newList.splice(minorIndex, qtdToMove);
+  if (moveToFinal) {
+    newList.push(...selectedItems);
+  }
+  else {
+    let adjustedIndex = (targetIndex > majorIndex) ? Math.max(0, targetIndex - qtdToMove) : targetIndex;
+    newList.splice(adjustedIndex, 0, ...selectedItems);
+  }
+  return newList;
+}
+function isContinuousSequence(numbers) {
+  if (numbers.length === 0)
+    return false;
+  const sortedNumbers = [...numbers].sort((a, b) => a - b);
+  for (let i = 1; i < sortedNumbers.length; i++) {
+    if (sortedNumbers[i] !== sortedNumbers[i - 1] + 1) {
+      return false;
+    }
+  }
+  return true;
+}
+function getSelectedIndices(listItems) {
+  return listItems.reduce((indices, item, index) => {
+    if (item.selected) {
+      indices.push(index);
+    }
+    return indices;
+  }, []);
+}
+
+var EzScrollDirection;
+(function (EzScrollDirection) {
+  EzScrollDirection["HORIZONTAL"] = "horizontal";
+  EzScrollDirection["VERTICAL"] = "vertical";
+  EzScrollDirection["BOTH"] = "both";
+})(EzScrollDirection || (EzScrollDirection = {}));
+
+const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\")}.group.sc-ez-double-list{display:flex;justify-content:space-between;gap:10px;flex-direction:column;border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-medium);width:350px;height:400px}.group__header.sc-ez-double-list{background:var(--background--body);padding:10px;border-radius:var(--border--radius-medium) var(--border--radius-medium) 0 0}.group__label.sc-ez-double-list{font-weight:var(--text-weight--large);font-size:var(--text--medium);color:var(--title--primary);margin-bottom:10px;display:block}.group__totalizer.sc-ez-double-list{padding:5px 10px;background:var(--background--body);font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}.empty-message.sc-ez-double-list{font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);text-align:center;margin:auto}.list__container.sc-ez-double-list{height:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
+
+const EzDoubleList$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.ezLeftListChanged = createEvent(this, "ezLeftListChanged", 7);
+    this.ezRightListChanged = createEvent(this, "ezRightListChanged", 7);
+    this.LEFT_LIST_ID = 'LEFT-LIST-ID';
+    this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
+    this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
+    this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
+    this.leftList = [];
+    this.leftTitle = undefined;
+    this.rightList = [];
+    this.entityLabel = 'item';
+    this.entityLabelPlural = 'itens';
+    this.leftListLabel = 'disponíveis';
+    this.rightListLabel = 'selecionados';
+    this.rightTitle = undefined;
+    this.leftFilteredList = [];
+    this.rightFilteredList = [];
+    this.selectedLeftList = [];
+    this.selectedRightList = [];
+    this.isFilteringLeft = false;
+    this.isFilteringRight = false;
+  }
+  observeLeftList(newValue, oldValue) {
+    if (ObjectUtils$1.equals(newValue, oldValue))
+      return;
+    this.ezLeftListChanged.emit(newValue);
+  }
+  observeRightList(newValue, oldValue) {
+    if (ObjectUtils$1.equals(newValue, oldValue))
+      return;
+    this.ezRightListChanged.emit(newValue);
+  }
+  handleFilterChangeLeft(value) {
+    this.leftFilteredList = ArrayUtils$1.applyStringFilter(value, this.leftList, true, 'label');
+    this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
+  }
+  handleFilterChangeRight(value) {
+    this.rightFilteredList = ArrayUtils$1.applyStringFilter(value, this.rightList, true, 'label');
+    this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
+  }
+  async handleChangeLeft({ detail }) {
+    this.leftList = [...detail];
+    this.selectedLeftList = [...detail.filter(item => item.selected)];
+    await this.leftEzListInstance.clearHistory();
+  }
+  async handleChangeRight({ detail }) {
+    this.rightList = [...detail];
+    this.selectedRightList = [...detail.filter(item => item.selected)];
+    await this.rightEzListInstance.clearHistory();
+  }
+  enableTransferAllToRight() {
+    return this.leftList.length > 0;
+  }
+  enableTransferAllToLeft() {
+    return this.rightList.length > 0;
+  }
+  enableTransferToRight() {
+    return this.selectedLeftList.length > 0;
+  }
+  enableTransferToLeft() {
+    return this.selectedRightList.length > 0;
+  }
+  enableMoveUp(moveAll) {
+    if (this.isFilteringRight)
+      return false;
+    const selectedIndexes = this.getRightSelectedItemsIndex();
+    return this.selectedRightList.length > 0
+      && !selectedIndexes.includes(0)
+      && (moveAll ? true : isContinuousSequence(selectedIndexes));
+  }
+  enableMoveDown(moveAll) {
+    if (this.isFilteringRight)
+      return false;
+    const selectedIndexes = this.getRightSelectedItemsIndex();
+    const lastIndex = this.rightList.length - 1;
+    return this.selectedRightList.length > 0
+      && !selectedIndexes.includes(lastIndex)
+      && (moveAll ? true : isContinuousSequence(selectedIndexes));
+  }
+  getRightSelectedItemsIndex() {
+    return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
+  }
+  transferToRight() {
+    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
+    this.leftList = [...from];
+    this.rightList = [...to];
+    this.selectedLeftList = [...selectedFrom];
+    this.selectedRightList = [...selectedTo];
+  }
+  transferToLeft() {
+    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
+    this.rightList = [...from];
+    this.leftList = [...to];
+    this.selectedRightList = [...selectedFrom];
+    this.selectedLeftList = [...selectedTo];
+  }
+  handleTransferAllToRight() {
+    const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
+    this.leftList = [...from];
+    this.rightList = [...to];
+    this.selectedLeftList = [...selectedFrom];
+    this.selectedRightList = [...selectedTo];
+  }
+  handleTransferAllToLeft() {
+    const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
+    this.rightList = [...from];
+    this.leftList = [...to];
+    this.selectedRightList = [...selectedFrom];
+    this.selectedLeftList = [...selectedTo];
+  }
+  buildTransferToRightConfig() {
+    return {
+      from: this.leftList,
+      to: this.rightList,
+      selectedFrom: this.selectedLeftList,
+      selectedTo: this.selectedRightList,
+    };
+  }
+  buildTransferToLeftConfig() {
+    return {
+      from: this.rightList,
+      to: this.leftList,
+      selectedFrom: this.selectedRightList,
+      selectedTo: this.selectedLeftList,
+    };
+  }
+  handleMoveUp() {
+    this.rightList = [...moveItems(this.selectedRightList, this.rightList, false)];
+  }
+  handleMoveDown() {
+    this.rightList = [...moveItems(this.selectedRightList, this.rightList, true)];
+  }
+  handleMoveToTop() {
+    const { itemsToKeep, itemsToMove } = this.getItemsToKeepAndToMove();
+    this.rightList = [...itemsToMove, ...itemsToKeep];
+  }
+  handleMoveToBottom() {
+    const { itemsToKeep, itemsToMove } = this.getItemsToKeepAndToMove();
+    this.rightList = [...itemsToKeep, ...itemsToMove];
+  }
+  handleSelectLeftItem({ detail }) {
+    const selectedItems = Array.isArray(detail) ? detail : [detail];
+    this.selectedLeftList = [...selectedItems.map(({ id }) => id)];
+  }
+  handleSelectRightItem({ detail }) {
+    const selectedItems = Array.isArray(detail) ? detail : [detail];
+    this.selectedRightList = [...selectedItems.map(({ id }) => id)];
+  }
+  getItemsToKeepAndToMove() {
+    const itemsToKeep = this.rightList.filter(item => !this.selectedRightList.includes(item.id));
+    const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
+    return { itemsToKeep, itemsToMove };
+  }
+  handleTransferToRight() {
+    this.transferToRight();
+    this.leftFilteredList = [];
+    this.leftEzFilterInput.value = '';
+  }
+  handleTransferToLeft() {
+    this.transferToLeft();
+    this.rightFilteredList = [];
+    this.rightEzFilterInput.value = '';
+  }
+  buildTotalizer(list) {
+    return `Total de ${list.length} ${list.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+  }
+  renderLeftList() {
+    if (!this.leftList.length) {
+      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " dispon\u00EDvel");
+    }
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectItem: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
+  }
+  renderRightList() {
+    if (!this.rightList.length) {
+      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " selecionado");
+    }
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.rightEzListInstance = ref, id: this.RIGHT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringRight ? this.rightFilteredList : this.rightList, ezDraggable: !this.isFilteringRight, enableMultipleSelection: true, onEzChange: this.handleChangeRight.bind(this), ezSelectable: true, onEzSelectItem: this.handleSelectRightItem.bind(this), onEzDoubleClick: this.handleTransferToLeft.bind(this) })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.leftTitle), h("ez-filter-input", { ref: (ref) => this.leftEzFilterInput = ref, id: this.LEFT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeLeft(evt.detail) })), h("div", { class: 'list__container' }, this.renderLeftList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.leftList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-right', enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-right', enabled: this.enableTransferToRight(), title: `Mover para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-left', enabled: this.enableTransferToLeft(), title: `Mover para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-left', enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.rightTitle), h("ez-filter-input", { ref: (ref) => this.rightEzFilterInput = ref, id: this.RIGHT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeRight(evt.detail) })), h("div", { class: 'list__container' }, this.renderRightList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.rightList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-up', enabled: this.enableMoveUp(true), title: 'Mover para primeira posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-up', enabled: this.enableMoveUp(), title: 'Mover para cima', size: 'small', onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-down', enabled: this.enableMoveDown(), title: 'Mover para baixo', size: 'small', onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-down', enabled: this.enableMoveDown(true), title: 'Mover para \u00FAltima posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToBottom.bind(this) }))));
+  }
+  static get watchers() { return {
+    "leftList": ["observeLeftList"],
+    "rightList": ["observeRightList"]
+  }; }
+  static get style() { return ezDoubleListCss; }
+};
+
 const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {
   return (h("div", { class: "ez-dropdown__item-wrapper", title: item.label },
     getContentLeft(item, hasIcon),
@@ -71778,7 +72147,7 @@ class InMemoryFilterColumnDataSource {
   }
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%);--ez-grid--min-height:300px;--ez-grid__container--outline:1px solid var(--color--strokes);--ez-grid__container--shadow-as-outline:0px 0px 0px 1px var(--color--strokes);min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid__container.box-outline.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow-as-outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}";
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}";
 
 const windowInstace$1 = window;
 const matches = (text, filter) => {
@@ -71822,7 +72191,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.enableGridInsert = false;
     this.enableContinuousInsert = true;
     this.enableLockManger = true;
-    this.boxShadow = true;
+    this.outlineMode = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -72299,7 +72668,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
   }
   render() {
     var _a;
-    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: `grid__container ${this.boxShadow ? '' : 'box-outline'} ez-grid`, ref: elem => (this._container = elem) }), h("div", { class: `ez-box ${this.boxShadow ? 'ez-box--shadow-xsmall' : 'ez-box--outline'} ez-padding--small grid-header` }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: `grid__container ${this.outlineMode ? 'outline-mode' : 'shadow-mode'} ez-grid`, ref: elem => (this._container = elem) }), h("div", { class: `ez-box ${this.outlineMode ? 'outline-mode' : 'shadow-mode'} ez-padding--small grid-header` }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: `grid-header__container grid-header__left-container ${this.resolveLeftHeaderClass()}` }, h("slot", { name: "leftButtons" })), this.getPaginationControl())), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -72313,13 +72682,6 @@ const EzGrid$1 = class extends HTMLElement$1 {
   static get style() { return ezGridCss; }
 };
 
-var EzScrollDirection;
-(function (EzScrollDirection) {
-  EzScrollDirection["HORIZONTAL"] = "horizontal";
-  EzScrollDirection["VERTICAL"] = "vertical";
-  EzScrollDirection["BOTH"] = "both";
-})(EzScrollDirection || (EzScrollDirection = {}));
-
 const ezGuideNavigatorCss = ":host{--ez-guide-navigator--padding-left:var(--space--large);--ez-guide-navigator--padding-right:var(--space--small);--ez-guide-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-guide-navigator--background-color:var(--color--inverted);--ez-guide-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-guide-navigator--actions-gap:var(--space--medium);--ez-guide-navigator--actions-margin:var(--space--large) 0 var(--space--medium);--ez-guide-navigator--actions-padding-right:calc(var(--space--medium, 12px) + var(--space--small, 6px))}.inverted{transform:rotate(180deg)}.ez-guide-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;padding-left:var(--ez-guide-navigator--padding-left);padding-right:var(--ez-guide-navigator--padding-right);background-color:var(--ez-guide-navigator--background-color);-webkit-box-shadow:var(--ez-guide-navigator--box-shadow);box-shadow:var(--ez-guide-navigator--box-shadow);border-radius:var(--ez-guide-navigator--border-radius)}.ez-guide-navigator__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-guide-navigator--actions-gap);margin:var(--ez-guide-navigator--actions-margin);padding-right:var(--ez-guide-navigator--actions-padding-right)}.hidden{display:none}";
 
 const ENTER_KEY = "Enter";
@@ -72474,6 +72836,7 @@ const EzList$1 = class extends HTMLElement$1 {
     this.itemSlotBuilder = undefined;
     this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
+    this.enableMultipleSelection = false;
   }
   /**
    * Limpa o histórico da lista.
@@ -72495,56 +72858,93 @@ const EzList$1 = class extends HTMLElement$1 {
   /**
    * 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;
   }
   /**
@@ -72568,14 +72968,11 @@ const EzList$1 = class extends HTMLElement$1 {
         });
       });
       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) {
@@ -72637,78 +73034,88 @@ const EzList$1 = class extends HTMLElement$1 {
     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;
@@ -72746,19 +73153,13 @@ const EzList$1 = class extends HTMLElement$1 {
     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);
     }
   }
@@ -72814,84 +73215,94 @@ const EzList$1 = class extends HTMLElement$1 {
       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) {
@@ -72933,11 +73344,11 @@ const EzList$1 = class extends HTMLElement$1 {
     }
   }
   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();
@@ -72977,38 +73388,29 @@ const EzList$1 = class extends HTMLElement$1 {
   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$1.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$1.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$1.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 style() { return ezListCss; }
 };
@@ -73719,7 +74121,7 @@ const EzPopover$1 = class extends HTMLElement$1 {
   static get style() { return ezPopoverCss; }
 };
 
-const ezPopupCss = ":host{display:flex;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--md, 20px);--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--large, 20px);--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, 24);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__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{box-sizing:border-box;width:100%;height:calc(100% - 44px)}.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 ezPopupCss = ":host{display:flex;width:auto;--ez-popup-z-index:var(--elevation--24, 24);--ez-popup__container--color:var(--title--primary, #2b3a54);--ez-popup__container--padding:var(--space--md, 20px);--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--large, 20px);--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, 24);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__overflow-y--auto{overflow-y:auto}.popup__content{box-sizing:border-box;height:100%;width:100%}.popup__expandable-content{box-sizing:border-box;width:100%;height:calc(100% - 44px)}.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() {
@@ -73735,6 +74137,7 @@ const EzPopup$1 = class extends HTMLElement$1 {
       "large": "col--sd-9",
       "x-large": "col--sd-11",
       "default": "ez-popup__size-limit--x-small",
+      "auto": "",
     };
     this.size = "medium";
     this.opened = false;
@@ -73788,6 +74191,8 @@ const EzPopup$1 = class extends HTMLElement$1 {
     });
   }
   getGridSize() {
+    if (this.size === "auto")
+      return "";
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
   handlePopupHeight() {
@@ -78490,15 +78895,16 @@ const EzCustomFormInput = /*@__PURE__*/proxyCustomElement(EzCustomFormInput$1, [
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"],"noMargin":[4,"no-margin"]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"],"noMargin":[4,"no-margin"]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"beforeClose":[1040]},[[8,"keydown","handleKeyDown"]]]);
+const EzDoubleList = /*@__PURE__*/proxyCustomElement(EzDoubleList$1, [2,"ez-double-list",{"leftList":[1040],"leftTitle":[1,"left-title"],"rightList":[1040],"entityLabel":[1,"entity-label"],"entityLabelPlural":[1,"entity-label-plural"],"leftListLabel":[1,"left-list-label"],"rightListLabel":[1,"right-list-label"],"rightTitle":[1,"right-title"],"leftFilteredList":[32],"rightFilteredList":[32],"selectedLeftList":[32],"selectedRightList":[32],"isFilteringLeft":[32],"isFilteringRight":[32]}]);
 const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]},[[4,"click","handleClickOutside"]]]);
 const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"],"noMargin":[4,"no-margin"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"fieldToFocus":[1,"field-to-focus"],"onlyStaticFields":[4,"only-static-fields"],"_fieldsProps":[32]}]);
 const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16],"selectedRecord":[16],"_customEditors":[32]}]);
-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],"useEnterLikeTab":[4,"use-enter-like-tab"],"recordsValidator":[16],"canEdit":[4,"can-edit"],"autoFocus":[4,"auto-focus"],"paginationCounterMode":[1,"pagination-counter-mode"],"enableGridInsert":[4,"enable-grid-insert"],"enableContinuousInsert":[4,"enable-continuous-insert"],"enableLockManger":[4,"enable-lock-manger"],"boxShadow":[4,"box-shadow"],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_hasLeftButtons":[32],"_customFormatters":[32]},[[0,"ezSelectionChange","onSelectionChange"],[2,"click","handleClick"]]]);
+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],"useEnterLikeTab":[4,"use-enter-like-tab"],"recordsValidator":[16],"canEdit":[4,"can-edit"],"autoFocus":[4,"auto-focus"],"paginationCounterMode":[1,"pagination-counter-mode"],"enableGridInsert":[4,"enable-grid-insert"],"enableContinuousInsert":[4,"enable-continuous-insert"],"enableLockManger":[4,"enable-lock-manger"],"outlineMode":[4,"outline-mode"],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_hasLeftButtons":[32],"_customFormatters":[32]},[[0,"ezSelectionChange","onSelectionChange"],[2,"click","handleClick"]]]);
 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, [2,"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 EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [2,"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"],"enableMultipleSelection":[4,"enable-multiple-selection"],"_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"],"closeOutsideLeave":[4,"close-outside-leave"],"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"],"showCloseButton":[4,"show-close-button"]},[[4,"ezCloseModal","handleEzModalAction"]]]);
@@ -78548,6 +78954,7 @@ const defineCustomElements = (opts) => {
   EzDateInput,
   EzDateTimeInput,
   EzDialog,
+  EzDoubleList,
   EzDropdown,
   EzFileItem,
   EzFilterInput,
@@ -78593,4 +79000,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };