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

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

@@ -0,0 +1,911 @@
+import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { Fragment, Host, h } from '@stencil/core';
+export class EzList {
+  constructor() {
+    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) }))))));
+  }
+  static get is() { return "ez-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataSource": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<ListGroup | ListItem>",
+          "resolved": "(ListItem | ListGroup)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListGroup": {
+              "location": "local"
+            },
+            "ListItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a lista inicial do componente."
+        },
+        "defaultValue": "[]"
+      },
+      "listMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "keyof TListMode",
+          "resolved": "\"check\" | \"regular\"",
+          "references": {
+            "TListMode": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de apresenta\u00E7\u00E3o da lista."
+        },
+        "attribute": "list-mode",
+        "reflect": false,
+        "defaultValue": "'regular'"
+      },
+      "useGroups": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true os grupos ser\u00E3o exibidos."
+        },
+        "attribute": "use-groups",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "ezDraggable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true habilita `drag and drop` para os itens."
+        },
+        "attribute": "ez-draggable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ezSelectable": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true os itens ser\u00E3o selecion\u00E1veis."
+        },
+        "attribute": "ez-selectable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "itemSlotBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SlotBuilder",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "SlotBuilder": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita alterar como o item da lista vai ser apresentado.\nObserva\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
+      },
+      "itemLeftSlotBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SlotBuilder",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "SlotBuilder": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fun\u00E7\u00E3o builder que possibilita gerar conte\u00FAdo din\u00E2mico \u00E0 esquerda do item da lista.\n* Observa\u00E7\u00E3o: No react ele se transforma em VNode e n\u00E3o como HTMLElement."
+        }
+      },
+      "hoverFeedback": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, ativa o feedback visual ao efetuar houver nos itens da lista."
+        },
+        "attribute": "hover-feedback",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_listItems": {},
+      "_listGroupItems": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de estado da lista."
+        },
+        "complexType": {
+          "original": "Array<ListItem | ListGroup>",
+          "resolved": "(ListItem | ListGroup)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            },
+            "ListGroup": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "ezSelectItem",
+        "name": "ezSelectItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido sempre que um item da lista for selecionado."
+        },
+        "complexType": {
+          "original": "ListItem",
+          "resolved": "ListItem",
+          "references": {
+            "ListItem": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "ezCheckChange",
+        "name": "ezCheckChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de um item do checkbox."
+        },
+        "complexType": {
+          "original": "ListItem",
+          "resolved": "ListItem",
+          "references": {
+            "ListItem": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clearHistory": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa o hist\u00F3rico da lista.",
+          "tags": []
+        }
+      },
+      "scrollToTop": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Traz o conte\u00FAdo da lista para a \u00E1rea vis\u00EDvel.",
+          "tags": []
+        }
+      },
+      "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": "Aplica sele\u00E7\u00E3o nas linhas da lista.",
+          "tags": []
+        }
+      },
+      "getSelection": {
+        "complexType": {
+          "signature": "() => Promise<ListItem>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<ListItem>"
+        },
+        "docs": {
+          "text": "Obt\u00E9m o item selecionado.",
+          "tags": []
+        }
+      },
+      "getList": {
+        "complexType": {
+          "signature": "() => Promise<Array<ListItem | ListGroup>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ListItem": {
+              "location": "local"
+            },
+            "ListGroup": {
+              "location": "local"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<(ListItem | ListGroup)[]>"
+        },
+        "docs": {
+          "text": "Obt\u00E9m a lista de items ou grupos.",
+          "tags": []
+        }
+      },
+      "removeSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa a sele\u00E7\u00E3o atual",
+          "tags": []
+        }
+      }
+    };
+  }
+}