import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
import { Fragment, Host, h } from '@stencil/core';
import { processListOnDrop } from './ezListHelper';
import initI18n from '../../utils/i18n';
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;
    this.enableMultipleSelection = false;
    this.enabled = true;
  }
  /**
   * 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.querySelector('.group-container').scrollTop = 0;
    }
    else {
      this._element.querySelector('.items-container').scrollTop = 0;
    }
  }
  /**
   * Aplica seleção nas linhas da lista.
   */
  async setSelection(selectedItem, scrollToOption, shitkey, ctrlKey) {
    if (!selectedItem || !this.ezSelectable) {
      await this.removeSelection();
      return;
    }
    if (this.useGroups) {
      this.setSelectionWithGroups(selectedItem, scrollToOption);
      return;
    }
    if (this.enableMultipleSelection && ctrlKey) {
      this.setSelectionMultiple(selectedItem);
      return;
    }
    if (this.enableMultipleSelection && shitkey) {
      this.setSelectionRange(selectedItem);
      return;
    }
    this.setSelectionSingleItem(selectedItem, scrollToOption);
    this.emitSelectedItems(selectedItem);
  }
  emitSelectedItems(singleItem, listItem) {
    this.ezSelectItem.emit(singleItem);
    this.ezSelectMultipleItems.emit(listItem !== null && listItem !== void 0 ? listItem : [singleItem]);
  }
  setSelectionRange(selectedItem) {
    const lastSelectedIndex = this._listItems.findIndex(item => item.selected);
    const seletedItemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
    if (lastSelectedIndex < 0 || lastSelectedIndex === seletedItemIndex) {
      this.setSelectionSingleItem(selectedItem);
      return;
    }
    const minorIndex = Math.min(lastSelectedIndex, seletedItemIndex);
    const majorIndex = Math.max(lastSelectedIndex, seletedItemIndex);
    let newList = [...this._listItems];
    newList.forEach((item, index) => {
      item.selected = (index >= minorIndex && index <= majorIndex);
    });
    this._listItems = [...newList];
    const selectedList = this._listItems.filter(item => item.selected);
    this.emitSelectedItems(selectedItem, selectedList);
  }
  setSelectionMultiple(selectedItem) {
    let newList = [...this._listItems];
    newList.forEach(item => {
      item.selected = (item.id === selectedItem.id) ? !item.selected : item.selected;
    });
    this._listItems = [...newList];
    const selectedList = this._listItems.filter(item => item.selected);
    this.emitSelectedItems(selectedItem, selectedList);
  }
  setSelectionSingleItem(selectedItem, scrollToOption) {
    this.emitSelectedItems(selectedItem);
    let newList = [...this._listItems];
    newList.forEach(item => {
      item.selected = item.id === selectedItem.id;
    });
    this._listItems = newList;
    if (!scrollToOption)
      return;
    let liElem = this._itemContainer.querySelector('li#item_' + selectedItem.id);
    if (liElem)
      liElem.scrollIntoView();
  }
  setSelectionWithGroups(selectedItem, scrollToOption) {
    this.emitSelectedItems(selectedItem);
    let newList = [...this._listGroupItems];
    newList.forEach(groupItem => {
      groupItem.items.forEach(item => {
        item.selected = item.id === selectedItem.id;
      });
    });
    this._listGroupItems = newList;
    if (!scrollToOption)
      return;
    let liElem = this._groupContainer.querySelector('li#item_' + selectedItem.id);
    if (liElem)
      liElem.scrollIntoView();
  }
  /**
   * Obtém o item selecionado.
   */
  async getSelection() {
    if (!this.useGroups)
      return this._listItems.find(item => item.selected == true);
    let selectedItem;
    this._listGroupItems.every(group => {
      let item = group.items.find(item => item.selected == true);
      if (item) {
        selectedItem = item;
        return false;
      }
      return 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;
      return;
    }
    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 draggableList = this._element.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 = this._element.querySelectorAll('.selectable-container');
    selectable === null || selectable === void 0 ? void 0 : selectable.forEach((item) => {
      ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
    });
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
    this._listItemsHistory = [];
  }
  componentWillRender() {
    this.createList();
    if (this._element) {
      this.buildIdDraggableListAndSelectable();
    }
  }
  componentDidLoad() {
    ElementIDUtils.addIDInfo(this._element);
  }
  onDrop(ev, dragEndItem) {
    ev.stopPropagation();
    this.removeOverClass();
    if (!this._dragStartItem)
      return;
    if (this.useGroups) {
      this.onDropWithGroups(dragEndItem);
      return;
    }
    this._listItems = [...processListOnDrop(this.buildDragHandlerConfig(dragEndItem.index, false))];
    this._listItemsHistory = [...this._listItems];
    this.ezChange.emit(this._listItems);
  }
  buildDragHandlerConfig(targetIndex, moveToFinal) {
    return {
      listItems: this._listItems,
      dragItem: this._dragStartItem,
      enableMultipleSelection: this.enableMultipleSelection,
      targetIndex,
      moveToFinal,
      clearSelection: () => this.setSelection(undefined)
    };
  }
  ;
  onDropWithGroups(dragEndItem) {
    this.setSelection(undefined);
    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);
  }
  onDropLastIndex(ev, groupDropped) {
    ev.stopPropagation();
    this.removeOverClass();
    if (!this._dragStartItem)
      return;
    if (this.useGroups) {
      this.onDropLastItemWithGroups(groupDropped);
      return;
    }
    const lastIndex = this._listItems.length - 1;
    this._listItems = [...processListOnDrop(this.buildDragHandlerConfig(lastIndex, true))];
    this._listItemsHistory = [...this._listItems];
    this.ezChange.emit(this._listItems);
  }
  onDropLastItemWithGroups(groupDropped) {
    this.setSelection(undefined);
    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);
  }
  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();
    }
  }
  addOverClass(element) {
    if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains('draggable')) {
      element.classList.add('over');
      return;
    }
    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.onDragStartWithGroups(group, item, index);
      return;
    }
    this._dragStartItem = { item: item.item, index: item.index };
  }
  onDragStartWithGroups(group, item, index) {
    this._dragStartItem = { groupName: group.group, item: item, index: index };
    this._changeDeboucingTimeout = window.setTimeout(() => {
      this.showOverlays(group);
    }, 10);
  }
  selectFirstItem() {
    if (this.useGroups) {
      this.setSelection(this._listGroupItems[0].items[0]);
    }
    else {
      this.setSelection(this._listItems[0]);
    }
  }
  nextOption(selectedItem) {
    if (this.useGroups) {
      this.setSelection(this.nextOptionWithGroups(selectedItem), true);
      return;
    }
    let nextItem = undefined;
    let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
    if (itemIndex >= 0 && itemIndex < this._listItems.length) {
      nextItem = this._listItems[itemIndex + 1];
    }
    this.setSelection(nextItem, true);
  }
  nextOptionWithGroups(selectedItem) {
    let nextItem = undefined;
    this._listGroupItems.every((group, groupIndex, listGroupItems) => {
      let item = undefined;
      let itemIndex = group.items.findIndex(item => item.id == selectedItem.id);
      if (itemIndex != undefined && itemIndex != -1) {
        if (itemIndex === group.items.length - 1) {
          if (groupIndex + 1 <= listGroupItems.length - 1) {
            item = { label: listGroupItems[groupIndex + 1].items[0].label };
          }
        }
        else {
          item = { label: group.items[itemIndex + 1].label };
        }
      }
      if (item != undefined) {
        nextItem = item;
        return false;
      }
      return true;
    });
    return nextItem;
  }
  previousOption(selectedItem) {
    if (this.useGroups) {
      this.setSelection(this.previousOptionWithGroups(selectedItem), true);
      return;
    }
    let previousItem = undefined;
    let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
    if (itemIndex > 0 && itemIndex < this._listItems.length) {
      previousItem = this._listItems[itemIndex - 1];
    }
    this.setSelection(previousItem, true);
  }
  previousOptionWithGroups(selectedItem) {
    let previousItem = undefined;
    this._listGroupItems.every((group, groupIndex, listGroupItems) => {
      let item = undefined;
      let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
      if (itemIndex != undefined && itemIndex != -1) {
        if (itemIndex === 0) {
          if (groupIndex - 1 >= 0) {
            item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
          }
        }
        else {
          item = { label: group.items[itemIndex - 1].label };
        }
      }
      if (item != undefined) {
        previousItem = item;
        return false;
      }
      return true;
    });
    return previousItem;
  }
  keyDownHandler(event) {
    if (!event.ctrlKey) {
      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)
      return;
    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 });
  }
  doubleClickItem(item) {
    this.ezDoubleClick.emit(item);
  }
  buildItem(item, evt) {
    return { id: item.id, label: item.label, check: evt.detail };
  }
  renderListWithGroups() {
    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, 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 ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { enabled: this.enabled, label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, this.i18n("ez-list.moveToGroup", { groupName: group.group }))) : undefined)));
    }));
  }
  renderList() {
    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, 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 ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: (event) => this.setSelection(item, false, event.shiftKey, (event.altKey || event.metaKey)), onDragStart: () => this.onDragStart({ item: item, index: index }), onDragOver: event => this.onDragOverItem(event), onDragLeave: () => this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, h("ez-check", { enabled: this.enabled, label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) })));
  }
  render() {
    return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? this.renderListWithGroups() : this.renderList()));
  }
  static get is() { return "ez-list"; }
  static get encapsulation() { return "scoped"; }
  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"
      },
      "enableMultipleSelection": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Habilita sele\u00E7\u00E3o de m\u00FAltiplos items."
        },
        "attribute": "enable-multiple-selection",
        "reflect": false,
        "defaultValue": "false"
      },
      "enabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Habilita a sele\u00E7\u00E3o de checkbox."
        },
        "attribute": "enabled",
        "reflect": false,
        "defaultValue": "true"
      }
    };
  }
  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": "ezSelectMultipleItems",
        "name": "ezSelectMultipleItems",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido sempre que um ou v\u00E1rios 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"
            }
          }
        }
      }, {
        "method": "ezDoubleClick",
        "name": "ezDoubleClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando ocorre um duplo clique em um item da lista."
        },
        "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, shitkey?: boolean, ctrlKey?: boolean) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }, {
              "tags": [],
              "text": ""
            }, {
              "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": []
        }
      }
    };
  }
}
