@sankhyalabs/ezui 1.1.115 → 1.1.116

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

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

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

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

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

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

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

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

package/dist/collection/components/test-du/test-du.js

@@ -7,7 +7,8 @@ export class TestDu {
   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 = {

package/dist/custom-elements/index.d.ts

@@ -62,6 +62,12 @@ export const EzDialog: {
   new (): EzDialog;
 };
 
+interface EzFilterInput extends Components.EzFilterInput, HTMLElement {}
+export const EzFilterInput: {
+  prototype: EzFilterInput;
+  new (): EzFilterInput;
+};
+
 interface EzForm extends Components.EzForm, HTMLElement {}
 export const EzForm: {
   prototype: EzForm;