@sankhyalabs/sankhyablocks 1.1.23 → 1.1.27

package/dist/components/ez-list2.js

@@ -0,0 +1,523 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon__padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item__margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Sora\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item__border-radius:var(--border--radius-small, 6px);--ez-list__selected-item__background:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Sora\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group__overlay--font-family:var(--font-pattern, \"Sora\");--ez-list__group__overlay--font-size:var(--text--medium, 14px);--ez-list__group-container__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__group-container__scrollbar--width:var(--space--medium, 12px);--ez-list__group-container__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__draggable__list--padding-bottom:var(--space--small, 6px);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__draggable__scrollbar--width:var(--space--medium, 12px);--ez-list__draggable__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__draggable__icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{display:flex;align-items:center;border-top:1px dashed #fff;justify-content:space-between;background-color:#fff;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);flex:1}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.item-content{display:flex;justify-content:center;align-items:center}.draggable-list{color:var(--text-color);padding:0;margin:0;width:100%;max-height:100%}.draggable-list li{background-color:#fff;display:flex;margin:var(--ez-list__item__margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color);height:32px}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar-track{background-color:#f0f2f5}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;background-color:var(--ez-list__icon--color);width:18px;height:18px;-webkit-mask-image:var(--ez-list__draggable__icon--image);mask-image:var(--ez-list__draggable__icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%}.group-name{font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom);-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar-track{background-color:#f0f2f5}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__group-container__scrollbar--background-color);border-radius:var(--ez-list__group-container__scrollbar--border-radius)}.group-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__group-container__scrollbar--width);max-width:var(--ez-list__group-container__scrollbar--width);min-width:var(--ez-list__group-container__scrollbar--width)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar-track{background-color:#f0f2f5}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.items-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.group-overlay{font-family:var(--ez-list__group__overlay--font-family);font-size:var(--ez-list__group__overlay--font-size);background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item__background);border-radius:var(--ez-list__selected-item__border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
+
+const EzList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this._listItems = [];
+    this._listGroupItems = [];
+    this._listItemsHistory = [];
+    /**
+    * Define a lista inicial do componente.
+    */
+    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.ezDraggable = false;
+    /**
+    * Define se os items da lista serão selecionáveis.
+    */
+    this.ezSelectable = false;
+  }
+  createList() {
+    if (this.useGroups) {
+      let list = [...this.dataSource];
+      list.forEach(itemGroup => {
+        this.sortGroup(itemGroup);
+      });
+      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 = true;
+            }
+            else {
+              item.selected = false;
+            }
+          });
+        });
+        this._listGroupItems = newList;
+      }
+      else {
+        let newList = [...this._listItems];
+        newList.forEach(item => {
+          if (item.label === selectedItem.label) {
+            item.selected = true;
+          }
+          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 {
+      this.removeSelection();
+    }
+  }
+  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;
+    }
+  }
+  /**
+   * Retorna   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;
+  }
+  /**
+   * Retorna   a lista de items conforme o modo de uso.
+   */
+  async getList() {
+    if (this.useGroups) {
+      return this._listGroupItems;
+    }
+    return this._listItems;
+  }
+  componentWillLoad() {
+    this._listItemsHistory = [];
+  }
+  componentWillRender() {
+    this.createList();
+  }
+  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.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.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.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;
+  }
+  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");
+    });
+  }
+  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" }, 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: () => { 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, 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: "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) => {
+          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: () => 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.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));
+        }), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
+  }
+  static get style() { return ezListCss; }
+}, [1, "ez-list", {
+    "dataSource": [1040],
+    "useGroups": [1540, "use-groups"],
+    "ezDraggable": [1028, "ez-draggable"],
+    "ezSelectable": [1028, "ez-selectable"],
+    "itemSlotBuilder": [1040],
+    "_listItems": [32],
+    "_listGroupItems": [32],
+    "setSelection": [64],
+    "getSelection": [64],
+    "getList": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ez-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ez-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EzList);
+      }
+      break;
+  } });
+}
+
+export { EzList as E, defineCustomElement as d };

package/dist/components/ez-modal.js

@@ -0,0 +1,6 @@
+import { E as EzModal$1, d as defineCustomElement$1 } from './ez-modal2.js';
+
+const EzModal = EzModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EzModal, defineCustomElement };

package/dist/components/ez-modal2.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;padding:var(--ez-modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;max-height:calc(100% - 48px);height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;border-radius:12px 0px 0px 12px;box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
+
+const EzModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezCloseModal = createEvent(this, "ezCloseModal", 7);
+    /**
+    * Controle de exibição do Modal
+    */
+    this.opened = true;
+    /**
+    * Define se o modal será fechado ao clicar ESC
+    */
+    this.closeEsc = false;
+    /**
+    * Define se o modal será fechado ao clicar fora do conteúdo.
+    */
+    this.closeOutsideClick = false;
+    this.handleKeyboardEvent = (ev) => {
+      if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
+        this.closeModal();
+      }
+    };
+  }
+  handleopenedChange() {
+    if (this.opened) {
+      document.addEventListener("keydown", this.handleKeyboardEvent);
+    }
+    else {
+      document.removeEventListener("keydown", this.handleKeyboardEvent);
+    }
+  }
+  closeModal() {
+    this.opened = false;
+    this.ezCloseModal.emit(this.opened);
+  }
+  componentDidLoad() {
+    this.handleopenedChange();
+  }
+  onMouseDownHandler(event) {
+    if (this.closeOutsideClick && event.target === this._overlay) {
+      this.closeModal();
+    }
+  }
+  render() {
+    const positionSufix = this.align === "left" ? "left" : "right";
+    return (h(Host, null, this.opened
+      ?
+        h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, h("slot", null))))
+      :
+        undefined));
+  }
+  static get watchers() { return {
+    "opened": ["handleopenedChange"]
+  }; }
+  static get style() { return ezModalCss; }
+}, [1, "ez-modal", {
+    "modalSize": [1, "modal-size"],
+    "align": [1],
+    "opened": [1028],
+    "closeEsc": [4, "close-esc"],
+    "closeOutsideClick": [4, "close-outside-click"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ez-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ez-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EzModal);
+      }
+      break;
+  } });
+}
+
+export { EzModal as E, defineCustomElement as d };