@sankhyalabs/ezui 6.6.1 → 6.7.0-dev.2

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

@@ -16,6 +16,7 @@ export class EzList {
     this.itemLeftSlotBuilder = undefined;
     this.hoverFeedback = false;
     this.enableMultipleSelection = false;
+    this.enabled = true;
   }
   /**
    * Limpa o histórico da lista.
@@ -584,7 +585,7 @@ export class EzList {
           '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", { 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)));
+      }), 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() {
@@ -593,7 +594,7 @@ export class EzList {
       } }, 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", { 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) })));
+      }, 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()));
@@ -787,6 +788,24 @@ export class EzList {
         "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"
       }
     };
   }

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

@@ -0,0 +1,61 @@
+:host {
+    /* @doc Define a cor do título do item da lista. */
+    --ez-list-item__title--color: var(--color--ocean-green-900, #003D2D);
+
+    /* @doc Define a cor do texto do item da lista. */
+    --ez-list-item__text--color: var(--color--ocean-green-1000, #00281D);
+
+    /* @doc Define a cor do ícone do item da lista. */
+    --ez-list-item__icon--color: var(--color--ocean-green-600, #008561);
+
+    /* @doc Define a cor do background do item da lista. */
+    --ez-list-item__background--color: var(--color--gray-80, #F9F9F9);
+
+    /* @doc Define a cor da borda do item da lista com hover. */
+    --ez-list-item__border--color-hover: var(--color--gray-100, #DEDEDE);
+
+    /* @doc Define a largura mínima do componente. */
+    --ez-list-item__min-width: 150;
+
+    display: flex;
+    flex-direction: column;
+    background: var(--ez-list-item__background--color);
+    padding: var(--space--12, 12px) var(--space--16, 16px);
+    min-width: var(--ez-list-item__min-width);
+    width: 100%;
+    border-radius: var(--border--radius-16, 16px);
+    outline: none;
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+:host(:hover) {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--ez-list-item__border--color-hover);
+}
+
+
+.list-item__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.list-item__title{
+    color: var(--ez-list-item__title--color);
+    font-size: var(--text--large);
+    font-weight: var(--font-weight--medium);
+}
+
+.list-item__text{
+    font-size: var(--text--medium);
+    font-weight: var(--font-weight--regular);
+    color: var(--ez-list-item__text--color);
+}
+
+
+ez-icon {
+    --ez-icon--color: var(--ez-list-item__icon--color);
+}

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

@@ -0,0 +1,78 @@
+import { h, Host } from '@stencil/core';
+export class EzListItem {
+  constructor() {
+    this.titleText = undefined;
+    this.text = undefined;
+    this.iconName = undefined;
+  }
+  render() {
+    return (h(Host, { class: "list-item" }, h("div", { class: 'list-item__header' }, h("span", { class: 'list-item__title' }, this.titleText), this.iconName && h("ez-icon", { "icon-name": this.iconName })), this.text && h("span", { class: 'list-item__text' }, this.text)));
+  }
+  static get is() { return "ez-list-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-list-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-list-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo do item da lista."
+        },
+        "attribute": "title-text",
+        "reflect": true
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto do item da lista."
+        },
+        "attribute": "text",
+        "reflect": true
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone que deve ser exibido no item."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      }
+    };
+  }
+}

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

@@ -9,28 +9,17 @@
   /*@doc Define a cor do texto do container do popup.*/
   --ez-popup__container--color: var(--title--primary, #2b3a54);
   /*@doc Define o espaçamento do container do popup.*/
-  --ez-popup__container--padding: var(--space--md, 20px);
-
-  /* Popup Header */
-  /*@doc Define o espaçamento inferior do cabeçalho do popup.*/
-  --ez-popup__header--padding-bottom: var(--space--medium, 12px);
+  --ez-popup__container--padding: var(--space--24, 24px);
 
   /* Title */
   /*@doc Define a família da fonte do título do popup.*/
-  --ez-popup__title--font-family: var(--font-pattern, "Roboto");
+  --ez-popup__title--font-family: var(--font--pattern, "Roboto");
   /*@doc Define o tamanho da fonte do título do popup.*/
-  --ez-popup__title--font-size: var(--title--large, 20px);
+  --ez-popup__title--font-size: var(--font-size--xxlarge, 22px);
   /*@doc Define a cor da fonte do título do popup.*/
-  --ez-popup__title--color: var(--title--primary, #2b3a54);
+  --ez-popup__title--color: var(--title--primary, #00281D);
   /*@doc Define o peso da fonte do título do popup.*/
-  --ez-popup__title--font-weight: var(--text-weight--large, 600);
-
-  /* Buttons */
-  /* @doc Define a cor do ícone do botão de fechamento. */
-  --ez-popup__btn__close--icon-color: var(--title--primary, #2b3a54);
-  /* @doc Contém o ícone do botão de fechamento. */
-  --ez-popup__btn__close--icon: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z"/></svg>');
-
+  --ez-popup__title--font-weight: var(--font-weight--regular, 400);
 }
 
 .overlay {
@@ -48,20 +37,12 @@
   background: rgba(0, 4, 12, 0.4);
 }
 
-.popup {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
 .popup__container {
   width: 100%;
   max-height: 90%;
   height: 100%;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   overflow: hidden;
   outline: none;
   background: #FFFF;
@@ -70,6 +51,10 @@
   box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
   box-sizing: border-box;
   padding: var(--ez-popup__container--padding);
+  margin: 0;
+  border: none;
+  position: unset;
+  gap: var(--space--16, 16px);
 }
 
 .popup__container--auto {
@@ -89,16 +74,18 @@
 .popup__expandable-content {
   box-sizing: border-box;
   width: 100%;
-  height: calc(100% - 44px);
+  flex: 1;
+  font-family: var(--font--pattern, "Roboto");
+  font-size: var(--font-size--default, 14px);
+  color: var(--title--primary, #00281D);
+  font-weight: var(--font-weight--regular, 400);
+  line-height: var(--line-height--24, 24px);
 }
 
 .popup__header {
   width: 100%;
   display: flex;
-}
-
-.popup__header--padding{
-  padding-bottom: var(--ez-popup__header--padding-bottom);
+  align-items: center;
 }
 
 .popup__title {
@@ -109,7 +96,7 @@
   font-size: var(--ez-popup__title--font-size);
   font-weight: var(--ez-popup__title--font-weight);
   color: var(--ez-popup__title--color);
-  line-height: 1.3;
+  line-height: var(--line-height--32, 32px);
 }
 
 .btn-close {
@@ -123,18 +110,15 @@
   cursor: pointer;
 }
 
-.btn-close::after {
-  content: '';
-  display: flex;
-  background-color: var(--ez-popup__btn__close--icon-color);
-  width: 14px;
-  height: 14px;
-  -webkit-mask-image: var(--ez-popup__btn__close--icon);
-  mask-image: var(--ez-popup__btn__close--icon);
+.btn-close--solo {
+  width: 100%;
 }
 
-.btn-close--solo {
+.popup__footer {
+  display: flex;
   width: 100%;
+  flex-direction: row-reverse;
+  gap: var(--space--8, 8px);
 }
 
 /* //////// GRID SYSTEM //////// */

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

@@ -1,30 +1,25 @@
-import { Host, h, Fragment } from "@stencil/core";
 import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
+import { h, Host } from "@stencil/core";
+import initI18n from '../../utils/i18n';
 export class EzPopup {
   constructor() {
-    this._sizeClasses = {
-      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
-      "small": "col--sd-5",
-      "medium": "col--sd-6",
-      "large": "col--sd-9",
-      "x-large": "col--sd-11",
-      "default": "ez-popup__size-limit--x-small",
-      "auto": "",
-    };
     this.size = "medium";
     this.opened = false;
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
     this.enabledScroll = false;
+    this.autoClose = true;
+    this.footerButtons = [];
   }
   observeConfig() {
     this.manageOverflow();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
-    if (this.opened && this._popupRef) {
-      this._popupRef.focus();
-    }
+    this.popUpFocus();
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
@@ -59,31 +54,96 @@ export class EzPopup {
     if (!this.opened) {
       return;
     }
-    requestAnimationFrame(() => {
-      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
-      if (this._popupRef && slot === null) {
-        this._popupRef.focus();
-      }
-    });
+    if (this._popupRef) {
+      this._popupRef.focus();
+    }
   }
   getGridSize() {
-    if (this.size === "auto")
-      return "";
-    return this._sizeClasses[this.size] || this._sizeClasses["medium"];
-  }
-  handlePopupHeight() {
-    return this.heightMode === 'auto' ? 'popup__container--auto' : '';
+    const _sizeClasses = {
+      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
+      "small": "col--sd-5",
+      "medium": "col--sd-6",
+      "large": "col--sd-9",
+      "x-large": "col--sd-11",
+      "default": "ez-popup__size-limit--x-small",
+      "auto": "",
+    };
+    if (!this.size || !_sizeClasses.hasOwnProperty(this.size)) {
+      return _sizeClasses["medium"];
+    }
+    return _sizeClasses[this.size] || _sizeClasses["medium"];
   }
-  handlePopupOverflowY() {
-    return this.enabledScroll ? 'popup__overflow-y--auto' : '';
+  getDialogClass() {
+    let className = 'popup__container';
+    if (this.heightMode === 'auto') {
+      className += ' popup__container--auto';
+    }
+    if (this.enabledScroll) {
+      className += ' popup__overflow-y--auto';
+    }
+    className += ` ${this.getGridSize()}`;
+    return className;
   }
   componentDidRender() {
     this.manageOverlay();
     this.popUpFocus();
   }
+  handleAutoClose(event) {
+    if (!this.opened || !this._popupRef || !this.autoClose) {
+      return;
+    }
+    if (this._popupRef.contains(event.target)) {
+      return;
+    }
+    const slot = this._popupRef.querySelector('slot');
+    if (slot && slot.assignedElements().length > 0) {
+      const assignedElements = slot.assignedElements();
+      for (const element of assignedElements) {
+        if (element.contains(event.target)) {
+          return;
+        }
+      }
+    }
+    if (this._popupRef.shadowRoot && this._popupRef.shadowRoot.contains(event.target)) {
+      return;
+    }
+    this.closePopup();
+  }
+  handleDefaultPropsButtonsByIndex(index) {
+    switch (index) {
+      case 0:
+        return {
+          label: this.i18n ? this.i18n('app.confirm') : 'Confirmar',
+          variant: "primary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+            this.ezPopupAction.emit("OK");
+          }
+        };
+      case 1:
+        return {
+          label: this.i18n ? this.i18n('app.cancel') : 'Cancelar',
+          variant: "secondary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+          }
+        };
+      case 2:
+        return {
+          label: this.i18n ? this.i18n('app.close') : 'Fechar',
+          variant: "tertiary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+          }
+        };
+    }
+  }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: `popup__container ${(this.handlePopupHeight())} ${this.handlePopupOverflowY()}` }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
-      h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
+    return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
+      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: "popup__expandable-content" }, h("slot", null)), this.footerButtons.length > 0 && (h("footer", { class: "popup__footer" }, this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps)))))))))));
   }
   static get is() { return "ez-popup"; }
   static get encapsulation() { return "shadow"; }
@@ -205,6 +265,51 @@ export class EzPopup {
         "attribute": "enabled-scroll",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "autoClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "Define se o popup deve fechar automaticamente ao clicar fora dele."
+        },
+        "attribute": "auto-close",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "footerButtons": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<EzButtonProps>[]",
+          "resolved": "Partial<EzButtonProps>[]",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "EzButtonProps": {
+              "location": "import",
+              "path": "./interfaces/EzButtonProps"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Bot\u00F5es do rodap\u00E9 do popup. Aceita todas as propriedades do ez-button.\nLimitado a at\u00E9 3 bot\u00F5es."
+        },
+        "defaultValue": "[]"
       }
     };
   }

package/dist/collection/components/ez-popup/interfaces/EzButtonProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -219,9 +219,9 @@ export class EzSearch {
   isOptionsVisible() {
     return this._ezPopOverPlusElement.opened;
   }
-  selectCurrentOption() {
+  selectCurrentOption(focusOnInput = true) {
     if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
+      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
       this._preSelection = undefined;
     }
     else {
@@ -576,7 +576,7 @@ export class EzSearch {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne(false);
+        this.selectCurrentOption(false);
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.

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

@@ -91,7 +91,7 @@ export class SearchList {
     return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
       && this.cleanEmptyObjectArray(this.visibleOptions).length === 0
       && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this.textEmptyList)), this.showLoading
-      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions && this.cleanEmptyObjectArray(this.visibleOptions).map((opt, index) => this.buildItem(opt, index)))));
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
   }
   static get is() { return "search-list"; }
   static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,76 @@
+:host {
+  /*@doc Define a cor do spinner.*/
+  --ez-spinner--color: var(--color--ocean-green-600, #008561);
+
+  /*@doc Define o tamanho padrão do spinner.*/
+  --ez-spinner--size-default: 24px;
+
+  /*@doc Define o tamanho médio do spinner.*/
+  --ez-spinner--size-medium: 32px;
+
+  /*@doc Define o tamanho grande do spinner.*/
+  --ez-spinner--size-large: 42px;
+
+  /*@doc Define a duração da animação do spinner.*/
+  --ez-spinner--animation-duration: 1.4s;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner__container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner__svg {
+  color: var(--ez-spinner--color);
+  width: var(--ez-spinner--size-default);
+  height: var(--ez-spinner--size-default);
+}
+
+.spinner__container[data-size="medium"] .spinner__svg {
+  width: var(--ez-spinner--size-medium);
+  height: var(--ez-spinner--size-medium);
+}
+
+.spinner__container[data-size="large"] .spinner__svg {
+  width: var(--ez-spinner--size-large);
+  height: var(--ez-spinner--size-large);
+}
+
+.spinner__path {
+  animation: spinner-dash var(--ez-spinner--animation-duration) ease-in-out infinite,
+    spinner-rotate var(--ez-spinner--animation-duration) linear infinite;
+  transform-origin: center;
+  will-change: stroke-dasharray, stroke-dashoffset;
+}
+
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 1, 63;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 32, 63;
+    stroke-dashoffset: -16;
+  }
+
+  100% {
+    stroke-dasharray: 1, 63;
+    stroke-dashoffset: -63;
+  }
+}