@sankhyalabs/ezui 1.1.75 → 1.1.78

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

@@ -1,166 +1,442 @@
-import { Component, Host, h, Prop, Method } from '@stencil/core';
+import { Component, Host, h, Prop, Method, State, Event } from '@stencil/core';
+;
 ;
 export class EzList {
   constructor() {
     this._listItems = [];
+    this._listGroupItems = [];
+    this._listItemsHistory = [];
     /**
     * Define a lista inicial do componente.
     */
-    this.initialList = [];
+    this.dataSource = [];
+    /**
+    * Define se o componente renderizará os itens separados em grupos..
+    */
+    this.useGroups = false;
     /**
     * Define se o componente terá o comportamento de arrasto de linhas.
     */
-    this.draggable = true;
+    this.ezDraggable = false;
     /**
-    * Define se é possível selecionar mais de um registro.
+    * Define se os items da lista serão selecionáveis.
     */
-    this.isMultipleSelection = true;
+    this.ezSelectable = false;
   }
   createList() {
-    [...this.initialList]
-      .forEach((item, index) => {
-      const listItem = document.createElement('li');
-      listItem.setAttribute('data-index', index.toString());
-      if (!this.isMultipleSelection)
-        listItem.onclick = this.selectLine.bind(this);
-      listItem.innerHTML = `
-          <div class="draggable" ${this.draggable ? "draggable=true" : ""}>
-
-            ${this.draggable ? '<span class="draggable-icon"></span>' : ""}
-            
-            ${this.isMultipleSelection ? `<ez-check class='checkbox' value=${item.checked}></ez-check>` : ''}
-            <p title="${item.value}" class="person-name text--ellipsis">${item.value}</p>
-            
-          </div>
-        `;
-      this._listItems.push(listItem);
-      this._draggableList.appendChild(listItem);
-    });
-    if (this.draggable) {
-      this.handleEventListeners(this._listItems, this._draggableList, this._hostElement, false);
-    }
-  }
-  selectLine(e) {
-    var _a, _b, _c;
-    this._listItems.forEach(item => { item.classList.remove('draggable-selected'); });
-    if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === 'SPAN') {
-      const span = e.target;
-      this._selectedItem = { value: span.parentElement.getElementsByTagName('p')[0].textContent };
-      span.parentElement.parentElement.classList.add('draggable-selected');
-    }
-    else if (((_b = e.target) === null || _b === void 0 ? void 0 : _b.tagName) === 'P') {
-      const paragraph = e.target;
-      this._selectedItem = { value: paragraph.textContent };
-      paragraph.parentElement.parentElement.classList.add('draggable-selected');
-    }
-    else if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.tagName) === 'DIV') {
-      const draggable = e.target;
-      this._selectedItem = { value: draggable.getElementsByTagName('p')[0].textContent };
-      draggable.parentElement.classList.add('draggable-selected');
-    }
-  }
-  handleEventListeners(listItems, dragableList, hostElement, removeEvents) {
-    let _dragStartIndex;
-    let _isItemOut = false;
-    function dragStart(item) {
-      _dragStartIndex = item.parentElement.getAttribute('data-index');
-    }
-    function dragEnter(item) {
-      item.classList.add('over');
-    }
-    function dragLeave(item) {
-      item.classList.remove('over');
-    }
-    function dragOver(e) {
-      e.preventDefault();
-    }
-    function dragDrop(item) {
-      if (_isItemOut) {
-        let index = +item.getAttribute('data-index');
-        const itemRemoved = listItems[index].querySelector('.draggable');
-        listItems[index].removeChild(itemRemoved);
-      }
-      const dragEndIndex = +item.getAttribute('data-index');
-      swapItems(+_dragStartIndex, dragEndIndex);
-      item.classList.remove('over');
-    }
-    function swapItems(fromIndex, toIndex) {
-      const itemOne = listItems[fromIndex].querySelector('.draggable');
-      const itemTwo = listItems[toIndex].querySelector('.draggable');
-      listItems[fromIndex].appendChild(itemTwo);
-      listItems[toIndex].appendChild(itemOne);
-      return listItems;
-    }
-    if (!removeEvents) {
-      hostElement.addEventListener('dragenter', function () { _isItemOut = false; });
-      hostElement.addEventListener('dragleave', function () { _isItemOut = true; });
-      const draggables = dragableList.querySelectorAll("div.draggable");
-      draggables.forEach(draggable => {
-        draggable.addEventListener('dragstart', function () { dragStart(draggable); });
+    if (this.useGroups) {
+      let list = [...this.dataSource];
+      list.forEach(itemGroup => {
+        this.sortGroup(itemGroup);
       });
-      listItems.forEach(item => {
-        item.addEventListener('dragover', function (event) { dragOver(event); });
-        item.addEventListener('drop', function () { dragDrop(item); });
-        item.addEventListener('dragenter', function () { dragEnter(item); });
-        item.addEventListener('dragleave', function () { dragLeave(item); });
+      this._listGroupItems = list;
+    }
+    else {
+      this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : [...this.dataSource];
+    }
+  }
+  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();
+      }
+    }
+  }
+  /**
+  * Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
+  */
+  async setSelection(selectedItem, scrollToOption) {
+    if (selectedItem && this.ezSelectable) {
+      if (this.useGroups) {
+        let newList = [...this._listGroupItems];
+        newList.forEach(groupItem => {
+          groupItem.items.forEach(item => {
+            if (item.label == selectedItem.label) {
+              item.selected = !item.selected;
+            }
+            else {
+              item.selected = false;
+            }
+          });
+        });
+        this._listGroupItems = newList;
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.forEach(item => {
+          if (item.label === selectedItem.label) {
+            item.selected = !item.selected;
+          }
+          else {
+            item.selected = false;
+          }
+        });
+        this._listItems = newList;
+      }
+      if (scrollToOption) {
+        let liElem = this.useGroups ?
+          this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
+          : this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
+        if (liElem) {
+          liElem.scrollIntoView();
+        }
+      }
     }
     else {
-      hostElement.removeEventListener('dragenter', function () { _isItemOut = false; });
-      hostElement.removeEventListener('dragleave', function () { _isItemOut = true; });
-      const draggables = dragableList.querySelectorAll("div.draggable");
-      draggables.forEach(draggable => {
-        draggable.removeEventListener('dragstart', function () { dragStart(draggable); });
+      this.removeSelection();
+    }
+  }
+  removeSelection() {
+    if (this.useGroups) {
+      let newList = [...this._listGroupItems];
+      newList.forEach(groupItem => {
+        groupItem.items.forEach(item => {
+          item.selected = false;
+        });
       });
-      listItems.forEach(item => {
-        item.removeEventListener('dragover', function (event) { dragOver(event); });
-        item.removeEventListener('drop', function () { dragDrop(item); });
-        item.removeEventListener('dragenter', function () { dragEnter(item); });
-        item.removeEventListener('dragleave', function () { dragLeave(item); });
+      this._listGroupItems = newList;
+    }
+    else {
+      let newList = [...this._listItems];
+      newList.forEach(item => {
+        item.selected = false;
       });
+      this._listItems = newList;
     }
   }
   /**
-  *  Retorna      uma promessa com o estado da atual lista composta por objetos do tipo {value: string, checked: boolean}.
+   * Retorna   o item selecionado.
   */
-  async getState() {
-    let emitionList = [];
-    this._listItems.forEach(item => {
-      let emitionItem = {
-        value: this.getValueItem(item),
-        checked: this.getChecked(item)
-      };
-      emitionList.push(emitionItem);
-    });
-    return emitionList;
-  }
-  getChecked(item) {
-    if (this.isMultipleSelection) {
-      return item.children[0].children[1].value;
+  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 {
-      if (!this._selectedItem)
-        return false;
-      return (item.children[0].children[1].textContent === this._selectedItem.value);
+      selectedItem = this._listItems.find((item) => item.selected == true);
     }
+    return selectedItem;
   }
-  getValueItem(item) {
-    if (this.isMultipleSelection) {
-      return item.children[0].children[2].textContent;
+  /**
+   * Retorna   a lista de items conforme o modo de uso.
+   */
+  async getList() {
+    if (this.useGroups) {
+      return this._listGroupItems;
     }
-    return item.children[0].children[1].textContent;
+    return this._listItems;
+  }
+  componentWillLoad() {
+    this._listItemsHistory = [];
   }
-  componentDidLoad() {
+  componentWillRender() {
     this.createList();
   }
-  disconnectedCallback() {
-    if (this.draggable) {
-      this.handleEventListeners(this._listItems, this._draggableList, this._hostElement, true);
+  onDrop(ev, dragEndItem) {
+    this.removeOverClass(ev);
+    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 {
+          newList.find(group => group.group == dragEndItem.groupName).items.splice(dragEndItem.index, 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();
+  }
+  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.label === this._dragStartItem.item.label) {
+            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._draggingElement) {
+      try {
+        this._element.shadowRoot.removeChild(this._draggingElement);
+      }
+      catch (err) { }
+      this._draggingElement = undefined;
+    }
+  }
+  addOverClass(ev) {
+    if (ev.target.__proto__ == HTMLDivElement.prototype && ev.target.classList.contains("draggable")) {
+      ev.target.classList.add('over');
+    }
+  }
+  addOverGroupClass(ev, group) {
+    if (ev.target) {
+      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
+      if (group.items.length > 0) {
+        let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+        groupOverlay.setAttribute("style", "display:grid");
+      }
+      else {
+        groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.add('overGroup');
+      }
+    }
+  }
+  removeOverClass(ev) {
+    ev.target.classList.remove('over');
+  }
+  removeOverGroupClass(ev, group) {
+    if (ev.target) {
+      let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
+      if (group.items.length > 0) {
+        let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
+        groupOverlay.setAttribute("style", "display:none");
+      }
+      else {
+        groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.remove('overGroup');
+      }
+    }
+  }
+  onDragStart(event, item, group, index) {
+    if (this.useGroups) {
+      this._dragStartItem = { groupName: group.group, item: item, index: index };
+    }
+    else {
+      this._dragStartItem = { item: item.item, index: item.index };
+    }
+    let sourceElement = event.srcElement.cloneNode(true);
+    this._draggingElement = event.srcElement.cloneNode(true);
+    this._draggingElement.style.position = "absolute";
+    this._draggingElement.style.top = (event.clientY + 5) + 'px';
+    this._draggingElement.style.left = (event.clientX + 5) + 'px';
+    this._draggingElement.style.height = event.srcElement.clientHeight + 'px';
+    this._draggingElement.style.width = event.srcElement.clientWidth + 'px';
+    this._draggingElement.style.background = "#FFFFFF";
+    this._draggingElement.style.border = "1px solid #008561";
+    this._draggingElement.style["box-sizing"] = "border-box";
+    this._draggingElement.style["box-shadow"] = "0px 0px 16px rgba(0, 38, 111, 0.122)";
+    this._draggingElement.style["border-radius"] = "6px";
+    this._element.shadowRoot.appendChild(this._draggingElement);
+    event.dataTransfer.setDragImage(sourceElement, -10000, -10000);
+  }
+  onDrag(event) {
+    if (this._draggingElement) {
+      this._draggingElement.style.top = (event.clientY + 5) + 'px';
+      this._draggingElement.style.left = (event.clientX + 5) + 'px';
+    }
+  }
+  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.label == selectedItem.label);
+        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.label === selectedItem.label);
+      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.label == selectedItem.label);
+        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.label === selectedItem.label);
+      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();
+  }
+  getItemId(itemLabel) {
+    if (itemLabel) {
+      return itemLabel.replace(/[^a-z0-9_]/gi, "_");
+    }
+    return undefined;
+  }
+  getDivGroupId(groupName) {
+    if (groupName) {
+      return "group-" + groupName.replace(/[^a-z0-9_]/gi, "_");
+    }
+    return undefined;
+  }
+  onDragOverGroup(event, group) {
+    if (this._dragStartItem && this._dragStartItem.groupName !== group.group) {
+      event.preventDefault();
+      this.addOverGroupClass(event, group);
+    }
+  }
+  onDragOverItem(event, group) {
+    if (this._dragStartItem) {
+      event.preventDefault();
+      if (group) {
+        group.sort ?
+          () => {
+            this.addOverGroupClass(event, group);
+          }
+          : this.addOverClass(event);
+      }
+      else {
+        this.addOverClass(event);
+      }
+      event.stopPropagation();
     }
   }
   render() {
-    return (h(Host, { ref: (el) => this._hostElement = el },
-      h("ul", { ref: (el) => this._draggableList = el, class: "draggable-list", id: "draggable-list" })));
+    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, onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDrop: () => this.onDropGroup(group) },
+          h("label", { class: "group-name", onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDrop: () => this.onDropGroup(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) => {
+                return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) },
+                  h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: (event) => { group.sort ? undefined : this.removeOverClass(event); }, onDragEnd: () => this.onDragEnd(), onDragStart: (event) => this.onDragStart(event, item, group, index), onDragOver: (event) => this.onDragOverItem(event, group), onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable },
+                    h("div", { class: "item-content" },
+                      this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined,
+                      h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)),
+                    this.itemSlotBuilder ?
+                      h("div", { class: "slot-item" }, this.itemSlotBuilder(item, group))
+                      : undefined));
+              }))),
+            h("div", { class: "group-overlay" },
+              h("div", { id: "overlay-text" },
+                h("b", null, "Mover"),
+                " para ",
+                group.group))));
+      }))
+      :
+        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) => {
+            return h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) },
+              h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: (event) => this.onDragStart(event, { item: item, index: index }), onClick: () => { this.setSelection(item); }, onDragLeave: event => this.removeOverClass(event), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable },
+                h("div", { class: "item-content" },
+                  this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined,
+                  h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)),
+                this.itemSlotBuilder ?
+                  h("div", null, this.itemSlotBuilder(item))
+                  : undefined));
+          })))));
   }
   static get is() { return "ez-list"; }
   static get encapsulation() { return "shadow"; }
@@ -171,17 +447,13 @@ export class EzList {
     "$": ["ez-list.css"]
   }; }
   static get properties() { return {
-    "initialList": {
+    "dataSource": {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "ListItem[]",
-        "resolved": "ListItem[]",
-        "references": {
-          "ListItem": {
-            "location": "local"
-          }
-        }
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
       },
       "required": false,
       "optional": false,
@@ -191,9 +463,27 @@ export class EzList {
       },
       "defaultValue": "[]"
     },
-    "draggable": {
+    "useGroups": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o componente renderizar\u00E1 os itens separados em grupos.."
+      },
+      "attribute": "use-groups",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "ezDraggable": {
+      "type": "boolean",
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -205,11 +495,11 @@ export class EzList {
         "tags": [],
         "text": "Define se o componente ter\u00E1 o comportamento de arrasto de linhas."
       },
-      "attribute": "draggable",
+      "attribute": "ez-draggable",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
-    "isMultipleSelection": {
+    "ezSelectable": {
       "type": "boolean",
       "mutable": true,
       "complexType": {
@@ -221,17 +511,104 @@ export class EzList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define se \u00E9 poss\u00EDvel selecionar mais de um registro."
+        "text": "Define se os items da lista ser\u00E3o selecion\u00E1veis."
       },
-      "attribute": "is-multiple-selection",
-      "reflect": true,
-      "defaultValue": "true"
+      "attribute": "ez-selectable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "itemSlotBuilder": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "(item: any, group?: any) => HTMLElement",
+        "resolved": "(item: any, group?: any) => HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fun\u00E7\u00E3o respons\u00E1vel por renderizar um conte\u00FAdo dentro do item da lista."
+      }
     }
   }; }
+  static get states() { return {
+    "_listItems": {},
+    "_listGroupItems": {}
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao modificar ordena\u00E7\u00E3o nas linhas da grade."
+      },
+      "complexType": {
+        "original": "ListItem[] | ListGroup[]",
+        "resolved": "ListGroup[] | ListItem[]",
+        "references": {
+          "ListItem": {
+            "location": "local"
+          },
+          "ListGroup": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
   static get methods() { return {
-    "getState": {
+    "setSelection": {
+      "complexType": {
+        "signature": "(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "ListItem": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item espec\u00EDfico (opcional).",
+        "tags": []
+      }
+    },
+    "getSelection": {
+      "complexType": {
+        "signature": "() => Promise<any>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Retorna   o item selecionado.",
+        "tags": []
+      }
+    },
+    "getList": {
       "complexType": {
-        "signature": "() => Promise<ListItem[]>",
+        "signature": "() => Promise<ListItem[] | ListGroup[]>",
         "parameters": [],
         "references": {
           "Promise": {
@@ -239,12 +616,15 @@ export class EzList {
           },
           "ListItem": {
             "location": "local"
+          },
+          "ListGroup": {
+            "location": "local"
           }
         },
-        "return": "Promise<ListItem[]>"
+        "return": "Promise<ListItem[] | ListGroup[]>"
       },
       "docs": {
-        "text": "Retorna      uma promessa com o estado da atual lista composta por objetos do tipo {value: string, checked: boolean}.",
+        "text": "Retorna   a lista de items conforme o modo de uso.",
         "tags": []
       }
     }