@sankhyalabs/ezui 5.22.0-dev.7 → 5.22.0-dev.71

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

@@ -8,6 +8,10 @@
   --ez-text-input__icon--width: 48px;
   /*@doc Define a altura do componente em modo "slim".*/
   --ez-text-input--height--slim: 32px;
+  /*@doc Define a largura maxima do componente.*/
+  --ez-text-input__min-width: 0px;
+  /*@doc Define a largura minima do componente.*/
+  --ez-text-input__max-width: 100%;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
@@ -20,35 +24,41 @@
   --ez-text-input--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
   --ez-text-input--color: var(--title--primary, #2B3A54);
+  /*@doc Define a margem abaixo do componente.*/
+  --ez-text-input__margin-bottom: var(--space--small);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
+  --ez-text-input__input--background-color: var(--background--light, #ffffff);
   /*@doc Define o estilo da borda do input.*/
-  --ez-text-input__input--border: var(--border--medium, 2px solid);
+  --ez-text-input__input--border: var(--border--small, 1px solid);
   /*@doc Define a cor da borda do input.*/
-  --ez-text-input__input--border-color: var(--ez-text-input__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --ez-text-input__input--border-color: var(--color--strokes,#DCE0E8);
   /*@doc Define a cor da borda do input quando focado.*/
   --ez-text-input__input--focus--border-color: var(--color--primary, #008561);
+
+  /* input disabled */
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --ez-text-input__input--disabled--background-color: var(--background--medium, #F0F3F7);
   /*@doc Define a cor do texto do input.*/
-  --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
+  --ez-text-input__input--disabled--color: var(--text--primary, #626E82);
+
+  /* input error */
   /*@doc Define a cor da borda do input quando com erro.*/
-  --ez-text-input__input--error--border-color: #CC2936;
+  --ez-text-input__input--error--border-color: var(--color-alert--error-800,#BD0025);
+
+  
   /*@doc Define a cor do input quando não possuir borda*/
   --ez-text-input__input--noborder-color: white;
   /*@doc Define o padding do input*/
   --ez-text-input__input--padding: var(--space--medium, 6px);
+  /*@doc Define a cor do placeholder do input.*/
+  --ez-text-input__placeholder--color: var(--text--secondary, #a2abb9);
 
-  /* message box */
-  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --ez-text-input__message_box--font-size: var(--text--small, 12px);
-  /*@doc Define a cor da fonte da mensagem quando info.*/
-  --ez-text-input__message_box--info--color: var(--color--success, #22085d);
+
+  /* tooltip icon */
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
+  --ez-text-input__tooltip_icon--error--color: var(--color-alert--error-800,#BD0025);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
@@ -61,7 +71,20 @@
   --ez-text-input__label--padding-right: 12px;
 
   /*@doc Define a cor do ícone do slot.*/
-  --ez-text-input__input--focus--icon-color: var(--ez-text-input__input--focus--border-color);
+  --ez-text-input__input--focus--icon-color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do ícone do slot quando disabled.*/
+  --ez-text-input__input--disabled--focus--icon-color: var(--text--primary, #626E82);
+
+  /*Error icon*/
+  /*@doc Define o espaçamento lateral do icone de erro.*/
+  --ez-text-input__tooltip-icon--spacing: var(--space--large);
+  /*@doc Define a largura do icone de erro.*/
+  --ez-text-input__tooltip-icon---width: var(--space--large);
+  /*@doc Define a margem horizontal do icone de erro.*/
+  --ez-text-input__tooltip-icon---horizontal-margin: var(--space--medium, 12px);
+  /*@doc Define a margem vertical do icone de erro.*/
+  --ez-text-input__tooltip-icon---vertical-margin: 10px;
+  
 
 
   /***************
@@ -73,6 +96,8 @@
   position: relative;
   /*public*/
   width: var(--ez-text-input--width);
+  min-width: var(--ez-text-input__min-width);
+  max-width: var(--ez-text-input__max-width);
 }
 
 :host(.grid_editor){
@@ -95,12 +120,18 @@ input {
   color: var(--ez-text-input--color);
   font-weight: var(--ez-text-input--font-weight);
   padding: var(--ez-text-input__input--padding);
+  margin-bottom: var(--ez-text-input__margin-bottom);
+}
+
+input.no--margin {
+  --ez-text-input__margin-bottom: 0;
 }
 
 input:disabled {
   /*public*/
   background-color: var(--ez-text-input__input--disabled--background-color);
   color: var(--ez-text-input__input--disabled--color);
+  cursor: not-allowed;
 }
 
 input:focus {
@@ -113,14 +144,21 @@ input:focus {
 input.icon--left {
   padding-left: var(--ez-text-input__icon--width);
 }
+input.icon--left.hasError {
+  padding-right: var(--ez-text-input__icon--width);
+}
 
 input.icon--right { 
   padding-right: var(--ez-text-input__icon--width);
 }
+input.icon--right.hasError {
+  padding-right: calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing));
+}
 
 input.hasError {
   color: var(--ez-text-input--color);
   border-color: var(--ez-text-input__input--error--border-color);
+  padding-right: calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)));
 }
 
 input:disabled.hasError {
@@ -131,29 +169,14 @@ input.text--right {
   text-align: right;
 }
 
+input:disabled,
 input:read-only {
-  cursor: default;
-}
-
-.message-box {
-  /*private*/
-  min-height: 16px;
-  min-width: 100%;
-  margin-top: 3px;
-  line-height: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  /*public*/
-  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);
+  cursor: not-allowed;
 }
 
 .hasError {
   /*public*/
-  color: var(--ez-text-input__message_box--error--color);
+  color: var(--ez-text-input__tooltip_icon--error--color);
 }
 
 .input__label {
@@ -178,7 +201,9 @@ input:read-only {
   left: var(--ez-text-input__label--padding-left);
   padding-right: var(--ez-text-input__label--padding-right);
 }
-
+.input__label.hasError {
+  width: calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)));
+}
 .input__label--floated {
   font-family: var(--ez-text-input--font-family);
   font-size: var(--text--extra-small);
@@ -188,6 +213,7 @@ input:read-only {
 
 .input__label--disabled {
   color: var(--ez-text-input__input--disabled--color);
+  cursor: not-allowed;
 }
 
 .input__label--left {
@@ -198,17 +224,25 @@ input:read-only {
   width: calc(100% - var(--ez-text-input__icon--width));
 }
 
+.input__label--left.hasError {
+  width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));
+}
+
 .input__label--right {
   /*public*/
   right: var(--ez-text-input__icon--width);
   width: calc(100% - var(--ez-text-input__icon--width));
 }
+.input__label--right.hasError {
+  width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));
+}
 
 /* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
 .input__label--left.input__label--right {
   left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
   width: calc(100% - var(--ez-text-input__icon--width) * 2);
+
 }
 
 .input--with--label {
@@ -228,66 +262,23 @@ input:read-only {
   font-weight: bold;
 }
 
-.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::-webkit-input-placeholder,  /* Edge */
+  .input--slim:-moz-placeholder,            /* Firefox 4-18 */
+  .input--slim::-moz-placeholder,           /* Firefox 19+ */
+  .input--slim:-ms-input-placeholder,       /* IE 10-11 */
+  .input--slim::placeholder {               /* Modern browsers */
+    /*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__placeholder--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::-webkit-input-placeholder, /* WebKit browsers */
+.input--slim:disabled:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
+.input--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
+.input--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
 .input--slim:disabled::placeholder {
   /*public*/
   color: var(--ez-text-input__input--disabled--color);
@@ -298,4 +289,28 @@ input.input__slim--noborder {
   border: 0 none;
   outline: 0;
   background: var(--ez-text-input__input--noborder-color);
+}
+
+ez-icon.tooltip-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--ez-text-input__tooltip-icon---width);
+  height: 22px;
+  margin: var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);
+  top: 0;
+  right: 0;
+  z-index: var(--elevation--4);
+  border-radius: var(--ez-text-input--border-radius);
+
+  
+}
+ez-icon.tooltip-icon.rightIconSlot{
+  right: var(--ez-text-input__tooltip-icon--spacing);
+}
+
+ez-icon.tooltip-icon.hasError{
+  --ez-icon--color: var(--ez-text-input__tooltip_icon--error--color);
 }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
+import { applyEllipsisToInput } from "../../utils/ResponsiveInputUtils";
 export class EzTextInput {
   constructor() {
     this.label = undefined;
@@ -7,23 +8,27 @@ export class EzTextInput {
     this.enabled = true;
     this.errorMessage = undefined;
     this.mask = undefined;
+    this.cleanValueMask = false;
     this.canShowError = true;
     this.restrict = undefined;
     this.mode = "regular";
     this.noBorder = false;
     this.password = false;
+    this.autoFocus = false;
+    this.noMargin = false;
+    this.hasRightSlotContent = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
       this.isInvalid().then((hasError) => {
-        var _a, _b;
+        var _a;
         if (hasError) {
           this._inputElem.classList.add("hasError");
-          (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+          (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.observe(this._inputElem);
         }
         else {
           this._inputElem.classList.remove("hasError");
-          (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+          this.removeGlobalTooltip();
         }
       });
     }
@@ -121,7 +126,12 @@ export class EzTextInput {
     const value = this._inputElem.value;
     if (value && this._maskFormatter) {
       try {
-        this._inputElem.value = this._maskFormatter.format(value);
+        if (this.cleanValueMask) {
+          this.applyMask(value);
+        }
+        else {
+          this._inputElem.value = this._maskFormatter.format(value);
+        }
       }
       catch (e) {
         this.errorMessage = e.message;
@@ -139,8 +149,34 @@ export class EzTextInput {
   }
   controlChangeValue() {
     if (this._inputElem && (this.value || '') !== this._inputElem.value) {
-      this.value = this._inputElem.value;
+      if (this.cleanValueMask) {
+        this.value = this._maskFormatter.removeMask(this._inputElem.value);
+      }
+      else {
+        this.value = this._inputElem.value;
+      }
+    }
+  }
+  applyMask(value) {
+    if (!value || value === "")
+      return value;
+    if (this._maskFormatter) {
+      try {
+        const formattedValue = this._maskFormatter.applyMask(this._maskFormatter.removeMask(value));
+        if (this._inputElem) {
+          this._inputElem.value = formattedValue;
+          return this._inputElem.value;
+        }
+        else {
+          this.value = formattedValue;
+          return this.value;
+        }
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
     }
+    return value;
   }
   handleChange() {
     if (!this._inputElem) {
@@ -156,8 +192,10 @@ export class EzTextInput {
     this.controlChangeValue();
   }
   handleSlotChange(ev) {
+    var _a;
     const slot = ev.target;
     const content = slot.assignedElements()[0];
+    this.hasRightSlotContent = false;
     if (content) {
       content.style.position = "absolute";
       content.style.display = "flex";
@@ -183,6 +221,10 @@ export class EzTextInput {
         if (this._labelElem) {
           this._labelElem.classList.add("input__label--right");
         }
+        if (this._tooltipIconElem) {
+          this._tooltipIconElem.classList.add("rightIconSlot");
+        }
+        this.hasRightSlotContent = ((_a = content.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
       }
       slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
@@ -194,21 +236,50 @@ export class EzTextInput {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
+  renderGlobalTooltip() {
+    const tooltip = document.createElement('ez-tooltip');
+    tooltip.errorMessage = this.errorMessage;
+    tooltip.anchoringElement = this._tooltipIconElem;
+    document.body.appendChild(tooltip);
+    this._tooltipElem = tooltip;
+  }
+  removeGlobalTooltip() {
+    var _a;
+    if (!this._tooltipElem)
+      return;
+    this._tooltipElem.remove();
+    this._tooltipElem = undefined;
+    (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._inputElem);
+  }
+  createTooltipPositioningObserver() {
+    const observer = new ResizeObserver(() => {
+      if (!this._tooltipElem)
+        return;
+      if (!this._tooltipIconElem)
+        return;
+      clearTimeout(this._observerDebounceTimeout);
+      this._observerDebounceTimeout = setTimeout(async () => {
+        if (this._tooltipElem) {
+          await this._tooltipElem.positionTooltip();
+        }
+      }, 200);
+    });
+    this._tooltipPositioningObserver = observer;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidLoad() {
-    this.observeErrorMessage();
-    this.observeMask();
-    this.adjustFloatingLabel();
-    this.adjustBorderInput();
-  }
   componentWillLoad() {
     this.observeMask();
     if (this.value) {
       if (this._maskFormatter) {
         try {
-          this.value = this._maskFormatter.format(this.value);
+          if (this.cleanValueMask) {
+            this.applyMask(this.value);
+          }
+          else {
+            this.value = this._maskFormatter.format(this.value);
+          }
         }
         catch (e) {
           this.errorMessage = e.message;
@@ -220,12 +291,52 @@ export class EzTextInput {
       }
     }
   }
+  componentDidLoad() {
+    var _a, _b;
+    this.observeErrorMessage();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+    (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
+      var _a;
+      this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
+    });
+    this.createTooltipPositioningObserver();
+    if (this._inputElem) {
+      (_b = this._tooltipPositioningObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElem);
+      applyEllipsisToInput(this._inputElem);
+    }
+  }
+  componentDidRender() {
+    if (this._tooltipIconElem && !this._tooltipElem) {
+      this.renderGlobalTooltip();
+    }
+  }
+  componentDidUpdate() {
+    if (this._tooltipIconElem && this._tooltipElem) {
+      this._tooltipElem.positionTooltip();
+    }
+  }
+  disconnectedCallback() {
+    if (this._tooltipPositioningObserver) {
+      this._tooltipPositioningObserver.disconnect();
+    }
+    if (this._observerDebounceTimeout) {
+      clearTimeout(this._observerDebounceTimeout);
+    }
+    this.removeGlobalTooltip();
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : 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", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "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, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
+      h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""} ${this.noMargin ? "no--margin" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -327,6 +438,24 @@ export class EzTextInput {
         "attribute": "mask",
         "reflect": false
       },
+      "cleanValueMask": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Para remover a m\u00E1scara quando fizer um apply no formul\u00E1rio."
+        },
+        "attribute": "clean-value-mask",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "canShowError": {
         "type": "boolean",
         "mutable": false,
@@ -415,9 +544,50 @@ export class EzTextInput {
         "attribute": "password",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o campo n\u00E3o ter\u00E1 espa\u00E7amento externo."
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get states() {
+    return {
+      "hasRightSlotContent": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",

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

@@ -10,6 +10,8 @@ export class EzTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
+    this.noMargin = false;
   }
   observeErrorMessage() {
     var _a;
@@ -130,6 +132,11 @@ export class EzTimeInput {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -142,7 +149,7 @@ export class EzTimeInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, noMargin: this.noMargin }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -281,6 +288,42 @@ export class EzTimeInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o campo n\u00E3o ter\u00E1 espa\u00E7amento."
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }