@sankhyalabs/ezui 4.2.1 → 4.4.0

package/dist/collection/components/ez-icon/ez-icon.css

@@ -56,145 +56,147 @@ svg {
 
 .ez-icon-2chevron-down:before { content: "\ea01"; }
 .ez-icon-2chevron-up:before { content: "\ea02"; }
-.ez-icon-account-outline:before { content: "\ea03"; }
-.ez-icon-account:before { content: "\ea04"; }
-.ez-icon-actions-sprite-v1:before { content: "\ea05"; }
-.ez-icon-alert-circle-inverted:before { content: "\ea06"; }
-.ez-icon-alert-circle:before { content: "\ea07"; }
-.ez-icon-alert-mail:before { content: "\ea08"; }
-.ez-icon-alert-popup:before { content: "\ea09"; }
-.ez-icon-anexo:before { content: "\ea0a"; }
-.ez-icon-antecipação:before { content: "\ea0b"; }
-.ez-icon-apps:before { content: "\ea0c"; }
-.ez-icon-arrow_back:before { content: "\ea0d"; }
-.ez-icon-arrow_downward:before { content: "\ea0e"; }
-.ez-icon-baixa:before { content: "\ea0f"; }
-.ez-icon-balance:before { content: "\ea10"; }
-.ez-icon-bell-inverted:before { content: "\ea11"; }
-.ez-icon-bell:before { content: "\ea12"; }
-.ez-icon-boleto:before { content: "\ea13"; }
-.ez-icon-business-center:before { content: "\ea14"; }
-.ez-icon-calendar-clock:before { content: "\ea15"; }
-.ez-icon-calendar:before { content: "\ea16"; }
-.ez-icon-cash-remove:before { content: "\ea17"; }
-.ez-icon-check-circle-inverted:before { content: "\ea18"; }
-.ez-icon-check-circle:before { content: "\ea19"; }
-.ez-icon-check:before { content: "\ea1a"; }
-.ez-icon-chevron-down:before { content: "\ea1b"; }
-.ez-icon-chevron-left:before { content: "\ea1c"; }
-.ez-icon-chevron-right:before { content: "\ea1d"; }
-.ez-icon-chevron-up:before { content: "\ea1e"; }
-.ez-icon-circle--medium:before { content: "\ea1f"; }
-.ez-icon-circle:before { content: "\ea20"; }
-.ez-icon-cleaning:before { content: "\ea21"; }
-.ez-icon-clipboard:before { content: "\ea22"; }
-.ez-icon-close:before { content: "\ea23"; }
-.ez-icon-cobrar:before { content: "\ea24"; }
-.ez-icon-code:before { content: "\ea25"; }
-.ez-icon-configuration:before { content: "\ea26"; }
-.ez-icon-copy:before { content: "\ea27"; }
-.ez-icon-credit_card:before { content: "\ea28"; }
-.ez-icon-crop:before { content: "\ea29"; }
-.ez-icon-custom:before { content: "\ea2a"; }
-.ez-icon-delete:before { content: "\ea2b"; }
-.ez-icon-description:before { content: "\ea2c"; }
-.ez-icon-dividir:before { content: "\ea2d"; }
-.ez-icon-docx:before { content: "\ea2e"; }
-.ez-icon-dot-notification:before { content: "\ea2f"; }
-.ez-icon-dots-horizontal:before { content: "\ea30"; }
-.ez-icon-dots-vertical:before { content: "\ea31"; }
-.ez-icon-drag-indicator:before { content: "\ea32"; }
-.ez-icon-dual-chevron-down:before { content: "\ea33"; }
-.ez-icon-dual-chevron-up:before { content: "\ea34"; }
-.ez-icon-edit-file:before { content: "\ea35"; }
-.ez-icon-edit-table:before { content: "\ea36"; }
-.ez-icon-edit-time:before { content: "\ea37"; }
-.ez-icon-edit:before { content: "\ea38"; }
-.ez-icon-email:before { content: "\ea39"; }
-.ez-icon-estorno:before { content: "\ea3a"; }
-.ez-icon-exe:before { content: "\ea3b"; }
-.ez-icon-expand:before { content: "\ea3c"; }
-.ez-icon-expandir_card:before { content: "\ea3d"; }
-.ez-icon-extrato:before { content: "\ea3e"; }
-.ez-icon-eye-off:before { content: "\ea3f"; }
-.ez-icon-eye:before { content: "\ea40"; }
-.ez-icon-favorite:before { content: "\ea41"; }
-.ez-icon-figma:before { content: "\ea42"; }
-.ez-icon-file-download:before { content: "\ea43"; }
-.ez-icon-file-upload:before { content: "\ea44"; }
-.ez-icon-filter:before { content: "\ea45"; }
-.ez-icon-find-file:before { content: "\ea46"; }
-.ez-icon-find-page:before { content: "\ea47"; }
-.ez-icon-format-color-fill:before { content: "\ea48"; }
-.ez-icon-generic:before { content: "\ea49"; }
-.ez-icon-gif:before { content: "\ea4a"; }
-.ez-icon-graph_bar:before { content: "\ea4b"; }
-.ez-icon-handshake:before { content: "\ea4c"; }
-.ez-icon-help-inverted:before { content: "\ea4d"; }
-.ez-icon-help:before { content: "\ea4e"; }
-.ez-icon-hide_menu:before { content: "\ea4f"; }
-.ez-icon-home:before { content: "\ea50"; }
-.ez-icon-icons104:before { content: "\ea51"; }
-.ez-icon-language:before { content: "\ea52"; }
-.ez-icon-launch:before { content: "\ea53"; }
-.ez-icon-lightbulb:before { content: "\ea54"; }
-.ez-icon-list:before { content: "\ea55"; }
-.ez-icon-location:before { content: "\ea56"; }
-.ez-icon-lock-outline:before { content: "\ea57"; }
-.ez-icon-lock:before { content: "\ea58"; }
-.ez-icon-menu:before { content: "\ea59"; }
-.ez-icon-mid:before { content: "\ea5a"; }
-.ez-icon-minus:before { content: "\ea5b"; }
-.ez-icon-money-off:before { content: "\ea5c"; }
-.ez-icon-money:before { content: "\ea5d"; }
-.ez-icon-more:before { content: "\ea5e"; }
-.ez-icon-mp3:before { content: "\ea5f"; }
-.ez-icon-mp4:before { content: "\ea60"; }
-.ez-icon-north-west:before { content: "\ea61"; }
-.ez-icon-number:before { content: "\ea62"; }
-.ez-icon-ordem-ascendente:before { content: "\ea63"; }
-.ez-icon-ordem-descendente:before { content: "\ea64"; }
-.ez-icon-parcelar:before { content: "\ea65"; }
-.ez-icon-pause:before { content: "\ea66"; }
-.ez-icon-payments:before { content: "\ea67"; }
-.ez-icon-pdf:before { content: "\ea68"; }
-.ez-icon-play:before { content: "\ea69"; }
-.ez-icon-plus:before { content: "\ea6a"; }
-.ez-icon-png:before { content: "\ea6b"; }
-.ez-icon-power:before { content: "\ea6c"; }
-.ez-icon-pptx:before { content: "\ea6d"; }
-.ez-icon-print:before { content: "\ea6e"; }
-.ez-icon-push-pin:before { content: "\ea6f"; }
-.ez-icon-rateio:before { content: "\ea70"; }
-.ez-icon-receipt:before { content: "\ea71"; }
-.ez-icon-recolher_card:before { content: "\ea72"; }
-.ez-icon-restore:before { content: "\ea73"; }
-.ez-icon-return:before { content: "\ea74"; }
-.ez-icon-save:before { content: "\ea75"; }
-.ez-icon-search:before { content: "\ea76"; }
-.ez-icon-settings-inverted:before { content: "\ea77"; }
-.ez-icon-settings:before { content: "\ea78"; }
-.ez-icon-share:before { content: "\ea79"; }
-.ez-icon-shield:before { content: "\ea7a"; }
-.ez-icon-show_menu:before { content: "\ea7b"; }
-.ez-icon-south-east:before { content: "\ea7c"; }
-.ez-icon-sync:before { content: "\ea7d"; }
-.ez-icon-table:before { content: "\ea7e"; }
-.ez-icon-tag_code:before { content: "\ea7f"; }
-.ez-icon-text:before { content: "\ea80"; }
-.ez-icon-timeline:before { content: "\ea81"; }
-.ez-icon-timer-outline:before { content: "\ea82"; }
-.ez-icon-tune:before { content: "\ea83"; }
-.ez-icon-txt:before { content: "\ea84"; }
-.ez-icon-un-pin:before { content: "\ea85"; }
-.ez-icon-unfold_less:before { content: "\ea86"; }
-.ez-icon-unfold_more:before { content: "\ea87"; }
-.ez-icon-user-circle:before { content: "\ea88"; }
-.ez-icon-warning-outline:before { content: "\ea89"; }
-.ez-icon-warning_triangle:before { content: "\ea8a"; }
-.ez-icon-whatshot:before { content: "\ea8b"; }
-.ez-icon-xlsx:before { content: "\ea8c"; }
-.ez-icon-zip:before { content: "\ea8d"; }
+.ez-icon-acao:before { content: "\ea03"; }
+.ez-icon-account-outline:before { content: "\ea04"; }
+.ez-icon-account:before { content: "\ea05"; }
+.ez-icon-actions-sprite-v1:before { content: "\ea06"; }
+.ez-icon-alert-circle-inverted:before { content: "\ea07"; }
+.ez-icon-alert-circle:before { content: "\ea08"; }
+.ez-icon-alert-mail:before { content: "\ea09"; }
+.ez-icon-alert-popup:before { content: "\ea0a"; }
+.ez-icon-anexo:before { content: "\ea0b"; }
+.ez-icon-antecipação:before { content: "\ea0c"; }
+.ez-icon-apps:before { content: "\ea0d"; }
+.ez-icon-arrow_back:before { content: "\ea0e"; }
+.ez-icon-arrow_downward:before { content: "\ea0f"; }
+.ez-icon-baixa:before { content: "\ea10"; }
+.ez-icon-balance:before { content: "\ea11"; }
+.ez-icon-bell-inverted:before { content: "\ea12"; }
+.ez-icon-bell:before { content: "\ea13"; }
+.ez-icon-boleto:before { content: "\ea14"; }
+.ez-icon-boolean:before { content: "\ea15"; }
+.ez-icon-business-center:before { content: "\ea16"; }
+.ez-icon-calendar-clock:before { content: "\ea17"; }
+.ez-icon-calendar:before { content: "\ea18"; }
+.ez-icon-cash-remove:before { content: "\ea19"; }
+.ez-icon-check-circle-inverted:before { content: "\ea1a"; }
+.ez-icon-check-circle:before { content: "\ea1b"; }
+.ez-icon-check:before { content: "\ea1c"; }
+.ez-icon-chevron-down:before { content: "\ea1d"; }
+.ez-icon-chevron-left:before { content: "\ea1e"; }
+.ez-icon-chevron-right:before { content: "\ea1f"; }
+.ez-icon-chevron-up:before { content: "\ea20"; }
+.ez-icon-circle--medium:before { content: "\ea21"; }
+.ez-icon-circle:before { content: "\ea22"; }
+.ez-icon-cleaning:before { content: "\ea23"; }
+.ez-icon-clipboard:before { content: "\ea24"; }
+.ez-icon-close:before { content: "\ea25"; }
+.ez-icon-cobrar:before { content: "\ea26"; }
+.ez-icon-code:before { content: "\ea27"; }
+.ez-icon-configuration:before { content: "\ea28"; }
+.ez-icon-copy:before { content: "\ea29"; }
+.ez-icon-credit_card:before { content: "\ea2a"; }
+.ez-icon-crop:before { content: "\ea2b"; }
+.ez-icon-custom:before { content: "\ea2c"; }
+.ez-icon-delete:before { content: "\ea2d"; }
+.ez-icon-description:before { content: "\ea2e"; }
+.ez-icon-dividir:before { content: "\ea2f"; }
+.ez-icon-docx:before { content: "\ea30"; }
+.ez-icon-dot-notification:before { content: "\ea31"; }
+.ez-icon-dots-horizontal:before { content: "\ea32"; }
+.ez-icon-dots-vertical:before { content: "\ea33"; }
+.ez-icon-drag-indicator:before { content: "\ea34"; }
+.ez-icon-dual-chevron-down:before { content: "\ea35"; }
+.ez-icon-dual-chevron-up:before { content: "\ea36"; }
+.ez-icon-edit-file:before { content: "\ea37"; }
+.ez-icon-edit-table:before { content: "\ea38"; }
+.ez-icon-edit-time:before { content: "\ea39"; }
+.ez-icon-edit:before { content: "\ea3a"; }
+.ez-icon-email:before { content: "\ea3b"; }
+.ez-icon-estorno:before { content: "\ea3c"; }
+.ez-icon-exe:before { content: "\ea3d"; }
+.ez-icon-expand:before { content: "\ea3e"; }
+.ez-icon-expandir_card:before { content: "\ea3f"; }
+.ez-icon-extrato:before { content: "\ea40"; }
+.ez-icon-eye-off:before { content: "\ea41"; }
+.ez-icon-eye:before { content: "\ea42"; }
+.ez-icon-favorite:before { content: "\ea43"; }
+.ez-icon-figma:before { content: "\ea44"; }
+.ez-icon-file-download:before { content: "\ea45"; }
+.ez-icon-file-upload:before { content: "\ea46"; }
+.ez-icon-filter:before { content: "\ea47"; }
+.ez-icon-find-file:before { content: "\ea48"; }
+.ez-icon-find-page:before { content: "\ea49"; }
+.ez-icon-format-color-fill:before { content: "\ea4a"; }
+.ez-icon-generic:before { content: "\ea4b"; }
+.ez-icon-gif:before { content: "\ea4c"; }
+.ez-icon-graph_bar:before { content: "\ea4d"; }
+.ez-icon-handshake:before { content: "\ea4e"; }
+.ez-icon-help-inverted:before { content: "\ea4f"; }
+.ez-icon-help:before { content: "\ea50"; }
+.ez-icon-hide_menu:before { content: "\ea51"; }
+.ez-icon-home:before { content: "\ea52"; }
+.ez-icon-icons104:before { content: "\ea53"; }
+.ez-icon-language:before { content: "\ea54"; }
+.ez-icon-launch:before { content: "\ea55"; }
+.ez-icon-lightbulb:before { content: "\ea56"; }
+.ez-icon-list:before { content: "\ea57"; }
+.ez-icon-location:before { content: "\ea58"; }
+.ez-icon-lock-outline:before { content: "\ea59"; }
+.ez-icon-lock:before { content: "\ea5a"; }
+.ez-icon-menu:before { content: "\ea5b"; }
+.ez-icon-mid:before { content: "\ea5c"; }
+.ez-icon-minus:before { content: "\ea5d"; }
+.ez-icon-money-off:before { content: "\ea5e"; }
+.ez-icon-money:before { content: "\ea5f"; }
+.ez-icon-more:before { content: "\ea60"; }
+.ez-icon-mp3:before { content: "\ea61"; }
+.ez-icon-mp4:before { content: "\ea62"; }
+.ez-icon-north-west:before { content: "\ea63"; }
+.ez-icon-number:before { content: "\ea64"; }
+.ez-icon-ordem-ascendente:before { content: "\ea65"; }
+.ez-icon-ordem-descendente:before { content: "\ea66"; }
+.ez-icon-parcelar:before { content: "\ea67"; }
+.ez-icon-pause:before { content: "\ea68"; }
+.ez-icon-payments:before { content: "\ea69"; }
+.ez-icon-pdf:before { content: "\ea6a"; }
+.ez-icon-play:before { content: "\ea6b"; }
+.ez-icon-plus:before { content: "\ea6c"; }
+.ez-icon-png:before { content: "\ea6d"; }
+.ez-icon-power:before { content: "\ea6e"; }
+.ez-icon-pptx:before { content: "\ea6f"; }
+.ez-icon-print:before { content: "\ea70"; }
+.ez-icon-push-pin:before { content: "\ea71"; }
+.ez-icon-rateio:before { content: "\ea72"; }
+.ez-icon-receipt:before { content: "\ea73"; }
+.ez-icon-recolher_card:before { content: "\ea74"; }
+.ez-icon-restore:before { content: "\ea75"; }
+.ez-icon-return:before { content: "\ea76"; }
+.ez-icon-save:before { content: "\ea77"; }
+.ez-icon-search:before { content: "\ea78"; }
+.ez-icon-settings-inverted:before { content: "\ea79"; }
+.ez-icon-settings:before { content: "\ea7a"; }
+.ez-icon-share:before { content: "\ea7b"; }
+.ez-icon-shield:before { content: "\ea7c"; }
+.ez-icon-show_menu:before { content: "\ea7d"; }
+.ez-icon-south-east:before { content: "\ea7e"; }
+.ez-icon-sync:before { content: "\ea7f"; }
+.ez-icon-table:before { content: "\ea80"; }
+.ez-icon-tag_code:before { content: "\ea81"; }
+.ez-icon-text:before { content: "\ea82"; }
+.ez-icon-timeline:before { content: "\ea83"; }
+.ez-icon-timer-outline:before { content: "\ea84"; }
+.ez-icon-tune:before { content: "\ea85"; }
+.ez-icon-txt:before { content: "\ea86"; }
+.ez-icon-un-pin:before { content: "\ea87"; }
+.ez-icon-unfold_less:before { content: "\ea88"; }
+.ez-icon-unfold_more:before { content: "\ea89"; }
+.ez-icon-user-circle:before { content: "\ea8a"; }
+.ez-icon-warning-outline:before { content: "\ea8b"; }
+.ez-icon-warning_triangle:before { content: "\ea8c"; }
+.ez-icon-whatshot:before { content: "\ea8d"; }
+.ez-icon-xlsx:before { content: "\ea8e"; }
+.ez-icon-zip:before { content: "\ea8f"; }
 
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS

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

@@ -102,12 +102,13 @@ p {
 }
 
 .draggable {
-  display: flex;
-  align-items: center;
+  /* private */
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0px, auto) minmax(0px, auto);
+  place-items: center;
   border-top: 1px dashed #fff;
   justify-content: space-between;
-  flex: 1;
-  width: 100%;
 
   /*public*/
   font-family: var(--ez-list__item--font-family);
@@ -148,14 +149,6 @@ p {
   width: 100%;
 }
 
-.group-container .item-content {
-  max-width: calc(100% - 41px);
-}
-
-.items-container .item-content {
-  max-width: calc(100% - 100px);
-}
-
 .draggable-list {
   padding: 0;
   margin: 0;
@@ -285,6 +278,7 @@ p {
   user-select: none;
 
   /*public*/
+  color: var(--title--primary);
   font-family: var(--ez-list__group--font-family);
   font-size: var(--ez-list__group--font-size);
   font-weight: var(--ez-list__group--font-weight);

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 ;
 ;
@@ -36,6 +36,7 @@ export class EzList {
    */
   async setSelection(selectedItem, scrollToOption) {
     if (selectedItem && this.ezSelectable) {
+      this.ezSelectItem.emit(selectedItem);
       if (this.useGroups) {
         let newList = [...this._listGroupItems];
         newList.forEach(groupItem => {
@@ -517,18 +518,18 @@ export class EzList {
   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) => (h("li", { id: "item_" + this.getItemId(item.label), class: {
+        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) => (h("li", Object.assign({ id: "item_" + this.getItemId(item.label), class: {
             "selectable-container": this.ezSelectable,
             "hover-feedback": this.hoverFeedback
-          }, 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 ? this.getContainerItemBuilder(item, group, "slot-item") : 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 ?
+          }, key: "item_" + this.getItemId(item.label) }, { [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, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ? this.getContainerItemBuilder(item, group, "slot-item") : 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) => (h("li", { id: "item_" + this.getItemId(item.label), class: {
+        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_" + this.getItemId(item.label), class: {
             "selectable-container": this.ezSelectable,
             "hover-feedback": this.hoverFeedback
-          }, 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 ? this.getContainerItemBuilder(item) : undefined)))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: (event) => { this.onDragOverLastIndex(event); }, onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDropLastIndex(event) })))));
+          }, key: "item_" + this.getItemId(item.label) }, { [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.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ? this.getContainerItemBuilder(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 is() { return "ez-list"; }
   static get encapsulation() { return "shadow"; }
@@ -701,6 +702,25 @@ export class EzList {
             }
           }
         }
+      }, {
+        "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"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -31,6 +31,12 @@ export class EzPopover {
           if (!_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node)) {
             return true;
           }
+          const nodeShadowRoot = node.getRootNode();
+          if (nodeShadowRoot instanceof ShadowRoot) {
+            if (eventOrigin.composedPath().includes(nodeShadowRoot.host)) {
+              return true;
+            }
+          }
         }
       }
       return false;

package/dist/custom-elements/index.d.ts

@@ -20,6 +20,12 @@ export const EzApplication: {
   new (): EzApplication;
 };
 
+interface EzBadge extends Components.EzBadge, HTMLElement {}
+export const EzBadge: {
+  prototype: EzBadge;
+  new (): EzBadge;
+};
+
 interface EzBreadcrumb extends Components.EzBreadcrumb, HTMLElement {}
 export const EzBreadcrumb: {
   prototype: EzBreadcrumb;