@sankhyalabs/ezui 1.1.113 → 1.1.116

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

@@ -8,11 +8,14 @@ import { SortMode, UserInterface } from "@sankhyalabs/core/dist/dataunit/metadat
 export default class AgGridController {
   constructor(enterprise) {
     this._menuItems = [];
+    this._idAttribName = "__record__id__";
     this._enterprise = enterprise;
   }
   getSort() {
     const sortedColumns = [];
-    this._gridOptions.api.getSortModel().forEach(({ colId, sort }) => {
+    this._gridOptions.columnApi.getColumnState()
+      .sort((colA, colB) => colA.sortIndex - colB.sortIndex)
+      .forEach(({ colId, sort }) => {
       if (sort) {
         const field = this._dataUnit.getField(colId);
         const mode = sort === "asc" ? SortMode.ASC : SortMode.DESC;
@@ -37,10 +40,9 @@ export default class AgGridController {
       this._gridOptions = {
         localeText: gridTerms,
         rowModelType: "serverSide",
-        serverSideStoreType: "partial",
         rowSelection: this._multipleSelection ? "multiple" : "single",
         serverSideDatasource: new DataSource(this._dataUnit, this._serverURL),
-        getRowNodeId: (params) => params.__record__id__,
+        getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
         getMainMenuItems: (params) => {
           const column = params.column;
           const items = [column.isPinned() ? "clearPinned" : "pinLeft", "separator"];
@@ -50,14 +52,9 @@ export default class AgGridController {
           }));
           return items;
         },
-        onViewportChanged: (evt) => {
-          if (this._gridOptions && this._gridOptions.api && evt && evt.api) {
-            if (this._dataUnit.getSelection()) {
-              this._dataUnit.getSelection().forEach(id => {
-                let node = evt.api.getRowNode(id);
-                node.setSelected(true);
-              });
-            }
+        onViewportChanged: () => {
+          if (this._dataUnit) {
+            this.selectRows(this._dataUnit.getSelection());
           }
         }
       };
@@ -98,6 +95,58 @@ export default class AgGridController {
     }
     this._gridOptions.api.setRowData(data);
   }
+  addRows(rows) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    this._gridOptions.api.applyServerSideTransaction({ add: rows });
+  }
+  selectRows(rowIds) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    if (rowIds && rowIds.length > 0) {
+      rowIds.forEach(rowId => {
+        const row = this._gridOptions.api.getRowNode(rowId);
+        if (row) {
+          row.setSelected(true);
+        }
+      });
+    }
+  }
+  removeRows(rowIds) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    this._gridOptions.api.applyServerSideTransaction({ remove: rowIds });
+  }
+  changeValues(changes, rowIds) {
+    if (this._grid === undefined) {
+      throw new Error("Erro interno: Grid ainda não inicializado.");
+    }
+    if (changes) {
+      let rowNodes;
+      if (rowIds) {
+        rowNodes = [];
+        rowIds.forEach(id => {
+          const rowNode = this._gridOptions.api.getRowNode(id);
+          if (rowNode) {
+            rowNodes.push(rowNode);
+          }
+        });
+      }
+      else {
+        rowNodes = this._gridOptions.api.getSelectedNodes();
+      }
+      rowNodes.forEach(r => {
+        const data = r.data;
+        Object.entries(changes).forEach(([field, value]) => {
+          data[field] = value;
+        });
+        r.setData(data);
+      });
+    }
+  }
   refresh() {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -7,6 +7,10 @@ export class EzNumberInput {
      * Deixa o campo disponível ou não para uso.
      */
     this.enabled = true;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
+     */
+    this.mode = "regular";
   }
   setLabel() {
     this._textInput.label = this.label;
@@ -63,7 +67,7 @@ export class EzNumberInput {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage }));
+    return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -176,6 +180,24 @@ export class EzNumberInput {
       },
       "attribute": "pretty-precision",
       "reflect": false
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
     }
   }; }
   static get events() { return [{

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

@@ -3,21 +3,25 @@ import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzSearch {
   constructor() {
     /**
-     * Deixa o campo disponível ou não.
-     */
+      * Deixa o campo disponível ou não.
+      */
     this.enabled = true;
     /**
-   * Ajusta a opção de mostrar o "value" ao selecionar uma opção.
-   */
+      * Ajusta a opção de mostrar o "value" ao selecionar uma opção.
+      */
     this.showSelectedValue = true;
     /**
-     * Ajusta a opção de mostrar o "value" para cada opção.
-     */
+      * Ajusta a opção de mostrar o "value" para cada opção.
+      */
     this.showOptionValue = true;
     /**
-    * Remove a opção vazia da lista de opções
-    */
+      * Remove a opção vazia da lista de opções
+      */
     this.suppressEmptyOption = false;
+    /**
+      * Define o modo do tamanho do campo; opções: slim e regular.
+      */
+    this.mode = "regular";
   }
   updateValue() {
     if (this._comboElement) {
@@ -25,14 +29,14 @@ export class EzSearch {
     }
   }
   /**
-   * Realiza o foco no componente de pesquisa
-   */
+    * Realiza o foco no componente de pesquisa
+    */
   async setFocus() {
     this._comboElement.setFocus();
   }
   /**
-   * Remove o foco no componente de pesquisa
-   */
+    * Remove o foco no componente de pesquisa
+    */
   async setBlur() {
     this._comboElement.setBlur();
   }
@@ -45,7 +49,7 @@ export class EzSearch {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption }));
+    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -203,6 +207,24 @@ export class EzSearch {
       "attribute": "suppress-empty-option",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
     }
   }; }
   static get events() { return [{

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -11,7 +11,7 @@
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
   --text-area--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label do componente.*/
-  --text-area--font-weight: var(--text-weight--large, 500);
+  --text-area--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
   --text-area--color: var(--title--primary, #000);
 
@@ -162,4 +162,74 @@ textarea:disabled {
 
 .textarea__label--disabled {
   color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim {
+  /*public*/
+  margin-top: var(--space--small, 6px);
+}
+
+.textarea--slim::-webkit-input-placeholder { /* Edge */
+  /*public*/
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+}
+
+.textarea--slim:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+}
+
+.textarea--slim::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+}
+
+.textarea--slim:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  /*public*/
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+}
+
+.textarea--slim::placeholder {
+  /*public*/
+  font-family: var(--text-area--font-family);
+  font-size: var(--text-area--font-size);
+  font-weight: var(--text-area--font-weight);
+  color: var(--text-area--color);
+}
+
+.textarea--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled::placeholder {
+  /*public*/
+  color: var(--text-area__input--disabled--color);
 }

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -6,19 +6,24 @@ export class EzTextArea {
      */
     this.enabled = true;
     /**
-     * Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
+     * Permite exibir a mensagem de erro.
      */
-    this.rows = 4;
+    this.canShowError = true;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
+     */
+    this.mode = "regular";
   }
   showError() {
+    var _a, _b;
     const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
     if (hasError) {
       this._container.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
+      (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add('hasError');
     }
     else {
       this._container.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
+      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove('hasError');
     }
   }
   updateInputValue() {
@@ -27,8 +32,18 @@ export class EzTextArea {
     this.adjustFloatingLabel();
     this.ezChange.emit(this.value);
   }
+  adjustRowsForMode() {
+    if (this._initialRows == undefined) {
+      this._initialRows = this.rows > 0 ? this.rows : undefined;
+    }
+    this.rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+  }
+  adjustRowsValue() {
+    this.rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    this._initialRows = this.rows;
+  }
   adjustFloatingLabel() {
-    if (this.label) {
+    if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
       const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
       if (hasValue || this.isFocused()) {
@@ -88,15 +103,17 @@ export class EzTextArea {
   componentDidLoad() {
     this.showError();
     this.adjustFloatingLabel();
+    this.adjustRowsForMode();
   }
   render() {
     return (h(Host, null,
       h("div", { class: "textarea", ref: (el) => this._container = el },
-        this.label ?
+        this.label && this.mode != "slim" ?
           h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
           : null,
-        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+        h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode == "slim" ? "textarea--slim" : "", placeholder: this.mode == "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
+      this.canShowError && this.mode != "slim" &&
+        h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   static get is() { return "ez-text-area"; }
   static get encapsulation() { return "shadow"; }
@@ -208,8 +225,43 @@ export class EzTextArea {
         "text": "Ajusta o n\u00FAmero de linhas e consequentemente o height do textarea. Valor default: 4"
       },
       "attribute": "rows",
+      "reflect": true
+    },
+    "canShowError": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Permite exibir a mensagem de erro."
+      },
+      "attribute": "can-show-error",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
       "reflect": true,
-      "defaultValue": "4"
+      "defaultValue": "\"regular\""
     }
   }; }
   static get events() { return [{
@@ -269,5 +321,11 @@ export class EzTextArea {
     }, {
       "propName": "value",
       "methodName": "updateInputValue"
+    }, {
+      "propName": "mode",
+      "methodName": "adjustRowsForMode"
+    }, {
+      "propName": "rows",
+      "methodName": "adjustRowsValue"
     }]; }
 }

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -6,6 +6,8 @@
   --ez-text-input--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
   --ez-text-input__icon--width: 48px;
+  /*@doc Define a altura do componente em modo "slim".*/
+  --ez-text-input--height--slim: 32px;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
@@ -110,6 +112,10 @@ input.hasError {
   border-color: var(--ez-text-input__input--error--border-color);
 }
 
+input:disabled.hasError {
+  color: var(--ez-text-input__input--disabled--color);
+}
+
 input.text--right {
   text-align: right;
 }
@@ -193,4 +199,76 @@ input.text--right {
 .input--with--label {
   /*public*/
   padding-bottom: 0;
+}
+
+.input--slim {
+  /*public*/
+  padding-top: var(--space--small, 3px);
+  padding-bottom: var(--space--small, 3px);
+  height: var(--ez-text-input--height--slim);
+}
+
+.input--slim::-webkit-input-placeholder { /* Edge */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim::placeholder {
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled::placeholder {
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
 }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -10,16 +10,21 @@ export class EzTextInput {
      * Permite exibir a mensagem de erro.
      */
     this.canShowError = true;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
+     */
+    this.mode = "regular";
   }
   showError() {
+    var _a, _b;
     const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
     if (hasError) {
       this._inputElem.classList.add("hasError");
-      this._messageBoxElem.classList.add("hasError");
+      (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
     }
     else {
       this._inputElem.classList.remove("hasError");
-      this._messageBoxElem.classList.remove("hasError");
+      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
     }
   }
   prepareMask() {
@@ -124,7 +129,7 @@ export class EzTextInput {
       content.style.overflow = "hidden";
       content.style.top = "0px";
       content.style.width = "var(--ez-text-input__icon--width)";
-      content.style.height = "var(--ez-text-input--height)";
+      content.style.height = this.mode != "slim" ? "var(--ez-text-input--height)" : "var(--ez-text-input--height--slim)";
       if (slot.name == "leftIcon") {
         content.style.left = "0px";
         content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
@@ -177,12 +182,12 @@ export class EzTextInput {
   render() {
     return (h(Host, null,
       h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      this.label ?
+      this.label && this.mode != "slim" ?
         h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
         : null,
-      h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
+      h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode == "slim" ? "input--slim" : "", placeholder: this.mode == "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
       h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      this.canShowError &&
+      this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   static get is() { return "ez-text-input"; }
@@ -331,6 +336,24 @@ export class EzTextInput {
       },
       "attribute": "restrict",
       "reflect": false
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
     }
   }; }
   static get events() { return [{

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -12,6 +12,10 @@ export class EzTimeInput {
     * Define se o componente irá ou não considerar os segundos
     */
     this.showSeconds = false;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
+     */
+    this.mode = "regular";
   }
   prepareMask() {
     if (this.showSeconds) {
@@ -73,7 +77,8 @@ export class EzTimeInput {
     }
   }
   clearField() {
-    this.viewValue = this.value = undefined;
+    this.viewValue = '';
+    this.value = undefined;
   }
   handleChange() {
     this.viewValue = this._inputElem.value;
@@ -97,7 +102,7 @@ export class EzTimeInput {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage },
+      h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage, mode: this.mode },
         h("ez-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
   }
   static get is() { return "ez-time-input"; }
@@ -213,6 +218,24 @@ export class EzTimeInput {
       "attribute": "show-seconds",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
     }
   }; }
   static get methods() { return {

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

@@ -37,7 +37,7 @@
   font-size: 14px;
   width: 90%;
   overflow: hidden;
-  word-break: break-all;
+  hyphens: auto;
   height: auto;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;