@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-76362.0 → 0.0.0-bugfix-dev-KB-75609.1

package/dist/collection/components/ez-popup/ez-popup.css

@@ -9,10 +9,6 @@
   --ez-popup__container--color: var(--title--primary, #2b3a54);
   /*@doc Define o espaçamento do container do popup.*/
   --ez-popup__container--padding: var(--space--large, 24px);
-  /*@doc Define a largura do container do popup.*/
-  --ez-popup__container--width: 100%;
-  /*@doc Define a altura do container do popup.*/
-  --ez-popup__container--height: 100%;
 
   /* Popup Header */
   /*@doc Define o espaçamento inferior do cabeçalho do popup.*/
@@ -60,9 +56,9 @@
 }
 
 .popup__container {
-  width: var(--ez-popup__container--width);
+  width: 100%;
   max-height: 90%;
-  height: var(--ez-popup__container--height);
+  height: 100%;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;

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

@@ -62,14 +62,7 @@ export class EzPopup {
     });
   }
   getGridSize() {
-    if (!this.size) {
-      return this._sizeClasses["medium"];
-    }
-    if (!this._sizeClasses[this.size]) {
-      this._element.style.setProperty("--ez-popup__container--width", this.size);
-      return "";
-    }
-    return this._sizeClasses[this.size];
+    return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
   handlePopupHeight() {
     return this.heightMode === 'auto' ? 'popup__container--auto' : '';
@@ -103,8 +96,8 @@ export class EzPopup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | string",
-          "resolved": "string",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {}
         },
         "required": false,

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

@@ -85,7 +85,7 @@
   --ez-search__scrollbar--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a largura da barra de rolagem do componente.*/
   --ez-search__scrollbar--width: var(--space--medium, 12px);
-  
+
   /***************
      host style  
   ***************/

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

@@ -39,6 +39,7 @@ export class EzSearch {
     this.suppressSearch = false;
     this.ensureClearButtonVisible = false;
     this.suppressPreLoad = false;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a;
@@ -97,9 +98,9 @@ export class EzSearch {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
+  async setFocus(options) {
     if (this._textInput) {
-      this._textInput.setFocus();
+      this._textInput.setFocus(options);
     }
   }
   /**
@@ -372,15 +373,16 @@ export class EzSearch {
   replaceHighlight(value) {
     const startHighlight = new RegExp(this._startHighlightTag, 'g');
     const endHighlight = new RegExp(this._endHighlightTag, 'g');
-    return (value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
+    return String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
   }
-  selectOption(newOption) {
+  selectOption(newOption, focusOnInput = true) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
     const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
-    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) === null || _b === void 0 ? void 0 : _b.toString()))
-      || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
-      const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
+    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) === null || _b === void 0 ? void 0 : _b.toString()))
+      || (currentValue == undefined && newOptionsFormatted != undefined && "value" in newOptionsFormatted)) {
+      const adjustedOpt = !(newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) ? undefined : newOptionsFormatted;
       this.value = adjustedOpt;
       this._currentValue = adjustedOpt;
     }
@@ -390,6 +392,11 @@ export class EzSearch {
     }
     this._visibleOptions = [];
     this.clearSource();
+    if (focusOnInput) {
+      setTimeout(() => {
+        this.setFocus();
+      }, 0);
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -426,7 +433,7 @@ export class EzSearch {
     this.value = null;
     this._currentValue = null;
   }
-  controlListWithOnlyOne() {
+  controlListWithOnlyOne(focusOnInput = true) {
     var _a, _b;
     const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
     if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
@@ -437,7 +444,7 @@ export class EzSearch {
         value: (_b = source[0].value) === null || _b === void 0 ? void 0 : _b.replace(startHighlight, '').replace(endHighlight, ''),
         label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
       };
-      this.selectOption(option);
+      this.selectOption(option, focusOnInput);
     }
   }
   controlEmptySearch() {
@@ -563,6 +570,11 @@ export class EzSearch {
         }
       });
     });
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   //---------------------------------------------
   // Event handlers
@@ -632,12 +644,16 @@ export class EzSearch {
     }
     switch (event.key) {
       case "ArrowDown":
-        this.nextOption();
         event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.nextOption();
         break;
       case "ArrowUp":
-        this.previousOption();
         event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.previousOption();
         break;
       case "Enter":
         this.handleEventPropagation(event);
@@ -648,7 +664,7 @@ export class EzSearch {
         break;
       case "Tab":
         this._tabPressed = true;
-        this.controlListWithOnlyOne();
+        this.controlListWithOnlyOne(false);
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -1055,6 +1071,24 @@ export class EzSearch {
         "attribute": "suppress-pre-load",
         "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 de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -1110,11 +1144,18 @@ export class EzSearch {
       },
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

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

@@ -51,6 +51,20 @@
   /*@doc Define o espaçamento direito do label.*/
   --text-area__label--padding-right: 12px;
 
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --text-area__scrollbar--width: var(--space--medium, 12px);
+
   /***************
   host style  
   ***************/
@@ -77,6 +91,9 @@ textarea {
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);
   margin-top: calc(var(--space--medium, 12px) + 4px);
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
 }
 
 textarea:focus {
@@ -92,6 +109,38 @@ textarea:disabled {
   cursor: not-allowed;
 }
 
+textarea::-webkit-scrollbar {
+  background-color: var(--text-area__scrollbar--color-background);
+
+  width: var(--text-area__scrollbar--width);
+  max-width: var(--text-area__scrollbar--width);
+  min-width: var(--text-area__scrollbar--width);
+}
+
+textarea::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-default);
+  border-radius: var(--text-area__scrollbar--border-radius);
+}
+
+textarea::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-background);
+  border-radius: var(--text-area__scrollbar--border-radius);
+}
+
+textarea::-webkit-scrollbar-thumb:vertical:hover,
+textarea::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-hover);
+}
+
+textarea::-webkit-scrollbar-thumb:vertical:active,
+textarea::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-clicked);
+}
+
 .textarea {
   /*private*/
   width: 100%;

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

@@ -2,6 +2,8 @@ import { ElementIDUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 export class EzTextArea {
   constructor() {
+    this.LINE_HEIGHT = 24;
+    this.HEIGHT_RATIO = 1.4;
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -10,6 +12,8 @@ export class EzTextArea {
     this.canShowError = true;
     this.mode = "regular";
     this.enableResize = false;
+    this.autoRows = false;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a, _b, _c, _d;
@@ -47,8 +51,17 @@ export class EzTextArea {
   observeRows() {
     const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
     if (rows !== this.rows) {
-      this.rows = rows;
-      this._initialRows = rows;
+      this.updateRows(rows);
+    }
+  }
+  observeAutoRows() {
+    var _a, _b;
+    if (this.autoRows) {
+      (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      this.initializeResizeObserver();
+    }
+    else {
+      (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
   }
   //---------------------------------------------
@@ -117,6 +130,42 @@ export class EzTextArea {
   isFocused() {
     return this._hostElement.shadowRoot.activeElement !== null;
   }
+  updateRows(newRows) {
+    this.rows = newRows;
+    this._initialRows = newRows;
+  }
+  calculateMaxRows() {
+    const parentElement = this._hostElement.parentElement;
+    if (!parentElement) {
+      return;
+    }
+    const height = Math.max((parentElement === null || parentElement === void 0 ? void 0 : parentElement.clientHeight) || 0, this.LINE_HEIGHT);
+    if (height > 0) {
+      const maxRows = Math.floor(height / this.LINE_HEIGHT * this.HEIGHT_RATIO);
+      if (maxRows !== this.rows) {
+        this.updateRows(maxRows);
+      }
+    }
+  }
+  initializeResizeObserver() {
+    if (!this.autoRows) {
+      return;
+    }
+    const parentElement = this._hostElement.parentElement;
+    if (parentElement) {
+      try {
+        if (this._resizeObserver != undefined) {
+          this._resizeObserver.unobserve(parentElement);
+        }
+        this._resizeObserver = new ResizeObserver(this.calculateMaxRows.bind(this));
+        this._resizeObserver.observe(parentElement);
+      }
+      catch (e) {
+        console.warn(e);
+      }
+      this.calculateMaxRows();
+    }
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -139,6 +188,13 @@ export class EzTextArea {
       this._container.classList.add("textarea--focus");
     }
   }
+  connectedCallback() {
+    this.initializeResizeObserver();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -146,6 +202,11 @@ export class EzTextArea {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus();
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
@@ -311,6 +372,42 @@ export class EzTextArea {
         "attribute": "enable-resize",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "autoRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ativa a op\u00E7\u00E3o de fazer as linhas do componente serem baseados na altura m\u00E1xima."
+        },
+        "attribute": "auto-rows",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "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"
       }
     };
   }
@@ -423,6 +520,9 @@ export class EzTextArea {
       }, {
         "propName": "rows",
         "methodName": "observeRows"
+      }, {
+        "propName": "autoRows",
+        "methodName": "observeAutoRows"
       }];
   }
 }

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

@@ -6,8 +6,6 @@
   --ez-text-input--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
   --ez-text-input__icon--width: 48px;
-  --ez-text-input__icon--left--width: var(--ez-text-input__icon--width);
-  --ez-text-input__icon--right--width: var(--ez-text-input__icon--width);
   /*@doc Define a altura do componente em modo "slim".*/
   --ez-text-input--height--slim: 32px;
 
@@ -48,6 +46,9 @@
   --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.*/
@@ -104,8 +105,6 @@ input {
   color: var(--ez-text-input--color);
   font-weight: var(--ez-text-input--font-weight);
   padding: var(--ez-text-input__input--padding);
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 input:disabled {
@@ -123,11 +122,11 @@ input:focus {
 }
 
 input.icon--left {
-  padding-left: var(--ez-text-input__icon--left--width);
+  padding-left: var(--ez-text-input__icon--width);
 }
 
 input.icon--right { 
-  padding-right: var(--ez-text-input__icon--right--width);
+  padding-right: var(--ez-text-input__icon--width);
 }
 
 input.hasError {
@@ -204,23 +203,25 @@ input:read-only {
   cursor: not-allowed;
 }
 
-.input__label--left.input__label--right {
-  left: calc(var(--ez-text-input__icon--left--width) + 2px);
-  /*borda*/
-  width: calc(100% - (var(--ez-text-input__icon--right--width) + var(--ez-text-input__icon--left--width)));
-}
 .input__label--left {
   /*public*/
   text-align: left;
-  left: calc(var(--ez-text-input__icon--left--width) + 2px);
+  left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--ez-text-input__icon--left--width));
+  width: calc(100% - var(--ez-text-input__icon--width));
 }
 
 .input__label--right {
   /*public*/
-  right: var(--ez-text-input__icon--right--width);
-  width: calc(100% - var(--ez-text-input__icon--right--width));
+  right: var(--ez-text-input__icon--width);
+  width: calc(100% - var(--ez-text-input__icon--width));
+}
+
+/* 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 {
@@ -240,45 +241,18 @@ 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 */
 .input--slim:disabled:-moz-placeholder, /* Mozilla Firefox 4 to 18 */

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

@@ -12,6 +12,7 @@ export class EzTextInput {
     this.mode = "regular";
     this.noBorder = false;
     this.password = false;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
@@ -165,9 +166,9 @@ export class EzTextInput {
       content.style.justifyContent = "center";
       content.style.overflow = "hidden";
       content.style.top = "0px";
+      content.style.width = "var(--ez-text-input__icon--width)";
       content.style.height = this.mode != "slim" ? "var(--ez-text-input--height)" : "var(--ez-text-input--height--slim)";
       if (slot.name == "leftIcon") {
-        content.style.width = "var(--ez-text-input__icon--left--width)";
         content.style.left = "0px";
         content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
         this._inputElem.classList.add("icon--left");
@@ -177,7 +178,6 @@ export class EzTextInput {
         this._contentLeftSlot = content;
       }
       else if (slot.name == "rightIcon") {
-        content.style.width = "var(--ez-text-input__icon--right--width)";
         content.style.right = "0px";
         content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
         this._inputElem.classList.add("icon--right");
@@ -203,6 +203,11 @@ export class EzTextInput {
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
     this._inputElem.addEventListener('focus', () => {
       this._inputElem.setSelectionRange(0, this._inputElem.value.length);
     });
@@ -419,6 +424,24 @@ 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"
       }
     };
   }

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

@@ -10,6 +10,7 @@ export class EzTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a;
@@ -130,6 +131,11 @@ export class EzTimeInput {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -281,6 +287,24 @@ 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"
       }
     };
   }