@sankhyalabs/ezui 3.5.0 → 4.0.0

package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js

@@ -1,11 +1,11 @@
 import { h } from "@stencil/core";
 import { CheckMode } from "../../../ez-check/CheckMode";
 export const buildSwitch = (field) => {
-  return buildField(field.name, field.label, field.readOnly, true);
+  return buildField(field.name, field.label, field.readOnly, field.contextName, true);
 };
 export const buildCheckBox = (field) => {
-  return buildField(field.name, field.label, field.readOnly, false);
+  return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
-function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
+function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const buildComboBox = ({ name, label, readOnly, required, props }) => {
+export const buildComboBox = ({ name, label, readOnly, required, props, contextName }) => {
   const prop = props === null || props === void 0 ? void 0 : props.options;
   let options;
   if (typeof prop === "string") {
@@ -9,5 +9,5 @@ export const buildComboBox = ({ name, label, readOnly, required, props }) => {
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js

@@ -5,6 +5,6 @@ export const buildDate = ({ name, label, readOnly }) => {
 export const buildTime = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
-export const buildDateTime = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+export const buildDateTime = ({ name, label, readOnly, contextName }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/FileInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildFile = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+export const buildFile = ({ name, label, readOnly, contextName }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js

@@ -1,12 +1,12 @@
 import { h } from "@stencil/core";
-export const buildDecimal = ({ name, label, readOnly, props }) => {
+export const buildDecimal = ({ name, label, readOnly, props, contextName }) => {
   const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
   const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName);
 };
-export const buildInteger = ({ name, label, readOnly }) => {
-  return buildNumeric(name, label, readOnly, 0, 0);
+export const buildInteger = ({ name, label, readOnly, contextName }) => {
+  return buildNumeric(name, label, readOnly, 0, 0, contextName);
 };
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName) {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildSearch = ({ name, label, readOnly, required }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
+export const buildSearch = ({ name, label, readOnly, required, contextName }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextArea.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildTextArea = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name }, h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
+export const buildTextArea = ({ name, label, readOnly, contextName }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name }, h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildTextInput = ({ name, label, readOnly }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
+export const buildTextInput = ({ name, label, readOnly, contextName }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly })));
 };

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -37,6 +37,7 @@ export default class AgGridController {
   }
   ;
   initDatagrid(container, options) {
+    var _a;
     if (this._grid === undefined) {
       LicenseManager.setLicenseKey(ApplicationContext.getContextValue("__EZUI__GRID_LICENSE__"));
       this._columnStateChangeCallback = options.onColumnStateChange;
@@ -86,8 +87,10 @@ export default class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
-      //Atualiza estado da seleção inicial
-      this.onSelectionChange();
+      const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
+      if (selection) {
+        this.selectRows(selection);
+      }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
     }
   }

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

@@ -6,7 +6,9 @@
   
   /*public*/
   /*@doc Define a cor de fundo do header do componente.*/
-  --ezgrid__header--background-color: var(--background--xlight, #FFF)
+  --ezgrid__header--background-color: var(--background--xlight, #FFF);
+  /*@doc Define o sombreamento usado como borda.*/
+  --ezgrid__container--shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
 }
 
 .grid-header {
@@ -21,7 +23,7 @@
 }
 
 .grid__container{
-  box-shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
+  box-shadow: var(--ezgrid__container--shadow);
   padding-top: 15px;
   margin-top: -12px;
 

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

@@ -134,7 +134,7 @@ export class EzGrid {
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
       onPaginationChange: (paginationInfo) => {
         var _a;
-        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > paginationInfo.currentPage && this._paginationChangedByKeyboard) {
+        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
           this._gridController.setFocusLastRow();
         }
         else {

package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.css

@@ -15,7 +15,7 @@
 	/*@doc Define o espaçamento entre as ações*/
 	--ez-guide-navigator--actions-gap: var(--space--medium);
 	/*@doc Define a margem vertical do elemento*/
-	--ez-guide-navigator--actions-margin: var(--space--medium) 0 var(--space--medium);
+	--ez-guide-navigator--actions-margin: var(--space--large) 0 var(--space--medium);
 	/*@doc Define o espaçamento da direita do elemento*/
 	--ez-guide-navigator--actions-padding-right: calc(var(--space--medium, 12px) + var(--space--small, 6px));
 }

package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.js

@@ -5,6 +5,7 @@ const ENTER_KEY = "Enter";
 export class EzGuideNavigator {
   constructor() {
     this.open = true;
+    this.selectedId = undefined;
     this.items = [];
     this.tooltipResolver = undefined;
     this.filterText = "";
@@ -21,6 +22,48 @@ export class EzGuideNavigator {
   async enableItem(id) {
     [].concat(id).forEach(item => this._tree.enableItem(item));
   }
+  /**
+   * Atualiza um ou mais items
+   */
+  async updateItem(item) {
+    [].concat(item).forEach(item => this._tree.updateItem(item));
+  }
+  /**
+   * Obtem um item pelo id
+   */
+  async getItem(id) {
+    return this._tree.getItem(id);
+  }
+  /**
+   * Obtem um array do caminho de itens da seleção atual.
+   * @returns Retorna um array do caminho de itens da seleção atual.
+   */
+  async getCurrentPath() {
+    var _a;
+    return (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getCurrentPath();
+  }
+  /**
+   * Seleciona o item desejado pelo ID.
+   * @param id - ID do item que receberá a seleção.
+   */
+  async selectGuide(id) {
+    if (this._tree == undefined || id == undefined) {
+      return;
+    }
+    this._tree.selectItem(id);
+    this.getCurrentPath()
+      .then((currentPath) => {
+      currentPath === null || currentPath === void 0 ? void 0 : currentPath.forEach((item) => {
+        this._tree.openItem(item.id);
+      });
+    });
+  }
+  /**
+   * Obtem o item pai a partir de um id
+   */
+  async getParent(id) {
+    return this._tree.getParent(id);
+  }
   async handleToggleSidebar() {
     this.open = !this.open;
   }
@@ -29,9 +72,13 @@ export class EzGuideNavigator {
       this._tree.applyFilter(this.filterText);
     }
   }
+  onFilterChanged(event) {
+    this.filterText = event.detail;
+    event.stopPropagation();
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element);
-    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") }, h("div", { role: "search", class: "ez-guide-navigator__actions" }, h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => (this.filterText = event.detail), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }), h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })), h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver })))));
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar") }, h("div", { role: "search", class: "ez-guide-navigator__actions" }, h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => this.onFilterChanged(event), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }), h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })), h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver, onEzChange: evt => this.ezSelectionChange.emit(evt.detail), selectedId: this.selectedId })))));
   }
   static get is() { return "ez-guide-navigator"; }
   static get encapsulation() { return "shadow"; }
@@ -65,6 +112,23 @@ export class EzGuideNavigator {
         "reflect": true,
         "defaultValue": "true"
       },
+      "selectedId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o id do item selecionado."
+        },
+        "attribute": "selected-id",
+        "reflect": true
+      },
       "items": {
         "type": "unknown",
         "mutable": false,
@@ -116,6 +180,29 @@ export class EzGuideNavigator {
       "filterText": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "ezSelectionChange",
+        "name": "ezSelectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando o item selecionado no navigator \u00E9 alterado."
+        },
+        "complexType": {
+          "original": "IGuideItem",
+          "resolved": "IGuideItem",
+          "references": {
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
   static get methods() {
     return {
       "disableItem": {
@@ -161,6 +248,136 @@ export class EzGuideNavigator {
           "text": "Habilita um ou mais itens.",
           "tags": []
         }
+      },
+      "updateItem": {
+        "complexType": {
+          "signature": "(item: IGuideItem | Array<IGuideItem>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza um ou mais items",
+          "tags": []
+        }
+      },
+      "getItem": {
+        "complexType": {
+          "signature": "(id: string) => Promise<IGuideItem>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<IGuideItem>"
+        },
+        "docs": {
+          "text": "Obtem um item pelo id",
+          "tags": []
+        }
+      },
+      "getCurrentPath": {
+        "complexType": {
+          "signature": "() => Promise<Array<IGuideItem>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<IGuideItem[]>"
+        },
+        "docs": {
+          "text": "Obtem um array do caminho de itens da sele\u00E7\u00E3o atual.",
+          "tags": [{
+              "name": "returns",
+              "text": "Retorna um array do caminho de itens da sele\u00E7\u00E3o atual."
+            }]
+        }
+      },
+      "selectGuide": {
+        "complexType": {
+          "signature": "(id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "id - ID do item que receber\u00E1 a sele\u00E7\u00E3o."
+                }],
+              "text": "- ID do item que receber\u00E1 a sele\u00E7\u00E3o."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Seleciona o item desejado pelo ID.",
+          "tags": [{
+              "name": "param",
+              "text": "id - ID do item que receber\u00E1 a sele\u00E7\u00E3o."
+            }]
+        }
+      },
+      "getParent": {
+        "complexType": {
+          "signature": "(id: string) => Promise<IGuideItem>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<IGuideItem>"
+        },
+        "docs": {
+          "text": "Obtem o item pai a partir de um id",
+          "tags": []
+        }
       }
     };
   }

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

@@ -106,7 +106,6 @@ p {
   align-items: center;
   border-top: 1px dashed #fff;
   justify-content: space-between;
-  background-color: #fff;
   flex: 1;
   width: 100%;
 
@@ -137,6 +136,11 @@ p {
   margin: 0px !important;
 }
 
+.hover-feedback:hover {
+  background-color: var(--background--medium);
+  border-radius: var(--border--radius-regular);
+}
+
 .item-content {
   display: flex;
   justify-content: flex-start;
@@ -165,7 +169,6 @@ p {
 }
 
 .draggable-list li {
-  background-color: #fff;
   display: flex;
   height: 32px;
 

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

@@ -12,6 +12,7 @@ export class EzList {
     this.ezDraggable = false;
     this.ezSelectable = false;
     this.itemSlotBuilder = undefined;
+    this.hoverFeedback = false;
   }
   /**
    * Limpa o histórico da lista.
@@ -516,16 +517,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) => {
-          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 ? 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 ?
+        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: {
+            "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 ?
           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 ? 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) })))));
+        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: {
+            "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) })))));
   }
   static get is() { return "ez-list"; }
   static get encapsulation() { return "shadow"; }
@@ -645,6 +648,24 @@ export class EzList {
           "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."
         }
+      },
+      "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"
       }
     };
   }

package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.css

@@ -1,4 +1,5 @@
 :host {
+    position: relative;
 
     /* dimensão */
     /*@doc Define a largura do span do botão.*/
@@ -34,6 +35,7 @@
 }
 
 button {
+    position: absolute;
     display: flex;
     background: var(--ez-sidebar-button--background-color--xlight);
     border: 0;