@sankhyalabs/ezui 1.1.115 → 1.1.118

package/dist/cjs/{ApplicationUtils-c8f07135.js → ApplicationUtils-93721afc.js}

@@ -26,10 +26,7 @@ class ApplicationUtils {
       toast = document.createElement("ez-toast");
       window.document.body.appendChild(toast);
     }
-    toast.canClose = options.canClose;
-    toast.message = message;
-    toast.fadeTime = 4000;
-    toast.show();
+    toast.show(message, 4000, false, options.canClose);
   }
 }
 ApplicationUtils.defaultMessageOptions = {

package/dist/cjs/ez-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-88286449.js');
 
-const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--ez-button--border);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;border:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--text--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:hover{background-color:var(--ez-button--hover--background-color)}button:focus{outline:none;outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
 
 let EzButton = class {
   constructor(hostRef) {

package/dist/cjs/ez-combo-box.cjs.entry.js

@@ -32,6 +32,10 @@ let EzComboBox = class {
      * Permite exibir a mensagem de erro.
      */
     this.canShowError = true;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
+     */
+    this.mode = "regular";
   }
   internalUpdate() {
     if (this._inputElement) {
@@ -91,7 +95,7 @@ let EzComboBox = class {
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = (this.errorMessage || !this.canShowError) ? "0px" : "-17px";
+    const top = (this.errorMessage || !this.canShowError || this.mode == "slim") ? "0px" : "-19px";
     this._floatingID = core.FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
     window.requestAnimationFrame(() => {
       this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
@@ -268,7 +272,7 @@ let EzComboBox = class {
     this.cancelPreselection();
   }
   render() {
-    return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage }, this.searchMode ?
+    return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, this.searchMode ?
       index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
       :
         index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -16,6 +16,10 @@ let EzDateInput = class {
      * 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;
@@ -56,7 +60,7 @@ let EzDateInput = class {
     //FIXME: Provavelmente isso fará com que o popup abra em uma 
     //posição errada no futuro. Preferi fazer simples no começo,
     //porque não quis onerar o text input com essa funcionalidade...
-    const top = this._textInput.errorMessage ? 0 : -17;
+    const top = this._textInput.errorMessage || this.mode == "slim" ? 0 : -19;
     this._calendar.fitVertical(top, this._elem.clientHeight);
   }
   hideCalendar() {
@@ -88,7 +92,7 @@ let EzDateInput = class {
     return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
         if (event.key === "H" || event.key === "h")
           this.changeValue(new Date());
-      }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+      }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-date-time-input.cjs.entry.js

@@ -20,6 +20,10 @@ let EzDateTimeInput = class {
   * Exibe ou não os segundos no input
   */
     this.showSeconds = false;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
+     */
+    this.mode = "regular";
   }
   setLabel() {
     this._textInput.label = this.label;
@@ -92,7 +96,7 @@ let EzDateTimeInput = class {
     }
   }
   showCalendar() {
-    const top = this._textInput.errorMessage ? 0 : -17;
+    const top = this._textInput.errorMessage || this.mode == "slim" ? 0 : -19;
     this._calendar.fitVertical(top, this._elem.clientHeight);
     this._calendar.style.visibility = 'inherit';
   }
@@ -131,7 +135,7 @@ let EzDateTimeInput = class {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, onFocus: () => this.onFocused(), onClick: () => this.onClicked() }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onFocus: () => this.onFocused(), onClick: () => this.onClicked() }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-filter-input.cjs.entry.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88286449.js');
+const CSSVarsUtils = require('./CSSVarsUtils-8fbdf2e0.js');
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+let EzFilterInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    /**
+     * 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() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  setErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  applyValueToInput() {
+    if (this._textInput) {
+      this._textInput.value = this.value;
+    }
+  }
+  /**
+   * Realiza o foco no componente de input
+   */
+  async setFocus() {
+    this._textInput.setFocus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  changeValue(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.ezChange.emit(this.value);
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  render() {
+    return (index.h("ez-text-input", { ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["setLabel"],
+    "errorMessage": ["setErrorMessage"],
+    "value": ["applyValueToInput"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+exports.ez_filter_input = EzFilterInput;

package/dist/cjs/ez-form.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-88286449.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-c8f07135.js');
+const ApplicationUtils = require('./ApplicationUtils-93721afc.js');
 
 const buildTextArea = ({ name, label, readOnly }) => {
   return (index.h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },

package/dist/cjs/ez-number-input.cjs.entry.js

@@ -16,6 +16,10 @@ let EzNumberInput = class {
      * 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;
@@ -72,7 +76,7 @@ let EzNumberInput = class {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (index.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 (index.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 }));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-search.cjs.entry.js

@@ -13,21 +13,25 @@ let EzSearch = class {
     this.ezChange = index.createEvent(this, "ezChange", 7);
     this.showPopup = index.createEvent(this, "showPopup", 7);
     /**
-     * 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) {
@@ -35,14 +39,14 @@ let EzSearch = class {
     }
   }
   /**
-   * 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();
   }
@@ -55,7 +59,7 @@ let EzSearch = class {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    return (index.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 (index.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 }));
   }
   ;
   get _elem() { return index.getElement(this); }

package/dist/cjs/ez-text-area.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-88286449.js');
 
-const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--large, 500);--text-area--color:var(--title--primary, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;margin-top:calc(var(--space--medium, 12px) + 4px);width:100%;font-weight:var(--text-weight--large, 600);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);padding:0;background:none}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);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);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color)}";
+const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;margin-top:calc(var(--space--medium, 12px) + 4px);width:100%;font-weight:var(--text-weight--large, 600);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);padding:0;background:none}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);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);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color)}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{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{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{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{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{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{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-ms-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color)}";
 
 let EzTextArea = class {
   constructor(hostRef) {
@@ -15,19 +15,24 @@ let EzTextArea = class {
      */
     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() {
@@ -36,8 +41,18 @@ let EzTextArea = class {
     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()) {
@@ -97,16 +112,20 @@ let EzTextArea = class {
   componentDidLoad() {
     this.showError();
     this.adjustFloatingLabel();
+    this.adjustRowsForMode();
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
+    return (index.h(index.Host, null, index.h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
       index.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, index.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 })), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+      : null, index.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" &&
+      index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "errorMessage": ["showError"],
-    "value": ["updateInputValue"]
+    "value": ["updateInputValue"],
+    "mode": ["adjustRowsForMode"],
+    "rows": ["adjustRowsValue"]
   }; }
 };
 EzTextArea.style = ezTextAreaCss;

package/dist/cjs/ez-text-input.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-88286449.js');
 const core = require('@sankhyalabs/core');
 
-const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #000);--ez-text-input__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input.text--right{text-align:right}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);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);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}";
+const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--height--slim:32px;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #000);--ez-text-input__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);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}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);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);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input--slim::-webkit-input-placeholder{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{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{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{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{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{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled:-moz-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled::-moz-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled:-ms-input-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}";
 
 let EzTextInput = class {
   constructor(hostRef) {
@@ -19,16 +19,21 @@ let EzTextInput = class {
      * 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() {
@@ -133,7 +138,7 @@ let EzTextInput = class {
       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)";
@@ -184,9 +189,9 @@ let EzTextInput = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
+    return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       index.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, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError &&
+      : null, index.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(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return index.getElement(this); }

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -20,6 +20,10 @@ let EzTimeInput = class {
     * 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) {
@@ -81,7 +85,8 @@ let EzTimeInput = class {
     }
   }
   clearField() {
-    this.viewValue = this.value = undefined;
+    this.viewValue = '';
+    this.value = undefined;
   }
   handleChange() {
     this.viewValue = this._inputElem.value;
@@ -104,7 +109,7 @@ let EzTimeInput = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.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 }, index.h("ez-icon", { slot: "leftIcon", href: AssetsUtils.getSpritePath("timer-outline") }))));
+    return (index.h(index.Host, null, index.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 }, index.h("ez-icon", { slot: "leftIcon", href: AssetsUtils.getSpritePath("timer-outline") }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return index.getElement(this); }

package/dist/cjs/ez-toast.cjs.entry.js

@@ -4,11 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-88286449.js');
 
-const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container-z-index:var(--more-visible, 2);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--ez-toast__container-z-index);left:100px;width:280px;box-sizing:border-box;background-color:var(--ez-toast__container--background-color);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--ez-toast__icon--padding-left);width:80%}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--oppened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
+const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container-z-index:var(--more-visible, 2);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--ez-toast__container-z-index);left:100px;width:280px;box-sizing:border-box;background-color:var(--ez-toast__container--background-color);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--ez-toast__icon--padding-left);width:80%}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
 
 let EzToast = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this._nextMessages = [];
+    this._currentMessageInfo = { message: "", fadeTime: undefined, useIcon: undefined };
+    this._toastOpenedClass = "toast__container--opened";
+    this._lastTimeOut = undefined;
     this._lang = "pt"; // Controla qual idioma será usado para definir a regras de hifenização.
     /**
     * Controla o tempo de exibição do componente em milissegundos.
@@ -26,18 +30,57 @@ let EzToast = class {
   /**
   * Exibe o componente na tela.
   */
-  async show() {
-    this.container.classList.add("toast__container--oppened");
+  async show(message, fadeTime, useIcon, canClose) {
+    return new Promise(resolve => {
+      var _a;
+      if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains(this._toastOpenedClass)) {
+        this._nextMessages.push({ message, fadeTime, useIcon, canClose, callBack: resolve });
+      }
+      else {
+        this._currentMessageInfo.message = message || this.message;
+        this._currentMessageInfo.fadeTime = fadeTime || this.fadeTime;
+        this._currentMessageInfo.useIcon = useIcon || this.useIcon;
+        this._currentMessageInfo.callBack = resolve;
+        if (canClose) {
+          this._currentMessageInfo.canClose = this.canClose;
+        }
+        index.forceUpdate(this);
+        this.displayToast();
+        this._lastTimeOut = setTimeout(() => {
+          this.hideToast();
+        }, this._currentMessageInfo.fadeTime + 400);
+      }
+    });
+  }
+  hideToast() {
+    this.makeToastInvisible();
+    if (this._nextMessages.length > 0) {
+      if (this._currentMessageInfo.callBack) {
+        this._currentMessageInfo.callBack(true);
+      }
+      setTimeout(() => {
+        let newMessageInfo = this._nextMessages.shift();
+        this.show(newMessageInfo.message, newMessageInfo.fadeTime, newMessageInfo.useIcon);
+      });
+    }
+    if (this._currentMessageInfo.callBack) {
+      this._currentMessageInfo.callBack(true);
+    }
+  }
+  makeToastInvisible() {
+    this.container.classList.remove(this._toastOpenedClass);
+    this.container.style.animation = `none`;
+    if (this._lastTimeOut)
+      clearTimeout(this._lastTimeOut);
+  }
+  displayToast() {
+    this.container.classList.add(this._toastOpenedClass);
     this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
-    setTimeout(() => {
-      this.container.classList.remove("toast__container--oppened");
-      this.container.style.animation = `none`;
-    }, this.fadeTime + 400);
   }
   render() {
-    return (index.h("div", { ref: (el) => this.container = el, class: "toast__container" }, this.useIcon &&
-      index.h("slot", { name: "icon" }), index.h("div", { lang: this._lang, class: this.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this.message, innerHTML: this.message }), this.canClose &&
-      index.h("button", { class: "btn-close", onClick: () => { this.container.classList.remove("toast__container--oppened"); this.container.style.animation = `none`; } })));
+    return (index.h(index.Host, null, index.h("div", { ref: (el) => this.container = el, class: "toast__container" }, this._currentMessageInfo.useIcon &&
+      index.h("slot", { name: "icon" }), index.h("div", { lang: this._lang, class: this._currentMessageInfo.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this._currentMessageInfo.message, innerHTML: this._currentMessageInfo.message }), this._currentMessageInfo.canClose &&
+      index.h("button", { class: "btn-close", onClick: () => { this.hideToast(); } }))));
   }
 };
 EzToast.style = ezToastCss;

package/dist/cjs/ez-upload.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-88286449.js');
-const ApplicationUtils = require('./ApplicationUtils-c8f07135.js');
+const ApplicationUtils = require('./ApplicationUtils-93721afc.js');
 
 class RemoteFile {
   constructor(file) {