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

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);
     }
   }
   /**
@@ -374,13 +375,14 @@ export class EzSearch {
     const endHighlight = new RegExp(this._endHighlightTag, 'g');
     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.js

@@ -13,6 +13,7 @@ export class EzTextArea {
     this.mode = "regular";
     this.enableResize = false;
     this.autoRows = false;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a, _b, _c, _d;
@@ -201,6 +202,11 @@ export class EzTextArea {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus();
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
@@ -384,6 +390,24 @@ export class EzTextArea {
         "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"
       }
     };
   }

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

@@ -46,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.*/
@@ -238,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:-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::-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::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) {
@@ -202,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);
     });
@@ -418,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"
       }
     };
   }

package/dist/collection/utils/FocusResolver.js

@@ -0,0 +1,31 @@
+export default class FocusResolver {
+  static resolveFocus(element, selectText = true) {
+    var _a;
+    if (!element)
+      return;
+    (_a = element.focus) === null || _a === void 0 ? void 0 : _a.call(element);
+    if (element.setFocus) {
+      element.setFocus({ selectText });
+      return;
+    }
+    this.resolveFocusOnChild(element, selectText);
+  }
+  static resolveFocusOnChild(element, selectText = true) {
+    var _a, _b;
+    if (this.isGridCell(element) && element.firstElementChild) {
+      this.resolveFocusOnChild(element.firstElementChild);
+      return;
+    }
+    if (!element || !element.classList.contains('hydrated'))
+      return;
+    const firstChild = element.firstElementChild;
+    if (!(firstChild === null || firstChild === void 0 ? void 0 : firstChild.focus) && !(firstChild === null || firstChild === void 0 ? void 0 : firstChild.setFocus))
+      return;
+    (_a = firstChild === null || firstChild === void 0 ? void 0 : firstChild.focus) === null || _a === void 0 ? void 0 : _a.call(firstChild);
+    (_b = firstChild === null || firstChild === void 0 ? void 0 : firstChild.setFocus) === null || _b === void 0 ? void 0 : _b.call(firstChild, { selectText });
+  }
+  static isGridCell(element) {
+    var _a;
+    return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute) === null || _a === void 0 ? void 0 : _a.call(element, "role")) === 'gridcell';
+  }
+}

package/dist/collection/utils/form/DataBinder.js

@@ -22,6 +22,7 @@ export default class DataBinder {
           (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
             this.updateValue(field.fieldName, field.field);
           });
+          this.clearFieldError(Object.keys(action.payload)[0]);
           break;
         case Action.FIELD_INVALIDATED:
           (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
@@ -67,11 +68,14 @@ export default class DataBinder {
     });
     this._formMetadata = formMetadata;
     this._recordValidatorProcessor = new RecordValidationProcessor(this._dataUnit, {
-      getRequiredFields: () => this._formMetadata.getRequiredFields(),
+      getRequiredFields: () => this.getFormRequiredFields(),
       markAsInvalid: field => this.markInvalid(field),
       getMessageForField: field => this.getErrorMessage(field),
     }, recordsValidator);
   }
+  getFormRequiredFields() {
+    return this._formMetadata.getRequiredFields();
+  }
   disconnectDataUnit() {
     const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
     const dataBinders = dataBindersByDataUnit.get(this._dataUnit.dataUnitId);
@@ -111,6 +115,14 @@ export default class DataBinder {
       fieldElement["errorMessage"] = "";
     });
   }
+  clearFieldError(fieldName) {
+    var _a;
+    const field = (_a = this._fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.field;
+    if (field["errorMessage"]) {
+      field["errorMessage"] = "";
+      this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
+    }
+  }
   updateValue(fieldName, field) {
     const bind = this._fields.get(fieldName);
     try {
@@ -131,8 +143,7 @@ export default class DataBinder {
   }
   static async validateByDataunit(dataUnit) {
     try {
-      const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
-      const dataBinders = dataBindersByDataUnit.get(dataUnit.dataUnitId) || [];
+      const dataBinders = this.getDataBindersByDataUnit(dataUnit);
       await Promise.all(dataBinders.map((dataBinder) => dataBinder.validate()));
       return true;
     }
@@ -140,6 +151,10 @@ export default class DataBinder {
       return false;
     }
   }
+  static getDataBindersByDataUnit(dataUnit) {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
+    return dataBindersByDataUnit.get(dataUnit.dataUnitId) || [];
+  }
   updateErrorMessage(fieldName, field, message) {
     if (message == undefined) {
       message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);