@sankhyalabs/ezui 1.1.115 → 1.1.116

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

@@ -7,6 +7,10 @@ export class EzDateInput {
      * 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;
@@ -47,7 +51,7 @@ export class EzDateInput {
     //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() {
@@ -78,7 +82,7 @@ export class EzDateInput {
   render() {
     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 },
+          this.changeValue(new Date()); }, 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 })));
   }
@@ -161,6 +165,24 @@ export class EzDateInput {
       },
       "attribute": "error-message",
       "reflect": true
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
     }
   }; }
   static get events() { return [{

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

@@ -11,6 +11,10 @@ export class EzDateTimeInput {
   * 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;
@@ -83,7 +87,7 @@ export class EzDateTimeInput {
     }
   }
   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';
   }
@@ -123,7 +127,7 @@ export class EzDateTimeInput {
   }
   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("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 })));
   }
@@ -224,6 +228,24 @@ export class EzDateTimeInput {
       "attribute": "show-seconds",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
     }
   }; }
   static get events() { return [{

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,248 @@
+import { Component, h, Event, Prop, Watch, Element, Method } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
+export class EzFilterInput {
+  constructor() {
+    /**
+     * 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" })));
+  }
+  static get is() { return "ez-filter-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-filter-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-filter-input.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "T\u00EDtulo do campo"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "O valor informado pelo usu\u00E1rio"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para uso."
+      },
+      "attribute": "enabled",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o componente em modo \"carregando\"."
+      },
+      "attribute": "loading",
+      "reflect": true
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
+      },
+      "attribute": "error-message",
+      "reflect": true
+    },
+    "restrict": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Restringe o que o usu\u00E1rio pode digitar. Cada caractere digitado ser\u00E1 testado\ne deve estar contido nessa string ou ser\u00E1 descartado."
+      },
+      "attribute": "restrict",
+      "reflect": false
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo do tamanho do campo; op\u00E7\u00F5es: slim e regular."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Realiza o foco no componente de input",
+        "tags": []
+      }
+    },
+    "setBlur": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Remove o foco no componente de input",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "_elem"; }
+  static get watchers() { return [{
+      "propName": "label",
+      "methodName": "setLabel"
+    }, {
+      "propName": "errorMessage",
+      "methodName": "setErrorMessage"
+    }, {
+      "propName": "value",
+      "methodName": "applyValueToInput"
+    }]; }
+}

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

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

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

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

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

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