@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,554 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-296b8458.js';
+import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+
+const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--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>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{width:100%;display:grid;grid-template-columns:minmax(0px, auto) minmax(0px, auto);place-items:center;border-top:1px dashed #fff;justify-content:space-between;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.item-content{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;width:100%}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title--primary);font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
+
+const EzList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezSelectItem = createEvent(this, "ezSelectItem", 7);
+    this.ezCheckChange = createEvent(this, "ezCheckChange", 7);
+    this._listItemsHistory = [];
+    this._listItems = [];
+    this._listGroupItems = [];
+    this.dataSource = [];
+    this.listMode = 'regular';
+    this.useGroups = false;
+    this.ezDraggable = false;
+    this.ezSelectable = false;
+    this.itemSlotBuilder = undefined;
+    this.itemLeftSlotBuilder = undefined;
+    this.hoverFeedback = false;
+  }
+  /**
+   * Limpa o histórico da lista.
+   */
+  async clearHistory() {
+    this._listItemsHistory = [];
+  }
+  /**
+   * Traz o conteúdo da lista para a área visível.
+   */
+  async scrollToTop() {
+    if (this.useGroups) {
+      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
+    }
+    else {
+      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
+    }
+  }
+  /**
+   * Aplica seleção nas linhas da lista.
+   */
+  async setSelection(selectedItem, scrollToOption) {
+    if (selectedItem && this.ezSelectable) {
+      this.ezSelectItem.emit(selectedItem);
+      if (this.useGroups) {
+        let newList = [...this._listGroupItems];
+        newList.forEach(groupItem => {
+          groupItem.items.forEach(item => {
+            item.selected = item.id === selectedItem.id;
+          });
+        });
+        this._listGroupItems = newList;
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.forEach(item => {
+          item.selected = item.id === selectedItem.id;
+        });
+        this._listItems = newList;
+      }
+      if (scrollToOption) {
+        let liElem = this.useGroups
+          ? this._groupContainer.querySelector('li#item_' + selectedItem.id)
+          : this._itemContainer.querySelector('li#item_' + selectedItem.id);
+        if (liElem) {
+          liElem.scrollIntoView();
+        }
+      }
+    }
+    else {
+      await this.removeSelection();
+    }
+  }
+  /**
+   * Obtém o item selecionado.
+   */
+  async getSelection() {
+    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);
+    }
+    return selectedItem;
+  }
+  /**
+   * Obtém a lista de items ou grupos.
+   */
+  async getList() {
+    if (this.useGroups) {
+      return this._listGroupItems;
+    }
+    return this._listItems;
+  }
+  /**
+   * Limpa a seleção atual
+   */
+  async removeSelection() {
+    if (this.useGroups) {
+      let newList = [...this._listGroupItems];
+      newList.forEach(groupItem => {
+        groupItem.items.forEach(item => {
+          item.selected = false;
+        });
+      });
+      this._listGroupItems = newList;
+    }
+    else {
+      let newList = [...this._listItems];
+      newList.forEach(item => {
+        item.selected = false;
+      });
+      this._listItems = newList;
+    }
+  }
+  applyUUID(item) {
+    if (!item.id) {
+      item.id = StringUtils.generateUUID();
+    }
+  }
+  createList() {
+    if (this.useGroups) {
+      let list = this.dataSource.map(item => item);
+      list.forEach(itemGroup => {
+        itemGroup.items.map(this.applyUUID);
+        this.sortGroup(itemGroup);
+      });
+      this._listGroupItems = list;
+    }
+    else {
+      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : this.dataSource.map(item => {
+        this.applyUUID(item);
+        return item;
+      });
+    }
+  }
+  sortGroup(itemGroup) {
+    if (itemGroup.sort) {
+      itemGroup.items.sort(function (a, b) {
+        return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+      });
+      if (itemGroup.sort === 'DSC') {
+        itemGroup.items.reverse();
+      }
+    }
+  }
+  buildIdDraggableListAndSelectable() {
+    const shadow = this._element.shadowRoot;
+    const draggableList = shadow.querySelectorAll('.draggable-list');
+    draggableList === null || draggableList === void 0 ? void 0 : draggableList.forEach((draggable, index) => {
+      var _a, _b;
+      let suffix = 'draggableList';
+      const group = (_b = (_a = this._listGroupItems) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.group;
+      if (this.useGroups && group) {
+        suffix = suffix.concat('_', group);
+      }
+      ElementIDUtils.addIDInfoIfNotExists(draggable, suffix);
+    });
+    const selectable = shadow.querySelectorAll('.selectable-container');
+    selectable === null || selectable === void 0 ? void 0 : selectable.forEach((item) => {
+      ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
+    });
+  }
+  componentWillLoad() {
+    this._listItemsHistory = [];
+  }
+  componentWillRender() {
+    this.createList();
+    if (this._element) {
+      this.buildIdDraggableListAndSelectable();
+    }
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
+  onDrop(ev, dragEndItem) {
+    this.removeOverClass();
+    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);
+      }
+    }
+    ev.stopPropagation();
+  }
+  onDropLastIndex(ev, groupDropped) {
+    this.removeOverClass();
+    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);
+      }
+    }
+    ev.stopPropagation();
+  }
+  onDropGroup(groupSelected) {
+    var _a;
+    let newList = [...this._listGroupItems];
+    this.setSelection(undefined);
+    let newGroup = newList.find(group => group.group === groupSelected.group);
+    if (newGroup) {
+      if (((_a = newGroup.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        let newItem;
+        newGroup.items.forEach((item, index) => {
+          if (item.id === this._dragStartItem.item.id) {
+            newItem = { item: item, index: index };
+          }
+        });
+        if (newItem) {
+          newGroup.items.splice(newItem.index, 1);
+          newGroup.items.unshift(newItem.item);
+          this.sortGroup(newGroup);
+        }
+        else {
+          newGroup.items.unshift(this._dragStartItem.item);
+          this.sortGroup(newGroup);
+          newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+        }
+      }
+      else {
+        newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
+        newGroup.items = [this._dragStartItem.item];
+      }
+      this._listGroupItems = newList;
+    }
+  }
+  onDragEnd() {
+    this._dragStartItem = undefined;
+    if (this.useGroups) {
+      this.hideOverlays();
+    }
+    if (this._draggingElement) {
+      try {
+        this._element.shadowRoot.removeChild(this._draggingElement);
+      }
+      catch (err) { }
+      this._draggingElement = undefined;
+    }
+  }
+  addOverClass(element) {
+    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains('draggable')) {
+      element.classList.add('over');
+    }
+    else if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains('draggable-list')) {
+      this.addOverClass(element.parentElement);
+    }
+  }
+  addOverGroupClass(ev, group) {
+    if (ev.target) {
+      let groupContainer = this._groupContainer.querySelector('div#' + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName('group-overlay')[0];
+      if (group.items.length > 0) {
+        groupOverlay.setAttribute('style', 'display:grid');
+      }
+      else {
+        groupOverlay.classList.add('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:grid');
+        groupOverlay.scrollIntoView(false);
+      }
+    }
+  }
+  removeOverClass() {
+    var _a, _b;
+    let overCollection;
+    let overLastDroppableCollection;
+    if (this.useGroups) {
+      overCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('over');
+      overLastDroppableCollection = this._groupContainer.getElementsByClassName('last-droppable-space');
+    }
+    else {
+      overCollection = (_b = this._itemContainer) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('over');
+      overLastDroppableCollection = this._itemContainer.getElementsByClassName('last-droppable-space');
+    }
+    if (overCollection) {
+      Array.from(overCollection).forEach(function (element) {
+        element.classList.remove('over');
+      });
+    }
+    if (overLastDroppableCollection) {
+      Array.from(overLastDroppableCollection).forEach(function (element) {
+        element.classList.remove('over');
+      });
+    }
+  }
+  removeOverGroupClass(ev, group) {
+    if (ev.target) {
+      let groupContainer = this._groupContainer.querySelector('div#' + this.getDivGroupId(group.group));
+      let groupOverlay = groupContainer.getElementsByClassName('group-overlay')[0];
+      if (groupOverlay) {
+        groupOverlay.classList.remove('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:none');
+      }
+    }
+  }
+  onDragStart(item, group, index) {
+    if (this._changeDeboucingTimeout) {
+      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 };
+    }
+  }
+  selectFirstItem() {
+    if (this.useGroups) {
+      this.setSelection(this._listGroupItems[0].items[0]);
+    }
+    {
+      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 };
+          }
+        }
+        if (item != undefined) {
+          nextItem = item;
+          return false;
+        }
+        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);
+  }
+  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 };
+          }
+        }
+        if (item != undefined) {
+          previousItem = item;
+          return false;
+        }
+        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);
+  }
+  keyDownHandler(event) {
+    event.preventDefault();
+    this.getSelection().then(selectedItem => {
+      if (selectedItem) {
+        switch (event.key) {
+          case 'ArrowDown':
+            this.nextOption(selectedItem);
+            break;
+          case 'ArrowUp':
+            this.previousOption(selectedItem);
+            break;
+        }
+      }
+      else {
+        this.selectFirstItem();
+      }
+    });
+    event.stopPropagation();
+  }
+  getDivGroupId(groupName) {
+    if (groupName) {
+      return 'group-' + groupName.replace(/[^a-z0-9_]/gi, '_');
+    }
+    return undefined;
+  }
+  getGroupOverlayId(groupName) {
+    if (groupName) {
+      return 'group-overlay-' + groupName.replace(/[^a-z0-9_]/gi, '_');
+    }
+    return undefined;
+  }
+  onDragOverGroup(event, group) {
+    if (this._dragStartItem && this._dragStartItem.groupName !== group.group && group.sort) {
+      event.preventDefault();
+      this.addOverGroupClass(event, group);
+    }
+  }
+  onDragOverItem(event) {
+    if (this._dragStartItem) {
+      event.preventDefault();
+      this.addOverClass(event.target);
+      event.stopPropagation();
+    }
+  }
+  onDragOverLastIndex(ev) {
+    ev.preventDefault();
+    if (this._dragStartItem) {
+      ev.target.classList.add('over');
+      ev.stopPropagation();
+    }
+  }
+  showOverlays(groupDragStart) {
+    let groupOverlayCollection = this._groupContainer.getElementsByClassName('group-overlay');
+    Array.from(groupOverlayCollection).forEach(groupOverlay => {
+      let groupOverlayID = this.getGroupOverlayId(groupDragStart.group);
+      if (groupOverlayID && groupOverlay.getAttribute('id') && groupOverlayID != groupOverlay.getAttribute('id')) {
+        groupOverlay.classList.add('presetedHeight');
+        groupOverlay.setAttribute('style', 'display:grid');
+      }
+    });
+  }
+  hideOverlays() {
+    var _a;
+    let groupOverlayCollection = (_a = this._groupContainer) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('group-overlay');
+    Array.from(groupOverlayCollection).forEach(groupOverlay => {
+      groupOverlay.classList.remove('presetedHeight');
+      groupOverlay.setAttribute('style', 'display:none');
+    });
+  }
+  getContainerItemBuilder(slotPosition, item, group, className) {
+    var _a, _b;
+    const customContent = slotPosition === 'left' ? (_a = this.itemLeftSlotBuilder) === null || _a === void 0 ? void 0 : _a.call(this, item, group) : (_b = this.itemSlotBuilder) === null || _b === void 0 ? void 0 : _b.call(this, item, group);
+    if (customContent == undefined)
+      return;
+    if (typeof customContent !== 'string') {
+      return h("div", { class: className }, customContent);
+    }
+    return h("div", { class: className, innerHTML: customContent });
+  }
+  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: {
+          'selectable-container': this.ezSelectable,
+          'hover-feedback': this.hoverFeedback,
+        }, key: 'item_' + item.id }, {
+        [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), 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 => {
+        this.keyDownHandler(event);
+      } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
+        'selectable-container': this.ezSelectable,
+        'hover-feedback': this.hoverFeedback,
+      }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), 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) }))))));
+  }
+};
+EzList.style = ezListCss;
+
+export { EzList as ez_list };

package/dist/esm/ez-loading-bar.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-296b8458.js';
+
+const ezLoadingBarCss = ":host{position:fixed;top:0px;width:100%}.loading-bar{width:100%;margin:0 auto;position:absolute;background-color:var(--color--primary-300, #e2f4ef);height:5px}.loading-bar:before{content:'';position:absolute}.loading-bar__container{position:absolute;top:0;right:100%;bottom:0;left:0;background-color:var(--color--primary, #008561);width:0;animation:loading 2s linear infinite}@keyframes loading{0%{left:0%;right:100%;width:0%}25%{left:0%;right:75%;width:25%}50%{left:0%;right:50%;width:90%}70%{right:0%;left:75%;width:25%}100%{left:100%;right:0%;width:0%}}@-webkit-keyframes loading{0%{left:0%;right:100%;width:0%}25%{left:0%;right:75%;width:25%}50%{left:0%;right:50%;width:90%}70%{right:0%;left:75%;width:25%}100%{left:100%;right:0%;width:0%}}";
+
+const EzLoadingBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._showLoading = true;
+  }
+  /**
+   * Oculta o ez-loading-bar.
+   */
+  async hide() {
+    this._showLoading = false;
+  }
+  /**
+   * Exibe o ez-loading-bar.
+   */
+  async show() {
+    this._showLoading = true;
+  }
+  render() {
+    return (h(Host, null, this._showLoading && h("div", { class: "loading-bar" }, h("div", { class: "loading-bar__container" }))));
+  }
+};
+EzLoadingBar.style = ezLoadingBarCss;
+
+export { EzLoadingBar as ez_loading_bar };

package/dist/esm/ez-modal-container.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-296b8458.js';
+
+var ModalAction;
+(function (ModalAction) {
+  ModalAction["CLOSE"] = "CLOSE";
+  ModalAction["OK"] = "OK";
+  ModalAction["CANCEL"] = "CANCEL";
+  ModalAction["LOAD"] = "LOAD";
+})(ModalAction || (ModalAction = {}));
+const ModalAction$1 = ModalAction;
+
+var ModalButtonStatus;
+(function (ModalButtonStatus) {
+  ModalButtonStatus["ENABLED"] = "ENABLED";
+  ModalButtonStatus["DISABLED"] = "DISABLED";
+  ModalButtonStatus["HIDDEN"] = "HIDDEN";
+})(ModalButtonStatus || (ModalButtonStatus = {}));
+const ModalButtonStatus$1 = ModalButtonStatus;
+
+const ezModalContainerCss = ".sc-ez-modal-container-h{--ez-modal-container-overflow-y:auto;--ez-modal-container-overflow-x:clip;display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:var(--ez-modal-container-overflow-y);overflow-x:var(--ez-modal-container-overflow-x)}.ez-modal-container__content.sc-ez-modal-container::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}.ez-modal-container__footer.sc-ez-modal-container{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--space--medium);width:100%;padding-top:var(--space--small, 6px)}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+
+const EzModalContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezModalAction = createEvent(this, "ezModalAction", 7);
+    this.modalTitle = undefined;
+    this.modalSubTitle = undefined;
+    this.showTitleBar = true;
+    this.cancelButtonLabel = undefined;
+    this.okButtonLabel = undefined;
+    this.cancelButtonStatus = undefined;
+    this.okButtonStatus = undefined;
+  }
+  cancelIsVisible() {
+    return (this.cancelButtonStatus !== ModalButtonStatus$1.HIDDEN && this.cancelButtonLabel != undefined);
+  }
+  okIsVisible() {
+    return (this.okButtonStatus !== ModalButtonStatus$1.HIDDEN && this.okButtonLabel != undefined);
+  }
+  componentDidLoad() {
+    window.requestAnimationFrame(() => {
+      this.ezModalAction.emit(ModalAction$1.LOAD);
+    });
+  }
+  focusLast() {
+    if (this._okButton == undefined) {
+      return;
+    }
+    this._okButton.setFocus();
+  }
+  focusFirst() {
+    this._closeButton.focus();
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", null, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+  }
+};
+EzModalContainer.style = ezModalContainerCss;
+
+export { EzModalContainer as ez_modal_container };