@sankhyalabs/ezui 1.2.0-beta.2 → 1.2.0-beta.21

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

@@ -11,14 +11,20 @@
     /*@doc Define o espaçamento utilizado à esquerda do botão de fechar do componente.*/
     --ez-grid-config__button-close--padding-left: var(--space--medium, 12px);
 
-    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
-    --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
+    /*@doc Define a cor do texto utilizado para o titulo do componente.*/
+    --snk-grid-config__title--color: var(--title--primary, #2B3A54);
 
     /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
     --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
 
+    /*@doc Define o tamanho da fonte utilizada para o titulo do componente.*/
+    --ez-grid-config__title--font-size: var(--title--large, 20px);
+
     /*@doc Define o peso do texto utilizado para o titulo do componente.*/
-    --ez-grid-config__title--font-weight: var(--text-weight--large, 700);
+    --ez-grid-config__title--font-weight: var(--text-weight--extra-large, 700);
+
+    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
+    --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
 
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
     --ez-grid-config__subtitle--font-size: var(--text--medium, 14px);
@@ -27,10 +33,13 @@
     --ez-grid-config__scrollbar--width: var(--space--medium, 12px);
 
     /*@doc Define a cor da barra de rolagem do componente.*/
-    --ez-grid-config__scrollbar--background-color: var(--text--primary, #626e82);
+    --ez-grid-config__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --ez-grid-config__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
-    --ez-grid-config__scrollbar--border-radius: var(--border--radius-medium, 12px);
+    --ez-grid-config__scrollbar--border-radius: var(--border--radius-small, 6px);
 
     /* @doc Define o estilo do texto do grupo da lista. */
     --ez-grid-config__group--font-family: var(--font-pattern, "Sora");
@@ -82,13 +91,6 @@ ez-list {
     display: none;
 }
 
-.grid-config__main {
-    overflow-y: auto;
-
-    /*public*/
-    padding-right: var(--ez-grid-config__main--padding-right);
-}
-
 .tabselector-container {
     /*public*/
     padding: var(--ez-grid-config__tabselector-container--padding) 0;
@@ -106,13 +108,6 @@ ez-list {
     width: 100%;
 }
 
-.subtitle {
-    /*public*/
-    font-family: var(--ez-grid-config__subtitle--font-family);
-    font-size: var(--ez-grid-config__subtitle--font-size);
-    color: var(--text--primary);
-}
-
 .title {
     display: flex;
     margin: 0;
@@ -121,29 +116,45 @@ ez-list {
     text-align: left;
 
     /*public*/
-    color: var(--title--primary);
+    color: var(--snk-grid-config__title--color);
+    font-size: var(--ez-grid-config__title--font-size);
     font-family: var(--ez-grid-config__title--font-family);
-    font-size: var(--title--large);
     font-weight: var(--ez-grid-config__title--font-weight);
 }
 
+.subtitle {
+    /*public*/
+    color: var(--text--primary);
+    font-size: var(--ez-grid-config__subtitle--font-size);
+    font-family: var(--ez-grid-config__subtitle--font-family);
+}
+
+.grid-config__main {
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    /*public*/
+    scrollbar-color: var(--ez-grid-config__scrollbar--background-color-primary) var(--ez-grid-config__scrollbar--background-color-secondary);
+    padding-right: var(--ez-grid-config__main--padding-right);
+}
+
 .grid-config__main::-webkit-scrollbar-track {
-    background-color: #f0f2f5;
+    /*public*/
+    background-color: var(--ez-grid-config__scrollbar--background-color-secondary);
 }
 
 .grid-config__main::-webkit-scrollbar-thumb {
     /*public*/
-    background-color: var(--ez-grid-config__scrollbar--background-color);
+    background-color: var(--ez-grid-config__scrollbar--background-color-primary);
     border-radius: var(--ez-grid-config__scrollbar--border-radius);
 }
 
 .grid-config__main::-webkit-scrollbar {
-    background-color: #f0f2f5;
-
     /*public*/
     width: var(--ez-grid-config__scrollbar--width);
     max-width: var(--ez-grid-config__scrollbar--width);
     min-width: var(--ez-grid-config__scrollbar--width);
+    background-color: var(--ez-grid-config__scrollbar--background-color-secondary);
 }
 
 .group-name {

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

@@ -75,7 +75,7 @@ export class EzGridConfig {
   }
   buildColumnListSlot(item, group) {
     return (h("div", null,
-      h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
+      h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
   }
   buildOrderListSlot(item) {
     let selectedOption = "na";
@@ -158,7 +158,6 @@ export class EzGridConfig {
     this.columns = newColumnList;
     this._dataChanged = false;
     this.closeConfig();
-    ApplicationUtils.info("As configurações foram salvas com sucesso!");
     this.save();
   }
   save() {

package/dist/collection/components/ez-grid/subcomponents/ez-select-box/ez-select-box.js

@@ -23,11 +23,12 @@ export class SelectBox {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
-            "location": "global"
+          "IOption": {
+            "location": "import",
+            "path": "../../../ez-combo-box/ez-combo-box"
           }
         }
       },

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

@@ -53,104 +53,123 @@ svg {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-.ez-icon-account-outline:before { content: "\ea01"; }
-.ez-icon-account:before { content: "\ea02"; }
-.ez-icon-alert-circle-inverted:before { content: "\ea03"; }
-.ez-icon-alert-circle:before { content: "\ea04"; }
-.ez-icon-alert-mail:before { content: "\ea05"; }
-.ez-icon-alert-outline:before { content: "\ea06"; }
-.ez-icon-alert-popup:before { content: "\ea07"; }
-.ez-icon-apps:before { content: "\ea08"; }
-.ez-icon-arrow_back:before { content: "\ea09"; }
-.ez-icon-bell-inverted:before { content: "\ea0a"; }
-.ez-icon-bell:before { content: "\ea0b"; }
-.ez-icon-business-center:before { content: "\ea0c"; }
-.ez-icon-calendar-text:before { content: "\ea0d"; }
-.ez-icon-calendar:before { content: "\ea0e"; }
-.ez-icon-check-circle-inverted:before { content: "\ea0f"; }
-.ez-icon-check-circle:before { content: "\ea10"; }
-.ez-icon-check:before { content: "\ea11"; }
-.ez-icon-chevron-down:before { content: "\ea12"; }
-.ez-icon-chevron-left:before { content: "\ea13"; }
-.ez-icon-chevron-right:before { content: "\ea14"; }
-.ez-icon-chevron-up:before { content: "\ea15"; }
-.ez-icon-circle--medium:before { content: "\ea16"; }
-.ez-icon-circle:before { content: "\ea17"; }
-.ez-icon-clipboard:before { content: "\ea18"; }
-.ez-icon-close-circle-inverted:before { content: "\ea19"; }
-.ez-icon-close-circle:before { content: "\ea1a"; }
-.ez-icon-close:before { content: "\ea1b"; }
-.ez-icon-comment-inverted:before { content: "\ea1c"; }
-.ez-icon-comment:before { content: "\ea1d"; }
-.ez-icon-configuration:before { content: "\ea1e"; }
-.ez-icon-copy:before { content: "\ea1f"; }
-.ez-icon-crop:before { content: "\ea20"; }
-.ez-icon-delete:before { content: "\ea21"; }
-.ez-icon-description:before { content: "\ea22"; }
-.ez-icon-dot-notification:before { content: "\ea23"; }
-.ez-icon-dots-horizontal:before { content: "\ea24"; }
-.ez-icon-dots-vertical:before { content: "\ea25"; }
-.ez-icon-drag-indicator:before { content: "\ea26"; }
-.ez-icon-edit-file:before { content: "\ea27"; }
-.ez-icon-edit-table:before { content: "\ea28"; }
-.ez-icon-edit-time:before { content: "\ea29"; }
-.ez-icon-edit:before { content: "\ea2a"; }
-.ez-icon-email-inverted:before { content: "\ea2b"; }
-.ez-icon-email:before { content: "\ea2c"; }
-.ez-icon-error-octagon:before { content: "\ea2d"; }
-.ez-icon-expand:before { content: "\ea2e"; }
-.ez-icon-eye-off:before { content: "\ea2f"; }
-.ez-icon-eye:before { content: "\ea30"; }
-.ez-icon-favorite:before { content: "\ea31"; }
-.ez-icon-file-download:before { content: "\ea32"; }
-.ez-icon-file-upload:before { content: "\ea33"; }
-.ez-icon-filter:before { content: "\ea34"; }
-.ez-icon-find-file:before { content: "\ea35"; }
-.ez-icon-find-page:before { content: "\ea36"; }
-.ez-icon-format-color-fill:before { content: "\ea37"; }
-.ez-icon-help-circle-outline:before { content: "\ea38"; }
-.ez-icon-help-inverted:before { content: "\ea39"; }
-.ez-icon-help:before { content: "\ea3a"; }
-.ez-icon-home:before { content: "\ea3b"; }
-.ez-icon-language:before { content: "\ea3c"; }
-.ez-icon-launch:before { content: "\ea3d"; }
-.ez-icon-lightbulb:before { content: "\ea3e"; }
-.ez-icon-list:before { content: "\ea3f"; }
-.ez-icon-loading:before { content: "\ea40"; }
-.ez-icon-lock-outline:before { content: "\ea41"; }
-.ez-icon-lock:before { content: "\ea42"; }
-.ez-icon-menu:before { content: "\ea43"; }
-.ez-icon-minus-circle-inverted:before { content: "\ea44"; }
-.ez-icon-minus:before { content: "\ea45"; }
-.ez-icon-money-off:before { content: "\ea46"; }
-.ez-icon-money:before { content: "\ea47"; }
-.ez-icon-north-west:before { content: "\ea48"; }
-.ez-icon-pause:before { content: "\ea49"; }
-.ez-icon-payments:before { content: "\ea4a"; }
-.ez-icon-play:before { content: "\ea4b"; }
-.ez-icon-plus-circle-inverted:before { content: "\ea4c"; }
-.ez-icon-plus-circle:before { content: "\ea4d"; }
-.ez-icon-plus:before { content: "\ea4e"; }
-.ez-icon-power:before { content: "\ea4f"; }
-.ez-icon-push-pin:before { content: "\ea50"; }
-.ez-icon-restore:before { content: "\ea51"; }
-.ez-icon-return:before { content: "\ea52"; }
-.ez-icon-rotate:before { content: "\ea53"; }
-.ez-icon-save:before { content: "\ea54"; }
-.ez-icon-search:before { content: "\ea55"; }
-.ez-icon-settings-inverted:before { content: "\ea56"; }
-.ez-icon-settings:before { content: "\ea57"; }
-.ez-icon-share:before { content: "\ea58"; }
-.ez-icon-shield:before { content: "\ea59"; }
-.ez-icon-south-east:before { content: "\ea5a"; }
-.ez-icon-success-circle:before { content: "\ea5b"; }
-.ez-icon-sync:before { content: "\ea5c"; }
-.ez-icon-table:before { content: "\ea5d"; }
-.ez-icon-timer-outline:before { content: "\ea5e"; }
-.ez-icon-user-circle:before { content: "\ea5f"; }
-.ez-icon-warning-minus:before { content: "\ea60"; }
-.ez-icon-warning-triangle:before { content: "\ea61"; }
+.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: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-apps:before { content: "\ea0b"; }
+.ez-icon-arrow_back:before { content: "\ea0c"; }
+.ez-icon-arrow_downward:before { content: "\ea0d"; }
+.ez-icon-balance:before { content: "\ea0e"; }
+.ez-icon-bell-inverted:before { content: "\ea0f"; }
+.ez-icon-bell:before { content: "\ea10"; }
+.ez-icon-boleto:before { content: "\ea11"; }
+.ez-icon-business-center:before { content: "\ea12"; }
+.ez-icon-calendar-clock:before { content: "\ea13"; }
+.ez-icon-calendar:before { content: "\ea14"; }
+.ez-icon-cash-remove:before { content: "\ea15"; }
+.ez-icon-check-circle-inverted:before { content: "\ea16"; }
+.ez-icon-check-circle:before { content: "\ea17"; }
+.ez-icon-check:before { content: "\ea18"; }
+.ez-icon-chevron-down:before { content: "\ea19"; }
+.ez-icon-chevron-left:before { content: "\ea1a"; }
+.ez-icon-chevron-right:before { content: "\ea1b"; }
+.ez-icon-chevron-up:before { content: "\ea1c"; }
+.ez-icon-circle--medium:before { content: "\ea1d"; }
+.ez-icon-circle:before { content: "\ea1e"; }
+.ez-icon-cleaning:before { content: "\ea1f"; }
+.ez-icon-clipboard:before { content: "\ea20"; }
+.ez-icon-close:before { content: "\ea21"; }
+.ez-icon-cobrar:before { content: "\ea22"; }
+.ez-icon-configuration:before { content: "\ea23"; }
+.ez-icon-copy:before { content: "\ea24"; }
+.ez-icon-credit_card:before { content: "\ea25"; }
+.ez-icon-crop:before { content: "\ea26"; }
+.ez-icon-custom:before { content: "\ea27"; }
+.ez-icon-delete:before { content: "\ea28"; }
+.ez-icon-description:before { content: "\ea29"; }
+.ez-icon-dot-notification:before { content: "\ea2a"; }
+.ez-icon-dots-horizontal:before { content: "\ea2b"; }
+.ez-icon-dots-vertical:before { content: "\ea2c"; }
+.ez-icon-drag-indicator:before { content: "\ea2d"; }
+.ez-icon-dual-chevron-down:before { content: "\ea2e"; }
+.ez-icon-dual-chevron-up:before { content: "\ea2f"; }
+.ez-icon-edit-file:before { content: "\ea30"; }
+.ez-icon-edit-table:before { content: "\ea31"; }
+.ez-icon-edit-time:before { content: "\ea32"; }
+.ez-icon-edit:before { content: "\ea33"; }
+.ez-icon-email:before { content: "\ea34"; }
+.ez-icon-expand:before { content: "\ea35"; }
+.ez-icon-extrato:before { content: "\ea36"; }
+.ez-icon-eye-off:before { content: "\ea37"; }
+.ez-icon-eye:before { content: "\ea38"; }
+.ez-icon-favorite:before { content: "\ea39"; }
+.ez-icon-file-download:before { content: "\ea3a"; }
+.ez-icon-file-upload:before { content: "\ea3b"; }
+.ez-icon-filter:before { content: "\ea3c"; }
+.ez-icon-find-file:before { content: "\ea3d"; }
+.ez-icon-find-page:before { content: "\ea3e"; }
+.ez-icon-format-color-fill:before { content: "\ea3f"; }
+.ez-icon-graph_bar:before { content: "\ea40"; }
+.ez-icon-handshake:before { content: "\ea41"; }
+.ez-icon-help-inverted:before { content: "\ea42"; }
+.ez-icon-help:before { content: "\ea43"; }
+.ez-icon-home:before { content: "\ea44"; }
+.ez-icon-icons104:before { content: "\ea45"; }
+.ez-icon-language:before { content: "\ea46"; }
+.ez-icon-launch:before { content: "\ea47"; }
+.ez-icon-lightbulb:before { content: "\ea48"; }
+.ez-icon-list:before { content: "\ea49"; }
+.ez-icon-location:before { content: "\ea4a"; }
+.ez-icon-lock-outline:before { content: "\ea4b"; }
+.ez-icon-lock:before { content: "\ea4c"; }
+.ez-icon-menu:before { content: "\ea4d"; }
+.ez-icon-mid:before { content: "\ea4e"; }
+.ez-icon-minus:before { content: "\ea4f"; }
+.ez-icon-money-off:before { content: "\ea50"; }
+.ez-icon-money:before { content: "\ea51"; }
+.ez-icon-more:before { content: "\ea52"; }
+.ez-icon-north-west:before { content: "\ea53"; }
+.ez-icon-number:before { content: "\ea54"; }
+.ez-icon-ordem-ascendente:before { content: "\ea55"; }
+.ez-icon-ordem-descendente:before { content: "\ea56"; }
+.ez-icon-parcelar:before { content: "\ea57"; }
+.ez-icon-pause:before { content: "\ea58"; }
+.ez-icon-payments:before { content: "\ea59"; }
+.ez-icon-play:before { content: "\ea5a"; }
+.ez-icon-plus:before { content: "\ea5b"; }
+.ez-icon-power:before { content: "\ea5c"; }
+.ez-icon-print:before { content: "\ea5d"; }
+.ez-icon-push-pin:before { content: "\ea5e"; }
+.ez-icon-receipt:before { content: "\ea5f"; }
+.ez-icon-restore:before { content: "\ea60"; }
+.ez-icon-return:before { content: "\ea61"; }
+.ez-icon-save:before { content: "\ea62"; }
+.ez-icon-search:before { content: "\ea63"; }
+.ez-icon-settings-inverted:before { content: "\ea64"; }
+.ez-icon-settings:before { content: "\ea65"; }
+.ez-icon-share:before { content: "\ea66"; }
+.ez-icon-shield:before { content: "\ea67"; }
+.ez-icon-south-east:before { content: "\ea68"; }
+.ez-icon-sync:before { content: "\ea69"; }
+.ez-icon-table:before { content: "\ea6a"; }
+.ez-icon-text:before { content: "\ea6b"; }
+.ez-icon-timeline:before { content: "\ea6c"; }
+.ez-icon-timer-outline:before { content: "\ea6d"; }
+.ez-icon-tune:before { content: "\ea6e"; }
+.ez-icon-un-pin:before { content: "\ea6f"; }
+.ez-icon-unfold_less:before { content: "\ea70"; }
+.ez-icon-unfold_more:before { content: "\ea71"; }
+.ez-icon-user-circle:before { content: "\ea72"; }
+.ez-icon-warning-outline:before { content: "\ea73"; }
+.ez-icon-warning_triangle:before { content: "\ea74"; }
+.ez-icon-whatshot:before { content: "\ea75"; }
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS
 */

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

@@ -145,7 +145,15 @@ p {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: calc(100% - 41px);
+  width: 100%;
+}
+
+.group-container .item-content {
+  max-width: calc(100% - 41px);
+}
+
+.items-container .item-content {
+  max-width: calc(100% - 100px);
 }
 
 .draggable-list {

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -0,0 +1,38 @@
+:host {
+  display: grid;
+  grid-template-rows: 0 auto 1fr auto 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ez-modal-container__header{
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.ez-modal-container__content {
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.ez-modal-container__title{
+  display: grid;
+}
+
+.ez-modal-container__close-button{
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+.ez-modal-container__close-icon{
+  --icon--color: var(--title--primary, #2B3A54)
+}
+
+.ez-modal-container__focus-ctrl{
+  height: 0px;
+  background-color: transparent;
+  border: none;
+}

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -0,0 +1,166 @@
+import { Component, h, Host, Prop, Event } from '@stencil/core';
+import ModalAction from './modal-action';
+import ModalButtonStatus from './modal-button-status';
+export class EzModalContainer {
+  cancelIsVisible() {
+    return (this.cancelButtonStatus !== ModalButtonStatus.HIDDEN && this.cancelButtonLabel != undefined);
+  }
+  okIsVisible() {
+    return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
+  }
+  componentDidLoad() {
+    window.requestAnimationFrame(() => {
+      this.ezModalAction.emit(ModalAction.LOAD);
+    });
+  }
+  focusLast(_evt) {
+    this._okButton.setFocus();
+  }
+  focusFirst(_evt) {
+    this._closeButton.focus();
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }),
+      h("div", { class: "ez-modal-container__header ez-align--middle" },
+        h("div", { class: "ez-col ez-align--middle ez-modal-container__title" },
+          h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle),
+          this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined),
+        h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) },
+          h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))),
+      h("div", { class: "ez-modal-container__content ez-margin-top--large" },
+        h("slot", null)),
+      h("div", { class: 'ez-col ez-margin-left--auto' },
+        this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) }) : undefined,
+        this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction.OK) }) : undefined),
+      h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
+  }
+  static get is() { return "ez-modal-container"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["./ez-modal-container.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-modal-container.css"]
+  }; }
+  static get properties() { return {
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "T\u00EDtulo do modal"
+      },
+      "attribute": "modal-title",
+      "reflect": false
+    },
+    "modalSubTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Subt\u00EDtulo (opcional), geralmente usado para orienta\u00E7\u00E3o do usu\u00E1rio"
+      },
+      "attribute": "modal-sub-title",
+      "reflect": false
+    },
+    "cancelButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina o texto do bot\u00E3o de cancelar"
+      },
+      "attribute": "cancel-button-label",
+      "reflect": false
+    },
+    "okButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina o texto do bot\u00E3o de Ok"
+      },
+      "attribute": "ok-button-label",
+      "reflect": false
+    },
+    "cancelButtonStatus": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Varia\u00E7\u00E3o de estado do bot\u00E3o de cancelar: [HIDDEN|ENABLED|DISABLED]"
+      },
+      "attribute": "cancel-button-status",
+      "reflect": false
+    },
+    "okButtonStatus": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Varia\u00E7\u00E3o de estado do bot\u00E3o de ok: [HIDDEN|ENABLED|DISABLED]"
+      },
+      "attribute": "ok-button-status",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezModalAction",
+      "name": "ezModalAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Representa a intera\u00E7\u00E3o com o usu\u00E1rio.\nOK - Quando o bot\u00E3o \u00E9 acionado\nCANCEL - Quando o bot\u00E3o de cancelar \u00E9 acionado\nCLOSE - Quando o bot\u00E3o de fechar \u00E9 acionado.\nLOAD - Quando o modal \u00E9 carregado (eventualmente pode ser usado para dar foco a um elemento espec\u00EDfico)"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/ez-modal-container/index.js

@@ -0,0 +1,2 @@
+export { default as ModalAction } from './modal-action';
+export { default as ModalButtonStatus } from './modal-button-status';

package/dist/collection/components/ez-modal-container/modal-action.js

@@ -0,0 +1,8 @@
+var ModalAction;
+(function (ModalAction) {
+  ModalAction["CLOSE"] = "CLOSE";
+  ModalAction["OK"] = "OK";
+  ModalAction["CANCEL"] = "CANCEL";
+  ModalAction["LOAD"] = "LOAD";
+})(ModalAction || (ModalAction = {}));
+export default ModalAction;

package/dist/collection/components/ez-modal-container/modal-button-status.js

@@ -0,0 +1,7 @@
+var ModalButtonStatus;
+(function (ModalButtonStatus) {
+  ModalButtonStatus["ENABLED"] = "ENABLED";
+  ModalButtonStatus["DISABLED"] = "DISABLED";
+  ModalButtonStatus["HIDDEN"] = "HIDDEN";
+})(ModalButtonStatus || (ModalButtonStatus = {}));
+export default ModalButtonStatus;

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

@@ -8,7 +8,7 @@
   /*@doc Define a cor de fundo do popover.*/
   --ez-popover__box--background-color: var(--background--xlight, #fff);
   /*@doc Define a camada de visibilidade do popover.*/
-  --ez-popover__box--z-index: var(--more-visible, 1);
+  --ez-popover__box--z-index: var(--more-visible, 2);
 
   /***************
      host style  

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

@@ -70,6 +70,10 @@
   padding: var(--ez-popup__container--padding)
 }
 
+.popup__container--auto {
+  height: auto;
+}
+
 .popup__content {
   box-sizing: border-box;
   max-height: 100%;