@sankhyalabs/ezui 1.1.115 → 1.1.116

package/dist/custom-elements/index.js

@@ -493,6 +493,10 @@ let EzComboBox$1 = class extends HTMLElement$1 {
      * 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) {
@@ -552,7 +556,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     //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 = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
     window.requestAnimationFrame(() => {
       this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
@@ -729,7 +733,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     this.cancelPreselection();
   }
   render() {
-    return (h(Host, null, 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 (h(Host, null, 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 ?
       h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
       :
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
@@ -753,6 +757,10 @@ let EzDateInput$1 = class extends HTMLElement$1 {
      * 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;
@@ -793,7 +801,7 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     //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() {
@@ -825,7 +833,7 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     return (h(Host, null, 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 }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), 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 }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -852,6 +860,10 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
   * 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;
@@ -924,7 +936,7 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   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';
   }
@@ -963,7 +975,7 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h(Host, null, 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() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), 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 (h(Host, null, 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() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), 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 this; }
   static get watchers() { return {
@@ -1058,6 +1070,73 @@ let EzDialog$1 = class extends HTMLElement$1 {
   static get style() { return ezDialogCss; }
 };
 
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+let EzFilterInput$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = 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.applyVarsTextInput(this._elem, this._textInput);
+  }
+  render() {
+    return (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 }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return this; }
+  static get watchers() { return {
+    "label": ["setLabel"],
+    "errorMessage": ["setErrorMessage"],
+    "value": ["applyValueToInput"]
+  }; }
+  static get style() { return ezFilterInputCss; }
+};
+
 const buildTextArea = ({ name, label, readOnly }) => {
   return (h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
@@ -113127,6 +113206,10 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
      * 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;
@@ -113183,7 +113266,7 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     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 }));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -113361,21 +113444,25 @@ let EzSearch$1 = class extends HTMLElement$1 {
     this.ezChange = createEvent(this, "ezChange", 7);
     this.showPopup = 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) {
@@ -113383,14 +113470,14 @@ let EzSearch$1 = class extends HTMLElement$1 {
     }
   }
   /**
-   * 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();
   }
@@ -113403,7 +113490,7 @@ let EzSearch$1 = class extends HTMLElement$1 {
     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 }));
   }
   ;
   get _elem() { return this; }
@@ -113606,7 +113693,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
   static get style() { return ezTabselectorCss; }
 };
 
-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$1 = class extends HTMLElement$1 {
   constructor() {
@@ -113619,19 +113706,24 @@ let EzTextArea$1 = class extends HTMLElement$1 {
      */
     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.canShowError = true;
+    /**
+     * Define o modo do tamanho do campo; opções: slim e regular.
      */
-    this.rows = 4;
+    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() {
@@ -113640,8 +113732,18 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     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()) {
@@ -113701,21 +113803,25 @@ let EzTextArea$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     this.showError();
     this.adjustFloatingLabel();
+    this.adjustRowsForMode();
   }
   render() {
-    return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
+    return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, 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)));
+      : null, 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)));
   }
   get _hostElement() { return this; }
   static get watchers() { return {
     "errorMessage": ["showError"],
-    "value": ["updateInputValue"]
+    "value": ["updateInputValue"],
+    "mode": ["adjustRowsForMode"],
+    "rows": ["adjustRowsValue"]
   }; }
   static get style() { return ezTextAreaCss; }
 };
 
-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$1 = class extends HTMLElement$1 {
   constructor() {
@@ -113731,16 +113837,21 @@ let EzTextInput$1 = class extends HTMLElement$1 {
      * 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() {
@@ -113845,7 +113956,7 @@ let EzTextInput$1 = class extends HTMLElement$1 {
       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)";
@@ -113896,9 +114007,9 @@ let EzTextInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
+    return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), 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("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError &&
+      : null, 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.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -113944,6 +114055,10 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     * 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) {
@@ -114005,7 +114120,8 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   clearField() {
-    this.viewValue = this.value = undefined;
+    this.viewValue = '';
+    this.value = undefined;
   }
   handleChange() {
     this.viewValue = this._inputElem.value;
@@ -114028,7 +114144,7 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   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-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
+    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, mode: this.mode }, h("ez-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return this; }
@@ -114708,7 +114824,8 @@ let TestDu$1 = class extends HTMLElement$1 {
   private _ezDateTimeInput// : HTMLEzDateTimeInput;
   private _ezNumberInput// : HTMLEzNumberInput
   private _ezSearch// : HTMLEzSearch
-  private _ezUpload// : HTMLEzUpload*/
+  private _ezUpload// : HTMLEzUpload
+  private _ezFilterInput// : HTMLEzFilterInput*/
   componentWillLoad() {
     this.dataUnit = new DataUnit("testes_com_formulario");
     this.dataUnit.metadata = {
@@ -114770,24 +114887,25 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"]}]);
-const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"_preSelection":[32],"_visibleOptions":[32]}]);
-const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
-const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32]}]);
+const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513]}]);
+const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
+const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"loading":[516],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"dataUnit":[1040],"config":[16]}]);
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"pageSize":[2,"page-size"],"serverUrl":[1,"server-url"],"dataUnit":[16],"_navigationHasPrevious":[32],"_navigationHasNext":[32],"_navigationFirstRow":[32],"_navigationLastRow":[32],"_navigationTotalRows":[32],"_popUpVisible":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]);
-const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"]}]);
+const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
-const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"]}]);
+const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}]);
-const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538]}]);
-const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1]}]);
-const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]);
+const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513]}]);
+const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513]}]);
+const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const GridConfig = /*@__PURE__*/proxyCustomElement(GridConfig$1, [2,"grid-config",{"selectedTab":[1025,"selected-tab"],"columns":[1040]}]);
@@ -114806,6 +114924,7 @@ const defineCustomElements = (opts) => {
   EzDateInput,
   EzDateTimeInput,
   EzDialog,
+  EzFilterInput,
   EzForm,
   EzGrid,
   EzIcon,
@@ -114833,4 +114952,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionChip, EzApplication, EzButton, EzCalendar, EzCheck, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzForm, EzGrid, EzIcon, EzLabelChip, EzList, EzModal, EzNumberInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, GridConfig, SelectBox, TestDu, defineCustomElements };
+export { EzActionChip, EzApplication, EzButton, EzCalendar, EzCheck, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzFilterInput, EzForm, EzGrid, EzIcon, EzLabelChip, EzList, EzModal, EzNumberInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, GridConfig, SelectBox, TestDu, defineCustomElements };

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

@@ -28,6 +28,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) {
@@ -87,7 +91,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 = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
     window.requestAnimationFrame(() => {
       this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
@@ -264,7 +268,7 @@ let EzComboBox = class {
     this.cancelPreselection();
   }
   render() {
-    return (h(Host, null, 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 (h(Host, null, 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 ?
       h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
       :
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));

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

@@ -12,6 +12,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;
@@ -52,7 +56,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() {
@@ -84,7 +88,7 @@ let EzDateInput = class {
     return (h(Host, null, 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 }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), 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 }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {

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

@@ -16,6 +16,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;
@@ -88,7 +92,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';
   }
@@ -127,7 +131,7 @@ let EzDateTimeInput = class {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    return (h(Host, null, 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() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), 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 (h(Host, null, 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() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), 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 getElement(this); }
   static get watchers() { return {